본문 바로가기

CodeIt_Sprint/JavaScript_중급7

(4)JavaScript중급_3_1_이벤트핸들러 등록 ⊙ 이벤트 핸들러 :#알아야 할 개념 :● 개념1 : 이벤트 핸들러 등 방법○ 방법1 : 요소노드의 onclick프로퍼티에 함수 할당, 선언const element = document,querySelector('tag'); //요소노드 변수에 저장 element.onclick = function ()//요소노드의 onclick 프로퍼티에 함수 선언 { console.log('함수 호출'); };○ 방법2 : 함수 선언 후 => 요소노드의 프로퍼티 메소드 addEventListener()에 할당, 선언const element = document,querySelector('tag'); //요소노드 변수에 저장 function printBtn() //별도의 함수 선언{ console.log('버튼을.. 2024. 11. 13.
(2)JavaScript중급_2_DOM객체_개념부분(이론요약)[작성중..] #알아야 할 개념 :● 개념1 : Window 객체란?○ 정의 : 웹 브라우저 창에 대한 기능, 설정값 등등을 다룰 수 있도록 하는 JavaScript의 가장 상위 객체이다.- Ex1_ Window 객체의 프로퍼티 :window.innerWidth : 현재 출력되는 웹 브라우저의 창의 너비window.innerHeight : 현재 출력되는 웹 브라우저의 창의 높이- Ex2_ Window 객체의 프로퍼티 메소드 :window.open() : 현재 웹 브라우저에서 새로운 창을 생성 명령 메소드window.close() : 현재 웹 브라우저에서 창을 닫으라는 명령 메소드- Ex3_ Window 객체의 프로퍼티 객체 : (window.은 생략이 가능하다.)window.document..... window.con.. 2024. 11. 11.
(1)JavaScript중급_1_태그를 JS에 호출하는 방법, 이벤트핸들링,핸들러 #Default 상황 :Html 코드의 내 마지막 부분에 태그가 존재의 src 속성으로 외부js파일명값 대입내 일반 태그, id속성의 태그 , class명의 태그가 존재#알아야 할 개념 :● 개념1 : Html 코드내 태그 => JavaScript로 호출 방법순서0_ Default 상황처럼, 먼저 내 마지막에 의 속성값에 js파일명 대입순서1_ const 변수 = document.get...() || querySelector() 로 태그를 js변수에 저장 순서2_ console.log || onclick프로퍼티 등등으로 출력, 구현 ... 한다.● 개념2 : document객체  + getElement...메소드의 종류○ 분류 방법(2가지)방법1_ Html에서 js 호출 vs CSS에서 js 호출①... 2024. 11. 11.