● 이론1 : 버튼태그를 querySelector() || getElement...()로 변수 저장한 후, 버튼을 누를 시, 어떠한 동작 구현 코드 작성 => 노드.onclick 프로퍼티 + 핸들링 , 핸들러 작성
○ 개념1 : // 버튼을 누를 시, 동작 구현 해보기
- 순서1_ getElement() || querySelector() 로 요소노드로 변수에 저장
- 순서2_ 요소노드의 프로퍼티인 onclick <= 핸들링 대입
- 순서3_ 핸들러로 구현할 코드 작성
○ 연습 문제 1 :
- index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div>
<button id="myBtn">Click!</button>
</div>
<script src="/src/index2.js"></script>
</body>
</html>- "Click!"버튼을 누를 시, console창에 "시발련아" 문자열 출력하도록 js작성하기 하기
답 :
//순서1_ 버튼태그 요소노드 변수로 저장
const btn = querySelector('#nyBtn');
//순서2,3_ 요소노드.onclick에 핸들링 초기화 , 핸들러 구현
btn.onclick = function()
{
console.log('시발련아');
}○ 연습 문제 2:
alert('message');
alert라는 함수를 사용하면, 브라우저에 경고창을 띄울 수 있습니다.
주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다!👏🏻라는 경고창이 나타나도록 코드를 작성해 주세요. (박수 이모지 만들기가 어렵다면 본문의 글을 복사해서 붙여넣어 보세요)
단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성해 주세요.
답 :
-실습문제.js
//순서1_ 버튼태그 요소노드 변수로 저장
const btn = document.querySelector('#grade');
//순서2,3_ 요소노드.onclick에 핸들링 초기화 , 핸들러 구현
btn.onclick = function(){
alert('정답입니다!👏🏻');
}○ 개념2 : 태그의 onclick속성에 직접 핸들러 적용하기
<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>§ 근데 잘 안사용함
● 이론2 : Window 객체
○ 개념
- Window객체 정의 : 웹 브라우저의 기능, 설정 들을 접근할 수 있는 객체
- ex_ window.innerWidth, window.innerHeight //브라우저 창의 크기 설정
- ex_ window.open(), window.close() //브라우저 창 열기 닫기의 프로퍼티 메소드
- ex_ window.document , window.console //우리가 사용했던 console과 document도 window의 프로퍼티 객체이다.
- 즉, window 객체는 모든 객체들의 최상단 객체(Global Object)이다.
- 대게
window.document를 생략하며 사용한다.
● 이론3 : Dom 객체 (Document Object Model)
○ 개념 :
- 웹브라우저 ⊃ Html 문서 => Window객체 ⊃ Dom 객체
- Dom객체는 Html문서를 대변하는 객체이므로, console.log(document) 출력결과 => html문서의 전체 코드가 출력된다.
- 만약, 객체형태로 document 내부의 어떤 프로퍼티 구성이 있는지를 출력으로 보고싶다면, console.dir(document);를 하면 된다.
● 이론4 : console.log() vs console.dir()
○ 개념 :
- 중요한 핵심은 보통 console.log(객체) || console.dir(객체) 일때, 용도만 잘 구분하면 된다.
- console.log(객체) : 객체의 태그 전체 구성을 알고싶을 때, 사용
- console.dir(객체) : 객체의 프로퍼티의 구성을 알고싶을 때, 사용
- 그냥 내신용느낌의 log() vs dir() 구분
◎ console.log( 리터럴 ) vs console.dir(리터럴) //리터럴 : 숫자 , 문자열 , bool 값
- console. log( 리터럴 ) : 자료형은 유지가 된 체, 그대로 값 출력
- console. dir( 리터럴 ) : 자료형이 모두 문자열로 출력된다.
Ex_
console.log('--- str ---');
console.log(str);//문자형 출력 console창에 시발련아 출력
console.dir(str);//문자형 출력 console창에 '시발련아' 따옴표랑 같이 출력됨
console.log('--- num ---');
console.log(num); //숫자값 출력
console.dir(num); //숫자값이 문자열형태로 출력
console.log('--- bool ---');
console.log(bool); //bool 값 출력
console.dir(bool); //bool 값이 문자열 형태로 출력◎ console.log( 코어객체 ) vs console.dir( 코어객체 ) //코어객체 : Array, String ,Date 으로 태그형태가 아니므로,
- console. log( 코어객체 ) : 모든 배열의 원소 출력 ex_ [1,2,3]
- console. dir( 코어객체 ) : 모든 배열의 원소 출력 ex_ [1,2,3]
◎ console.log( 프로토타입 객체 ) vs console.dir( 프로토타입 객체 ) //프로토타입 객체 (new Object()) //참고로 얘도 태그는 아니므로, console.log는 코어객체의 프로퍼티 구성과 값이 출력된다.
- console. log( 프로토타입 객체 ) : 모든 프로퍼티 구성과 속성값 출력
- console. dir( 프로토타입 객체 ) : 모든 프로퍼티 구성과 속성값 출력
▣ Ex_
- Js코드 :
const obj = {
"blue": [1,2,3,4,5],
"red" : ['a','b','c','d'],
};
console.log(obj);
console.dir(obj);
console.log(obj["blue"]);
console.dir(obj["blue"]);-츨력결과 :
{ blue: [ 1, 2, 3, 4, 5 ], red: [ 'a', 'b', 'c', 'd' ] }
{ blue: [ 1, 2, 3, 4, 5 ], red: [ 'a', 'b', 'c', 'd' ] }
[ 1, 2, 3, 4, 5 ]
[ 1, 2, 3, 4, 5 ]● 이론4 : Html문서는 Dom리로 구성되어있다.
- "안녕하세요." , "리엑트", "가상돔" , "엘리먼트"를 텍스트 노드라 하고,
- 나머지 텍스트 노드의 직전 부모 노드 || 태그 자체를 요소노드라 한다.
- 그래서, 어쩌라고? => 다양한 방법으로 Dom트리 구조에서 원하는 노드를 접근하는 방법, 접근하여, 변수에 저장하는 방법을 공부할 것이다. //이게 핵심
