JAVA SCRIPT
-
변수
변수(variable) - 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터
변수 작성 규칙 – 변수의 이름은 대소문자를 구별하여 작성, 영문자와 숫자, 언더스코어(_)만 사용하며 숫자로 시작할 수는 없다. -
자료형
기본유형
숫자형 – 따옴표 없이 숫자로만 표시 문자열 – 작은따옴표(‘ ’)나 큰따옴표(“ ”)로 묶어서 나타냄 논리형 – 참(true)과 거짓(false)이란 2가지 값만 가짐복합유형
배열 – 하나의 변수에 여러 개의 값을 저장 객체 – 함수와 속성들이 함게 포함된 자료형특수유형
undefined – 데이터 유형이 지정되지 않았을 때의 상태를 나타냄 null – 데이터 값이 유효하지 않은 상태를 나타냄 -
연산자
산술 연산자: +, -, , /, %, ++, --
할당 연산자: =, +=, -+, =, /=, %=
비교 연산자: ==, !=, ===, !==, <, <=, >, >=
논리 연산자: !, &&, ¦¦
조건 연산자: (조건) ? true일 때 실행할 명령 : false일 때 실행할 명령 -
조건문
if문
if(조건) {
조건이 true일 때 실행할 명령
}
if~else문
if(조건) {
조건이 true일 때 실행할 명령
} else {
조건이 false일 때 실행할 명령
}
switch문
switch(조건)
{
case 값1: 문장1
break
case 값2: 문장2
break
.....
default: 문장n
} -
반복문
for문
for(초깃값; 조건; 증가식) {
실행할 명령
}
while문
while(조건) {
실행할 명령
}
do~while문
do {
실행할 명령
} while(조건)
break문
break ---> 반복문이 끝나기 전에 조건에 따라 반복문을 빠져나옴
continue
continue ---> 반복 과정을 한 차례 건너뛰고 반복문의 맨 앞으로 돌아감 -
함수 선언하고 호출하기
function 함수명( ) {
명령
}
함수명( ) 또는 함수명(변수) -
함수 표현식
익명 함수: 이름 없이 선언한 함수
function(매개변수) { 명령 }
즉시 실행 함수: 함수를 정의하는 것과 동시에 실행
(function( ) { 명령 }( ));
(function(매개변수) { 명령 }(인수));
화살표 함수: ES6부터 지원하는 방법으로 화살표 기호(=>) 왼쪽에는 매개변수를, 오른쪽에는 함수를 작성함, 익명 함수일 경우에만 사용할 수 있음
(매개변수) => { 함수 내용 } -
var, let, const로 선언한 변수 비교
구분 var let const 스코프 함수 레벨 블록 레벨 블록 레벨 재할당 가능 가능 불가능 재선언 가능 불가능 불가능 -
이벤트와 이벤트 처리기
이벤트: 키보드에서 키를 누르거나 브라우저가 웹 페이지를 불러오는 것처럼 웹 브라우저나 사용자가 행하는 동작
이벤트 처리기: 웹 문서에서 이벤트가 발생할 때 그 이벤트에 반응해서 실행하는 함수
-
객체 알아보기
객체(object): 프로그램에서 인식할 수 있는 모든 대상
프로퍼티(property): 객체의 특징이나 속성
메서드(method): 객체에서 할 수 있는 동작객체 인스턴스 만들기
new 객체명 객체의 프로퍼티와 메서드 사용하기
객체명.프로퍼티 객체명.메서드
-
자바스크립트의 내장 객체
window – 브라우저 창이 열릴 때마다 하나씩 만들어짐, 브라우저를 창 안의 요소 중에서 최상위에 있음
document – 웹 페이지마다 하나씩 있으며 태그를 만나면 만들어짐,
HTML 문서의 정보가 담겨 있음
navigator – 현재 사용하는 브라우저의 정보가 들어 있음
history – 현재 창에서 사용자의 방문 기록을 저장
location – 현재 페이지의 URL 정보가 담겨 있음
screen – 현재 사용하는 화면 정보를 다루 -
DOM 트리의 노드
요소 노드: 모든 HTML 태그를 의미함
텍스트 노드: 태그의 텍스트 내용
속성 노드: 태그의 속성
주석 노드: 주석 -
DOM에 접근하기
getElementaryById(id): id명으로 접근
getElementaryByClassName(class): 클래스명으로 접근하며 여러 요소가 배열 형태로 저장
getElementaryByTagName(tag): 태그명으로 접근하며 여러 요소가 배열 형태로 저장
querySelector( ): id명이나 선택자를 사용해 접근함
querySelectorAll( ): 클래스명이나 태그명의 선택자를 사용해 접근함,
여러 노드가 노드 리스트 형태로 저장속성 가져오기 및 수정하기
getAttribute(속성) --> 태그에서 사용한 속성값을 가져옴
setAttribute(속성, 값) --> 태그의 속성을 특정한 값으로 지정이벤트 처리하기
요소.addEventListener(이벤트, 함수, 캡쳐 여부) CSS 속성에 접근하기
document.요소명.style.속성명
-
텍스트 노드를 사용하는 새로운 요소 추가하기
순서 메서드 설명 1 createElement( ) 새로운 요소 노드를 만듦 2 createTextNode( ) 새로운 텍스트 노드를 만듦 3 appendChild( ) 텍스트 노드를 요소 노드의 자식으로 연결 4 appendChild( ) 요소 노드를 DOM에 연결함 -
속성값이 있는 새로운 요소 추가하기
순서 메서드 설명 1 createElement( ) 새로운 요소 노드를 만듦 2 createAttribute( ) 새로운 속성 노드를 추가함 3 속성값 지정하기 속성값을 프로퍼티로 지정 4 setAttributeNode( ) 속성 노드를 요소 노드의 자식으로 연결 5 appendChild( ) 요소 노드를 DOM에 연결함 -
노드 삭제
parentNode 프로퍼티로 부모 노드를 찾아서 부모 노드에서 삭제함
부모노드.removeChild(자식노드)
