02-1 개발 환경 준비하기
크롬 브라우저 설치하기
비주얼 스튜디오 코드 설치하기: code.visualstudio.com
비주얼 스튜디오 코드 한글판으로 바꾸기
색 테마 변경하기
02-2 비주얼 스튜디오 코드와 인사하기
작업 폴더를 설정하고 파일 열어 보기
다른 파일과 비교하며 코드 작성하기(측면에서 열기 기능)
라이브 서버 확장 기능 사용하기: 라이브 서버는 수정한 소스를 웹 브라우저에서 바로 확인할 수 있게 해줌. 저장만 하면 수정한 소스 결과 웹 브라우저에 바로 반영됨
02-3 자바스크립트 소스 작성하고 실행하기
HTML 문서 안에 자바스크립트 소스 작성하기
- <script> 태그 안에 작성
- 보통 <script> 태그는 주로 HTML 문서 내용이 끝나는 </body> 태그 앞에 삽입함
외부 스크립트 파일 연결하기
- HTML 문서와 자바스크립트 소스를 분리
- 규모가 큰 프로젝트를 진행할 때는 분리하는 것이 효율적임
02-4 나의 첫 번째 자바스크립트 프로그램
인사하는 브라우저 만들기
자바 스크립트 프로그램은 어떻게 실행될까?
- 웹 브라우저에는 HTML 분석기(HTML Parser), CSS 분석기(CSS Parser), 자바스크립트 해석기(Javascript Interpreter)가 포함되어 있다. 각각의 분석기, 해석기는 작성한 소스의 첫번째줄부터 한 줄씩 내려가며 분석하고 해석한다.
- HTML 분석기와 CSS 분석기는 소스를 분석하여 웹 문서와 스타일 구조를 새로 생성한다. 하지만 자바스크립트는 소스를 바로 해석하여 실행하기 때문에 분석기가 아니라 해석기라 부른다.
① <!DOCUTYPE html>은 HTML 문서의 시작을 알리는 HTML 태그이다. <html> 태그 사이의 내용을 HTML 분석기로 HTML5 표준에 맞춰 해석하기 시작한다.
② HTML 분석기는 주로 HTML 태그의 순서와 포함 관계를 확인한다. 즉 HTML 분석기를 통해 크롬 브라우저의 <head> 태그 안에는 3개의 <meta> 태그와 <title>, <style> 태그가 있고 <body> 태그 안에는 <h1>, <script> 태그가 있다는 것을 알게 된다.
③ CSS 분석기는 HTML 분석기가 태그 분석을 끝낸 다음 <style> 태그 사이의 스타일 정보를 분석한다.
④ 마지막으로 자바스크립트 해석기가 <script> 태그 사이의 자바스크립트 소스를 해석한다.
02-5 자바스크립트의 입력과 출력
크롬 브라우저의 콘솔 도구와 함께 공부하기
사용자 입력값 받기 - prompt() 함수
알림 창으로 출력하기 - alert() 함수
웹 브라우저 화면에 출력하기 - document.write() 함수
- write() 함수가 document 객체에 포함되어 있기 때문에 document. 붙음
콘솔에 출력하기 - console.log() 함수
크롬 브라우저 콘솔로 오류 찾아내기
02-6 자바스크립트 소스를 작성할 때 지켜야 할 규칙
규칙1 - 대소문자를 구별하여 소스를 작성한다
규칙2 - 읽기 쉽게 들여 쓰는 습관을 들인다
규칙3 - 세미콜론으로 문장을 구분한다
규칙4 - 자바스크립트 소스에 메모를 하려면 주석을 사용한다
//한줄 주석
/*
여러 줄 주석
*/
규칙5 - 식별자는 정해진 규칙을 지켜 작성한다
- 식별자(Identifier)는 변수, 함수, 속성 등을 구별하기 위해 이름 붙여 준 특정 단어
- 식별자의 첫번째 글자는 문자, 밑줄(_), 달러 기호($) 중 하나로 시작해야 한다.
규칙6 - 예약어는 식별자로 사용할 수 없다
- 예약어(Keyword)는 자바스크립트에 먼저 등록된 요소
- 예: arguments, case, do, if 등
https://www.w3schools.com/js/js_reserved.asp
JavaScript Reserved Words
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=youmasan&logNo=130025032660
예약어(Reserved word) vs 키워드(Keyword)
출처: http://forum.java.sun.com/thread.jspa?threadID=741032&messageID=4249629 &n...
blog.naver.com
'JavaScript > Do it! - 자바스크립트 기본' 카테고리의 다른 글
| [Do it! - 자바스크립트 기본] 03. 변수와 자료형 그리고 연산자 (0) | 2023.03.10 |
|---|---|
| [Do it! - 자바스크립트 기본] 01. 안녕? 자바 스크립트! (0) | 2023.03.09 |
