반응형
<최종 화면> - document.write(), 세미콜론이 없어도 사용 가능, 외부 스크립트 적용 알아보기
자바 스크립트를 사용하기 위해서는 html문서는 반드시 필요하다.
우선 가장 기초인 Hello world를 출력해보자.
자바스크립트도 줄바꿈은 자동으로 되지 않는다.
자바스크립트문 안에 HTML 언어를 사용 가능하다. HTML에서 <br>태그는 줄바꿈을 해주는 태그이다.
비슷하게 자바스크립트 문법에서 HTML 문법을 사용 가능하다.
자바스크립트와 자바는 관계가 없는 언어이지만, 참조 변수를 출력하면 비슷하게 toString으로 자동 출력이된다.
반복문도 사용 가능하다.
실행 순서는 크게 보면 HTML문서 안에 있으므로, head 영역을 실행하고 body영역을 실행한다.
그래서 Hello world와 button은 가장 마지막에 위치한다.
버튼을 눌렀을 시 다이얼로그 창을 띄워보자. (함수 호출)
주의할 점이 있다. 만약 body요소에 내용을 작성 후 document.write()를 사용하면 화면이 갱신된다.
(이전 내용 없어짐.)
화면이 갱신이 안될려면 아래와 같은 코드를 사용하자.
자바스크립트에서는 세미콜론(;)을 안써도 된다.
[단, 한줄에 여러개 사용 불가 ex) var a=10 var b=20 이렇게 사용하면 에러!! 줄바꿈을 하면 사용 가능하다.]
외부 스크립트를 사용해보자.
01_ex.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Test</title>
<!-- Javascript의 정식명칭 - ECMA(에크마 스크립트) -->
<!-- 웹브라우저가 interprete를 해서 실행하는 프로그래밍 코드 -->
<!-- 내부 스크립트 -->
<script>
// 이 영역 안에서는 Javascript문법을 사용 ////
//화면에 Text 출력
document.write('Hello world');
// 줄바꿈 자동 안됨.
document.write('자동 줄바꿈 안됨. 하려면.. <br>태그 사용');
document.write('<hr>');
// HTML문법을 직접 스크립트로 작성.
document.write('<a href="#">이런식으로 HTML 문법 적용 가능</a>');
// 즉, HTML에서 body안에 했던 작업들 모두 스크립트로 처리 가능!!
document.write('<hr>');
// 자바스크립트는 프로그래밍 언어이므로 이런것도 가능
// 변수 및 객체, 제어문, 연산자 등등....
var a= new Date();
document.write(a);
document.write('<br>');
for(var i=0;i<10;i++){
document.write(i+" , ");
}
// 이벤트에 따른 동적 처리도 가능
// 아래 button요소의 onclick속성으로 지정된 함수
function aaa(){
// alert('clicked button');
// body요소를 모두 생성한 후에 document.write()를 하면 화면 갱신이됨.
// HTML의 요소를 찾아와서 값 적용
document.getElementById('p1').innerHTML="clicked button";
}
// 문자의 끝에 ;이 없어도 됨
document.write('aaaaaaaa')
document.write('bbbbbbbb')
document.write('cccccccc')
</script>
<!-- 외부스크립트 적용 -->
</head>
<body>
<!-- 무조건 head 요소 안에 내용이 실행된 후 body영역 실행됨 -->
Hello world!
<p><button onclick="aaa()">button</button></p>
<p id="p1"></p>
</body>
</html>
|
01_ex.js
|
1
2
3
4
5
6
7
8
|
function kkk(){
}
kkk();
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML+ Java script (기초) dialog (0) | 2019.12.11 |
|---|---|
| HTML+Java script (기초) 배열 (0) | 2019.12.11 |
| HTML+Java script (기초) HTML요소와 속성을 JS객체,멤버변수처럼 사용 (0) | 2019.12.11 |
| HTML+Java script (기초) 연산자, 기능 메소드 알아보기 (0) | 2019.12.11 |
| HTML+Java script (기초) 자료형, 함수 참조, 객체 만들기 (0) | 2019.12.11 |
댓글