Dev/JavaScript17 [JaveScript] Momentum App - 1.Login - Input Value, Form Submission, Events //recap const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function onLoginBtnClick() { const username = loginInput.value; if(username === ""){ alert("Please write your name."); } else if(username.length > 15){ alert("Your name is too long."); } } loginButton.addEventListener("click", onLoginBtnClick); // preventDefau.. 2022. 4. 28. [JavaScript] CSS in Javascript // style.css body { background-color: beige; } h1 { color: cornflowerblue; } .active { color: tomato; } // app.js CSS에 정의된 className으로 HTML element를 표시하고 숨기는 방법 const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { const clickedClass = "active"; if(h1.className === clickedClass){ h1.className = ""; } else { h1.className = clickedClass; } } h1.addEventListen.. 2022. 4. 28. [JavaScript] Events const h1 = document.querySelector("div.hello:first-child h1"); console.dir(h1); function handleTitleClick() { h1.style.color = "blue"; } function handleMouseEnter() { h1.innerText = "Mouse is here!"; } function handleMouseLeave() { h1.innerText = "Mouse is gone."; } function handleWindowResize() { document.body.style.backgroundColor = "tomato"; } function handleWindowCopy() { alert("copier!"); }.. 2022. 4. 27. [JavaScript] HTML in Javascript //HTML에서 document 객체를 JS로 가져올 수 있고 JS와 연결되어있다. document.title = "Hello! JS!"; //HTML 항목을 JS로 가져올 수 있다. //Javascript에서 HTML element 가져오고 변경할 수 있다. const title = document.getElementById("title"); title.innerText = "Got you!"; console.log(title.id); console.log(title.className); // getElementsByTagName() - tagName에 해당하는 element를 array로 다 가져옴 const title = document.getElementsByTagName("h1"); // que.. 2022. 4. 27. 이전 1 2 3 4 5 다음