Where the light is

- 숫자와 문자열 자료형 변환 숫자와 문자열 덧셈 연산시 문자열이 우선되기 때문에, 숫자가 문자열로 형변환되어 문자열이 이어진다. 하지만 덧셈을 제외한 사칙 연산자는 숫자가 우선하기 때문에, 문자열이 숫자로 형변환된다. DOCTYPE html> alert(typeof('1' + 2)); alert(typeof(2 + '1')); alert(typeof('10' * 1)); alert(typeof(1 - '10')); var input = confirm('수락하시겠습니까?'); alert(typeof(input * 1); alert 결과 : string string number number number 기본 자료형으로 생성자를 활용하여 형변환할 수 있다. 기본 자료형은 생성자가 없기 때문에 자바의 Wrap..

- 입력 1) prompt() 함수 prompt()는 문자열을 사용자로부터 입력 받을 때 사용하는 함수이다. prompt()의 syntax는 다음과 같다. String prompt ([String message], [String defaultValue]) 첫 번째 매개변수는 스크립트 프롬프트에 출력되는 메시지며, 두 번째 매개변수는 사용자가 입력을 하지 않았을 때 기본으로 입력되는 메시지이다. 다음은 사용자로부터 나이를 입력하는 prompt( ) 함수이다. 두 번째 매개변수를 20, 즉 number로 지정했지만, 웹에서 읽어오는 기본 데이터 타입은 string이기 때문에 string 20이 return된다. DOCTYPE html> prompt var input = prompt('나이를 입력하세요.', ..

- 변수의 특성 자바스크립트는 기존에 존재하는 변수를 재선언할 수 있다. 다음은 기존에 사용하던 식별자를 재선언하여 오류를 발생 시키는 예제이다. 크롬 브라우저에서 ctrl + shift + i로 개발자 도구를 실행 시켜 해당 오류를 확인할 수 있다. DOCTYPE html> 변수 var alert = 'red alert'; alert(alert); Hello.html:8 Uncaught TypeError: alert is not a function - 자료형 검사 자바스크립트는 string, number, boolean, undefined의 데이터 타입이 있다. 이 자료형들은 모두 소문자로 시작하는데, 대문자는 각 데이터 타입의 생성자이므로 이를 주의해야 한다. 자료형을 확인하려면 다음과 같이 type..

아래의 예제에서 onload가 이벤트 속성으로, 이벤트 리스너이다. 또한 이런 이벤트가 발생했을 때 이를 처리하는 부분을 이벤트 핸들러라고 한다. 아래의 예제에서 function() { }; 부분이 이벤트 핸들러이다. 1) 이벤트는 특정 시점에서 발생하는 움직임이다. 2) 모든 이벤트는 특정 객체에 속하며, 그 객체는 이벤트 핸들러와 이벤트를 연결하는 이벤트 속성(이벤트 리스너)을 제공해야 한다. 이 이벤트 속성은 ‘on + 이벤트 이름’과 같이 명명된다. DOCTYPE html> 변수 window.onload = function(){ var list = ''; list += ''; list += ' Hello'; list += ' JavaScript..!'; list += ''; document.bod..

다음은 html의 body에 script로 html 코드를 주입한 예제이다. document는 자바스크립트 빌트인 객체인데, 이는 브라우저에서 현재 보여지는 html 문서를 나타낸 객체이다. 그런데 head부분의 html 문서를 파싱할 때 document의 요소 객체인 body가 생성되기 전이므로, head 시점에서 script로 해당 body의 컨텐츠를 나타내는 속성인 innerHTML에 주입하면 오류가 발생(아무것도 표현이 되지 않는다)하는 것이다. DOCTYPE html> 변수 var list = ''; list += ''; list += ' Hello'; list += ' JavaScript..!'; list += ''; document.body.innerHTML = list; 이를 해결하기 위해..

스크립트 태그는 헤드, 바디에서 사용될 수 있다. 스크립트가 어느 위치에서 사용 되느냐는 스크립트 코드가 실행되는 시점을 결정한다. 다음 예제는 헤드에 있는 스크립트와 바디에 있는 스크립트의 차이를 나타낸 예제이다. 첫 번째 예제는 head에 script가 있어서, body 내용이 아직 읽혀지지 않는다. 두 번째 예제는 태그와 사이에 있기 때문에, 아직 이 보여지지 않는다. DOCTYPE html> script examples alert(new Date().toLocaleString()); Hello World... DOCTYPE html> script examples Hello World... alert(new Date().toLocaleString());

- 변수 변수는 값을 저장할 때 사용하는 식별자이다. 이름은 변수지만 숫자 뿐 아니라 모든 자료형을 저장할 수 있다. 변수를 사용하려면 변수 선언과 값 할당과 같은 두 단계가 필요하다. 만약 값을 할당하지 않으면 변수에 데이터 타입이 지정하지 않게 되는 것이므로, undefined 타입이다. 자바스크립트는 동적 타입 언어이기 때문에, 변수의 데이터 타입이 계속 변하게 된다. 따라서 변수의 타입은 할당 할 때마다 변한다. DOCTYPE html> 변수 var str alert(typeof str); str = 'Hello'; alert(typeof str); str = 10; alert(typeof str); alert 결과 : undefined string number 변수는 선언 시 var라는 키워드를..

다음은 자바스크립트 논리 연산자의 특이한 내부 동작이다. 100 || 200의 경우 100은 0이 아니기 때문에 true이다. 따라서 두 번째 피연산자의 결과와 상관 없이 true이기 때문에 연산을 더 이상하지 않고, 첫 번째 피연산자를 return한다. 즉 연산이 더 이상할 필요가 없으면 하지 않고, 논리 연산의 결과로 피연산자를 반환한다. 그 이유는 논리 연산은 결과를 true, false로 변환하지 않고 값에 의한 평가를 하기 때문이다. DOCTYPE html> 논리 연산자 테스트 alert(100 || 200); alert(0 || 100); alert(100 && 200); alert(0 && 200); alert 결과 : 100, 100, 200, 0 다음은 잘못된 비교 연산자 사용의 예이다...

- 불 자료형 자바스크립트는 비교 연산자로 문자열도 비교할 수 있다. 문자열은 국어 사전의 앞 쪽에 있을수록 값이 작다. 또한 자바스크립트는 불끼리 크기 비교도 가능하다. 자바스크립트는 true를 1로, false를 0으로 변환한 뒤에 비교 연산한다. 즉 자바스크립트는 Semiboolean을 사용한다. DOCTYPE html> Insert title here alert(true + 2); alert 결과 : 3 이렇게 자바스크립트는 암시적 형 변환을 정말 많이 사용하기에 개발자는 항상 주의해야 한다. 불 자료형은 불끼리 논리 연산이 가능하다. 다음은 자바스크립트에서 제공하는 세 가지의 논리 연산자이다. 연산자 설명 ! 논리 부정 연산자 && 논리곱 연산자 || 논리합 연산자

- 주석 주석은 프로그램을 진행하는 데 전혀 영향을 주지 않고 프로그램 코드를 설명하는 데 사용한다. HTML의 주속은 로 문자열을 감싸 생성한다. 반면 자바스크립트는 Single Line Comment의 경우 //, Multi Line Commnet는 /* */로 여러 줄의 주석을 표현한다. - 문자열 자바스크립트는 두 가지 방법으로 문자열을 만들 수 있다. 첫 번째 방법은 작은 따옴표를 사용하는 것이고, 두 번째 방법은 큰 따옴표를 사용하는 것이다. 내부적으로 구별을 하지 않기 때문에 둘 다 사용할 수 있지만, 일관되게 사용해야 한다. 또한 일반적으로 작은 따옴표를 사용한다. - 숫자 정수와 유리수의 구분 없이 숫자는 모두 숫자이다. 자바스크립트는 기본 자료형 3개 (문자열, 숫자, 불리언), 참조 ..