Web/JS
![[Vanilla JS] CSS in Javascript](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKqxwr%2Fbtq9uCb72Sy%2FIuKrulx7sKvn5jXObUBgn1%2Fimg.png)
[Vanilla JS] CSS in Javascript
CSS in Javascript Click me! const title = document.querySelector(".hello h1"); function handleTitleClick() { const currentColor = title.style.color; let newColor; if(currentColor == "blue") { // true or false newColor = "tomato"; } else { newColor = "blue"; } title.style.color = newColor; // 함수 조건 적용 } title.addEventListener("click", handleTitleClick); CSS 의 기능을 Javascript 에서도 관리할 수가 있습니다만, 본 포스..
![[Vanilla JS] Events](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkWsIP%2Fbtq9lm2vlg6%2F6PSX6UZPQDknPbzOINqs30%2Fimg.png)
[Vanilla JS] Events
Click me! const title = document.querySelector(".hello h1"); function handleTitleClick() { title.style.color = "blue"; } function handleMouseEnter() { title.innerText = "Mouse is here!"; } function handleMouseLeave() { title.innerText = "Mouse is gone!"; } function handleWindowResize() { document.body.style.backgroundColor = "tomato"; } function handleWindowCopy() { alert("copier!"); } function ..
![[JS] Searching For Elements](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuzwaM%2Fbtq9pDP274o%2Fa1p6ZshsO06gJp0AL69VrK%2Fimg.png)
[JS] Searching For Elements
Grab me! const title = document.querySelector(".hello h1"); // or ("div h1") console.log(title); querySelector 는 CSS 방식으로 요소(element)를 검색하는 가장 효율적인 방식입니다. Grab me! Grab me! Grab me! const title = document.querySelectorAll(".hello h1"); console.log(title); 여러개의 요소를 모두 찾으려는 경우에는 querySelectorAll 을 사용합니다. // querySelector 는 첫번째 요소만 찾아주기 때문 const title = document.querySelectorAll("#hello"); console...
![[JS] 조건문 Conditionals](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbOiAk8%2Fbtq9kPRvRjg%2FQtutSkmhR0f6Fw6EIitypk%2Fimg.png)
[JS] 조건문 Conditionals
// age calculator const age = parseInt(prompt("How old are you?")); if (isNaN(age) || age = 20 && age 60 && age 80) { console.log("You can do whatever you want"); } 위의 나이 계산기 코드를 통해 조건문과 연산자에 대한 기초 지식을 이해할 수 있습니다. 개발자 도구의 console 을 통해 입력값에 기반한 출력값을 비교합니다.
![[JS] 함수 출력 Functions](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQ2ueh%2Fbtq9tI3M4oZ%2Fp0wgH0bPQavkyNelrR5vS0%2Fimg.png)
[JS] 함수 출력 Functions
// create simple calculator const calculator = { plus: function (a, b) { console.log(a + b) }, minus: function (a, b) { console.log(a - b) }, times: function (a, b) { console.log(a * b) }, divide: function (a, b) { console.log(a / b) }, power: function (a, b) { console.log(a ** b) } }; calculator.plus(2, 5); calculator.minus(2, 5); calculator.times(2, 5); calculator.divide(2, 5); calculator.powe..