JavaScript - DAY 4

NewTypeAsuka·2023년 4월 12일

JavaScript@

목록 보기

5/6

1. 함수

함수

소스코드의 집합으로 메소드, 모듈, 기능, 프로시저 등

JS에서는 function 자료형

함수는 인자/매개변수, 리턴 값을 가질 수 있음
function 함수명(매개변수){ // 함수 선언
	// 함수 정의
}
함수명(매개변수); // 함수 호출
function clickCount(btn){
    btn.innerText = Number(btn.innerText) + 1;
    if(btn.innerText > 20) btn.innerText = 0;
}

익명 함수

이름이 없는 함수

이름이 없는 함수이기 때문에 마음대로 원하는 곳에서 호출하는 것이 불가

이벤트 핸들러 또는 함수를 변수에 저장하는 경우에 많이 사용
function(매개변수){ // 함수 선언
	// 함수 정의
}
const t2 = document.getElementById("target2");
const b2 = document.getElementById("btn2");
b2.addEventListener("click", function(){
    t2.style.backgroundColor = "red";
});

즉시 실행 함수

함수가 정의되자마자 바로 실행되는 함수

익명 함수의 한 종류
(일반 함수를 선언, 정의하자마자 호출하는 것과 같음)

즉시 실행 함수 사용 이유
1) 일반 함수 선언, 정의, 호출하는 것보다 속도가 더 빠름
2) 전역 변수와 변수명이 중복되는 상황을 제거하기 위해 사용
(function(){ // 함수 선언
	// 함수 정의
})();
(function(){
    console.log("즉시 실행 함수");
})();

화살표 함수

기본 함수를 화살표 기호를 이용해 간단하게 표현하는 함수

// 1) 기본 형태
() => {}
// 2) 매개 변수 1개
e => {}
// 3) 매개 변수 0개 또는 2개 이상
(a, b) => {}
// 4) 함수 정의 부분에 return 구문만 있을 경우
() => result
// 5) 함수 정의 부분에 return 구문만 있지만 자료형이 object인 경우
() => {return arr;}

1) 기본 형태

// 화살표 함수
// 익명 함수: function(){}
// 화살표 함수: () => {}
document.querySelector('#button1').addEventListener("click", () => {
    alert("화살표 함수의 기본 형태");
});

2) 매개 변수 1개
3) 매개 변수 0개 또는 2개 이상

// 2) 매개 변수 1개
// 익명 함수: function(e){}
// 화살표 함수: (e) => {} / e => {}
// 3) 매개 변수 0개 또는 2개 이상이면 소괄호 생략 불가능
document.querySelector('#button2').addEventListener("click", e => {
    e.target.style.backgroundColor = "pink";
})

4) 함수 정의 부분에 return 구문만 있을 경우
5) 함수 정의 부분에 return 구문만 있지만 자료형이 object인 경우

// 4) 함수 정의 부분에 return 구문만 있을 경우
document.querySelector('#button4').addEventListener("click", () => {
    printConsole(function(num){return num * 10;}); // 익명 함수
    printConsole(num => num * 100); // 화살표 함수
    // 5) 함수 정의 부분에 return 구문만 있지만 자료형이 object인 경우
    const temp = {"price": 100, "name":'사탕'};
    console.log(temp);
    console.log(typeof temp);
    printConsole(num => {return {"price": 100, "name":'사탕'}}) // {return} 생략 불가
    printConsole(num => temp) // object를 변수에 저장해서 return하는 것은 가능
});
function printConsole(fn){
    // 매개 변수로 함수를 받아와 수행 결과를 콘솔에 출력
    console.log(fn(2));
};

화살표 함수에서 this를 작성하면 이벤트가 발생한 요소가 아닌
창 자체를 나타내는 window 객체 반환되는 문제점이 하나 있다.

// 화살표 함수 사용 시 this 문제점
button6.addEventListener("click", function(){
    console.log(this);
    // 이벤트 핸들러로 지정된 익명 함수의 this == 이벤트가 발생한 요소
    this.style.fontSize = "25px";
});
button6.addEventListener("click", () => {
    console.log(this);
    // 화살표 함수에서 this를 작성하면 이벤트가 발생한 요소가 아닌
    // 창 자체를 나타내는 window 객체 반환
    this.style.border = "3px soild pink";
});

매개변수와 return

매개변수:
호출하는 코드와 호출되는 함수를 연결해주는 변수
선언이 안 된 매개변수는 undefined로 자동 설정

return:
함수를 호출한 위치로 돌아가라는 의미
return 값 미지정 시 undefined 자료형으로 반환

2. window 내장 객체

window 객체

브라우저 창 자체를 나타내는 객체

JS의 최상위 객체(== Java의 Object 객체)

DOM, BOM으로 분류

DOM(Document Object Model): document

BOM(Browser Object Model): location, history, screen, navigator 등
DOM, BOM 외에도 window 자체 기능도 존재한다.
(alert(), confirm(), prompt() 등)

window가 가지고 있는 함수는 창 자체에 종속되어 동작하기 때문에 window 객체를 생략하고 호출할 수 있다.

주요 window 내장 함수

