[Do It!] 02. 자바스크립트 기초 문법 [변수]
자바스크립트 선언문
선언문 : 자바스크립트 코드를 작성할 영역을 선언하는 것
<script>라는 태그로 선언문이 시작된 곳부터 </script>라는 태그로 종료된 곳을 스크립트 영역이라고 부름
<script>
자바스크립트 코드;
</script>
선언문은 <head> 태그 영역, <body> 태그 영역에 선언하면 됨
대부분 <head> 태그 영역에 선언함
document
문서 객체
write()
문서 출력 메서드. 데이터를 문서에 출력할 때 사용
자바스크립트 주석 처리
선언문 안에서 코드가 아닌 설명글을 넣고 싶을 때 주석 처리
한줄 주석일 때 '//한줄설명글'
여러 줄 주석일 때 '/*여러 줄 설명글*/'
//한 줄 설명글
/*
설명글이 여러 줄인 경우
이렇게 처리함
*/
내부 스크립트 외부로 분리하기
내부에 작성된 자바스크립트는 마지막에 외부로 분리하는 작업을 해야함
자바스크립트 소스도 찾기 쉽고, 누군가가 소스를 손상시킬 염려도 없음
외부로 분리하는 주된 목적은 프로젝트 관리를 원활하게 하기 위함
외부 자바스크립트 연동 코드로 파일을 연결하는 기본형
<script src="JS파일 경로"></script>
코드 입력 시 주의사항
1. 자바스크립트는 대소문자를 구분하여 작성함
| 날짜 객체 생성 : New date(); (X) |
| 날짜 객체 생성 : new date(); (O) |
2.코드 한 줄을 작성한 후 세미콜론(;)을 쓰는 것이 좋음
세미 콜론을 쓰지 않으면 한줄에 2개의 코드를 작성할 경우 오류가 발생함
| document.write("hi") document.write("bye") |
| document.write("hi"); document.write("bye"); |
3. 코드를 작성할 때 한 줄에 한 문장만 작성하는 것이 가독성을 위해 좋음
4. 문자형 데이터를 작성할 때 큰따옴표(" ")와 작은따옴표(' ')의 겹침 오류를 주의함
| 큰 따옴표 겹침 오류 document.write("책에 "자바스크립트는 대소문자를 구분해야 합니다"라고 나와 있다."); |
| 잘된 예 document.write('책에 "자바스크립트는 대소문자를 구분해야 합니다"라고 나와 있다.'); document.write("책에 \"자바스크립트는 대소문자를 구분해야 합니다\"라고 나와 있다."); |
5. 코드를 작성할 때 중괄호{} 또는 소괄호()의 짝이 맞아야 함
| document.write("welcome!"; (X) |
| document.write("welcome!"); (O) |
변수
변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간.
데이터를 담을 수 있는 그릇.
변수에는 데이터가 오직 한 개만 저장됨
새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워짐
변수에 저장할 수 있는 데이터 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), 빈(Null) 데이터
변수 선언
변수를 선언할 때 var 키워드를 변수명 앞에 붙임
변수명 한글 사용X, 영문O, 숫자O, 일부 특수문자(_, $) O
var box;
box = 100;변수에는 하나의 값만 넣을 수 있음. 변수에 값을 두 번 넣으면 새로운 데이터가 저장됨
<script>
var box;
box = 100;
box = 30;
document.write(box);
</script>
변수에 저장할 수 있는 자료형
1. 문자형
var s = "javascript";
var num = "100";
var tag = "<h1> String </h1>"
2. 숫자형
var s = 100;
var t = Number("500"); //"500" -> 500
3. 논리형
Boolean()메서드는 숫자0, null, undefined, 빈 문자(" ")를 제외한 모든 데이터에 대해 true를 반환
var s = true;
var t = 10 >= 100; //false
var k = Boolean("hello") //true
var m = Boolean(0) //false
var n = Boolean("홍길동") //true
4. null & undefined 데이터
undefined는 변수 s에 값이 등록되기 전의 기본값
null은 변수에 저장된 값이 null인 경우를 가리킴
null은 변수에 저장된 데이터를 비우고자 할 때 사용하는 값
var s; //undefined
var t = hello;
t = null;
5. typeof
typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용
var num = 100;
typeof num; //number
변수 선언 시 주의 사항
1. 변수명 첫 글자로는$, _(언더바), 영문자만 가능
| var 1num = 10; (X) |
| var $num = 10; (O) |
2. 변수명 첫 글자 다음은 영문자, 숫자, $, _(언더바)만 포함
| var 100num = 10; (X) |
| var num100 = 10; (O) |
3. 변수명으로 예약어를 사용할 수 없음
예약어는 이미 자바스크립트에서 사용 중인 단어
| var document = 10; (X) |
| var num = 10; (O) |
4. 변수명을 지을 때는 의미를 부여해 작성하는 것이 좋음
| var num = "hello"; (X) |
| var num = "10"; (O) |
5. 변수명을 사용할 때 대소문자를 구분해야 함
| var num = 10; document.write(Num) (X) |
| var num = 10; document.write(num) (O) |