Where the light is

다음은 선언적 함수와 익명 함수를 혼용하여 사용하여 개발할 때 실수할 수 있는 부분이다. 선언적 함수부터 읽기 때문에, 선언적 함수가 선언되고 그 함수 이름에 익명 함수 블록을 대입하기 때문에 익명 함수가 호출하게 된다. DOCTYPE html> var func = function(){ alert('익명 함수'); }; function func(){ alert('선언적 함수'); }; func(); alert 결과 : 익명 함수

- 익명 함수 함수는 코드의 집합을 나타내는 자료형이다. 함수는 다음 형태로 만든다. var func = function(){ }; 위의 function() { }은 형태는 함수이지만 이름이 없으므로 익명 함수라고 부른다. 이름이 없으므로 변수에 넣어 사용해야 하기 때문에 스택 영역에 저장된다. 익명 함수를 사용할 때 주의해야할 점은 변수를 선언하기 전에 사용할 수 없다는 것이다. 예를 들어 다음과 같은 코드는 에러를 발생시킨다. func(); var func = function() { alert('함수 A') }; var func = function() { alert('함수 B') }; - 선언적 함수 선언적 함수는 다음과 같은 형태로 만든다. function() myFunc(){ }; 위의 익명함수와..

- Document Object Model DOM(Document Object Model)이란 HTML, XHTML, 혹은 XML 문서들을 각 노드가 그 문서 부분인 트리 자료구조로 취급하는 모델을 말한다. 웹 페이지가 올라가면, 브라우저는 페이지에 대한 DOM을 만든다. 이 object 모델로 자바스크립트는 동적 HTML을 만들 수 있게 된다. 다음은 자바스크립트가 할 수 있는 일이다. 1) 페이지 안에 있는 모든 HTML 요소들과 속성들을 더하거나, 변화 시키거나, 삭제할 수 있다. 2) 페이지 안에 모든 CSS 스타일들을 변경 시킬 수 있다. 3) 페이지 안에 있는 모든 이벤트들에 대하여 반응할 수 있다. 4) 페이지 안에 새로운 이벤트들을 만들 수 있다. - document 개체 HTML 문서가 ..

DOCTYPE html> table, th, td { border: 1px solid black; padding: 5px; border-collapse: collapse; } window.onload = function() { var result = ''; for(var i = 0; i < 10 ; i++){ result += ''; for(var j = 2; j < 10; j++){ result += ''; if(i == 0){ result += j + '단'; } else { result += j + ' * ' + i + ' = ' + (j * i); } result += '' } result += ''; } result += ''; document.body.innerHTML = result; };

2단 3단 4단 5단 6단 7단 8단 9단 2 * 1 = 2 3 * 1 = 3 4 * 1 = 4 5 * 1 = 5 6 * 1 = 6 7 * 1 = 7 8 * 1 = 8 9 * 1 = 9 2 * 2 = 4 3 * 2 = 6 4 * 2 = 8 5 * 2 = 10 6 * 2 = 12 7 * 2 = 14 8 * 2 = 16 9 * 2 = 18 2 * 3 = 6 3 * 3 = 9 4 * 3 = 12 5 * 3 = 15 6 * 3 = 18 7 * 3 = 21 8 * 3 = 24 9 * 3 = 27 2 * 4 = 8 3 * 4 = 12 4 * 4 = 16 5 * 4 = 20 6 * 4 = 24 7 * 4 = 28 8 * 4 = 32 9 * 4 = 36 2 * 5 = 10 3 * 5 = 15 4 * 5 = 20 5 *..

[반복문] - 배열 자바스크립트의 배열은 특이한 점이 있는데, 이는 다음과 같다. 1) 여러 타입의 변수를 무제한적으로 담을 수 있다. 2) 배열의 크기는 동적으로 변경할 수 있다. 배열은 객체 중의 하나이며, 대괄호 ([ ])로 생성한다. 대괄호를 사용하고 쉼표로 구분해 자료를 입력한다. 배열 안에 입력된 값을 배열 요소라고 부른다. 또한 배열을 출력하면 배열 요소를 모두 순서대로 출력한다. DOCTYPE html> var array = [1, 'string', true, function() {}, {}, [1,1]]; alert(array); - for in 반복문 자바스크립트는 배열이나 객체를 더욱 쉽게 다룰 수 있는 for in 반목문을 제공한다. 그 예제는 다음과 같다. i는 0부터 배열의 길이..

[조건문] - if와 switch를 모두 사용할 수 있다. 조건문에서 다만, false를 뜻하는 다섯 가지를 제외하고 모두 true로 처리됨을 주의해야 한다. DOCTYPE html> if('자바스크립트'){ alert('true입니다.'); } alert 결과 : true입니다. - switch문 : c, java에서의 switch문에서는 특정 자료형이 어떤 값이냐에 따라서 조건이 분기되는 것이다. 하지만 자바스크립트에서는 다음과 같이 조건문 자체로 사용하여 if문을 대체할 수 있다. 다음은 그 예이다. DOCTYPE html> var date = new Date(); var hour = date.getHours(); switch (true) { case hour < 11: alert('아침 먹을 시간..

- 일치 연산자 자동 자료형 변환으로 인해 일치 연산자를 사용 시 개발자가 의도치 않는 결과가 발생할 수 있다. 따라서 이를 해결하기 위해 자료형과 값이 일치한지 파악해주는 ===와 자료형과 값이 다른 지 판단해주는 !==를 사용할 수 있다. DOCTYPE html> alert('' == false); alert('' == 0); alert(0 == false); alert('273' == 273); alert('' === false); alert('' === 0); alert(0 === false); alert('273' === 273); alert 결과 : true true true true false false false false

- 자바스크립트에서의 false 자바스크립트 불 자료형에서 false를 의미하는 것은 다음 다섯가지이다. 특히 NaN과 undefined는 비교 연산자의 피연산자로 사용될 수 없다. 1) 0 2) NaN 3) ‘’ 4) null 5) undefined !! 연산자는 true, false가 아닌 피연산자를 명시적인 true, false로 변환해줄 때 사용될 수 있다. DOCTYPE html> alert(Boolean(0)); alert(Boolean(NaN)); alert(Boolean('')); alert(!!null); alert(!!undefined); alert 결과 : false false false false false

- NaN (Not A Number) NaN은 숫자인데 자바스크립트에서 표현할 수 없는 숫자를 의미한다. 먼저 위에서 * 1을 활용하여 형변환하는 것도 문자열이 숫자로 변환될 수 있는 숫자 문자열인 경우이다. 따라서 문자열과 덧셈을 제외한 사칙 연산은 그 문자열이 숫자로 변환될 수 없는 경우 NaN(데이터 타입은 숫자인데, 표현할 수 없는 숫자)을 리턴한다. DOCTYPE html> alert(1 * '10'); alert(10 * 'a'); alert(typeof(10 * 'a')); alert 결과 : 10 NaN number