1. 자바스크립트 기능
- 웹 요소 제어
- 웹 애플리케이션 만듬
- 다양한 라이브러리 사용 가능
- 서버 개발
2. 스크립트 작성
- 내부 자바스크립트 사용 : <script> </script> 사이에 스크립트 소스 작성하고 </body> 앞에 위치
- 외부 스크립트 파일 연결해서 자바스크립트 작성 : js파일을 HTML파일에 연결
<script src = '외부 스크립트 파일 경로'></script>
3. 자바스크립트 기본 입출력 방법
- 타입 : 표현식(expression), 명령(statement)
- 입출력 방법
1) 알림창 출력
alert (메시지)
2) 확인창 출력
confirm (메시지)
3) 프롬프트 창에서 입력받기
prompt (메시지) 또는 prompt (메시지, 기본값)
4) 웹 브라우저 화면에 출력을 담당하는 document.write() 문
document.write()
5) 콘솔창에 출력하는 console.log() 문
console.log()
4. 변수
- 변수(variable) : 프로그램을 실행하는 동안 값이 여러번 달라질 수 있는 데이터
- 변수 작성 규칙
1) 변수의 이름은 대소문자 구별
2) 영문자와 숫자, 언더스코어(_)만 사용하며 숫자로 시작할 수 없음
- 예약어 :
var (var로 선언한 변수는 중복해서 선언(+초기화)가 가능.
이 경우, 마지막에 할당된 값이 변수에 저장.
단, 초기화 없이 선언만 한 경우엔 선언문 자체가 무시됨.(에러는 발생하지 않음)
기존에 선언해둔 변수의 존재를 까먹고, 값을 재할당하게 되는 등의 실수가 발생하기 쉬움.)
let (let 명령문은 블록 스코프의 범위를 가지는 지역 변수를 선언하며,
선언과 동시에 임의의 값으로 초기화할 수 있음. 중복선언 불가능, 재사용 가능),
const (중복선언 불가능. 상수에 사용하므로 재사용 불가능. )
5. 자료형
- 기본유형 : 숫자형, 문자열, 논리형
- 복합유형 : 배열(하나의 변수에 여러개의 값 저장), 객체(함수와 속성들이 함께 포함된 자료형)
- 특수유형 : undefined(데이터 유형이 지정되지 않았을 때의 상태), null(데이터 값이 유효하지 않은 상태)
6. 연산자
| 종류 | 설명 |
| 산술연산자 | +, -, *, /, %, ++, -- |
| 할당연산자 | =, +=, -=, *=, /=, %= |
| 비교연산자 | ==, !=, ===, !==, <, <=, >, >= |
| 논리연산자 | !, &&, || |
| 조건연산자 | (조건) ? true일때 실행할 명령 : false일때 실행할 명령 |
7. 조건문
- if 문
if (조건) { 조건이 true일때 실행할 명령 }
- if ~ else문
if (조건) { 조건이 true일때 실행할 명령 }
else { 조건이 false일때 실행할 명령 }
- witch문
switch (조건) { case 값1: 문장1 break
case 값2: 문장2 break
....
default: 문장n }
8. 반복문
- for 문
for (초깃값; 조건; 증가식) { 실행할 명령 }
- while 문
while (조건) { 실행할 명령 }
- do ~ while 문
do { 실행할 명령 } while (조건)
- break 문 : 반복문이 끝나기 전에 조건에 따라 반복문을 빠져나옴.
- continue 문 : 반복과정을 한차례 건너뛰고 반복문의 맨 앞으로 돌아감.
예제1. ) for문 2개로 구구단 3단까지 만들기
- 바깥 for문 (2단부터 순서대로 실행) : for(i = 2 ; i <= 9; i++)
- 안쪽 for문 (1~9를 순서대로 실행) : for(j = 1; j <=9; j++)
- 3단에서 반복문 빠져나옴 : if(i ===3) break;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>구구단 3단까지 출력하기</title>
</head>
<body>
<script>
var i, j ;
for(i = 2 ; i <= 9; i++) {
document.write("<div>");
document.write("<h3>"+ i + "단</h3>");
for(j = 1; j <=9; j++) {
document.write(i + " X " + j + " = " + i*j + "<br>");
}
document.write("</div>");
if(i ===3) break;
}
</script>
</body>
</html>
예제2.) continue문으로 홀수는 건너뛰고 짝수만 더하기
- i가 홀수라면 반복문 건너뜀 : if (i % 2 == 1) continue
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>1부터 10까지 짝수만 더하기</title>
</head>
<body>
<h1>짝수끼리 더하기</h1>
<script>
var i;
var n = 10;
var sum = 0;
for (i = 1; i <= n; i++) {
if (i % 2 == 1)
continue
sum += i;
document.write(i + " ------ " + sum + "<br>");
}
</script>
</body>
</html>
예제3.) 자리배치도 만들기
- parsInt () : 숫자형으로 변환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>자리배치도 만들기</title>
<style>
table, td {
border: 1px solid black;
border-collapse: collapse;
}
td {
padding: 5px;
font-size: 0.9em;
}
</style>
</head>
<body>
<script>
var memNum = prompt("입장객은 몇 명인가요?")
var colNum = prompt("한 줄에 몇 명씩 앉습니까?")
if (memNum % colNum === 0)
rowNum = parseInt(memNum / colNum);
else
rowNum = parseInt(memNum / colNum) + 1;
var i, j ;
document.write("<table>");
for (i=0; i < rowNum; i++) {
document.write("<tr>");
for (j=1; j <= colNum; j++) {
seatNo = i * colNum + j;
if (seatNo > memNum) break;
document.write("<td> 좌석" + seatNo + " </td>");
}
document.write("</tr>");
}
document.write("</table>")
</script>
</body>
</html>