1. JavaScript

 

JavaScript : HTML 조작/변경 을 위해서 사용

HTML 내에서 JavaScript를 작성하기 위해서는 ...  

HTML내에 자바스크립트를 작성하시려면 <script></script> 태그 안에 작성 JS 조작은 아래에서! : HTML 코드를 먼저 읽어야 JS로 조작이 가능 셀렉터는 찾으려는 HTML 요소보다 밑에다가 script 태그 열고 작성해야 정상적으로 요소를 찾을 수 있다.

---

1. Javascript Selector 

: Javascript는 HTML의 조작과 변경을 위해서 사용

 

document . 셀렉터( ' myhome ' ) . innerHTML = '적용할 값' ; 

1. document : 웹 문서 (HTML 문서)
2. . : ~의 
3. 셀렉터 ( ' myhome ' ) : id가 myhome이건 class가 myhome이건 요소를 찾아내라
4. innerHTML : 내부의 HTML 

 

셀렉터 종류

▷ getElementById( ' id 명 ' )

: HTML 상에서 입력한 id를 찾아서 변경할 요소를 적용 할 수 있다. 

 

▷ getElementsByClassName ( ' class 명 ' ) 

: HTML 상에서 입력한 class명을 모두 찾아서 변경할 요소를 적용할 수 있다. 

 

cf) getElementsByClassName(' class 명 ')[0] -> 첫번째 요소만 찾아준다. 

 

▷ querySeletor ( ' #id 명 or .class 명 ' )

: CSS Selector와 동일하게 id 명에는 앞에 #을 붙여서 선택하고 class 명에는 앞에 .을 붙여서 HTML 요소를 선택하게 할 수 있다. 

 

HTML 

<h2 id='hello'>안녕하세요</h2>

 

JS

document.getElementById('hello').innerHTML = '사실 안녕 못함';
    //  웹문서의 . id가 hello인 HTML 요소 . 내부 글자

 

 

---

 

 

2. onclick 속성

: HTML 요소를 사용자가 눌렀을 때 JS가 동작하도록 코드를 작성 할 수 있다. 

HTML 상 태그에 onclick 속성을 하나만 추가해주면 간단하게 구현이 가능. 

 

<button onclick="동작하게 할 JavaScript"> 버튼 </button>

onclick 내에는 JavaScript 문법을 넣을 수 도 있지만 코드를 간단하게 만들어주기 위해서 JS 상에서 함수를 구현한 이후에 onclick=' 함수명 ( ) ' 만 넣어주게 된다.  

 

---

 

 

3. EventListener (이벤트 리스너) 

: 위에서 살펴보았던 HTML 태그에 onclick 을 작성하여 JS가 작동하게 하는 방법도 존재하지만 onclick은 HTML 파일이 매우 더러워진다. 

 

이렇게 코드가 더러워지게 하는 현상을 막고자 HTML에서 코드를 작성하는 것이 아닌 JavaScript 에서 코드를 작성할 수 있게 끔 해주는 EventListener 문법을 사용 가능하다.

 

▶ EventListener : HTML 내부에 onclick 안쓰고 JS에 입력하여 onclick과 동일한 효과를 낼 수 있는 JS 문법 

 

document.getElementById('close-btn').addEventListener('click', function(){
       document.getElementById('alert-box').style.display='none';
})

☞ close-btn이 클릭되면 alert-box의 스타일을 display=none으로 바꿔줘

 

1. 첫번째 인자 : Event  ex) click, keydown, scroll, mouseover 등등
2. 두번째 인자 : function -> 이벤트가 일어나면 해당 함수를 실행해줘라.