본문 바로가기

JavaScript18

Function Scope VS Block Scope 스코프 (JavaScript) if(true){var foo = "Global";let bar = "local";} console.log("var foo : " + foo);console.log("let bar : " + bar); var로 정의한 foo 변수는 if문 블록 밖에서도 접근 가능하다. (Function Scope)let으로 정의한 bar 변수는 if문 블록 밖에서 접근할 경우 ReferenceError가 발생한다. (Block Scope) 2020. 8. 6.
addEventListener, Window.innerWidth 활용(JavaScript) DOCTYPE html> Document Hello JavaScript!! const title = document.querySelector("body");const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c", "#C18282", "#FF50CF","#0A9696"];const RESIZE_CLASS = title.style.backgroundColor = colors[0]; function handleResize() { var wframe = window.innerWidth console.log(wframe); if(wframe200 &&wframe 400 &&wframe 600 &&wframe 800 &&wframe 1000 &&.. 2020. 8. 6.
Element.classList.add 자바스크립트로 클래스 추가하기(JavaScript) *{float: left;}#container1, #container2{margin: 30px 30px;text-align: center;width: 100px;height: 100px;border: 2px solid black;color: black;} const divTag1 = document.getElementById("container1");const divTag2 = document.getElementById("container2");function handleOnclick1() {divTag1.classList.add("HelloClass"); // 클래스 하나}function handleOnclick2() {divTag2.classList.add("class1", "class2", "cla.. 2020. 8. 6.
addEventListener 간단한 예제(JavaScript) https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener #container{ margin: 30px auto; text-align: center; width: 300px; height: 300px; border: 2px solid black; color: white; } Hello const divTag = document.getElementById("container"); function handleMouseOver() { divTag.style.backgroundColor ="red"; divTag.innerHTML = "mouseover"; } function handleLeave() { divTag.style.backg.. 2020. 8. 5.