Syntax Basic - wooyeonhui/Yeonny GitHub Wiki

Javascipt는 interactive 한 웹페이지 작성을 가능하게 한다. 예를 들면, 이벤트(e.g.버튼클릭, 웹페이지 로딩 완료 등)에 반응하여 HTML요소에 접근하고 HTML 요소를 조작할 수 있다. 정적인 HTML을 동적으로 변경할 수 있는 유일한 방법은 Javascript를 사용하는 것이다.

HTML은 웹페이지의 내용(Content)과 구조(Structure)을 담당한다. Javascript의 역할은 정적인 HTML을 동적으로 변경하는 것이다. 즉 HTML과 Javascript는 역할(관심사 Concern)이 다르므로 분리된 파일로 작성하는 것이 바람직하다.

브라우저는 실행순서

1. script 요소를 만나면 웹페이지의 파싱을 잠시 중단한다.
2. src 어트리뷰트에 정의된 자바스크립트 파일을 로드한 후 실핸한다.
3. 중단된 웹페이지의 파싱을 계속 진행한다.

body요소의 가장 아래에 스크립트를 위치시키는 것은 좋은 아이디어이다. HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.

이와같은 스크립트 로딩 지연으로 인한 병목 현상을 근본적으로 방지하기 위해 HTML5부터 script 태크에 async와 defer 어트리뷰트가 추가되었다.

<script async src="extern.js"></script>
<script defer src="extern.js"></script>

async와 defer 어트리뷰트는 웹페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다는 면에서는 동일하다. 하지만 스크립트의 실행 시점이 다르다. 

async
- 웹페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다. 스크립트는 다운로드 완료 직후 실행된다. IE9 이하 버전은 지원하지 않는다.

defer
- 웹페이지 파싱과 외부 스크립트 파일의 다운로드가 동시에 진행된다. 스크립트는 웹페이지 파싱 완료 직후 실행된다. IE9이하 버전에서 정상적으로 동작하지 않을 수 있다.

자바스크립트에서 data를 표시하는 방법은 아래와 같다.

Type               Code

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅗㅡㅡㅡㅡㅡㅡㅡㅡalert bod alert() HTML output document.write() HTML element innerHTML Browser console console.log()

프로그램(스크립트)은 컴퓨터(Client-side-Javascript의 경우, 엄밀히 말하면 웹 브라우저)에 의해 수행될 명령들의 집합이다. 각각의 명령을 statement(구문)이라 하며 statement가 실행되면 무슨 일인가가 일어나게 된다. 구문은 값(Value), 연산자(Operator), 표현식(Expression), 키워드(Keyword), 주석(Comment)으로 구성되며 세미콜론(;)으로 끝나야 한다.

구문은 code block({…})으로 그룹화할 수 있다. 그룹화의 목적은 함께 실행되져야 하는 구문을 정의하기 위함이다.(e.g. function)

구문들은 대개 위에서 아래로 순서대로 실행된다. 이러한 실행 순서는 조건문(if,switch)이나 반복문(while,for)의 사용으로 제어될 수 있으며(이를 Control Flow/흐름제어라 한다), 또는 함수 호출로 변경될 수 있다.

다른 언어와 달리 자바스크립트에서는 블록 유효범위(Block-level scope)를 생성하지 않는다. 함수 단위의 유효범위(Function-level scope)만이 생성된다.

표현식(Expression)은 값, 변수, 연산자의 조합이며 이 조합은 연산ㄴ을 통해 하나의 값을 만든다. 즉, 표현식은 하나의 값으로 평가될 수 있는 문장이다. 아래의 예에서 5*10은 50으로 평가(연산)된다.

Programming language에서 변수는 값(value)을 저장(할당), 참조하기 위해 사용된다. 한번 쓰고 버리는 값이 아닌 유지할 필요가 있는 값의 경우, 변수를 사용한다. 변수를 선언할 때 var keyword가 사용된다. 등호(=, equal sign)는 변수에 값을 할당하기 위해 사용된다. 아래의 예에서 x는 변수로 선언되었고 변수 x에는 정수값 6이 할당되었다.

<java>

String str = "Hello World";
<1>    <2>    <3>

위의 java예제에서 <1>은 데이터 타입, <@>는 변수명,<3>은 문자열 리터럴(literal)이다. 리터럴(literal)이란 변수 또는 상수에 저장되는 값 자체를 의미한다. 변수명은 메모리에 할당된 공간을 가리키는 식별자(identifier)이며 리터럴은 이 공간에 저장되는 값이다.

자바스크립트는 7가지 데이터 타입을 제공한다.

• • 기본 자료형(primitive data type)

• • • Boolean

• • • null

• • • undefined

• • • Number

• • • String

• • • Symbol(New in ECMAScript 6)

• • Object

자바스크립트는 자바와는 달리 값의 자료형에 따라 변수에 데이터 타입을 명시하지 않는다.

연산자(Operator)

- 연산자는 하나 혹은 그 이상의 값을 하나의 값으로 만들 때 사용한다.

키워드(keyword)는 수행되어져야할 동작을 규정한 것이다. 예를 들어 var keyword는 브라우저에게 새로운 변수를 생성할 것을 지시한다.

주석(Comment)

- 주석은 작성된 코드의 의미를 설명하기 위해 사용한다. 코드는 읽기(이해하기) 쉬워야 한다.(가독성이 좋아야 한다.)

한줄주석// 여러줄 /* */