Visual Studio Code, Notepad++ 등의 문서 편집기를 준비하고 예제들을 테스트 한다.
첫 번째 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Hello, World</title>
</head>
<body>
<pre>
<script type="text/javascript">
<!--
//document.writeln은 지정된 문자열을 표시하기 위한 함수이다.
document.writeln('Hello, World!');
//-->
</script>
<noscript>Javascript를 사용할 수 없음.</noscript>
</pre>
</body>
</html>
|
cs |
|
type="text/javascript" |
스크립트 종류를 표시. 거의 대부분의 브라우저에서 javascript를 사용하므로 필수는 아님. |
|
<!-- ... //--> |
주석(자바스크립트를 지원하지 않는 브라우저에서 스크립트 코드의 노출을 방지. 현재는 거의 대부분의 브라우저에서 자바스크립트를 지원하므로 필수는 아님. |
외부 js파일 불러오기
- 레이아웃과 스크립트를 분할하여 코드를 다른 페이지에서 재사용 가능
- HTML구조를 파악하기 용이
helloEx.js 파일 생성
|
1
2
3
|
//document.writeln은 지정된 문자열을 표시하기 위한 함수이다.
document.writeln('Hello, World!');
|
cs |
위에 파일을 포함할 helloEx.html파일 작성
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Hello, World</title>
</head>
<body>
<pre>
<script type="text/javascript" src="helloEx.js"></script>
<noscript>Javascript를 사용할 수 없음.</noscript>
</pre>
</body>
</html>
|
cs |
외부 파일을 연결하는 경우 주의
• src속성을 지정한 <script>태그 내에 코드 작성 불가(코드가 무시됨)
• 외부파일을 포함하는 선언과 코드를 작성하는 부분을 분리해야 함.
<script>태그를 기술하는 부분은 세 곳
• <body> 태그 아래(아무 곳이나)
• </body>태그 바로 위(로딩에 시간이 걸리는 스크립트를 위치 시킴)
• </head>태그 아래(함수를 호출하기 위한 <script>태그보다 함수 정의를 위한 <script>태그를 먼저 기술)
html의 앵커(Anchor)태그 내에 스크립트 코드 작성 가능(의사 프로토콜이라고 함)
예제 protocol.html
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>protocol</title>
</head>
<body>
<a href="javascript:window.alert('Hello, World!');">
다이얼로그 상자 표시</a>
</body>
</html>
|
cs |
실행 후 앵커를 클릭하면 자바스크립트의 alert창이 출력됨.
이외에 DOM에 대해 이벤트 핸들러로 스크립트를 삽입하는 방법도 있다.
<noscript>태그는 만약 브라우저가 javascript를 지원하지 않는 경우 보여질 내용을 정의하는 부분
테스트 - 크롬에서 자바스크립트 허용 해제방법
[설정] - [고급] - [콘텐츠 설정] - [자바스크립트] 허용/차단
설정 후 첫 번째 예제 파일을 실행하면 스크립트가 실행되지 않는 결과를 볼 수 있다.(확인 후 원래대로 설정하자)
자바스크립트의 문장 규칙
새미콜론(;)을 기준으로 한 줄 씩이 자바스크립트 문장이다.
자바스크립트에서 문장 중간에 공백, 개행, 탭 사용 가능(무시됨)
대소문자 구분함
자바스크립트 주석
|
한줄 |
여러 줄 |
|
// |
/* ~ */ |
'교육자료 > Javascript' 카테고리의 다른 글
| 06. 자바스크립트 내장객체 (0) | 2019.05.09 |
|---|---|
| 05. 자바스크립트 예외처리 (0) | 2019.05.09 |
| 04. 자바스크립트 제어문 (0) | 2019.05.09 |
| 03. 자바스크립트 연산자 (0) | 2019.05.09 |
| 02. 자바스크립트 변수 (0) | 2019.05.09 |