[Javascript] 시간날 때 보는 Javascript 전체 요약

대상

자바스크립트 문법에 대해 처음부터 끝까지 알려드리는 글이 아닙니다.

이미 자바스크립트를 아는 사람이 어떤 문법이 있었는지, 어떤 요소들이 있었는지 한 번 되돌아보는 용도로 작성된 글입니다.

기본 문법

주석

-한 줄 주석

//

 

-여러 줄 주석

/*

*/

 

-HTML 주석

<!-- -->

 

변수

-변수 종류

멤버 변수(=전역 변수), 지역 변수

*변수에 대한 자료형은 존재하나, 별도 선언하지는 않음

 

-typeof()

변수, 함수 또는 특정 값의 자료형을 확인하는 연산자

 

자료형

-문자열(String)

함수 목록 : toUpperCase(), toLowerCase(), length, indexOf(), lastIndexOf(), charAt(), substring(), split()

 

-숫자(number)

함수 목록 : Math.abs(), Math.random(), Math.round(), Math.floor(), Math.ceil()

 

-Boolean

 

-Object

 

-undefined

변수나 함수로 선언되지 않은 식별자

 

-함수(function)

 

제어문

-조건문

if, if~else, if~else if~else, switch

 

-반복문

for, while, do ~while, for in

 

-분기문

continue, break

 

배열

선언

var 변수명 = [값1, 값2, 값3, ...];

var 변수명 = new Array();

var 변수명 = new Array(크기);

특징

• 다른 일반적인 프로그래밍 언어들과 달리, 하나의 배열 안에 여러개의 자료형이 존재할 수 있음

함수 목록

indexOf(값)

concat(배열명)

join()

reverse()

sort()

push(값)

pop()

shift() : 배열 맨 첫 번째 값 제거

splice(index, 제거 수, 추가 값) : index 위치에 존재하는 요소부터 n개를 제거하고, 값을 추가

toString()

unshift(값) : 배열 맨 첫 번째 값에 요소 추가

정렬

var arr = [1, 2, 3, 4, 5];
arr.sort(function(left, right) {
    return left-right; // 오름차순
    or
    return right-left; // 내림차순
};

함수

선언

function 함수명(매개변수) {

    return값;

}

 

var function1 = function 함수명(매개변수) {

    return값;

}

 

(function() {

})();

가변인자 함수

매개변수의 개수가 변하는 함수

Date 객체

선언

var date = new Date(); // 자동으로 현재 날짜와 시간

var date = new Date('Month Day');

var date = new Date('Month Day, Year');

var date = new Date('Month Day, Year Clock(시:분:초)');

메소드

setFullYear/getFullYear()

setMonth/getMonth()

setDate/getDate()

setDay/getDay()

setHours/getHours()

setMinutes/getMinutes()

setMilliseconds/getMilliseconds()

BOM(Browser Object Model)

window 객체

브라우저 기준 자바스크립트에서의 최상위 객체로, 모든 객체는 window 객체의 하위 객체

window.open

-기본 형식

window.open('주소', 'open 방식 또는 이름', '형태');

 

-형태 종류

width, height, location, menubar, resizable, status, toolbar

window 객체 메소드

moveBy(x, y), moveTo(x, y), resize(x, y), resizeTo(x, y), scrollBy(x, y), scrollTo(x, y), focus(), blur(), close()

 

-시간

setTimeout(함수, 시간(단위:ms)) : 지정된 시간 이후 함수를 1회 실행

setInterval(함수, 시간(단위:ms)) : 지정된 시간마다 함수를 반복하여 실행

clearTimeout(id) : setTimeout() 함수 실행 종료

clearInterval(id) : setInterval() 함수 중단

 

-window.onload

윈도우 객체 로드 완료시 onload에 설정되어 있는 함수를 실행시키는 속성

window.onload = function() {로직};

screen 객체

client 운영체제 화면에 대한 속성 값을 갖는 객체

 

-속성 목록

width, height, availWidth, availHeight, colorDepth, pixelDepth

Location 객체

URL과 관련된 객체로, 호스트명, 프로토콜 종류, 문서 위치 등의 정보를 갖는 객체이다.

 

-속성 목록

hash, host, hostname, href, origin, pathname, protocol, port, search

 

-메소드 목록

assign(address) : 입력된 주소의 페이지 로드

reload() : 현재 화면 다시 로드

replace(address) : 현 페이지를 새 페이지로 교체

Navigator 객체

브라우저 관련된 정보를 갖고 있는 객체

 

-속성 목록

appCodeName, appName, appVersion, platform, useAgent, geolocation, cookieEnabled, language, online, product

DOM(Document Object Model)

웹 브라우저가 HTML 페이지를 인식하여 자바스크립트에서 다룰 수 있도록 모든 노드 객체에 대해 접근 가능하도록 요소와 메소드로 정의해 놓은 것

용어

노드 : HTML 내 각각의 태그

요소 노드 : 태그 자체의 의미

텍스트 노드 : 태그에 기록된 문자

텍스트 노드가 있는 문서 객체

-메소드 목록

document.createElement(tag명)

document.createTextNode(content)

객체명.appendChild(node)

텍스트 노드 없는 문서 객체

-기본 사용 방법

객체명.속성 = 속성값

객체명.setAttribute(속성명, 속성값)

객체명.getAttribute(속성명)

객체명.appendChild(node)

객체 제거

document.removeChild(객체명)

Event

이벤트 설정 방법

-고전 Event Model

var event1 = document.getElementById('id명');
event1.onclick = function {
	~~~
};

-Inline Event Model

<p onclick='함수'></p>

-표준 Event Model

var event1 = document.getElementById('id명');
event1.addEventListener('click', function() {});

-이벤트 차단

이벤트객체.stopPropagation()

window.event.cancelBubble=true;