브라우저에서 Web 페이지를 동적으로 이동하기 쉬운 프로그램에서 JavaScript이며, 구조와 작동 추천 학습 사이트 등 앞으로 프로그래밍을 배우는 사람도 이해할 수 있도록 정중하게 설명하고 있습니다.
javascript
JavaScript 란?
javascript 구조
처음으로
가장 가까운 것은 Web 사이트를 표시하는 브라우 저상에서 움직이는 프로그램 (클라이언트 사이드 스크립트)입니다. Javascript가 없어도 Web 사이트는 볼 수 있지만, 문장이나 사진을 그대로 읽는 것만으로 다양한 조작을 할 수 없습니다. 이것이라면 매우 불편하네요.
그래서 프로그래밍 언어의 하나 인 JavaScript를 사용하여 브라우저에서 이미지를 확대해보기 쉽게 하거나 입력 양식을 설치하여 메시지를 보낼 수 있습니다.
경위
JavaScript가 태어난 것은 의외로 이전함으로써 인터넷이 보급되기 시작한 1990 년대 초입니다. 처음에는 Netscape Navigator는 브라우저 전용으로 개발된 명칭은 LiveScript이었습니다. 그 기업과의 제휴가 지금의 이름으로 바뀌었습니다.
다만 이때, 파트너 기업이 개발 한 평판이었다 프로그래밍 언어가 "Java"로, 이 인기에 따라 또는 LiveScript에서 JavaScript로 변경되었습니다. 둘의 차이는, 아래에서 정리합니다.
프로그래밍 언어의 특징
브라우저에서 페이지를 표시 할 때 JavaScript를 사용하면 다음과 같은 특징이 있습니다.
JavaScript를 사용하는 경우 JavaScript를 사용하지 않는 경우
(예) 글 · 사진보기 다른 변경하거나 확대 및 이동하거나 수 HTML 파일에서 지정한 대로 표시된다
(예) 양식에 문자 입력 전송 가능
(전송 자체는 다른 프로그램이 담당) 불가
주요 작동 위치 이용자의 PC 나 스마트 폰의 브라우저 -
편리함 압도적으로 편리 불편
복잡성 (학습 난이도) 복잡한 (언어의 이해가 필요) -
브라우저에서 JavaScript를 ON과 OFF를 전환 할 수 있습니까?
수 있습니다. 비록 혜택이 크다 JavaScript에도동작을 멈추고 싶은 경우에는 OFF로 할 수 있습니다. 완전한 해결책이 되지 않지만, 주된 이유는 다음과 같습니다.
보안 (인터넷 측에서 JavaScript로 공격을 방지)
자신의 액세스 정보를 무효화 할 수 있다 (JavaScript로 만들어진 액세스 해석 프로그램을 움직이지 못하게 하는)
광고 숨기기 (JavaScript로 만든 여분의 광고를 숨길 수)
이 설정 변경에 의해 원래 장점이었다 내용도 무효화 해 버립니다. 따라서OFF로 전환에는 주의가 필요합니다. 브라우저의 기본 설정은 일반적으로 JavaScript가 ON 상태에 대한 특별한 이유가 없다면 평소 그대로 좋다고 생각합니다.
JavaScript 관련 용어
JavaScript를 응용 한 프로그램 정리 (라이브러리) 등이 준비되어 있습니다. Web 사이트 제작자가 더 효율적인 작업을 하기 위해 많이 갖추어져 있습니다. 일례를 소개합시다.
이름 읽기 요약
Ajax 에이 잭스 · JavaScript 라이브러리
· JavaScript 통신 기능을 사용하여 XML 형식의 데이터를 송수신하는
용도 예는 Google Maps 등
jQuery 제이 쿼리 · JavaScript 라이브러리
· JavaScript로 된 브라우저 확장 기능으로 손쉽게 도입 할 수 있어 인기
· 용도 예는 메뉴 이미지보기. 검색 등
JSON 제이슨 데이터를 텍스트로 표현하기 위해 작성 방법
DOM 돔 HTML 파일 등을 방문하여 작업하는 방법
JavaScript와 Java의 차이
아까 소개 한 Java 관련하여 JavaScript의 차이점을 정리했습니다. Java는 일반적인 용어가 포함되어 있기 때문에, 비슷한 프로그래밍 언어 싶을지도 모릅니다. 그런데 실제로는 전혀 별개입니다.
JavaScript Java
공개 된 세월 1995 년 12 월 (당시의 명칭은 "LiveScript") 1995 년 5 월
개발 회사 Netscape Communications 사의 Sun Microsystems 사
실행 파일 소스 코드 Java 컴파일러가 출력 한 Java 바이트 코드
변수의 처리 동적 정적
개발의 목적 Web 사이트의 페이지 제작을 더 쉽고 빨리 어떤 하드웨어에서도 작동
이용 분야 Web 사이트의 페이지 제작
(Web 브라우 저상에서 움직이는 시스템이나 서비스 등) 다양한 대형 시스템
(업무 시스템, SNS 등의 Web 관련 서비스, Android 스마트 폰 어플 등)
JavaScript로 할 수 있으며, 자주 사용하는 장면
그러면 JavaScript는 어디에 사용되는 것일까 요. 구체적으로는 브라우저에서 무엇을 할 수 있을까요? 사용 장면을 알게 되면 다양한 장면에서 신세를 지고 있는 것에 놀랄 것입니다. 우선 기본적인 작성법에 대해 설명합니다.
0) JavaScript의 기본적인 작성
HTML 파일에 쓸 경우 다음의 소스 코드의 적자 부분(<script>에서 </ script>까지)에서 JavaScript입니다.목적에 따라 여러 가지 규칙이 있습니다. 여기 document.write ( "Hello world!");의 예에서 쓰는 브라우저에 "Hello world!"로 표시하는 지시 되어 있습니다.
[소스 코드]
<! DOCTYPE html>
<html>
<body>
<script>
document.write ( "Hello world!");
</ script>
</ body>
</ html>
javascript01
이 기본 규칙을 조합하거나 조건에 의한 동작을 지정된 JavaScript가 많이 움직이고 있습니다. 다음 사례를 소개합니다.
1) 마우스의 움직임에 따른 메뉴의 가시성
페이지를 열 때 표시되지 않는 메뉴 페이지를 읽어가는 동안 표시하려면이 JavaScript를 사용합니다. 반대의 패턴도 있군요. 아래 그림의 예에서는 빨간색 부분 메뉴의 표시를 제어합니다.
javascript02
소스를 보면 HTML에서 아래 부분이 해당합니다.
javascript03
또한 JavaScript는 다음과 같이 구성되어 있습니다. 마우스 조작으로 화면을 스크롤하여 일정한 위치에 오면 표시하는 내용입니다. 또한 조건에 따라 동작을 나눕니다.
javascript04
2) 이미지 확대 (팝업) 표시
Web 사이트의 이용자에 게재하고있는 사진을 확대하여 세부 사항을 잘 확인해달라고 경우 jQuery (제이 쿼리)라는JavaScript 라이브러리를 사용하면 효과적입니다. 확대 사진에 대한 링크를 쉽게 설정할 수 있습니다. 유명한 것 중 하나가 " Lightbox "가 있습니다.
보통 JavaScript 라이브러리에 필요한 파일 세트가 설정되어 있습니다. 다음은 다운로드하여 필요한 파일을 서버에 FTP로 업로드하면됩니다. 구체적으로는 설치하고자 하는 HTML 파일의 하단 (</ body> 태그 바로)에 다음을 쓰고 지정합니다.
[소스 코드]
<script src = "path / to / lightbox.js"> </ script>
JavaScript에 대한 자세한 내용을 몰라도 설치 방법을 알면 JavaScript로 만든 프로그램을 사용할 수있는 예입니다.
3) Google지도
페이지에 Google지도를 통합 공개하는 경우에도 JavaScript를 사용할 수 있습니다."Google Maps JavaScript API"를 이용하여 더 많은 기능지도를 볼 수 있습니다. 이용에는 전용 절차가 필요합니다. 그리고 다음 HTML 파일 등을 씁니다.
[소스 코드]
<script src = "// maps.googleapis.com/maps/api/js?key={API 키} & callback = initMap"
(주)위의 "API 키 '는 절차에 따라 사용할 수 있습니다. 자세한 내용은 공식 사이트에서 확인하시기 바랍니다.
4) 이미지 슬라이더
톱 페이지에 배치하는 메인 이미지를 차례로 전환 제한된 화면 공간에서 매력있는 많은 정보를 전달하는 방법입니다. 이쪽도 jQuery (제이 쿼리)라는JavaScript 라이브러리에서 제공하고 있습니다. 예를 들어 " slick "는 다음과 같이 HTML 파일 등을 작성하고 전용 프로그램을 호출합니다.
[소스 코드]
<script type = "text / javascript"src = "// code.jquery.com/jquery-1.11.0.min.js"> </ script>
<script type = "text / javascript"src = "// code .jquery.com / jquery-migrate-1.2.1.min.js "> </ script>
<script type ="text / javascript "src ="slick / slick.min.js "> </ script>
5) 양식의 필수 항목이 입력되었는지 확인
문의 양식에서 전송시 누락을 방지하기 위해 보내기 전에 JavaScript를 체크하고 있습니다. 만약 누출이 있는 경우에는 아래와 같은 메시지가 나오고, 다시 입력해야 합니다.
javascript05
6) Google의 액세스 분석 서비스의 이용
공개하고있는 Web 사이트에 당신이 어떤 페이지에 액세스가 있었는지 등의 액세스 정보를 알고 싶은 경우 Google의 관련 서비스를 이용하면 분석할 수 있습니다. 예를 들어 다음을 HTML 파일 등을 포함하여 Google에서 제공하는 Google 태그 관리자 등의 관리 도구를 사용할 수 있습니다.
javascript06
공개 중의 Web 사이트의 개량이 같은 접근 분석은 빠뜨릴 수 없습니다. 이러한 분석은 복잡하고 알기 어렵 기 때문에 도구를 사용하면 효율적으로 할 수 있지요.
JavaScript를 배우려면?
javascript 학습 방법
어떤 프로그래밍 언어의 습득에 시간이 걸리지 만,실천하면서 이해하는 것이 지름길이라고 생각합니다. 이 장에서는 필자 추천 학습 사이트 또는 책을 들고 보았습니다.
'IT 지킴이' 카테고리의 다른 글
| Unix 및 Linux의 차이를 3분안에 사람에게 설명 한다면 (0) | 2021.07.24 |
|---|---|
| 파일 전송 "FTP"이란? 통신 방식과 단점 (0) | 2021.07.23 |
| Opera 브라우저 : Linux 용 고속으로 간단하고 가벼운 Web 브라우저 (0) | 2021.06.08 |
| Skype (스카이프)이란? (0) | 2021.06.08 |
| 온라인 커뮤니케이션 "Webex" (0) | 2021.06.08 |
댓글