본문 바로가기
728x90
반응형

JS/JS_BASE15

[기본문법 15] CSS in JavaScript part Three // event const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { const clickedClass = "active" if(h1.classList.contains(clickedClass)) { h1.classList.remove(clickedClass); } else { h1.classList.add(clickedClass); } } h1.addEventListener("click", handleTitleClick); // event const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClic.. 2023. 2. 14.
[기본문법 14] CSS in JavaScript part Two Click me! body { background-color: beige; } h1 { color: cornflowerblue; transition:color .5s ease-in-out; } .active { color: tomato; } .sexy-font{ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }​ // event const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick().. 2023. 2. 14.
[기본문법 13] CSS in JavaScript // event const h1 = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { const cerrentColor = h1.style.color; let newColor; if (cerrentColor === "blue") { newColor = "tomato"; } else { newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click", handleTitleClick); 이걸 컴퓨터 입장에서 생각해보면 이해가 좀 더 편합니다. 우리는 현재상태의색깔 값을 currentColor라는 이름의 변수에 저장해주고, 클릭했을 때 바뀌.. 2023. 2. 14.
[기본 문법 12] More Events // event const h1 = document.querySelector("div.hello:first-child h1"); // 사용가능 event 확인 console.dir(h1); function handleTitleClick() { console.log("h1 was clicked!"); h1.style.color = "blue"; } function handleMouseEnter() { console.log("mouse is here!"); h1.innerText = "Mouse is here!"; h1.style.color = "red"; } function handleMouseLeave() { console.log("mouse is out!"); h1.innerText = "Mouse i.. 2023. 2. 14.
[기본 문법 11] Events part Two // event const title = document.querySelector("div.hello:first-child h1"); // 사용가능 event 확인 console.dir(title); function handleTitleClick() { console.log("title was clicked!"); title.style.color = "blue"; } function handleMouseEnter() { console.log("mouse is here!"); title.innerText = "Mouse is here!"; title.style.color = "red"; } function handleMouseLeave() { console.log("mouse is out!"); title.. 2023. 2. 14.
[기본 문법 10] Events // event const title = document.querySelector("div.hello:first-child h1"); function handleTitleClick() { console.log("title was clicked!"); title.style.color = "blue"; } title.addEventListener("click", handleTitleClick); // 유저가 click할 경우에 JavaScript가 실행버튼을 대신 눌러주는 것 - 지금 js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 거임 - document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌 - e.. 2023. 2. 14.
[기본 문법 9] Searching For Elements // const hellos = document.getElementsByClassName("hello"); // console.log(hellos); // 원하는 요소 추출하기 // const title = document.getElementsByTagName("h1"); // console.log(title); // css처럼 // querySelector은 동일한 elements가 존재시 가장 먼저 있는 것을 가져옴 const title = document.querySelector(".hello h1"); // 동일한 elements를 모두 가져오려면 => array const title2 = document.querySelectorAll(".hello h1"); console.log(title); .. 2023. 2. 13.
[기본문법 8] HTML in Javascript Grab me! ​ // JavaScript를 사용하는 이유는, HTML과 상호작용하기 위해서이다. // 그 말인 즉슨, HTML의 Element들을 JavaScript를 통해 변경하고, 읽을 수 있다는 것. const title = document.getElementById("title"); console.dir(title); // JavaScript에서 HTML을 표현하는 object를 보여준다. // 항목들을 가져올 수도 있지만 수정할 수도 있다. // innerText를 수정 title.innerText = "Got you!"; // HTML에 의해서 변경된 것이 아니라 JavaScript에 의해 변경 // 항목을 확인할 수 있다. console.log(title.id); console.log(t.. 2023. 2. 13.
[기본문법 7] conditionals //conditionals const age = prompt("How old are you?"); // parseInt() // parseInt(): string to number console.log(typeof age, typeof parseInt(age)); // javascript 타입 확인 typeof //현재는 prompt는 사용하지 않음. //javascript code의 실행을 멈추고 메세지 창이 이쁘지 않음. //아무런 스타일 즉, CSS를 적용시킬 수 없다. //최근에는 대부분 HTML, CSS로 만든 자신만의 창을 사용. // string이면 숫자의 비교를 할 수 없지만 숫자면 가능 const age = parseInt( prompt("How old are you?") ); conso.. 2023. 2. 9.
[기본문법 6] return // returns const calculator = { plus: function (a, b) { return (a + b); }, minus: function (a, b) { return (a - b); }, times: function (a, b) { return (a * b); }, divide: function (a, b) { return (a / b); }, power: function (a, b) { return (a ** b); }, }; const plusResult = calculator.plus(2, 3); console.log(plusResult);​ // Returns const age = 96; function calculateKrAge(ageOfForeigner) { retur.. 2023. 2. 9.
728x90
반응형

티스토리툴바