JavaScript 기초 용어 정리 by 생활코딩

출처: 생활코딩 (https://opentutorials.org/)



용어 정리


표현 태그 기능
var 변수명 변수를 표현 (Variable)
background-color:색상 [style 속성] 웹페이지의 배경 색상을 변경
color:색상 [style 속성] 웹페이지의 텍스트 색상을 변경
.style.color='색상' [style 속성] 글자 색상 변경
<input type="button" value="night"> night라는 이름을 가지는 버튼 생성
<input type="text"> 텍스트를 입력할 수 있는 창 생성
onclick="속성" 속성의 값으로 자바스크립트가 와야하고, 해당 버튼을 클릭했을 때 JavaScript를 실행시킴
onchange="속성" 해당 type 내의 값이 변화했을 때 속성 JavaScript를 실행시킴
onkeydown="속성" 해당 type 내에서 키보드를 누를 때마다 JavaScript를 실행시킴
<script> 자바스크립트를 넣는 방법으로써, 웹브라우저에게 HTML의 코드로 지금부터 자바스크립트가 시작된다는 것을 알려줌 (웹페이지는 script 태그 안쪽에 있는 내용을 자바스크립트로 해석함)
document.write("문자열" 또는 수식) 웹페이지에 텍스트를 출력하기 위한 스크립트
document.querySelector('태그명') 웹브라우저에게 질의하며, Selector는 태그명의 CSS를 타깃으로 정함
document.querySelector('문자') 해당 태그의 첫 번째 검색 자료만을 추출
document.querySelectorAll('문자') 해당 태그의 모든 사용 형태 추출 (노드 리스트, 배열)
document.querySelector('#아이디').value 아이디 값 받아오기
querySelector('태그명').style.backgroundColor='색상' 태그명의 배경 스타일을 원하는 색상으로 변경
querySelector('태그명').style.color='색상' 태그명의 텍스트 스타일을 원하는 색상으로 변경
alert('문자열') 경고 팝업 이벤트 실행
'문자열'.length 문자열의 길이를 확인할 수 있는 스크립트 (length는 Properties로 표현됨)
'문자열'.toUpperCase() 소문자를 대문자로 변경해주는 스크립트
'문자열'.indexOf('문자' 혹은 '문자열') 문자 또는 문자열이 기존 문자열 몇 번째에서 시작되는지 알려주는 스크립트
'문자열'.trim() 문자열 양 끝에 포함된 공백을 지우는 스킄립트
배열명.length 배열의 개수(인덱스)를 나타냄
배열명.push(데이터) 배열에 데이터 추가
console.log('문자' 혹은 함수) 콘솔 창에 문자 로그 출력
Toggle 두 개의 조건이 있고 하나의 버튼이 있을 때 버튼을 누르는 경우 조건에 따라 환경이 변화함 (조건문을 이용한 토글 버튼 생성 가능)
&lt (less than) ~보다 작다(<) 표현
조건문 if (Boolean 값) {내용} Boolean이 참일 때 내용을 실행
while (Boolean 값) {내용} Boolean이 참일 때까지 내용을 반복 실행
function 함수명(파라미터) {내용} 함수를 표현
키워드 this 자기 자신을 가리키는 코드(하나의 태그 뭉치)를 표현하고자 할 때 사용
배열 (Array) 데이터가 많아짐에 따라 많은 데이터를 그냥 둘 수 없기 때문에 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아두는 일종의 수납상자 (대괄호 ‘[]’ 형태)
반복문 (Loop) 반복적으로 표현해야 할 데이터가 매우 많을 때 모든 데이터를 수정하는 과정에서 일일히 처리해야 하는 어려움을 해소하기 위해 반복적으로 코드를 실행 (무한히 돌아가면 컴퓨터의 자원을 모두 빼앗아 가게 되므로 언제 종료되는지 결정해야 함)
리팩토링 공장으로 다시 보내 개선하는 느낌 / 코딩을 하고나면 코드가 비효율적으로 생기기 마련인데 동작하는 것은 그대로 두고 코드 자체를 효율적으로 만들어 가독성을 높이고 유지보수하기 편하게 만들어야 함 / 중복 코드를 제거하는 방향으로 코드를 개선하는 작업 / 소프트웨어가 커짐에 따라 꾸준히 리팩토링을 해야만 좋은 프로그램을 만들어나갈 수 있음



자바스크립트 특징


  • 사용자와 상호작용 하는데 사용자의 요구에 따라 웹페이지를 변화시키는 언어이다.

  • HTML 위에서 동작하는 언어로, HTML을 제어하며 웹페이지를 동적으로 만들어주는 특성을 부여한다.

  • Console을 통해 자바스크립트를 실행시켜 데이터를 처리할 수 있다.

  • 문자열의 덧셈과 숫자의 덧셈 표현은 다르기 때문에 데이터 타입을 정확하게 표현해야 한다.

  • JavaScript는 컴퓨터 언어이면서 동시에 컴퓨터 프로그래밍 언어이지만, HTML은 컴퓨터 언어이기는 하지만 컴퓨터 프로그래밍 언어라고 하지 않는다.

  • 시간의 순서에 따라 웹브라우저의 여러 기능이 실행되어야 하기 때문에 프로그래밍적 특성을 띤다.



테스트 코드 - 1


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
<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="background-color:green; color:white;">
<input type="button" value="Night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white'">

<input type="button" value="Day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black'">

<input id="toggle" type="button" value="toggle" onclick="
if (document.querySelector('#toggle').value==='night') {
document.querySelector('#toggle').value='day';
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
} else {
document.querySelector('#toggle').value='night';
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
}
">

<input type="button" value="this_toggle" onclick="
if (this.value==='night') {
this.value='day';
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
} else {
this.value='night';
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
}
">

<input type="button" value="remove_duplicate" onclick="
var atarget = document.querySelector('body');

if (this.value==='night') {
this.value='day';
atarget.style.backgroundColor='black';
atarget.style.color='white';
} else {
this.value='night';
atarget.style.backgroundColor='white';
atarget.style.color='black';
}
">

<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down')">

<h1>Comparison operators & Boolean</h1>

<h2>1===1</h2>
<script>
document.write(1===1);
</script>

<h3>1===2</h3>
<script>
document.write(1===2);
</script>

<h3>1 &lt; 1</h3>
<script>
document.write(1<1);
</script>

<h3>1 &lt; 2</h3>
<script>
document.write(1<2);
</script>

<h1>Conditional statements</h1>
<h2>Program</h2>
<script>
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>
<h2>IF-true</h2>
<script>
document.write("1<br>");

if (true) {
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
</body>
</html>



테스트 코드 - 2


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
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Array</h1>
<h2>Syntax</h2>
<script>
var alphabet = ["A", "B"];
</script>
<h2>Get</h2>
<script>
document.write(alphabet[0]);
document.write(alphabet[1]);
</script>
<h2>Add</h2>
<script>
alphabet.push("C");
</script>
<h2>Count</h2>
<script>
document.write(alphabet.length)
</script>
<h1>Loop</h1>
<ul>
<script>
document.write('<li>1</li>');
document.write('<li>2</li>');
document.write('<li>3</li>');
document.write('<li>4</li>');
document.write('<li>5</li>');

var i = 0;

while(i < 3) {
document.write(i+1 + ': ' + i + '<br>');
i = i+1;
}
</script>
</ul>
<h1>Loop & Array</h1>
<script>
var fruits = ['apple', 'blueberry', 'cherry', 'grape'];
</script>
<ul>
<li>apple</li>
<li>blueberry</li>
<li>cherry</li>
<li>grape</li>
</ul>
<ul>
<script>
var i = 0;

while (i < 4) {
document.write('<li>'+fruits[i]+'<br></li>');
i = i+1;
}
</script>
</ul>
<ul>
<script>
var i = 0;

while (i < fruits.length) {
document.write('<li>'+fruits[i]+'<br></li>');
i = i+1;
}
</script>
</ul>
</body>
</html>
Author

Alec J

Posted on

2020-04-06

Updated on

2021-02-09

Licensed under