유혁스쿨

여러 변수를 한꺼번에 모아 사용하는 자료형에는 배열이 있다. 하지만 자바스크립트 기본 자료형은 숫자, 문자, 불, 객체, 함수, undefined로 배열이라는 자료형은 없다. alert(typeof([])); 코드를 실행하면 object임을 확인할 수 있다. 이 때 출력된 object가 바로 '객체' 이다. 객체 개요 var array = ['사과', '바나나', '망고', '딸기']; 배열에는 '인덱스'와 '요소'가 있다. 각각의 배열요소를 사용하려면 다음과 같이 배열 이름뒤에 인덱스로 접근한다. var array = ['사과', '바나나', '망고', '딸기']; array[0] // 사과 array[2] // 망고 배열은 객체를 기반으로 만들어졌으므로 배열과 객체는 상당히 유사하다. 다른점이 있다면..

짧은 조건문 논리 연산자의 특성을 조건문으로 사용한다. 논리합 조건문 true || ____ 논리합 연산자는 좌변이 참이면 우변을 실행하지 않는다. true || alert('우변 실행'); false || alert('우변 실행'); 첫 번째 문장은 좌변이 참이므로 우변을 무시하지만 두번째 문장은 좌변이 거짓이므로 우변이 참인지 거짓인지 검사하고 그 과정에서 경고창을 출력한다. 논리합 연산자를 사용한 짧은 조건문을 정리하면 다음과 같다. (불 표현식) || (불 표현식이 거짓일 때 실행 할 문장) function (e){ var event = e || window.event ; } 위 코드는 e가 정의되어있는 데이터면 변수에 e를 저장하고 e가 정의되어 있지 않은 undefined 상태이면 window..

개요 자바스크립트 JavaScript 는 웹 브라우저에서 많이 사용하는 프로그래밍 언어이다. 자바스크립트는 본래 넷스케이프의 브랜든 아이히 Brendan Eich라는 사람에 의해 '모카' 라는 이름으로 만들어졌다. '모카'는 곧 라이브 스크립트라는 이름으로 개발됐고, 이후 넷스케이프가 썬 마이크로시스템과 함께 라이브 스크립트에 자바스크립트라는 이름을 붙이고 본격적으로 발전하기 시작한다 썬 마이크로 시스템에서 개발한 자바 프로그래밍 언어와 이름을 같게 하는 마케팅 조약을 채결했으며, 이름은 비슷하지만 완전히 다른 프로그래밍 언어이다. 활용 초기의 웹 페이지는 변화되지 않는 정적인 글자들로만 꾸며졌었다. 웹은 하이퍼링크라는매개체로 웹 문서가 연결된 하나의 거대한 책에 불과했다. 하지만 자바스크립트가 나오고 ..

인라인 이벤트 모델이나 고전 이벤트 모델은 한 번에 하나의 이벤트 리스너만을 가질 수 있다. 이러한 DOM Level 0 이벤트 모델들의 단점을 보완하려고 만들어진 이벤트 모델이 DOM Level 2 이벤트 모델이다. DOM Level 2 이벤트 모델에는 인터넷 익스플로러 이벤트모델과 표준 이벤트 모델이 있다. DOM Level 2 ˙인터넷 익스플로러 이벤트 모델 ˙attachEvent(eventProperty, eventListener) : 이벤트 연결 ˙detachEvent(eventProperty, eventListener) : 이벤트 연결 제거 ˙표준 이벤트 모델 표준 이벤트 모델은 웹 표준을 만드는 W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델이다. 한번에 여러 가지의 이벤트 리..

인라인 이벤트 모델은 HTML페이지의 가장 기본적인 이벤트 연결 방법이다. Click 위 코드와 같이 인라인 이벤트 모델은 HTML태그 요소노드에 이벤트 속성을 추가하여 구현한다. 이벤트 속성에는 다음과 같이 자바스크립트 코드를 작성하여 실행할 수 있다. Click 이벤트 속성에 여러 줄의 자바스크립트 코드도 입력이 가능하다. Click 하지만 이벤트 속성에 여러줄의 코드를 사용하면 지저분해져 가독성이 떨어진다. 이 경우 스크립트 코드로 함수를 구현한 뒤 함수를 호출하는 방식을 많이 사용한다. Click 위 코드와 같이 이벤트를 호출할 때 매개변수를 넣었다. 이벤트 객체를 전달하는 방법이다. 이러한 이벤트 객체를 PointerEvent 라고 한다. 클릭하여 이벤트가 호출되면 콘솔창에 이벤트 객체에 대한 ..

이벤트 이벤트는 키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른것에 영향을 미치는 것을 의미한다. 자바스크립트에는 다음과 같은 이벤트가 있다. ˙ 마우스 이벤트 ˙ 키보드 이벤트 ˙ HTML 프레임 이벤트 ˙ HTML 입력 양식 이벤트 ˙ 유저 인터페이스 이벤트 ˙ 구조 변화 이벤트 ˙ 터치 이벤트 이벤트는 애플리케이션 사용자가 발생시킬 수도 있고 애플리케이션이 스스로 발생시킬 수도 있다. 이전 포스팅들 에서 DOM객체를 관리하고 컨트롤할 때 다음과같은 코드를 사용해왔다. window.onload = function () { }; window객체의 onload속성에 함수자료형을 할당하는 것을 "이벤트를 연결한다" 라고 한다. 이때 load를 이벤트 이름 또는 이벤트 타입 (EventType) ..

