1. 자바스크립트의 용어
1) 식과 문
- 자바스크립트 언어의 큰 줄기는 식과 문이다.
① 식
-
표현식
-
연산식뿐만 아니라 실제 값과 함수를 실행하는 것도 식이라고 한다.
-> 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있다.
-
식은 변수에 저장된다.
② 문
-
명령
-
조건문이나 제어문 등이 해당된다.
-
문의 끝에 ; 을 붙여 구분한다.
2. 간단한 입출력 방법
1) alert( ) : 알림 창 출력하기
- 알림 창은 alert( )를 입력하고 ( ) 안에 " " 혹은 ' '와 함께 메시지를 넣어 준다.
alert("메시지")2) confirm( ) : 확인 창 출력하기
- 확인 창은 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있으며 선택한 결과에 맞게 프로그램이 동작한다.
confirm("메시지")3) prompt( ) : 프롬프트 창에서 입력받기
- 프롬프트 창은 텍스트 필드가 있는 작은 창으로 텍스트 필드 안에 간단한 메시지를 입력하여 그 내용을 가져와 프로그램에서 사용할 수 있다.
prompt("메시지")
prompt("메시지", "기본값")4) document.write( ) 문 : 웹 브라우저 화면에 출력을 담당한다.
-
단순히 브라우저 화면에서 결과를 확인하는 용도로 사용한다.
-
웹 문서에서 ( ) 안의 내용을 찾아 표시하는 명령문이다.
5) 이름 받아서 화면에 표시하기
<body>
<script>
var name = prompt("What is your name?");
document.write("<b><big>" + name + "</big></b>, Hello!");
</script>
</body>6) console.log( ) 문 : 콘솔 창에 출력한다.
-
콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간으로 소스 코드의 오류를 발견하거나 변수 값을 확인할 수 있다.
-
( ) 안에 변수나 텍스트를 넣을 수 있지만 HTML 태그는 사용할 수 없다.
<body>
<script>
var name = prompt("What is your name?");
console.log(name + ", Hello!");
</script>
</body>3. 자바스크립트 소스를 작성할 때 지켜야 할 규칙
1) 코드를 보기 좋게 들여쓰기한다.
2) ; 세미콜론으로 문장을 구분한다.
- ; 이 없어도 문장이 실행되지만 ; 은 자바스크립트에서 문장의 끝을 나타내며 문장과 문장을 구분하는 역할로 문장을 명확하게 표시해주어 소스를 디버깅하기 쉽게 한다.
3) 공백을 넣어 읽기 쉽게 작성한다.
- 공백이 있으면 디버깅을 할 때 가독성이 좋다.
4) 소스 규칙을 잘 설명하는 주석을 작성한다.
-
한 줄 주석 : // 붙이고 내용을 작성한다.
-
여러 줄 주석 : /* */ 사이에 주석 내용을 작성한다.
5) 식별자는 정해진 규칙을 지켜 작성한다.
- 식별자는 자바스크립트의 변수, 함수, 속성 등을 구별하려고 이름 붙인 특정 단어를 의미한다.
① 식별자의 첫 글자는 반드시 영문자나 _ 또는 $ 로 시작한다.
② 두 단어 이상의 단어가 모여 하나의 식별자를 만들 때 단어 사이에 공백을 둘 수 없으며 언더바로 연결하여 사용한다.
-> 언더바 없이 두 단어를 붙여 사용할 경우는 첫 번째 단어는 소문자로 시작하고 두 번째 단어는 대문자로 시작한다.
ex) doSomething / do_something
6) 예약어는 식별자로 사용할 수 없다.
ex) var
4. 자바스크립트의 기초
1) 변수
-
변수는 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터를 말한다.
-
변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여 주는데 이것을 변수 선언이라고 한다.
< 변수 선언 규칙 >
① 변수 이름은 영어 문자와 언더바, 숫자를 사용한다.
ex) now / now_24
② 영어 대소 문자를 구별하며 예약어는 변수 이름으로 쓸 수 없다.
③ 여러 단어를 연결한 변수 이름은 중간에 대문자를 쓴다.
④ 변수 이름은 의미 있게 작성한다.
- var를 한 번만 쓰고 여러 변수를 쉼표로 구분하여 같은 줄에 선언하여 한꺼번에 변수를 선언할 수 있다.
var currentYear, birthYear, age- = 를 사용하여 변수에 값을 저장할 수 있다.
2) 자료형
- 자바스크립트의 자료형은 숫자, 문자열 논리형과 같은 기본 유형과 배열, 객체를 다루는 복합 유형, undefined와 null 같은 특수 유형이 있다.
| 종류 | 설명 |
|---|---|
| 숫자형 | 따옴표 없이 숫자로만 표기한다. |
| 문자열 | ' ' 나 " "로 묶어서 나타내며 숫자를 따옴표로 묶으면 문자로 인식한다. |
| 논리형 | 참과 거짓이라는 2가지 값만 잇는 유형이며 소문자로 표기한다. |
| 배열 | 하나의 변수에 [ ]안에 여러 개의 값을 저장한디. |
| 객체 | 함수와 속성을 함께 포함한다. |
| undefined | 자료형이 지정되지 않았을 떄의 상태이다. |
| null | 값이 유효하지 않을 때의 상태이다. |
3) 연산자
-
산술 연산자 : 수학 계산을 할 때 사용하는 연산자이다.
-
할당 연산자 : 연산자 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자로 대입 연산자라고도 한다.
-
연결 연산자 : 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자이다.
-
비교 연산자 : 피연산자 2개의 값을 비교해서 참이나 거짓으로 결과를 반환한다.
-
논리 연산자 : true, false를 처리하는 연산자로 불리언 연산자라고도 한다.
5. 조건문
1) if, if~else 문
if(조건) {
조건 결과 값이 true일 때 실행할 명령
}if(조건) {
조건 결과 값이 true일 때 실행할 명령
} else {
조건 결과 값이 false일 때 실행할 명령
}
<body>
<script>
var userNumber = prompt("숫자를 입력하세요.");
if(userNumber !== null) { //입력값이 null이 아니면 if~else 문 실행
if(userNumber % 3 === 0)
alert("3의 배수입니다.");
else
alert("3의 배수가 아닙니다.");
}
else
alert("입력이 취소되었습니다."); //입력값이 null이면 실행
</script>
</body>2) switch 문
- 처리할 명령이 많을 때 사용한다.
switch(조건)
{
case 값1: 명령1
break
case 값2: 명령2
break
...
default: 명령n
}
<body>
<script>
var session = prompt("Choose favorite food. 1-chicken, 2-pizza, 3-hamburger");
switch(session) {
case "1" : document.write("<p> chicken is yummy </p>")
break;
case "2" : document.write("<p> pizza is nice </p>")
break;
case "3" : document.write("<p> hamburger is cool </p>")
break;
default: alert("wrong"); //1,2,3이 아닌 값을 입력받을 때 출력
}
</script>
</body>6. 반복문
1) for 문
for(초깃값; 조건; 증가식) {
실행할 명령
}
<body>
<script>
var i;
var sum = 0;
for(i = 1; i < 6; i++) {
sum += i;
}
document.write("1부터 5까지 더하면 " + sum);
</script>2) while 문과 do while 문
- while 문 : 조건이 true인 동안 명령을 반복한다.
while(조건){
실행할 명령
}- do while 문 : while 문과 다르게 명령을 실행한 후 조건을 체크하므로 조건이 false 이더라도 일단 명령을 최소한 한 번 실행한다.
do {
실행할 명령
} while(조건)
<body>
<h1> while 문을 사용한 팩토리얼 계산 </h1>
<script>
var n = prompt("숫자를 입력하세요.");
var msg = "";
if(n !== null) { // 취소 버츤을 누르지 않았는지 체크
var nFact = 1; // 결과 값
var i = 1; // 카운터
while(i <= n) {
nFact *= i;
i++;
}
msg = n + "! = " + nFact; // 결과 값 표시할 문자열
}
else
msg = "값을 입력하지 않았습니다."
document.write(msg); //결과 표시
</script>
</body>3) break 문과 continue 문
-
break 문 : 특정 조건에서 반복문을 멈추게 한다.
-
continue 문: 주어진 조건에 해당하는 값을 만나면 해당 반복문을 건너뛰고 반복문 맨 앞으로 되돌아가 다음 과정으로 넘어간다.
<body>
<h1> 짝수끼리 더하기 </h1>
<script>
var i;
var n = 10;
var sum = 0;
for(i = 1; i <= n; i++) {
if (i % 2 === 1) // i가 홀수라면 반복문을 건너뜀
continue
sum += i;
document.write(i + " ------ " + sum + "<br>");
}
</script>
</body>