＃Default 상황 :
- Html 코드의 <body> 내 마지막 부분에 <script> 태그가 존재
- <script>의 src 속성으로 외부js파일명값 대입
- <body>내 일반 태그, id속성의 태그 , class명의 태그가 존재
＃알아야 할 개념 :
● 개념1 : Html 코드내 태그 => JavaScript로 호출 방법
순서0_ Default 상황처럼, 먼저 <body>내 마지막에 <script>의 속성값에 js파일명 대입
순서1_ const 변수 = document.get...() || querySelector() 로 태그를 js변수에 저장
순서2_ console.log || onclick프로퍼티 등등으로 출력, 구현 ... 한다.
● 개념2 : document객체 + getElement...메소드의 종류
○ 분류 방법(2가지)
방법1_ Html에서 js 호출 vs CSS에서 js 호출
①. Html => Js 호출 (3가지)
- getElementById('태그의 id속성값') : html의 id로 js 호출 메소드
- getElementsByClassName('태그의 Class 속성값') : html의 class명으로 js 호출 메소드
- getElementsByTagName('태그명') : html의 태그이름으로 js 호출 메소드
②. CSS => Js 호출 (2가지)
- querySelector('#id속성값 || .class속성값 || 태그이름') : Css에서 html의 태그를 js에 호출 메소드 (1개만 호출됨)
- querySelectorAll('.class속성값 || 태그이름') : Css에서 html의 태그를 js에 호출 메소드 (유사배열 형태로 호출됨)
방법2_ 반환값에 따라 종류 구별
①. 1개의 태그값으로 반환 메소드 (2가지) => getElementById() , querySelector()
②. 유사배열로 반환 메소드 (3가지) => getElementsByClassName() , getElementsByTagName() , querySelectorAll
§유사배열 반환 특징 :
- 특징1_ 인덱스 접근, length, for(let 변수 of 태그변수) 사용 가능 , but splice() , reverse() 등의 배열객체메소드 사용은 불가능
- 특징2_ html에 존재하지 않는 태그 저장시 출력값 : null(x), 빈 유사배열로 반환
- 특징3_ 유사 배열에 인덱스에 저장되는 순서 : 깊이와 상관없이 , html코드의 위에서 아래 순으로 저장된다.
● 개념3_ 이벤트 핸들링, 핸들러
○ 정의 : html의 태그를 js에 호출한뒤, 어떠한 동작에 대한 이벤트가 수행되도록 하는 것
ex_ 버튼을 누를 시, console창에 '존나 하기 싫다'의 문자열이 출력되도록 한다.
○ 방법 :
- 순서1 : const 버튼담은 변수 = document.호출메소드(버튼태그);
- 순서2 : 버튼감은변수.onclick속성값 = function() { console.log('존나하기싫다')}
○ 이벤트 핸들링 , 핸들러 명칭 정리
- 이벤트 핸들링 : 태그가 담긴 변수의 onclick프로퍼티에 함수를 할당하는 작업
- 이벤트 핸들러 : onclick프로퍼티에 할당된 function의 구현부를 작성하는 작업
※연습문제 :
● 문제 조건 :
주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다!👏🏻라는 경고창이 나타나도록 코드를 작성해 주세요. (박수 이모지 만들기가 어렵다면 본문의 글을 복사해서 붙여넣어 보세요)
단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성해 주세요.
● 해결 방법 :
- 순서1 : const btn(변수) <= document.querySlector('#grade'); //button태그의 id속성값이 "grade"임
- 순서2 : btn.onclick = function(){alert(' 정답입니다!👏🏻 ')};//onclick프로퍼티의 function 할당, 구현부 작성
'CodeIt_Sprint > JavaScript_중급' 카테고리의 다른 글
| (7)JavaScript중급_3_4_이벤트 위임 문제 , 해결방법은 if조건절 + event.contains() 메소드 (5) | 2024.11.13 |
|---|---|
| (6)JavaScript중급_3_3_이벤트 버블링과 이벤트흐름(DOM이벤트객체 경로과정) (1) | 2024.11.13 |
| (5)JavaScript중급_3_2_이벤트객체 (0) | 2024.11.13 |
| (4)JavaScript중급_3_1_이벤트핸들러 등록 (0) | 2024.11.13 |
| (2)JavaScript중급_2_DOM객체_개념부분(이론요약)[작성중..] (0) | 2024.11.11 |
