1. bootstrap
2. 무료 템플릿 사이트
3. JavaScript
3-1. 자바스크립트
- 브라우저 내장 자바 스크립트 엔진을 이용해 실행
3-2. 바닐라 스크립트(Vanilla JS)
- 바닐라 자바스크립트란 플러그인이나, 라이브러리를 사용하지 않은 순수 자바스크립트를 의미한다.
- 바닐라 스크립트 = 자바 스크립트
3-3. 바닐라 스크립트의 장점과 중요성
- 아무것도 다운로드받지 않아도 되니 가볍고 빠르다.
3-4. javascript에 영향을 준 언어
3-5. javascript 버전
- ECMAScript
- 자바스크립트의 언어의 표준
4. 콘솔
- 웹 브라우저에서 화면에 표시되는 것과 관계없이 어떠한 배용을 출력하기 위한 공간
- 각 브라우저마다 콘솔 기능을 지원하고, 프로그램의 중간 단계의 변화 상태를 출력하여 프로그램 실행 과정을 추적할 수 있다.
5. 변수의 사용방법
5-1. 변수의 사용
- 변수를 사용하기 위해서는 "선언"과 "할당"의 두 영역으로 구분해야 한다.
- 변수의 선언
-> 선언은 var 키워드 뒤에 사용하고자 하는
변수의 이름을 지정하고 세미콜론(;)으로 한 라인을 종료한다.
var num;
var hello;
- 변수의 할당
-> 선언된 변수에 원하는 값을 대입하는 과정을
의미한다. 숫자형식이나 문자열 등을 사용할 수
있다.
num = 123;
hello = "안녕";
var num = 123;
var hello = "안녕";
5-2. 변수 이름을 정하는 규칙
- 변수 이름은 영문, 숫자, "_" 만 사용 가능하다
- 변수의 이름의 첫 글자는 숫자 불가능
- 대소문자 구별, 오타 주의
- myName, my_name
5-3. 변수의 종류
- javascript의 면수는 표현하는 값의 종류에 따라 형식이 구분된다.
- 이러한 변수의 종류를 데이터형(dataType)이라고 한다.
- Number : 정수, 실수
- String : 문자열. (" "), (' ') 둘 다 가능
- Boolean : 참, 거짓
- Object : 객체를 저장. 브라우저 제어, form 제어
- Null
- undefined : 정의되지 않음. 처음부터 변수가 선언만 되고 아무런 값도 할당되지 않은 상태. 이 상태의 변수는 어떠한 처리도 불가능
6. 연산자
6-1. 연산자 종류
- 대입연산자
- 사칙연산자
- 단항연산자 : +=, *= 등
- 증감연산자 : ++, --
- 비교연산자 : ==, != 등
- 논리연산자
6-2. 비교연산자
- ==, or, !=
- javascript 에서는 비슷한 것을 같은 것으로 간주하기도 한다.
예) 1 == "1" -> true
6-3. 일치연산자
- ===
- 좌항과 우항이 진짜 '정확'하게 같을 때 true, 다르면 false
- javascript, php는 비슷한 것을 같은 것으로 간주하기도 한다. 따라서 ===를 사용할 것을 권장
- !== : 정확하게 같지 않다는 의미
7. HTML에 결과 출력하기
- document.write(출력내용);
- HTML
- <body> 태그 안에 새로운 내용을 출력하고자 할 경우 자바스크립트에게 "쓰다"(write)라는 명령어를 전달한다.
document.write("<h1>출력내용</h1>");
- HTML 태그안에 출력되는 내용이므로, HTML 태그를 포함하여 출력할 수 있다.
8. 조건문
8-1. 조건문의 종류