동원 예비군을 갔다왔다...
3일이란 공백동안 블로그 못쓴게 아쉽구나..

DOM

DOM은 하나의 객체로서 자바스크립트가 HTML태그에 접근할 수 있게 해주게함

넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식

문서 객체가 생성되는 방식?

1. 정적으로 문서 객체를 생성: 웹 브라우저가 HTML페이지에 적혀있는 태그를 읽으면 생성
2. 동적으로 문서를 생성: 원래 HTML 페이지에 없던 문서객체를 Javascript를 이용하여 생성

document

HTML 문서를 객체화 한 것.

바인딩

• getElementById()

script 태그의 위치 헤더 안, 바디 맨 밑 → script태그를 만나면 객체 생성을 멈추고 script 파일을 실행한다.

외부 자바스크립트 장점

• HTML과 코드를 분리
• 유지보수 관리 용이
• 캐시된 JS 파일은 페이지 로드 속도를 높힐 수 있음

캐시란?

웹 캐시는 사용자가 웹 페이지를 방문할 때 웹 브라우저에 의해 자동으로 처리되며 네트워크 대역폭을 줄이고 웹 페이지의 로딩 속도를 향상시키는데 도움을 줍니다.

웹 브라우저는 서버에서 웹페이지나 리소스를 요청ㅅ#

Javascript

변수와 상수

변수 : 데이터 값을 넣을 수 있는 저장소, 바뀔 수 있는 값을 의미

상수 : 값이 변하지 않는 변수

• let - 재할당 가능, 재선언 불가능
• const - 재할당 불가능, 재선언 불가능

자바스크립트 Type

• Number : let length = 16
• String : let color = “yellow”
• Boolean : let x = true
• Object : let person = {first : “John”, last : “Doe”}
• Array Object : const cars = [”a”, ”b”, ”c”];
• Data Object : new Date(”2022-03-25”);

자바스크립트 함수

<h1 id="hello"></h1>
    <script>
        const hello = document.getElementById("hello");
        const myF =  (p1, p2) => p1 * p2;
        console.log(myF(3,4))
        let values = myF(3,4)
        hello.innerHTML = values;
    </script>

자바스크립트 객체 정의

객체 리터럴을 사용해서 JS 객체를 정의 및 생성 합니다.

this

this는 호출된 스코프의 상위 객체를 의미합니다.

this.firstName은 this의 firstName 속성을 의미한다.

this.firstName 은 person의 firstName 속성을 의미한다.

• 내부의 메서드를 화살표 함수로 정의했을 때, this라는 상위 객체를 찾지 못하는 오류가 있음!

const person =  {
            firstName : "Sehan",
            lastName : "Kim",
            age : 27,
            eyeColor: "brown",
            fullName : function () {
                return this.firstName + " " + this.lastName
            }
        }

const person =  {
            firstName : "Sehan",
            lastName : "Kim",
            age : 27,
            eyeColor: "brown",
        fullName() {
            return this.firstName + " " + this.lastName;
        }
	}

this 란 어떻게 쓰이나

this는 현재 실행 중인 함수의 컨텍스트를 참조하는 특별한 키워드입니다. this는 실행 컨텍스트에 따라 동적으로 결정되며, 함수가 호출될때마다 다른값을 가질 수 있습니다.

• 함수 호출 → 일반적인 함수 호출에서 this는 전역 객체인 window를 가리킵니다. "use strict" 모드에서는 this가 undefined가 됩니다.
• 메서드 호출 → 객체의 메서드 내에서 this는 해당 메서드를 호출한 객체를 가리킵니다.
• 생성자 함수 호출 → 생성자 함수 내에서 this는 생성되는 새로운 인스턴스를 가리킵니다.
• call() 또는 apply() 로 호출 → 메서드를 사용하여 함수를 호출할 때 매걔변수를 지정할 수 도 있음!
• function.bind()란 → 상황에 따라 달라지는 this 키워드의 역할을 하나로 고정시키기 위한 함수.

템플릿 리터럴

템플릿 리터럴은 따옴표 대신 백틱을 사용하여 문자열을 정의합니다.

let firstname = "John"
let lastname = "Doe"

let text = `Welcom ${firstname}, ${lastname}

HTML element 다루기

• getElementById : 특정 ID 가진 요소 조회
• getElementsBtName : 특정 Name 요소 조회
• getElementsByTagName : tagName 기준으로 요소조회
• getElementsByClassName : 특정 ClassName whghl
• innerText : 요소 안에있는 글자 가지고 올때 사용
• HTMLInputElement.value : input tag 저장, 지정할때 가져올때 사용

ES6 (ECMScript)

자바스크립트의 버전 중의 하나 (2015년)

Babel: 최신 자바스크립트를 다른 버전으로 변환시켜줄 수 있는 모듈

• 함수 :

const add = (a,b) => {
	return a+b
}

const sum = add(1,2)

const add = () => a+b

return 없이 함수를 줄여 정의할 수 있음

화살표 함수를 쓰면 안되는 경우

• 객체 내의 메서드 정의할 떄
• 생성자 함수
• addEventListsner()의 콜백 함수 → this 객체를 사용하지 못한다!

화살표 함수는 스코프의 영향을 받지 않는다?

javascript 객체 비구조화 할당

const onChange = (event) => {
      const {target: {value}} = event;
}

간단한 실습