[새싹 프론트엔드] 함수와 HTML DOM

Ryu·2022년 11월 8일

새싹

목록 보기
14/36

함수

함수

함수란?

  • 목적을 가지고 작성된 코드 블록
  • 데이터를 전달받아 처리한 후, 결과를 돌려주는 코드 블록

함수의 구성

function 함수이름 (arg1, arg2, ... , argn) {
		프로그램 코드
		return 결과 리턴해줄 리턴문
}

함수 호출

  • 함수의 코드 실행 요청

대표적인 자바스크립트 함수

  • eval( ) 함수

    • 식을 계산하고 결과 리턴

      var res = eval('2 * 3 + 4 * 6'); // res == 30
  • parseInt( ) 함수

    • 문자열을 숫자로 바꿔주는 함수

      var l = parseInt("32"); // "32"를 10진수로 변환, 정수 32 리턴
      var n = parseInt("0x32"); // "0x32"를 16진수로 해석, 정수 50 리턴
  • inNaN( ) 함수

    • 숫자가 아님을 나타내는 함수 (Not A Number)

      isNaN(32) // false
isNaN(“32”) // false
isNaN(“hello”) // true
isNaN(NaN) // true
전역 함수명설명
eval(exp)exp의 자바스크립트 식을 계산하고 결과 리턴
parseInt(str)str 문자열을 10진 정수로 변환하여 리턴
parseFloat(str)str 문자열을 실수로 바꾸어서 리턴
isFinite(value)value가 숫자이면 true 리턴
isNaN(value)value가 숫자가 아니면 true 리턴

다이얼로그

자바스크립트 다이얼로그

  • 사용자 입력 및 메시지 출력
  • 종류
    • 프롬프트(prompt) 다이얼로그
    • 확인(confirm) 다이얼로그
    • 경고(alert) 다이얼로그

prompt( ) 함수

prompt('메시지', '디폴트 입력 값');
  • 사용자로부터 문자열을 입력받아 리턴
  • 디폴트 값은 생략 가능

confirm( ) 함수

confirm('메시지');
  • ‘메시지’를 출력하고 확인/취소(OK/CANCLE) 버튼을 가진 다이얼로그 출력
  • ‘확인’버튼을 누르면 true 리턴
  • ‘취소’버튼을 누르거나 강제로 닫으면 false 리턴

alert( ) 함수

alert('메시지');
  • 메시지와 함께 ‘확인’버튼을 가진 다이얼로그 출력
  • 메시지 전달

화살표 함수

화살표 함수

  • 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법
let 함수이름 = (arg1, arg2,..., argn) => {
		// 프로그램 코드
		// 결과를 리턴하는 return 문
}

매개변수가 없는 경우

let sum = () => {
		console.log("안녕하세요!");
}

sum();
  • 중괄호 생략 가능

    • 코드가 한 줄인 경우

      let sum = () => console.log(age);

매개변수가 1개인 경우

let sum = (age) => {
		console.log(age);
}

sum(10);
  • 소괄호, 중괄호 생략 가능

    • 소괄호: 매개변수가 한 개인 경우

    • 중괄호: 코드가 한 줄인 경우

      let sum = age => console.log(age);

매개변수가 2개 이상인 경우

let sum = (age, name) => {
		console.log(age, name);
}

sum(10, “정수아”);

코드가 여러 줄인 함수

  • 중괄호로 코드를 묶어줘야 함
  • return 키워드를 이용하여 결과값을 반환해야 함
    • 코드가 한 줄이면 return 생략 가능
let sum = (num1, num2) => {
		let result = num1 + num2;
		return result;
}

console.log(sum(10, 20));

코드가 한 줄인 함수

let sum = (num1, num2) => {
		return num1 + num2;
}

console.log(sum(10, 20));
  • 중괄호, return 키워드 생략 가능
let sum = (num1, num2) => num1 + num2;

console.log(sum(10, 20));

HTML DOM과 Document

HTML DOM

3가지 유형의 객체

  • 자바스크립트 코드는 브라우저로부터 3가지 유형의 객체를 제공받아 활용

HTML DOM

  • 간단하게 DOM이라고도 부름
  • 웹 페이지에 작성된 HTML 태그마다 객체(DOM 객체) 생성
  • 목적
    • HTML 태그가 출력된 모양이나 컨텐츠를 제어
    • DOM 객체를 통해 각 태그의 CSS 스타일 시트 접근 및 변경
    • HTML 태그에 의해 출력된 텍스트나 이미지 변경
  • DOM 트리
    • HTML 태그의 포함 관계에 따라 DOM 객체의 트리(tree) 생성
    • DOM 트리는 부모 자식 관계로 구성
  • DOM 객체
    • DOM 트리의 한 노드
    • HTML 태그 당 하나의 DOM 객체 생성
      • 각 노드는 DOM 노드 또는 DOM 엘리먼트라고 부름