window.setTimeout():
지연시간이 지난 후 함수가 수행되게 만드는 window 내장 함수
// window.setTimeout(함수, 지연시간(ms 단위))
document.getElementById("testBtn").addEventListener("click", () => {
    console.log("0초");
    window.setTimeout(() => {
        console.log("1초");
    }, 1000);
});
window.setInterval():
지연시간이 지날 때마다 함수가 수행되게 만드는 window 내장 함수
// window.setInterval(함수, 지연시간(ms단위))
const loadingTime = document.getElementById("loadingTime");
window.setInterval(() => {
    loadingTime.innerText = Number(loadingTime.innerText) + 1;
}, 1000);
window.clearInterval():
매개 변수로 전달받은 setInterval을 지우는 window 내장 함수
document.getElementById("stop").addEventListener("click", () => {
    clearInterval(time);
});
window.open():
팝업창을 띄우는 window 내장 함수

팝업창 이름
사용자 임의 지정: 새 창 이름 지정
_black: 새 탭 또는 새 창(기본값)
_self: 현재 탭 또는 현재 창
_parent: 부모 페이지
_top: 최상위 페이지

팝업창 특성(옵션)
popup: 최소한의 팝업창 사용
width 또는 innerWidth: 스크롤 막대를 포함하여 콘텐츠 영역의 너비를 지정
height 또는 innerHeight: 스크롤 막대를 포함하여 콘텐츠 영역의 높이를 지정
left 또는 screenX: 새 창이 생성될 사용자의 운영 체제에서 정의한 대로 작업 영역의 왼쪽에서 픽셀 단위로 거리를 지정
top 또는 screenY: 새 창이 생성될 사용자의 운영 체제에서 정의한 대로 작업 영역의 위쪽에서 픽셀 단위로 거리를 지정
window.open("URL", "팝업창 이름", "팝업창 특성(옵션)")
openPopup1.addEventListener("click", () => {
    // 새 탭에서 열기
    window.open("07_함수.html");
});
openPopup2.addEventListener("click", () => {
    // 새 창에서 최소한의 팝업창 요건을 가진 상태로 열기
    window.open("07_함수.html", "_blank", "popup");
});
openPopup3.addEventListener("click", () => {
    // 새 창의 크기를 지정한 상태로 열기
    window.open("07_함수.html", "_blank", "width=400, height=600, top=100, left=100");
});
window.close():
현재창을 닫는 window 내장 함수

3. 노드(node)

노드

HTML에 있는 태그를 구조화(트리)하였을 때 각각의 태그가 노드

노트 탐색 방법

1) 부모 노드 탐색: parentNode

// #li1의 부모 노드 배경색 변경
li1.parentNode.style.backgroundColor = "yellowgreen";

2) 첫번째 자식 노드 탐색: firstChild

// #test의 첫번째 자식 탐색: firstChild
console.log(document.getElementById("test").firstChild);

3) 마지막 자식 노드 탐색: lastChild

// #test의 마지막 자식 탐색: lastChild
console.log(document.getElementById("test").lastChild);

4) 원하는 위치(인덱스)의 자식 노드 탐색: childNodes[index]

// 중간에 존재하는 자식 노드 탐색: childNodes[index]
console.log(list[11]);
list[11].append("append(노드): 마지막에 덧붙이는 것");

5) 이전 형제 노드 탐색: previousSibling

// 이전 형제 노드 탐색: previousSibling
console.log(list[8].previousSibling);

6) 다음 형제 노드 탐색: nextSibling

// 다음 형제 노드 탐색: nextSibling
console.log(list[8].nextSibling);

탐색 구문은 연달아서 작성 가능하다.

console.log(list[11].firstChild.nextSibling); // 두번째 자식 탐색
console.log(list[11].firstChild.nextSibling.nextSibling); // 세번째 자식 탐색
console.log(list[11].firstChild.nextSibling.nextSibling.nextSibling);
// 탐색 범위를 넘어가면 null 반환

노드와 요소의 차이

노드(node):
태그(== 요소), 주석, 내용, 속성 등 모든 것을 표현

요소(element):
노드 중 태그(== 요소)
요소 탐색 방법

자식 요소만 모두 탐색: children

부모 요소 탐색: parentElement

첫번째 자식 요소 탐색: firstElementChild

마지막 자식 요소 탐색: lastElementChild

이전 형제 요소 탐색: previousElementSibling

다음 형제 요소 탐색: nextElementSibling
// #test의 모든 자식 요소 반환
const list = test.children;
console.log(list);
// 첫번째 자식 요소 탐색: firstElementChild
test.firstElementChild.style.backgroundColor = "red";
// 마지막 자식 요소 탐색: lastElementChild
test.lastElementChild.style.backgroundColor = "yellowgreen";
// 두번째 자식 요소 탐색: child[index]
list[1].style.backgroundColor = "skyblue";

innerHTML과 DOM 요소 생성(createElement)의 차이

innerHTML을 요소 생성 원리
1) 특정요소 내부의 내용을 모두 삭제, 수정
2) 특정요소.innerHTML = "태그가 포함된 문자열";
특정 요소 내부에 일단은 단순 문자열 형태 내용 추가
3) HTMLParser를 이용해서 태그를 해석
(내부 내용을 다 지우고 새로운 내용을 추가해서 처음부터 다시 해석)

innerHTML의 문제점
1) 해석 속도가 느림
2) 기존 요소에 존재하던 효과/이벤트가 모두 사라져 버리는 문제가 있음

createElement의 요소 생성 원리:
특정요소의 내용만을 삭제, 수정

결론적으로 createElement를 사용하는 것이 더 안전하고 빠르다.