728x90
728x170
* JavaScript
- JavaScript란. HTML파일에 심어 넣을 수 있는 스크립트 언어를 말함.
- 웹 사이트와 통신을 하지 않아도 사용자 조작 등으로 글자색이나 배경색을 변경하거나 웹 페이지를 전환할 수 있음. (색 변경, 일정 시간 후에 페이지를 전환, 메시지 상자를 표시, 드롭다운 메뉴를 만듦 등)
- Java와 JavaScript는 문법만 비슷할 뿐, 별개의 언어임에 주의!
[스크립트 언어]
- JavaScript 코드(스크립트)가 들어간 HTML 파일을 웹 브라우저에서 읽어 들이면 JavaScript가 해석되어 그대로 실행됨.
- 모든 스크립트가 항상 화면에 실행 결과가 표시되는 것은 아님.
* JavaScript의 예
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <title>JavaScript 예제</title> </head> <body> <script type="text/javascript"> function sum(a, b) { var c = a + b; // 합을 구한다. return c; /* 값을 반환한다 */ } document.write ( sum(4,6) ); </script> </body> </html> | cs |
- function으로 시작하는 부분을 '함수(메서드)'라고 함.
- 함수는 처리를 모아 놓은 것으로, { } 안이 그 내용임.
- 여기서 sum은 함수의 이름이 됨.
- 함수 안의 처리는 다른 장소에서 호출될 때까지 실행되지 않음.
- document.write()는 HTML에 값을 출력하는 기능을 가진 함수.
- var로 선언한 값을 넣기 위한 상자를 '변수'라고 함.
- 함수는 직접 준비하거나 document.write()처럼 처음부터 마련된 것을 이용할 수 있음.
* JavaScript를 작성하는 장소
- JavaScript를 작성하는 방법에는 크게 아래와 같은 종류가 있음.
1) body 요소 안에 직접 작성하는 방법
- HTML 파일의 body 요소 안에 script 요소를 직접 작성함.
1 2 3 4 5 6 | <body> <script type="text/javascrpit"> document.write("<p>JavaScript로 작성했습니다.</p>"); </script> </body> </html> | cs |
- 문자열을 나타낼 때는 " " (겹따옴표)로 둘러쌈.
2) header 요소 안에 작성하여 호출하는 방법
- HTML 파일의 헤더 부분에 함수로 작성하고, <body> 요소 안에서 스크립트를 호출함.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <head> <script type="text/javascript"> function byJS() { document.write("<p>JavaScrpit로 작성했습니다.</p>"); } </script> <title>유미나의 홈페이지</title> </head> <body> <script type="text/javascript"> byKS(); // 호출 </script> </body> </html> | cs |
- body 요소 안이 깔끔해짐.
3) 외부 파일로부터 JavaScript를 읽어 들이는 방법
- JavaScript의 내용을 확장자가 .js인 파일에 저장하고, script 요소의 src 속성으로 참조하여 읽어 들임.
- js 파일도 HTML파일과 마찬가지로 메모장 같은 텍스트 에디터로 작성함.
1 2 3 4 5 6 7 8 9 10 11 | <head> <script type="text/javascript" src="mylib.js"> </script> <title>유미나의 홈페이지</title> </head> <body> <script type="text/javascript"> byJS() </script> </body> </html> | cs |
4) 이벤트에 대한 응답으로 호출하는 방법
- 페이지 읽기나 버튼 클릭과 같은 이벤트에 응답하여 스크립트를 실행함.
1 2 3 4 5 | ... <body> <button onclick="alert('클릭했습니다') ">여기를 클릭</button> </body> </html> | cs |
- alert() 메서드 : 메시지 대화상자를 표시함.
- " "안에서 문자열을 나타낼 때는 ' '(홑따옴표)로 묶음.
- 아래와 같이 쓰면 하이퍼링크를 클릭했을 때 메시지 대화상자가 열림.
<a href="javascript:alert('클릭했습니다.') ">여기를 클릭</a> |
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
728x90
그리드형(광고전용)
'Programming > JavaScript' 카테고리의 다른 글
| 브라우저 객체 모델(BOM) (0) | 2017.05.20 |
|---|---|
| 객체 / 내장객체 (0) | 2017.05.20 |
| 자바스크립트 기초 문법 (0) | 2017.05.20 |
| 쿠키(Cookie) (0) | 2017.05.18 |
| JavaScript의 메서드 (0) | 2017.05.18 |
| JavaScript 이벤트 (0) | 2017.05.18 |
| 요소의 참조 (0) | 2017.05.17 |
| DOM이란? (0) | 2017.05.17 |
