Hello Javascript (3)

Javascript Syntax Basic

구문 (Statement)

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

var x = 5;

var y = 6;

var z = x + y;

console.log(z); // 11

• 구문은 코드 블록(code block, {...})으로 그룹화할 수 있다. 그룹화의 목적은 함께 실행되어져야 하는 구문을 정의하기 위함이다.

// 함수

function myFunction(x, y) {

return x + y;

}

// if 문

if (x > 0) {

// do something

}

// for 문

for (var i = 0; i < 10; i++) {

// do something

}

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

var time = 10;

var greeting;

if (time < 10) {

greeting = 'Good morning';

} else if (time < 20) {

greeting = 'Good day';

} else {

greeting = 'Good evening';

}

console.log(greeting);

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

표현식 (Expression)

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

5 * 10 // 50

'Hello' + ' ' + 'world' // 'Hello world'

변수 (Variable)

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

var x; // 변수의 선언과 초기화

x = 6; // 정수값의 할당

값 (Value)

String str = "Hello World";

< 1 > < 2 > < 3 >

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

// literal : Number

10.50

1001

// literal : String

'Hello'

"World"

// literal : Object

{ name: 'Lee', gender: 'male' }

// literal : Array

['Black', 'Gray', 'White'];

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

1. Boolean
2. null
3. undefiend
4. number
5. string
6. symbol
7. object

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

// Boolean

var bool = true;

// null

var foo = null;

// undefined

var bar;

// Number

var num1 = 1001;

var num2 = 10.50;

// String

var string1 = 'Hello';

var string2 = "World";

// Object

var obj = { name: 'Lee', gender: 'male' };

// Array

var array = ['Black', 'Gray', 'White'];

연산자 (Operator)

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

// 대입 연산자

var color = 'red';

// 산술 연산자

var area = 5 * 4;

// 문자열 연산자

var str = 'Hi! ' + 'My name is Lee';

// 비교 연산자

var foo = 3 > 5; // false

// 논리 연산자

var bar = (5 > 3) && (2 < 4); // true

// 인스턴스 생성 연산자

var today = new Date();

키워드 (keyword)

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

// 변수의 선언

var x = 5 + 6;

// 함수의 선언

function foo(arg) {

// 함수 종료 및 값의 반환

return ++arg;

}

var i = 0;

// 반복문

while (1) {

if (i > 5) {

// 반복문 탈출

break;

}

console.log(i);

i++;

}

주석 (Comment)

• 주석은 작성된 코드의 의미를 설명하기 위해 사용한다. 코드는 읽기(이해하기) 쉬워야한다.(가독성이 좋아야 한다)
• 여러분이 작성한 코드를 다른 누군가가 읽는다면 "이게 무슨코드야?"라고 생각하는 순간이 있기 마련이다. 여러분이 해야할 일은 바로 그런 부분에 주석을 다는 것이다.(읽기좋은 코드가 좋은 코드이다)
• 한줄 주석은 // 다음에 작성하며 여러줄 주석은 /* 과 */의 사이에 작성한다. 주석은 해석기(parser)가 무시하며 실행되지 않는다.

/*

주석(Comment)은 작성된 코드의 의미를 설명하기 위해 사용한다.

코드는 읽기(이해하기) 쉬워야 한다.

*/

// 주석(Comment)은 작성된 코드의 의미를 설명하기 위해 사용한다.

document.getElementById('myH').innerHTML = 'My Header';

// 코드는 읽기(이해하기) 쉬워야 한다.

document.getElementById('myP').innerHTML = 'My Paragraph.';

참고자료

• http://poiemaweb.com/js-syntax-basics