DOM3 Vanilla JS - 조건문(if~else) 1. if 조건문 사용 형식 - JS에서 if 조건문을 사용하는 방식은 다음과 같다. if (condition) { // 해당 조건에 수행할 명령문 } else if (condition){ // 해당 조건에 수행할 명령문 } else { // 위의 2가지 조건에 해당하지 않는 경우, 수행할 명령문 } 기본적인 비교/논리 연산자 - 앞으로 조건문을 사용할 때, 비교와 논리연산자를 통해 표현을 많이 하게 될 것이다. - JS에서는 어떻게 표현하는지 아래의 사진을 참고하여 알아두자. 2. 조건문을 사용한 JS - 이번에는 조건문을 사용하여 JS 적용하는 예제를 만들어보자. - 예제) h1태그를 클릭하면 글자색이 변하도록 만드는 이벤트를 조건문을 이용해서 구현한다. [기본 HTML] Hello, JavaScri.. 2020. 10. 8. Vanilla JS - DOM(Document Object Model)(2) 1. DOM을 이용해 HTML 바꿔보기 - DOM의 의미는 HTML(= Document)을 객체화(Object)하여 사용하는 것을 의미한다. - 저번 포스팅에서 배운 getElementById를 사용해서 HTML의 특정 엘리먼트 요소를 객체화하여 내용을 바꿔보자. [기본 HTML] This works! [출력화면] 위의 기본 HTML을 기반으로, h1태그를 객체로 만들어서 내용과 글씨색을 바꿔보도록 하자. [JavaScript 소스코드] const title = document.getElementById("title"); title.innerHTML = "This is JAVASCRIPT!!!! "; [출력화면] - 위와 같이 HTML을 수정할 수 있는 이유는 title이 JS로 인해 객체화 되었기 때문.. 2020. 10. 6. Vanilla JS - DOM(Document Object Model)(1) 1. DOM, DOM조작이란 무엇인가? - JS를 이용해 HTML에 접근하여 문서 구조, 스타일, 내용, 속성 등을 변경하는 방법 - 선택자를 이용해 특정 엘리먼트를 지정할 수 있으며, 지정된 엘리먼트를 객체로 만든다. - 더 자세한 내용은 아래 링크를 참고하자. developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C DOM 소개 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer.mozilla.org 2. 어떻게 사용하는가? - 아래와 같은.. 2020. 10. 3. 이전 1 다음
