간단한 스크립트부터 시작하기
인라인 스크립트 (inline script)
HTML 태그 안에 직접 작성하는 자바스크립트
팝업 창을 열고 닫거나, 알림 메시지를 표시하는 것처럼 간단한 명령에 사용된다.
내부 스크립트 (internal script)
웹 문서에서 <script> 태그와 </script> 태그를 사용해 자바스크립트 소스만 모아두는 스크립트이다.
한 문서 안에 여러 개의 <script> 태그를 사용할 수 있다
웹 요소가 모두 로딩한 후 삽입 되어야 하기 때문에 대부분 웹 문서 내용이 끝나는 </body> 태그 직전에 자바스크립트 소스를 삽입한다.
인라인 스크립트와 내부 스크립트 소스의 단점
HTML 태그와 자바스크립트 소스가 뒤섞여 있어 소스가 복잡해지기 때문에, 태그나 자바스크립트를 수정할 때 필요한 소스를 한 눈에 알아보기 쉽지 않아진다.
여러 웹 문서에서 같은 자바스크립트를 사용하더라도 문서마다 똑같은 소스를 반복해서 삽입해야 한다.
이를 수정해야 한다면 수정할 소스가 포함된 모든 문서를 찾고 하나씩 수정해야 한다.
외부 스크립트 파일 링크하기
인라인 스크립트와 내부 스크립트의 단점을 보안하기 위해 자바스크립트 소스를 따로 파일로 저장한 후 링크해서 사용하는 방법이다.
수정이 간편하고 링크한 모든 HTML 문서에 곧바로 적용 할 수 있다.
외부 스크립트 작성
<script>태그와 </script> 태그 없이 자바스크립트 소스만 작성한 뒤 확장자를 .js인 파일로 저장한다.
그 후 HTML 문서에서 <script> 태그의 src 속성을 이용해 자바스크립트 파일을 링크하여 사용한다.
- 이 때 외부 스크립트 파일도 웹 문서 요소를 모두 가져온 후에 실행되어야 한다.
- 또한 스크립트 파일은 스크립트 파일끼리 별도의 폴더에 저장하는 것이 좋다.
<script src="자바스크립트 파일 경로"></script>
// 최근에는 defer 속성을 추가해 웹 문서 요소가 다 가져와진 뒤 자바스크립트를 실행하도록 지정하기도 한다.
<script defer src="자바스크립트 파일 경로"></script>기본적인 입·출력 명령
# alert() 함수 : 알림 창에 텍스트나 변숫값을 표시할 수 있다.
alert("안녕하세요") // 알림 창에 '안녕하세요'를 표시한다.
a = 10
alert(a) // 알림 창에 변수a의 값을 표시한다.
# confirm() 함수 : 단순히 내용을 보여주는 것이 아니라 [확인]과 [취소] 버튼이 있어 각각 다르게 동작 할 수 있다.
comfirm("종료하시겠습니까?") // 확인 버튼 클릭 시 true, 취소 버튼 클릭 시 false가 반환됨
# prompt() 함수 : 사용자가 간단히 값을 입력할 수 있는 창을 표시한다.
prompt("이름을 입력하세요") // 사용자가 입력한 값이 반환됨
prompt("참석 여부(예/아니요)", "예") // 프롬프트 텍스트 필드에 기본값 "예"가 표시된다.
# 사용자가 프롬프트 창에 값을 입력하지 않을 경우 null이 반환됨
# console.log() : 변수의 결과 값을 콘솔창에 보여주는 등 프로그램이 제대로 동작하는지 확인하는 용도로 사용된다.
console.log("자바스크립트 공부중") // 콘솔 창에 "자바스크립트 공부중" 이 반환됨
name = "홍길동"
console.log(name + "님은 자바스크립트 공부중") // 콘솔 창에 "홍길동님은 자바스크립트 공부중" 이 반환됨
# document.write() : 괄호안의 내용을 웹브라우저에 표시할 수 있다.
document.write("제 이름은 " + name + "입니다." // 웹브라우저 창에 "제 이름은 홍길동입니다." 표시됨변수와 자료형
변수
변수는 프로그램 안에서 값이 달라질 수 있는 데이터를 가리킨다.
하지만, 자바스크립트에서는 프로그램 안에서 계속 값이 바뀌지 않는 데이터이더라도 변수로 만든 뒤 사용한다.
변수 이름 규칙
- 변수 이름은 숫자로 시작할 수 없고 공백이 포함되면 안 된다.
- 자바스크립트는 영문자의 대소문자를 구별하기 때문에 current, Current, CURRENT는 모두 다른 이름이다.
- 자바스크립트에서 한 단어로 이루어진 변수를 사용할 때는 주로 영문자의 소문자를 사용하고, 두 단어 이상으로 이루어진 변수를 사용할 때는 two_words처럼 언더바로 연결하거나 twoWords처럼 중간에 영문자의 대문자를 섞어 사용한다.
- 첫 번째 단어는 소문자로, 두 번째 단어는 대문자로 표기하는 것을 camel case라고 한다.
- let 등 자바스크립트에서 미리 정해 놓은 예약어는 변수 이름으로 사용할 수 없다.
- 무의미한 변수 이름은 피한다.
변수 선언하기
값을 변경할 수 있는 변수는 예약어 let, 값이 바뀌지 않는 상수는 예약어 const 를 사용한다.
let 변수명
const 변수명
// 변수에 값 할당
let sum;
sum = 10;
// 또는
let sum = 10;let 변수는 새로운 값을 재할당 할 수 있지만, const 변수는 재선언도, 재할당도 불가능하다.
자료형
자료형이란, 프로그램에서 처리할 자료의 형태를 말한다.
컴퓨터에게 일을 시킬 때는 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 지정해주어야 한다.
- 원시 유형 : 하나의 값만 저장하는 자료형
- 숫자, 문자열, 논리형, undefined, null, symbol
- 객체 : 원시 유형 외의 모든 자료형
typeof() 함수
typeof() 함수는 소괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알려준다.
let data = 5
typeof(data) // "number" 반환
숫자형
모든 프로그램에서 가장 기본이 되는 자료형
자바스크립트에서는 정수와 실수를 함께 묶어 숫자형이라고 한다.
큰따옴표 없이 입력 시 숫자로 인식하고, 큰따옴표로 묶으면 문자열로 인식하기 때문에 주의해야 한다.
typeof(10) // 'number'
typeof("10") // 'string'
typeof(9.241) // 'number'
문자열
작은따옴표나 큰따옴표로 묶은 데이터를 의미한다.
따옴표만 있고 내용이 없어도 문자열인데, 이러한 문자열을 '빈 문자열' 이라고 한다.
typeof("안녕하세요!") // 'string'
typeof("10") // 'string'
typeof("") // 'string', 빈 문자열
특수 기호 표시하기
이스케이프 문자란, 화면에는 표시되지 않지만 줄 바꿈이나 탭처럼 문서에서 기능을 수행하는 문자를 말한다.
문자열 데이터를 표시하기 위해 큰따옴표를 사용하는 것이 아니라 특수 문자로서 화면에 큰따옴표를 표시하려면, 백슬레시(\) 다음에 큰따옴표를 적어야 한다.
자주 사용하는 이스케이프 문자
| 이스케이프 시퀀스 | 의미 |
| \b | 백 스페이스 |
| \t | 수평 탭 |
| \v | 수직 탭 |
| \n | 줄 바꿈 |
| \r | 캐리지 리턴 |
| \f | 폼 피드 |
| \' | 작은따옴표 |
| \" | 큰따옴표 |
| \\ | 백슬래시 문자 |
| \0 | NULL문자 |
| \ddd | 2글자 XX(16진수)가 표시된 Latin-1 문자 |
| \xddd | 4글자 XXXX(16진수)가 표시된 Unicode문자 |
템플릿 리터럴
문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식
백틱(`)을 사용해 문자열을 만든다.
템플릿 리터럴 안에 변수나 식이 들어간다면 ${}로 묶고 태그나 띄어쓰기, 이스케이프 문자를 그대로 표시할 수 있다.
name = "홍길동"
classroom = 301
console.log(`${name}님, ${classroom}호 강의실로 오세요.`) // "홍길동님, 301호 강의실로 오세요." 반환
논리형
참(true)이나 거짓(false) 값을 표현하기 위한 데이터 유형으로 Boolean 유형이라고도 한다.
논리형 값은 지정한 조건에 맞는지의 여부를 확인하는 조건식에서 많이 사용된다.
undefined, null
undefined는 값이 할당되지 않은 변수의 초깃값이다.
null은 값이 없거나 유효하지 않은 값이라는 의미이다.
객체
자바스크립트에서 객체란 여러 개의 원시 유형을 하나로 묶어 놓은 것이다. 자바스크립트는 배열이나 함수도 객체로 취급한다.
객체는 중괄호({}) 안에 모든 정보를 담는데, 키와 값으로 하나 또는 여러 개의 쌍을 만들 수 있다.
let gitBook = {
title : "깃&깃허브 입문",
pubDate : "2019-12-06",
pages : 272,
finished : true
}
gitBook.title // title 값 가져오기
gitBook["finished"] // finished 값 가져오기
배열
배열은 대괄호([])로 묶고 그 안에 값을 나열한다.
emptyArr = []
colors = ["red", "blue", "green"]
arr = [10, "banana", true]
colors[2] // colors의 두 번째 값 "blue" 반환
arr.length // arr 배열에 몇 개의 값이 있는지 반환
심벌
심벌의 가장 큰 특징은 유일성을 보장한다는 것이다.
그러나 잘 쓰이지 않는다.
자료형 변환
Number() 함수
Number() 함수는 소괄호 안에 값을 넣어주면 숫자로 변환해준다.
| 기존 유형 | 변환 결과 |
| true | 1 |
| false | 0 |
| 숫자 | 숫자 |
| null | 0 |
| undefined | NaN |
| 정수 문자열 | 정수(맨 앞에 0이 있으면 제거) |
| 실수 문자열 | 실수(맨 앞에 0이 있으면 제거) |
| 16진수 문자열 | 10진수 |
| 빈 문자열 | 0 |
| 기타 | NaN |
parseInt() 함수와 parseFloat() 함수
parseInt() 함수는 소괄호 안의 값을 정수로, parseFloat() 함수는 소괄호 안의 값을 실수로 변환한다.
toString() 함수
toString() 함수는 null 자료형과 undefined 자료형을 제외한 나머지 자료형을 문자열 데이터로 변환한다.
num = 10 // 원래 값 숫자형
isEmpty = true // 원래 값 논리형
num.toString() // '10', 10진수 문자열
num.toString(2) // '1010', 2진수 문자열
isEmpty.toString() // 'true'
String() 함수
null 자료형과 undefined 자료형까지 모두 포함해서 문자열로 변환한다.
isFull = false // 원래 값 논리형
initValue = null // 원래 값 null형
String(isFull) // 'false'
String(initValue) // 'null'
Boolean() 함수
Boolean() 함수는 다른 유형의 데이터를 논리형 데이터로 변환한다.
| true 값이 되는 데이터 | false 값이 되는 데이터 | |
| 숫자형 | 0이 아닌 값 | 0 |
| 문자열 | 빈 문자열이 아닌 모든 문자열 | 빈 문자열 |
| undefined | - | undefined |
Boolean(5 * 4) // true
Boolean("Hi?") // true
Boolean(undefined) // false연산자와 제어문
연산자
연산자란, 프로그램에서 특정한 동작을 하도록 지시하는 기호를 말한다.
산술 연산자
산술 연산자는 수학적인 계산을 위해 사용하는 연산자이다.
연산자의 왼쪽이나 오른쪽에 있는 연산 대상을 '피연산자'라고 한다.
- 대부분의 산술 연산자는 피연산자가 2개이지만, 증가 연산자와 감소 연산자는 피연산자가 1개이다.
- 나누기 연산자와 나머지 연산자는 서로 다른 연산자이다.
| 연산자 | 기능 | 사용 예 |
| + | 2개의 피연산자값을 더합니다. | c = a + b |
| - | 첫 번째 피연산자값에서 두 번째 피연산자값을 뺍니다. | c = a - b |
| * | 2개의 피연산자값을 곱합니다. | c = a * b |
| / | 첫 번째 피연산자를 두 번째 피연산자값으로 나눕니다. | c = a / b |
| % | 첫 번째 피연산자값을 두 번째 피연산자값으로 나눈 나머지를 구합니다. | c = a % b |
| ++ | 피연산자값을 1 증가시킵니다. | a++ |
| -- | 피연산자값을 1 감소시킵니다. | b-- |
연결 연산자
연결 연산자는 문자열과 다른 자료형 또는 2개의 문자열을 합해서 하나의 문자열로 만드는 연산자이다.
연산자 기호는 + 기호를 사용한다.
+ 연산자의 피연산자가 모두 숫자형이라면 더하기 연산자가 되고, 피연산자 중 하나라도 문자열이 있으면 연결 연산자로 동작한다.
consele.log(3 + 5) // "8" 반환
let name = "홍길동"
console.log(name + "님, 안녕하세요") // "홍길동님, 안녕하세요" 반환
할당 연산자
할당 연산자는 연산자 오른쪽의 실행 결과를 연산자 왼쪽에 할당하는 연산자로, '대입 연산자'라고도 합니다.
기본적인 할당 연산자는 = 기호를 사용한다.
| 연산자 | 기능 | 사용 예 |
| = | 연산자 오른쪽의 값을 왼쪽 변수에 할당합니다. | y = x + 3 |
| += | y = y + x | y += x |
| -= | y = y - x | y -= x |
| *= | y = y * x | y *= x |
| /= | y = y / x | y /= x |
| %= | y = y % x | y %= x |
비교 연산자
비교 연산자는 2개의 값을 비교해서 참이나 거짓으로 결과값을 반환하는 연산자이다.
2개의 값을 비교하는 비교 연산자는 주로 조건을 체크할 때 사용한다.
| 연산자 | 기능 | 사용 예 |
|
| == | 피연산자값이 같으면 true | 3 == "3" | true |
| === | 피연산자값과 데이터 유형이 모두 같으면 true | a === "3" | false |
| != | 피연산자값이 같지 않으면 true | 3 != "3" | false |
| !== | 피연산자값과 데이터 유형이 모두 같지 않으면 true | 3 !== "3" | true |
| < | 왼쪽 피연산자값이 오른쪽 피연산자값보다 작으면 true | 3 < 4 | true |
| <= | 왼쪽 피연산자값이 오른쪽 피연산자값보다 작거나 같으면 true | 3 <= 4 | true |
| > | 왼쪽 피연산자값이 오른쪽 피연산자값보다 크면 true | 3 > 4 | false |
| >= | 왼쪽 피연산자값이 오른쪽 피연산자값보다 크거나 같으면 true | 3 >= 4 | false |
==와 ===, !=와 !==는 어떻게 다를까
== 연산자와 != 연산자는 비교하는 피연산자의 자료형을 자동으로 변환하여 비교한다.
반면 === 연산자와 !== 연산자는 값뿐만 아니라 데이터 유형까지 비교하기 때문에 자동으로 자료형이 변환되지 않는다.
그래서 프로그램에서 값을 비교할 때는 ==, != 연산자보다 ===, !== 연산자를 사용하는 것이 좋다.
논리 연산자
논리 연산자는 참과 거짓을 피연산자로 하는 연산자로, 참과 거짓을 사용해 조건을 체크할 때 많이 사용한다.
| 연산자 | 기능 | |
| ! | NOT 연산자 | 피연산자값과 반대의 값을 가집니다. |
| && | AND 연산자 | 피연산자값이 모두 true일 경우에만 true가 됩니다. |
| || | OR 연산자 | 피연산자값 중 하나만 true여도 true가 됩니다. |
조건문
if 문
if 문은 조건을 체크한 후 결과값이 true이면 if 문에 있는 명령을 수행하고, false이면 if 문에 있는 명령을 건너뛰고 그 다음 명령을 실행한다.
if (조건) {
// 조건이 true일 때 실행할 명령
}
if else 문
조건을 체크한 후 true일 때와 false일 때 처리할 명령이 따로 있다면 if 문과 else 문을 사용한다.
if else 문 안에 또 다른 if else 문을 사용할 수도 있다.
# if 문, else 문
if (조건) {
// 조건이 true일 때 실행할 명령
} else {
// 조건이 false일 때 실행할 명령
}
# if 문, else if 문
if (조건) {
// 조건이 true일 때 실행할 명령
} else if (조건2) {
// 조건1이 false이지만, 조건2가 true일 때 실행할 명령
} else {
// 어떤 조건에도 false일 때 실행할 명령
}
조건 연산자
조건이 복잡하지 않고 true와 false가 명확할 경우 조건 연산자만으로 조건을 체크할 수 있다.
// if else 문을
if (num1 < num2) {
small = num1;
} else {
small = num2;
}
// 조건 연산자로 작성
small = (num1 < num2) ? num1 : num2;
switch 문
체크해야 할 조건값이 많을 경우 switch문이 더 편리하다.
switch 문 안에 있는 case 문에서 각 값에 따라 실행할 명령을 따로 구분할 수 있다.
switch (조건)
{
case 값: 문장
break;
case 값: 문장
break;
(...)
default : 문장
}
논리 연산자를 사용해 2개 이상의 조건 체크하기
2개 이상의 조건을 체크할 때 여러 경우의 수를 따지기 위해 논리 연산자를 사용한다.
const num1 = parseInt(prompt("첫 번째 양의 정수 : "));
const num2 = parseInt(prompt("두 번째 양의 정수 : "));
let str;
// AND 연산 = 둘 다 true여야 결과값이 true
if (num1 % 2 === 0 && num2 % 2 === 0) {
str = "두 수 모두 짝수입니다.";
} else {
str = "짝수가 아닌 수가 있습니다."'
}
alert(str);반복문
반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문이다.
반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있다.
for 문
for 문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리하다.
for 문에서는 몇 번 반복했는지 기록하기 위해 카운터를 사용하고, for 문의 첫 번째 항에서 카운터 변수를 지정한다.
for (초깃값; 조건; 증가식) { ... }
초깃값 : 몇 번 반복할지 지정하기 위해 사용하는 카운터 변수를 선언하고 초기화한다. 0이나 1부터 시작한다.
조건 : 문장을 반복하기 위해 체크할 조건이다. 이 조건을 만족해야 for 문에 있는 명령을 반복할 수 있다.
증가식 : 문장을 실행한 후 카운터 변수를 증가시키는 부분이다. 보통 카운터값을 하나 더 증가시키는 용도로 사용한다.
// 배열에 있는 값을 하나씩 가져오는 예제
const name = ["홍길동", "도레미", "가나다", "익명"];
for (let i = 0; i < name.length; i++) {
document.write(`${name[i]}. `);
}
// 홍길동, 도레미, 가나다, 익명 반환
forEach 문
배열에서는 forEach 문을 사용해서 좀 더 편리하게 반복할 수 있다.
// forEach 문으로 배열값 가져오기
const names = ["홍길동", "도레미", "가나다", "익명"];
names.forEach(function(name) {
document.write(`${name}. `)
});
// 홍길동, 도레미, 가나다, 익명 반환
for...in 문
for...in문은 반복해서 객체의 값을 가져와서 처리할 수 있게 한다.
// for...in 문으로 키와 값 가져오기
const gitBook = {
title : "깃&깃허브 입문",
pubDate : "2019-12-06",
pages : 272,
finished : true
}
for (key in gitBook) {
document.write(`${key} : ${gitBook[key]}<br>`);
}
/**
title : "깃&깃허브 입문",
pubDate : "2019-12-06",
pages : 272,
finished : true
**/ 반환
for...of 문
문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문이다.
// for...of 문으로 배열 값 가져오기
const names = ["홍길동", "도레미", "가나다", "익명"];
// names에 name이 있는 동안 계속 반복한다.
for (name of names) {
document.write(`${name}. `);
}
while 문과 do...while 문
while 반복문은 조건이 true인 동안 문장을 반복한다. 조건이 false라면 문장은 한 번도 실행되지 않을 수 있다.
do..while문은 조건이 맨 뒤에 붙어서 일단 문장을 한 번 실행한 후 조건을 체크한다. 그러므로 조건이 false이더라도 일단 문장이 최소한 한 번은 실행된다.
// while 문
while (조건) {
// 실행할 명령
}
// do...while문
do {
// 실행할 명령
} while (조건)
break 문과 continue 문
break문과 continue 문은 반복문을 중간에 끝낼 때 사용한다.
break 문은 종료 조건이 되기 전에 반복문을 빠져나와야 할 때 사용한다.
continue 문은 조건에 해당되는 값을 만났을 때 실행하던 반복 문장을 건너 뛰고 반복문의 맨 앞으로 되돌아가 다음 반복 과정으로 넘어가도록 한다. (= 반복 과정 한 차례 건너뛰기)
'BookStudy' 카테고리의 다른 글
| Do it! 모던 자바스크립트 프로그래밍의 정석 [둘째마당. 웹 문서와 자바스크립트(Ch.05 ~ Ch.07)] (0) | 2023.03.24 |
|---|---|
| Do it! 모던 자바스크립트 프로그래밍의 정석 [첫째마당. 자바스크립트의 기본기 다지기 (Ch.04 함수와 스코프)] (0) | 2023.03.23 |
| 비전공자를 위한 이해할 수 있는 IT 지식 [9장 협업, 소스관리, 디자인] (0) | 2023.03.06 |
| 비전공자를 위한 이해할 수 있는 IT 지식 [7장 데이터베이스와 이미지 처리 & 8장 프레임워크와 라이브러리] (0) | 2023.03.05 |
| 비전공자를 위한 이해할 수 있는 IT 지식 [3장 네트워크, 클라이언트, 서버 & 4장 API와 JSON] (0) | 2023.03.04 |