[웹 프론트엔드] 1분 코딩 자바스크립트 기초 Part 3

1분 코딩 자바스크립트 기초 Part 3

load 이벤트 이용하기

• html 문서는 위에서 아래로 순차적으로 load 된다

• html body에 "main-title"이라는 id를 가진 element를 만들고, html head에 script를 작성한 경우:
  아래와 같이 코드를 작성하면 script 아래의 html문서가 아직 load되지 않았기 때문에 console창에 null이 출력된다

<script>
  var title = document.getElementById("main-title");
  console.log(title);
</script>

• 해결 방법 1: script가 가장 마지막에 laod되도록 html body의 제일 하단에 작성한다
• 해결 방법 2: window.onload = 함수

<script>
window.onload = function(){
  var title = document.getElementById("main-title");
  console.log(title);
};
</script>

• 해결 방법 3-1: window.addEventListener("load", 함수);

<script>
window.addEventListener("load", function(){
  var title = document.getElementById("main-title");
  console.log(title);
});
</script>

• 해결 방법 3-2: window.addEventListener("DOMContentLoaded", 함수);

<script>
window.addEventListener("DOMContentLoaded", function(){
  var title = document.getElementById("main-title");
  console.log(title);
});
</script>

📌참고자료

• 1분 코딩 자바스크립트 기초 Part 3
  https://www.youtube.com/watch?v=Y3_2BLb3hz8&t=417s

• css id vs class
  https://careerkarma.com/blog/css-class-vs-id-2/

CSS selectors

• used to target a specific element or range of elements on a web page
• Once an element has been targeted, a style or set of styles can be applied to the element
• There is a wide range of selectors available
  Two of the most commonly used are class and ID
• You can assign an element both an ID and a class

ID selector

• The ID selector is unique
• IDs can only be used once on a web page
• ID selectors are defined using a hash sign(#)
• IDs have a unique browser function
  -> If you assign an element an ID, you can use a special URL to link directly to that element

Class selector

• The Class selector is not unique
• Classes can be used across multiple elements
• Class selectors are defined using a period(.)
• a web element can share multiple different classes

➖

//document에서 element 가져오기
var elem = document.getElementbyId(아이디);
var elem = document.getElementsbyTagName(태그);

//querySelector 사용 권장
var elem = document.querySelector(css selector);
var elem = document.querySelectorAll(css selector);

//element 속성
var attribute = elem.getAttribute(속성);
elem.setAttribute(속성, 새로운 속성 값);

//element 클래스
elem.className = 클래스;
elem.classList.add(클래스);
elem.classList.remove(클래스);
var bool =  elem.classList.contains(클래스);

//element 생성
var elem = document.createElement(태그);
elem.innerHTML = element 내부 html 속성;
//부모 element 내부에 삽입
parentElement.appendChild(elem);

//Event 처리
var elem = document.querySelector(css selector);
function elemClickHandler(){
  //...
}
//element click 이벤트 발생 시 실행되는 함수 속성 값
elem.click = btnClickHandler;
//addEventListener(이벤트, 이벤트 발생 시 실행 함수) 사용 권장
elem.addEventListener('click', elemClickHandler);

📌 참고자료

• JavaScript를 사용하여 테이블 만들기
  https://www.delftstack.com/ko/howto/javascript/create-table-javascript/