본문 바로가기
Study

[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - Javascript

작은곰- 2022. 3. 10. 20:00
반응형

자바스크립트와 첫 만남

자바스크립트로 무엇을 할까

  • 다양한 라이브러리를 사용할 수 있다.
    • D3.js - 정보시각화 라이브러리.
    • tensorflow.js - 머신러닝 라이브러리.
    • React, Angular, Vue
  • 서버를 구성하고 서버용 프로그램을 만들 수 있다.
    • node.js - 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크.

간단한 입출력 방법

  • alert, confirm, prompt
  • document.write
  • console.log

자바스크립트 스타일 가이드

자바스크립트 소스를 작성할 때 지켜야 할 기본 규칙

  • 코드를 보기 좋게 들여쓴다.
    • Tab 키나 스페이스바를 눌러 2칸이나 4칸을 들여씀
    • 최근에는 공백 2칸 들여쓰기를 많이 사용함
  • 세미콜론으로 문장을 구분한다.
    • 세미콜론을 붙일 것을 권장함.

이벤트와 이벤트 처리기

이벤트 처리기

  • 이벤트가 발생했을 때 처리하는 함수
  • 이벤트 핸들러(event handler)라고도 함

 

객체 알아보기

객체(object)란

  • 프로그램에서 인식할 수 있는 모든 대상
  • 데이터를 저장하고 처리하는 기본 단위

자바스크립트 객체

  • 문서 객체 모델(DOM): 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
  • 브라우저 관련 객체: 웹 브라우저 정보를 객체로 관리
  • 내장 객체: 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음.

💡 HTML5부터는 자바스크립트 객체가 HTML에도 모두 포함되어 있다.

사용자 정의 객체

  • 필요할 때마다 사용자가 직접 만드는 객체

객체의 인스턴스 만들기

  • 객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용.
  • 인스턴스: 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것.
  • var new = new Date() // Date 인스턴스 만들고 변수에 저장하기

프로퍼티(property)와 메서드(method)

  • 프로퍼티: 객체의 특징이나 속성
  • 메서드: 객체에서 할 수 있는 동작

 

표준 내장 객체

  • 표준 내장 객체 목록
  • Date 객체
    • getMonth() : 0~11 사이의 숫자로 월을 표시.
    • getDate(): 1~31 사이의 숫자로 일을 표시합니다.
    • getDay(): 0~6 사이의 숫자로 요일을 표시합니다. (0이 일요일, 6이 토요일)
    • getTime(): 1970년 1월 1일 자정 이후의 시간을 밀리초(1/1000초)로 표시합니다.
      • 특정일로 부터 오늘까지 지난 시간 구하기 
      •     var now = new Date("2020-10-15");       // 오늘 날짜를 객체로 지정
    var firstDay = new Date("2020-10-01");   // 시작 날짜를 객체로 지정

    var toNow = now.getTime();         // 오늘까지 지난 시간(밀리 초)
    var toFirst = firstDay.getTime();  // 첫날까지 지난 시간(밀리 초) 
    var passedTime = toNow - toFirst;  // 첫날부터 오늘까지 지난 시간(밀리 초)

    passedTime = Math.round(passedTime/(1000*60*60*24));  // 밀리 초를 일 수로 계산하고 반올림

 

브라우저와 관련된 객체

  • window: 브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있습니다.
  • document: 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어집니다. HTML 문서의 정보가 담겨 있습니다.
  • navigator: 현재 사용하는 브라우저의 정보가 들어 있습니다.
  • history: 현재 창에서 사용자의 방문 기록을 저장합니다.
  • location: 현재 페이지의 URL 정보가 담겨 있습니다.
  • screen: 현재 사용하는 화면 정보를 다룹니다.

 

DOM에서 노드 추가, 삭제하기

텍스트 노드를 사용하는 새로운 요소 추가하기

  • 요소 노드 만들기
    • document.createElement(노드명)
  • 텍스트 노드 만들기
    • document.createTextNode(텍스트)
  • 자식 노드 연결하기
    • 부모노드.appendChild(자식노드)

 

속성 값이 있는 새로운 요소 추가하기

  • 요소 노드 만들기
    • document.createElement(노드명)
  • 속성 노드 만들기
    • document.createAttribute(속성명)
  • 속성 노드 연결하기
    • 요소명.setAttributeNode(속성노드)
    • ex) const srcNode = document.createAttribute("src"); srcNode.value = "images/dom.jpg";
  • 자식 노드 연결하기
    • 부모노드.appendChild(자식노드)

 

노드 삭제하기

노드를 삭제할 때는 부모 노드에서 자식 노드를 삭제해야 한다. → 노드를 삭제하려면 부모 노드부터 찾아야 한다.

 

  • parentNode 프로퍼티
    • 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환
    • 노드.parentNode
  • removeChild() 메서드
    • 자식 노드 삭제
    • 부모노드.removeChild(자식노드)

 

 

 

Reference

 

 

 

 

 

반응형
저작자표시

'Study' 카테고리의 다른 글

[NGINX HTTP SERVER] 2장 기본 엔진엑스 구성  (0) 2023.01.18
[NGINX HTTP SERVER] 1장 엔진엑스 설치  (0) 2022.11.03
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 반응형 웹과 미디어 쿼리  (1) 2022.02.10
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 트랜지션과 애니메이션  (0) 2022.02.10
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - CSS 고급 선택자  (0) 2022.02.10

'Study' Related Articles

티스토리툴바