-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path01_개요.html
198 lines (133 loc) · 7.33 KB
/
01_개요.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트01</title>
<script src="resources/js/sample.js"> </script>
</head>
<!-- javaScaript : 웹 문서 상에 이벤트가 발생했을 때 추가적으로 실행해야하는 동작들 처리 (동적인 효과)-->
<!--이벤트 : 문서를 사용하는 사용자의 모든 행위. 클릭, 스크롤을 하는 것.-->
<body>
<!--
*web의 (front의 3요소)
-html : 웹 문서의 큰 틀 (뼈대)
-css : 스타일을 잡음(색상, 테두리, 디자인 등등)
- JavaScript : 웹 문서 상에 이벤트가 발생했을 때 추가적으로 실행해야 하는 동작들 처리 (동적인 효과)
이벤트 : 문서를 사용하는 사용자의 모든 행위. 클릭, 스크롤을 하는 것.
-->
<h3>1. 스크립트 언어란? </h3>
<p>
프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해준다. <br>
매우 빠르게 배우고 짧은 소스코드로 상호작용 하도록 고안됨
</p>
<hr>
<h3>2.자바스크립트란?</h3>
<p>
웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식" 의 스크립트 언어 <br>
-자바 : 컴파일 방식 => 컴파일 단계를 거치고 나서 실행되는 개념 => 오류잡기 수월 <br>
-자바스크립트 : 인터프리터 방식 => 컴파일 단계를 거치지않고 곧바로 실행되는 개념<br>
(브라우저에서 html문서가 로딩될 떄 코드를 한 줄씩 읽어내는 방식)
문제를 실행 시점에서나 알 수 있음
</p>
<!--자바는 컴파일 + 인터프리터 방식 : 컴파일을 쫙 하고나서 인터프리터를한다.
=> 소스 코드를 한번 다 읽어내고 나서 프로그램이 컴파일 후 실행되므로
코드상 문법적인 오류가 있으면 바로 빨간줄로 알려줌.
인터프리터 방식
=> 실행하면서 소스코드를 한 줄씩 읽어내면서 실행
(실시간으로 분석해서 실행됨)
=> 코드상에 문법적인 문제가 있다면 바로 알려주지 않고 실행시점에 알려줌
=> 자바에 비해서 오류 찾기가 힘들 수 있다. -->
<hr>
<h3>3.장단점</h3>
<h4>장점</h4>
<ul>
<li>요소에 이벤트가 발생했을 떄 코드를 한 줄씩 읽어나가면서 수행되기 때문에 수행속도가 빠름</li>
<li>간단한 코드 작성으로 초보자가 접하기 쉬운 언어 (단순한 구조, 원칙)
예) 접근 제한자의 개념 없음, 메소드 정의시 반환형 정의 안함,
변수 선언 시 자료형을 지정할 필요가 없음 (타입 추론)
</li>
</ul>
<h4>단점</h4>
<ul>
<li>웹에 특화된 기술 => 내부에서 제공되는 기술이 제한적임</li>
<li>html내에 소스코드를 작성하기 때문에 외부에 공개됨 (개발자 도구 이용) -> 보안에 취약</li>
</ul>
<hr>
<h4> 4. 자바스크립트 소스코드 작성 위치에 따른 종류</h4>
<ol>
<li>
inline (인라인) : 이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성해서
실행되게 하는 방법
</li>
<li>
internal(내부) : 해당 html문서 내에 script태그 영역에 소스코드를 작성해서 실행되게 하는 방법
</li>
<li>
external(외부) : 소스코드들을 별도의 .js파일로 작성해서 script태그를 가져다가 실행되게 하는 방법
</li>
</ol>
<br>
<h4>1 . inline(인라인)방식</h4>
<p>
태그 내에 직접적으로 실행할 간단한 소스코드를 작성해서 실행 시킴 <br>
주로 실행해야 하는 소스코드가 매우 소량일 경우 사용 <br><br>
<hr>
<br><br>
[표현법]<br>
<태그명 이벤트 속성="해당 태그에 해당 이벤트가 발행했을 때 실행할 소스코드"> <br>
<!--버튼이 클릭되는 순간 (==버튼에 클릭 이벤트가 발생하는 순간) 알림창을 띄운다-->
<button onclick="window.alert('클릭했구나 클릭클릭')">버튼을 눌러라~~</button>
<!--버튼 요소-->
<!--버튼을 클릭하는 순간(==클릭 이벤트가 발생하는 순간) 알림창을 띄운다-->
<button onclick="window.console.log('우하하 콘솔창이다')">콘솔창 출력</button>
<!--콘솔창 출력(개발자 도구 탭 : 주로 디버깅 할 용도 )-->
<!--테이블에 바로 입력 . 인라인 방식.-->
<br>
<h4>2. internal (내부) 방식</h4>
<p>
script태그 영역에 함수단위로 소스코드들을 작성해놓고<br>
어떤 요소에 어떤 이벤트 발생 시 해당 함수를 호출함으로써 실행시키는 방식 <br>
=> script태그는 head, body태그 내에 아무곳이나 적어도 상관없음.<br>
<!-- inline / internal-->
</p>
<!--버튼이 클릭되는 순간 (==클릭 이벤트가 발생하는 순간 알림창 띄워보기)-->
<button onclick="abc();">알림창 나와라</button> <!--버튼을 클릭할 때 함수가 호출된다.-->
<!-- inline + 내부방식-->
<!-- 콘솔창 확인-->
<!-- 순수 내부 방식 (onclick 빼고 요소만 가지고 출력)-->
<!-- 콘솔창에 출력하는 버튼-->
<button id="btn">콘솔창 출력</button>
<script>
// 자바 스크립트 소스코드를 기술할 수 있는 영역
//자바 : 접근제한자 (예약어) 반환형 메소드명 (매개변수) -> 자바의 메소드
// 매개변수가 없는 단순한 함수 만들어보기
//abc라는 이름을 가진 함수 정의 (아렇게 이름을 정의한 함수를 선언적 함수라고 한다.)
//함수인데 이름을 붙여서 만들었다.
function abc(){
//해당 함수를 호출하면 실행할 코드를 기술
window.alert('알림창 출동'); // abc를 선언, 알림창을 출력.
}
//순수 내부 방식으로 이벤트 부여 -> script 안에서 작성
//이벤트를 적용시키는 요소에 접근 -> html문서에 있음
//1. 이벤트를 적용시키고자 하는 요소 (태그)를 가지고 오기
var btn = document.getElementById('btn'); //가지고 오고자 하는 요소를 변수로 만들어 가지고 옴
//2. 선택된 요소의 이번트 속성에 접근해서 해당 이벤트 발생 시 실행할 함수를 대입
btn.onclick = function(){ // 익명함수 : 이름이 없는 함수, 해당 이벤트 발생 시 호출
//함수를 호출했을 때 실행할 함수를 기술
console.log('이게 된다고? 정말? ');
abc(); //함수 내부에서 미리 정의된 선언적 함수는 호출이 가능, 없는거 부르면 콘솔창이 아파한다.
}
</script>
<h4 onclick="window.alert('버튼만 클릭하는 법이 어디있어');">
3. external (외부) 방식 </h4>
<p>
별도의 .js파일로 소스코드를 작성하고 해당 html문서에 가져다가 실행하는 방법
</p>
<!-- 외부방식 + 인라인-->
<button onclick="test(); abc();"> 알림창 출동</button>
<!-- 함수 하나만 호출할 떄 ; 생략가능하지만, 밑에 내용이없으면 안적고 있으면 ;무조건 넣어줘야한다. -->
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>