DOM 트리의 특징

  • DOM 트리의 루트는 document 객체
  • DOM 객체의 종류는 HTML 태그 종류만큼 있음
    • HTML 태그 당 DOM 객체가 하나씩 생성
  • HTML 태그의 포함관계에 따라 DOM 트리에 부모 자식 관계로 구성

DOM 객체의 5가지 구성 요소

  • 프로퍼티(property)
    • HTML 태그의 속성(attribute) 반영
  • 메서드(method)
    • DOM 객체의 멤버 함수로서, HTML 태그 제어 가능
  • 컬렉션(collection)
    • 자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합적 정보
  • 이벤트 리스너(event listener)
    • HTML 태그에 작성된 이벤트 리스너 반영
    • 약 70여개의 이벤트 리스너를 가질 수 있음
  • CSS3 스타일
    • HTML 태그에 설정된 CSS3 스타일 시트 정보를 반영
    • DOM 객체의 style 프로퍼티를 통해 HTML 태그의 모양 제어 가능

DOM 객체의 프로퍼티와 DOM 객체 사이의 관계

  • DOM 객체들은 DOM 트리에서 부모, 자식, 형제 관계로 연결
  • 사용되는 프로퍼티 목록
    • parentElement 프로퍼티
      • 부모 객체
    • children 프로퍼티
      • 직계 자식들의 컬렉션
    • firstElementChild 프로퍼티
      • 첫 번째 직계 자식
    • lastElementChild 프로퍼티
      • 마지막 직계 자식
    • sibling
      • previousElementSibling 프로퍼티: 왼쪽 sibling 객체
      • nextElementSibling 프로퍼티: 오른쪽 sibling 객체

DOM 객체의 주요 공통 프로퍼티

기본프로퍼티설명
id태그의 id 속성 값
lang태그의 lang 속성 값
stylestyle 객체에 대한 참조
title태그의 title 속성 값
tagName태그 이름
innerHTML시작 태그와 종료 태그 사이의 HTML 텍스트
DOM 트리프로퍼티설명
childElementCount자식 DOM 객체 개수
firstElementChild첫 번째 자식 객체
lastElementChild마지막 자식 객체
nextElementSibling다음 형제 객체(오른쪽)
parentElement부모 객체
previousElementSibling이전 형제 객체(왼쪽)
크기와 위치프로퍼티설명
offsetHeight전체 높이
offsetWidth전체 폭
offsetLeft객체의 출력 위치, 수평
offsetTop객체의 출력 위치, 수직
메서드설명
addEventListener()새로운 이벤트 리스너 등록
appendChild()마지막 자식 뒤에 새로운 자식 추가
click()마우스를 클릭한 것과 동일한 작업 수행
focus()키 입력을 받을 수 있도록 포커스 지정
setAttribute()속성 추가
insertBefore()지정된 자식 앞에 새 자식 추가
querySelector()지정된 셀렉터와 일치하는 첫 번째 자식 리턴
removeChild()자식 삭제
replaceChild()자식 대체
removeEventListener()등록된 이벤트 리스너 제거

document 객체

  • document
    • HTML 문서 전체를 대변하는 객체
      • 프로퍼티
        • HTML 문서의 전반적인 속성 내포
      • 메서드
        • DOM 객체 검색, DOM 객체 생성, HTML 문서 전반적 제어
    • 모든 DOM 객체를 접근하는 경로의 시작점
    • DOM 트리의 최상위 객체
      • 브라우저는 HTML 문서 로드 전, document 객체를 먼저 생성
      • document 객체를 뿌리로 하여 DOM 트리 생성
  • document 객체 접근 방법
window.document 또는 document
  • document 객체는 DOM 객체가 아님

    • 연결된 스타일 시트가 없음

      // 오류. document에는 CSS3 스타일 시트가 연결되지 않음 
document.style.color = "red";

DOM 객체 다루기

  • DOM 객체 구분, id 속성
<p id="firstP">안녕하세요</p>
  • 페이지 내에 같은 HTML 태그가 여러 개 있는 경우, id 속성값으로 구분
  • id 속성 값은 HTML 페이지 내에서 유일한 값이어야 함
  • 동일한 id 값이 있는 경우
    • 화면 출력에는 문제가 없음
    • id 값을 이용해서 DOM 객체를 찾는 경우, 먼저 나온 태그가 항상 찾아지게 되는 문제가 있음
  • id 값으로 DOM 객체 찾기

    • document.getElementById()

      // id 값이 firstP인 DOM 객체 리턴
var p = document.getElementById("firstP");

