JavaScript란?

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>
Colored by Color Scripter
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>
Colored by Color Scripter
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>
Colored by Color Scripter
cs

4) 이벤트에 대한 응답으로 호출하는 방법

- 페이지 읽기나 버튼 클릭과 같은 이벤트에 응답하여 스크립트를 실행함.

1
2
3
4
5
...
<body>
<button onclick="alert('클릭했습니다') ">여기를 클릭</button>
</body>
</html>
Colored by Color Scripter
cs
- onclick은 '버튼을 눌렀다'라는 뜻을 가진 이벤트.
- 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