javascript day1

오늘부터 자바스크립트 시작!!!!!!

오늘 공부할 부분은 html내에 있는 다양한 태그들을 변수에 담는 방법과 
그러한 변수를 이용해서 html을 보다 동적으로 바꾸는 과정이다. 

1. how to get tag and put it to variable?
  document.getElementById('hi')
위와 같은 방법으로 id가 hi인 태그를 가져올 수 있다.
그리고 이것을 아래와 같이

const  h1 = document.getElementById('hi');로 담아서 사용가능하다.

위와 같이 직접 id 혹은 class네임을 가지고 태그를 찾는 방법 이외에 queryselector를 이용해서도 찾을 수 있다.

이때 queryselector를 사용할 경우 ()안에 들어가는 인자는 css에서 특정 태그를 지정할 때와 같이 사용해야한다.

const h1ByQuery = document.querySelector('div#hi h1');

위와 같은 방식으로 지정해서 사용하면된다.

2. how to use java with css

const title = document.querySelector('div#hello h1');

function handleTitleClick() {
	const colorful =  title.style.color
    let newColor;
    if (colorful === 'blue') {
      newColor = 'red'
    } else {
      newColor = 'blue'
    }
  	title.style.color = newColor;
}
  
title.addEventListener('click', handleTitleClick);

3. if tags already taked class what can i do????
  
classList를 활용해서 기존에 적용된 클래스에 변화를 주지 않고 새로운 클래스를 적용시킬 수 있다. 

예시)
css에 
.clicked {
  color='pink'} 라고 속성값을 적용하자.
  
그리고 h1태그에 기본 class를 적용 title

.title { color = 'blue'}

const title1 = document.querySelector('div.hell:first-child h1);

function handleTitleQuery() {
	const clickedClass = 'clicked'
    if (title1.classList.contain(clickClass)) {title1.classList.add(clickClass)}
  else {title1.classList.remove(clickClass)}
}
                        
title1.addEventListener('click', handleTitleQuery);                                                                 

오늘은 어떻게 하면 html내에 있는 태그들을 불러오고 그것을 css를 변화시키거나 혹은 java내에서 변경시키는 지 알아보았다.