// p 객체의 글자 색을 red로 변경 
p.style.color = "red";

    • 한 줄로도 작성 가능

      document.getElementById("firstP").style.color = “red”;
  • DOM 객체의 CSS3 스타일 동적 변경
    • style 객체는 HTML 태그의 CSS3 스타일 시트 정보를 가짐
    • style 객체를 이용하면 이미 출력된 HTML 태그의 모양 변경이 가능
    • DOM 객체의 style 프로퍼티로 접근
    • CSS3 스타일 프로퍼티는 다음과 같이 사용
      • background-color → backgroundColor
      • font-size → fontSize
<span id="mySpan" style="color:red">문장입니다.</span>
// id가 mySpan인 객체 찾기
var span = document.getElementById("mySpan");

// ‘문장입니다’의 글자 색을 green으로 변경 
span.style.color = "green";

// ‘문장입니다’의 폰트를 30px 크기로 변경 
span.style.fontSize = "30px";

innerHTML 프로퍼티

  • 시작태그와 종료 태그 사이에 들어있는 HTML 컨텐츠

  • innerHTML 프로퍼티를 이용하여 p /p 사이에 있는 HTML 텍스트를 읽을 수 있음
var p = document.getElementById("firstP"); 
var text = p.innerHTML;
  • innerHTML 프로퍼티 수정 → HTML 태그의 컨텐츠 변경
var p = document.getElementById("firstP");
p.innerHTML= “나의 <img src=‘puppy.jpg’>강아지입니다.”;
<p id="firstP" style="color:blue">
		나의 <img src=‘puppy.jpg’> 강아지입니다.
</p>

this

  • 객체 자신을 가리키는 자바스크립트 키워드
  • DOM 객체에서 객체 자신을 가리키는 용도로 사용
  • div 태그 자신의 배경을 orange 색으로 변경
<div onclick="this.style.backgroundColor='orange'">
  • 버튼이 클릭되면 자신의 배경색을 orange를 변경
<button onclick="this.style.backgroundColor='orange'">

DOM 트리에서 DOM 객체 찾기

  • 태그 이름으로 DOM 객체 찾기

    • document.getElementsByTagName()

      • 태그 이름이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴

      • 예) div 태그의 모든 DOM 객체 찾기

        var divTags = document.getElementsByTagName("div");
var n = divTags.length; // 웹 페이지에 있는 <div> 태그의 개수

  • class 속성으로 DOM 객체 찾기

    • document.getElementsByClassName()

      • 동일한 class 이름을 가진 모든 DOM 객체들을 찾아 컬렉션 리턴

        var plainClasses = document.getElementsByClassName("plain");

// 웹 페이지에 class=“plain” 속성을 가진 태그의 개수
var n = plainClasses.length;

  • css 선택자로 DOM 객체 찾기

    • document.querySelector()

      • 특정 id, class, name으로 제한하지 않고, css 선택자를 사용하여 DOM 객체를 찾음

      • 선택자에 해당하는 첫 번째 요소만 리턴

        // id 값으로 요소를 찾음
document.querySelector(#id)

// class 값으로 요소를 찾음
document.querySelector(.class)

  • css 선택자로 DOM 객체 찾기

    • document.querySelectorAll()

      • 특정 id, class, name으로 제한하지 않고, css 선택자를 사용하여 DOM 객체를 찾음

      • 동일한 css 선택자를 가진 모든 DOM 객체들을 찾아 NodeList로 리턴

      • 콤마(,)를 사용하여 여러 DOM 객체를 한 번에 가져올 수 있음

        querySelectorAll(“#id, .class”);

문서의 동적 구성

  • DOM 객체 동적 생성

    • document.createElement(’태그이름’)

    • 태그이름의 DOM 객체 생성

      var newDIV = document.createElement("div");

newDIV.innerHTML = "새로 생성된 DIV입니다.";

newDIV.setAttribute("id", "myDiv"); 
newDIV.style.backgroundColor = "yellow";
  • DOM 트리에 삽입
    // DOM 객체를 부모의 마지막 자식으로 삽입 
부모.appendChild(DOM객체);

// DOM 객체를 부모의 자식 객체 중 기준 자식 앞에 삽입 
부모.insertBefore(DOM객체, 기준자식);

    • div 태그를 p id='p' 태그의 마지막 자식으로 추가

      var p = document.getElementById("p"); 
p.appendChild(newDiv);
  • DOM 객체 삭제
    var remove = 부모.removeChild(삭제하고자_하는_자식객체);

    • 'id=myDiv' 인 DOM 객체를 DOM 트리에서 삭제

      var myDiv = document.getElementById("myDiv"); 
var parent = myDiv.parentElement;

// 부모에서 myDiv 객체 삭제 
parent.removeChild(myDiv);

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅
profile
Ryu
다음 포스트

[새싹 프론트엔드] 클래스

0개의 댓글