[JavaScript 3] html과의 연결성

• Javascript를 통해 html에 기재되어있는 값을 불러와서 실행시키거나, 수정하거나, 혹은 단순히 읽을 수 있다.
  • html 파일 안에 js 파일이 들어있어야 한다.
• 브라우저 환경에서 html과 javascript는 기본적으로 연결되어있기 때문이다.
• html, css, javascript는 연결되어있고, javascript를 통해 원하는 정보를 가져올 수 있어야 한다.

html의 정보 가져오기

1. console창에 document 라고 입력 시, javascript와 연결된 html의 내용이 전부 입력된다.

• document를 통해 작성한 html을 자바스크립트의 관점에서 확인할 수 있다.
• 특정 함수인 console.dir(document)를 통해 document는 html의 정보를 갖고있는 JavaScript의 객체라는 것을 알 수 있다.
  • dir 사용 시, html에 들어있는 엄청나게 많은 정보를 확인할 수 있다.
    

2. document.찾고자하는 property값 형식을 이용해서 원하는 값을 호출하고 해당 값을 수정할 수도 있다.

• document.title 호출 시, html에 title 태그가 달린 property를 갖고 올 수 있다.
  

3. 특정 값을 가져오고자 한다면 [QuerySelector]를 이용해서 접근할 수 있다.

• css 선택자를 이용해서 element에 접근할 수 있다.
• css 선택자기 때문에, .selectName 형식으로 접근해야한다.
  

4. JS에서 html을 불러올 때 변수로 원하는 element를 다시 정의한다.

const title = document.querySelector("div.hello:first-child h1");

• title이라는 변수에 html의 element를 JS의 object(객체)로 확인할 수 있는 document 명령어를 정의한다.
• querySelector를 이용해서 html에 있는 div 아래에 있는 hello라는 클래스명을 가진 h1의 첫번째 아이템을 특정한다.

JavaScript의 이벤트를 적용 시키는 법

1. 이벤트란?

• 클릭, 호버, 기입(enter) 등 사용자와 웹브라우저가 서로 interact하는 행동을 전반적으로 의미한다.
  
  

2. console.dir()를 통해 html의 내부 element를 확인할 수 있다.

• html의 내부 element는 JS의 객체들이고, 그 중 “on”이 붙은 element들은 전부 이벤트라고 할 수 있다.
  • onclick, oncopy, ondrag 등
  • 이때 이벤트로 사용하고 싶은 경우엔 "on"을 제외하고 사용한다. ex. copy, click, drag

3. JavaScript는 발생하는 모든 event를 들을 수(인지할 수) 있는데,addEventListner()라는 함수를 사용한다.

1. 이때 어떤 이벤트를 JS가 들어야 하는지 기입해야한다.

   	const title = document.querySelector("div.hello:first-child h1");
   
   	title.addEventListner("click")

2. 타이틀이라고 지정된 변수이자 [html의 있는 hello라는 클래스명을 가진 div아래에 있는 첫번째 아이템인 h1태그]을 클릭할 경우, 그 클릭이라는 이벤트를 JS는 인지하게된다.

   	function clickHappens (){
         console.log("title is clicked!); 
      }
      title.addEventListner("click", clickHappens);

   • clickHappens라는 함수를 지정하고, 이 함수는 실행되면 콘솔에 "title is clicked"라는 문구를 찍게된다.
   • 이때 JS는 title로 지정했던 변수인 [html의 있는 hello라는 클래스명을 가진 div아래에 있는 첫번째 아이템인 h1태그]이 클릭될 경우, 함수가 실행된다.
     • 중요한 점은 이때 매개변수를 함수로 사용할 때, ()를 추가하지 않아야 한다.
     • 함수가 먼저 실행되지 않고 이벤트 발생시에만 실행될 수 있게하는 장치
       • JS가 함수를 실행시키는 주체가 된다.

3. 새로운 예제:

   const title = document.querySelector("div.hello:first-child h1");
   
   function clickHappens(){
   title.style.color = "blue";
   }
   
    title.addEventListener("click", clickHappens);

   • clickHappens라는 함수를 정의할 때 title이라는 변수의 내용물이 파란색으로 변하게 설정
   • 이후 title.addEventListner를 이용해서 JS가 클릭이라는 이벤트를 인식하게 만듦
   • 그리고 clickHappens라는 함수를 실행시면, title에 정의됐던 [html의 있는 hello라는 클래스명을 가진 div아래에 있는 첫번째 아이템인 h1태그]의 색은 클릭 시 파랗게 변한다.
   
   

4. 다른 형식으로 event를 추가하는 법

• addEventListner말고 on...형식으로도 event를 추가할 수 있다.
  - on... 형식으로 사용할 경우, console.dir(document)에서 확인했던 JS object의 이름을 그대로 사용하면 된다.
  - ex. onclick, onmouseenter, ondrag, etc.

const title = document.querySelector("div.hello:first-child h1");

 function clickHappens(){
 title.style.color = "blue";
 }

 title.onclick = clickHappens

• 어떤 형식으로 event를 추가할 진 개발자가 정하면 된다.
• addEventListner의 경우, removeEventListner를 이용해 이벤트를 빼는 법이 있다고 한다!

5. window.location.reload()를 드디어 이해했다!

• JS를 통해 event를 들을 때, 듣는 이벤트는 html의 내용으로부터만이 아니라 웹브라우저 자체 (window)에서도 들을 수 있다.
• html에 이벤트를 추가하는 것과 같은 형식이다.

function resizeHappens() {
  document.body.style.color= "blue"
}

window.addEventListner = ("resize", resizeHappens)

//다른 버젼!!!
function resizeHappens() {
  document.body.style.color= "blue"
}

window.onresize = resizeHappens

• 이 경우엔 html처럼 따로 변수를 정의할 필요는 없는게, 윈도우(브라우저) 그 자체를 건드리는 문제이기 때문!
• 기본적으로 사용하는 방법(틀)은 같다.
• 위 함수는 브라우저의 창 크기를 조정하면 백그라운드 색이 파란색으로 변하게되는 코드다.

출처: 노마드코더 바닐라 JS