🐹 C# 개발자의 JAVASCRIPT 입문기 🐹
안녕하세요, 저는 프론트엔드 개발자를 꿈꾸며 자바스크립트와 친해지기 위해 문법 공부를 하고 있는 개발자 입니다.
이 글은 노마드코더의 바닐라 JS로 크롬앱 만들기 강의를 수강하며 공부한 내용을 정리한 것 입니다.
Document ❓
브라우저에서 제공하는 객체중 document 라는 객체는 js 에서 html 파일을 불러올 수 있도록 도와준다.
Function getElementById ❓
HTML 태크 작성 시 ID 속성을 부여할 수 있다.
Example
- html
<h1 id="title">Grab me!</h1>- javascript
const title = document.getElementById("title");document 라는 객체 안에 getElementById 라는 함수가 존재한다.
이 함수를 통해 HTML의 고유 ID를 추적하여 해당 element를 찾아 JS 파일 내에서 HTML파일을 컨트롤할 수 있다.
Function getElementsByClassName ❓
html 태그 내의 속성에 부여된 class 명으로 해당 element를 찾는 함수이다.
같은 이름의 클래스명을 가진 element들이 여러개 존재한다면 해당하는 element들을 전부 가져오기 때문에 array를 반환한다.
Example
- html
<h1 class="title">Grab me!</h1>- javascript
const title = document.getElementsByClassName("title");Function getElementsByTagName ❓
html 태그 명으로 해당 html 을 찾는 함수이다.
같은 태그명을 가진 element들이 여러개 존재한다면 해당하는 element들을 전부 가져오기 때문에 array를 반환한다.
⭐ Function querySelector ❓ ⭐
css 셀렉터 처럼 사용할 수 있어서 가장 중요한 함수이다.또한 class와 id 두가지 속성을 사용하여 요소를 찾을 수 있다.
class명 혹은 id 명을 앞에 기재하고 뒤에 해당 태그를 입력하여 사용한다.
하지만 동일한 요소가 여러개라면 가장 첫번째 요소만을 반환한다.
class명으로 찾을 때는 앞에 '.' + 클래스명 형식으로 매개변수에 전달하고,
id명으로 찾을 때는 앞에 '#' + 아이디명 형식으로 매개변수에 전달하여 사용할 수 있다.
Example
- html
<div class="hello">
<h1 >Grab me!1</h1>
</div>
<div class="hello">
<h1 >Grab me!2</h1>
</div>- javascrip
const hello = document.querySelector(".hello h1");
console.log(hello);
그래서 여러개의 반환값이 필요할 때 사용할 수 있는 함수가 바로
⭐querySelectorAll()⭐ 함수이다.
querySelectorAll함수를 사용하면 동일한 조건에 있는 요소들을 전부 array형태로 가져올 수 있다.
What is Events ❓
event 는 어떠한 행위 자체를 말한다.
모든 event 는 js가 listen할 수 있다.
특정 요소에 접근하여 addEventListener 함수를 사용할 수 있다.
addEventListener 함수를 사용하는 방법은 여러가지가 있는데,어떤 이벤트를 listen할 것인지에 대한 정보와, 이벤트를 listen 하여 실행시킬 함수를 매개변수에 전달하여 사용하는 방법이 존재한다.
Example
function handleTitleClick(){
hello.style.color="blue";
}
hello.addEventListener("click",handleTitleClick);
즉 function이 js에게 넘겨주고 유저가 title을 클릭할 때 마다 실행시키는 것
이것이 events 의 개념이다.