HTML5와 함게 출현한 자바스크립트 표준안을 ECMAScript5 라고 부른다 ECMAScript5는 기존의 자바스크립트에서 객체 관련 부분을 많이 보완했다. ECMAScript5는 인터넷 익스플로러 8 이하에서는 지원하지 않으므로 익스플로러 9 이상이나 그 외의 브라우저에서 테스트 해야한다. 확인메서드 Array.isArray( ) : 배열인지 확인한다. typeof 키워드로 Array객체의 자료형을 확인하면 문자열 'object'가 나오므로 Array객체임을 확인하려면 constructor( ) 메서드로 자료형을 비교하는것을 응용해야 한다. var array = new Array(52,273,103,57,32); if (array.constructor == Array) { console.log(ar..

배열과 Array객체 배열 배열이란 여러 개의 변수를 한꺼번에 다룰 수 있는 자료형이다. 자바스크립트에는 문자열, 숫자, 불, 함수, 객체, 정의 되지 않은 undefined 자료형 까지 총 6가지 자료형이 있다. 배열은 object 객체 중 하나이다. 자바에서는 배열을 {중괄호}로 생성하지만 자바스크립트에서는 배열을 [대괄호]로 생성한다. 대괄호 안에 쉼표로 구분해 자료를 입력한다. 배열 안에 입력된 값을 배열요소 element라고 부른다. var array = [273, 32, 103, 57, 52]; 위와 같이 배열을 선언하며 다섯 개의 요소가 있는 배열이다. 배열에는 어떠한 종류의 자료형도 배열 요소가 될 수 있다. var array = [273, 'String', true, function(){..

자바스크립트에서 문자열 데이터는 다음과같이 변수에 저장하여 사용한다. var string = 'string문자열'; var stringLiteral1 = 'Hello world'; var stringLiteral2 = 'Hello world'; console.log('리터럴문자열1 == 리터럴문자열2 : ',stringLiteral1 == stringLiteral2); console.log('타입 체크 : ',typeof stringLiteral1, typeof stringLiteral2) console.log('리터럴문자열1 === 리터럴문자열2 : ',stringLiteral1 === stringLiteral2); var stringLiteral = 'Hello world'; var stringCon..

자바스크립트에서 숫자 데이터는 다음과같이 변수에 저장하여 사용한다. var number = 273; var numberLiteral1 = 273; var numberLiteral2 = 273; console.log('리터럴숫자1 == 리터럴숫자2 : ',numberLiteral1 == numberLiteral2); console.log('타입 체크 : ',typeof numberLiteral1, typeof numberLiteral2) console.log('리터럴숫자1 === 리터럴숫자2 : ',numberLiteral1 === numberLiteral2); var numberLiteral = 273; var numberConstructor = new Number(273); console.log('리터..

object 객체는 자바스크립트의 최상위 객체이다. 자바스크립트의 가장 기본적인 내장 객체는 Object 객체로 정확히는 Object 생성자 함수로 만든 인스턴스지만 간단하게 Object 객체라고 표현한다. Object객체 생성 var object = {}; var object = new Object(); Object객체의 메서드 constructor( ) : 객체의 생성자 함수를 나타낸다. hasOwnProperty( ) : 객체가 name속성이 있는지 확인한다. isPrototypeOf( ) : 객체가 object의 프로토타입인지 검사한다. propertyIsEnumerable( ) : 반복문으로 열거할 수 있는지 확인한다. toLocaleString( ) : 객체를 호스트 환경에 맞는 언어의 문자열..

기본 자료형은 자바스크립트의 여섯가지 자료형 중 숫자, 문자열, 불 세가지 자료형을 의미한다. 기본 자료형과 객체의 특성이 다르므로 차이를 둔다. var primitiveNumber = 273; var objectNumber = new Number(273); var output = ''; output += typeof primitiveNumber + ' : ' + primitiveNumber + '\n'; output += typeof objectNumber + ' : ' + objectNumber; console.log(output); 자료형은 분명 다르지만 기본 자료형과 객체는 같은 속성과 메서드를 사용할 수 있다. (숫자를 기준으로 숫자 기본자료형과 Number객체 자료형 / 문자열 자료형과 Str..

문서객체의 Style속성을 사용하면 해당 문서객체의 스타일을 변경할 수 있다. Header 코드에서 보는바와 같이 header 문서객체에 .마침표를 통해style속성에 접근 후 다시 .마침표를 통해 변경할 css속성을 입력하여 변경할 값을 입력한다. 이때 주의할 점은 스타일시트에서 사용하던 스타일 속성 이름을 그대로 입력하면 안된다. background-color 의 형태와 같이 특수기호 " - " 는 자바스크립트에서 식별자로 사용할 수 없으므로 다음과같이 입력하면 에러를 출력한다 header.style.background-color = 'red'; 따라서 " - " 로 연결된 속성은 다음과같이 특수기호에 의해 끊겨진 단어를 기준으로 이어오는 단어의 첫글자를 대문자로 작성한다. header.style.b..

웹 페이지에서 이미 존재하는 HTML 태그를 자바스크립트로 가져오는 방법에는 다음과 같은 메서드를 통해 가져온다. getElementById(id) : 태그의 id속성이 id와 일치하는 문서 객체를 가져온다. getElementsByName(name) : 태그의 name속성이 name과 일치하는 문서의 객체를 배열로 가져온다. getElementsByTagName(tagName) : tagName과 일치하는 문서 객체를 배열로 가져온다. getElementById(id) Header Header 위와 같이 구성된 body태그에서 id속성을 갖는 태그만 가져온다. window.onload = function() { var header1 = document.getElementById('header-1'); ..