코딩일상

[JS] 자바스크립트 프로그램 제작 앞서 느낀점(이래서 객체 지향어라고 하구나) 본문

WEB/HTML,CSS,JAVASCRIPT

[JS] 자바스크립트 프로그램 제작 앞서 느낀점(이래서 객체 지향어라고 하구나)

solutionMan 2022. 6. 10. 12:08
반응형

JS는 HTML을 객체 요소로 모두 볼수있고 그점을 이용하여

WEB의 기능하는 부분들에대해서 엄청난 영향력을 발휘할수있다.

 

그렇기에 JS를 통해 HTML ,CSS또한 바꿀수있다.

(하지만 각자의 역할은 각자의 역할에서 진행시키는것이 중요)

 

JS에서 중요한 function중 하나가 querySelctor, querySelctor이라 볼수있다.

이 함수를 통해서 우리는 원하는 객체부부에 CSS처럼 선택을 하여 

원하는 기능을 부여 하고 발현시킬수 있다.

 

JS를 배울수록 왜 많은 이들이 JS를 사용중인가에 대해 서 알게 되었고

앞으로 JS를 통해 진행될 FramWokr인 리액트와 노드JS도 기대가 된다.

 

const h1 = document.querySelector(".hello h1");
// querySelector은 css 처럼 HTML의 element를 가져오는것이다.

function handleTitleClick() {
  h1.classList.toggle("clicked");
}
// toggle function기능을 이용하면 아래 코드를 한줄로 할수 있다.
// const clickedClass = "clicked";
// // if(h1.classList.contain(clickedclass){
//     h1.classList.remove(clickedclass)
// }else{
//     h1.classList.add(clickedclass)
// }
// //

h1.addEventListener("click", handleTitleClick);
// addEventListener은 event를 listen 할 수있는 기능의 함수이다.
// addEventListener(액션, 결과)
반응형
Comments