JAVASCRIPT - 초급 1편

* HTML 조작, 변경하는 법

선택자를 사용하여 HTML에 요소를 선택하고 메소드나 함수를 사용하여 조작, 변경한다

html

<h1 id="hello">안녕하세요</h1>

javascript

document.getElementById("hello").innerHTML = '안녕';

* 셀렉터(파라미터) : 선택자

1. getElementById() : id선택자

id는 HTML에 단독으로 존재한다.

document.getElementById("title");
/* title이라는 id값을 가진 요소를 선택다 */

2. getElementByClassName() : class 선택자

class는 단독이 아닌 여러개의 요소가 있을 수 있기 떄문에 다수의 요소를 선택하거나, 인덱싱을 사용하여 원하는 순서에 요소를 가져와야 한다.

document.getElementByClassName("box");
/* box 라는 class값을 가진 요소를 선택한다 */

3. getElementByTagName() : tag 선택자

tag도 마찬가지로 여러개의 요소가 있을 수 있기 때문에 다수의 요소를 선택하거나, 인덱싱을 사용하여 원하는 순서에 요소를 가져와야 한다.

document.getElementByTagName("button");
/* HTML에서 <button>이라는 요소를 선택한다 */

4. querySelector() : DOM에서 원하는 요소를 CSS선택자를 사용하여 찾을 수 있다.

class와 tag는 인덱싱을 사용하면 원하는 순서에 요소를 선택할 수 있다.

1) id

document.querySelector("#main__title");
/* id값이 main__title이라는 요소를 선택한다 */

2) class

document.querySelector(".sub__title");
/* class값이 sub__title이라는 요소를 선택한다 */
/* class는 앞에 .을 사용하여 요소를 선택한다, 두개 이상의 요소가 존재할 경우 가장 상단에 있는 요소를 선택 */

3) tag

document.querySelector("div");
/* tag값이 div이라는 요소를 선택한다 */
/* tag는 두개 이상의 요소가 존재할 경우 가장 상단에 있는 요소를 선택 */

5. querySelectorAll() :

document.querySelectorAll(".button");
/* class값이 button인 요소를 모두 선택한다 */

* function () : 함수

간단한 틀

function  functionName() {
  //축약하고 싶은 긴 코드
  document.getElementById("name").style.color = "red";
}
/* name이라는 id값을 가진 요소에 스타일 중 색상을 red로 바꾸는 함수 */
functionName() /* 함수 실행 */

주의점

1. 함수명을 영어로 작명할때 시작은 함수의 소문자로 시작해야한다.

2. . , _와 같은 문자기호를 사용하지 않고 소문자와 대문자를 사용하는것이 관습이다.

3. 한글작명도 기능구현에 문제는 없지만, 범용성과 직관적으로 알아 볼 수 있게 하는 것이 좋은 함수명을 작성하는 방법이다.

* function (파라미터) : 파라미터를 사용한 함수

간단한 틀

html

<div id="alert">
  <p>alert입니다</p>
</div>
<button onclick="show('none');" value="제거버튼"></button>

javascript

function show(event) {
  document.getElementById("alert").style.display = event;
}
/* event란 파라미터에 속성값을 넣게되면 id값을 alert를 가진 요소에 display의 속성을 변경한다 */
show("none"); /* = > display : "none"; */
show("block"); /* = > display : "block"; */
show("flex"); /* => display : "block"; */

다른 예시

function plus(a, b) {
 a + b
}
plus(1,2)
/* 파라미터에서 1과 2를 받아 더해주는 함수 */

주의점

1. 파라미터는 자유롭게 작명 가능하다.

2. 파라미터는 2개 이상 사용할 수 있다.

* Event Listener(이벤트 리스너)

간단한 틀

document.getElementById("showBtn").addEventListener('click', function() {
  document.getElementById("show").style.display = "block";
} /* id값이 showBtn에 click이벤트가 부여되면 뒤에 해당하는 함수를 실행한다 */ 

Event(이벤트)

click, mouseover, scroll, keydown 과 같이 수많은 이벤트가 있습니다.

자세한 내용은 밑에 링크 참조
https://developer.mozilla.org/en-US/docs/Web/Events
https://developer.mozilla.org/ko/docs/Web/Events
https://developer.mozilla.org/ko/docs/Web/API/Event