Headwing

event란 클릭을 한다던가 마우스를 올리는 것과 같이 웹사이트에서 일어나는 활동들을 말하고, 자바스크립트는 그러한 event들을 listen하여 설정을 바꾸는 것을 할 수 있다. 예를 들어 h1을 클릭했을 때, listen을 하려면 addEventListener 함수를 사용하여 "click" 설정을 추가해주면 된다. const title = document.querySelector(".title h1"); function handleTitleClick() { console.log("title was clicked!"); } title.addEventListener("click", handleTitleClick); 여기서 마지막줄에 handleTitleClick 함수를 넣을 때 ()를 하면 안된다. 우리..

const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}`; } getClock(); setInterval(getClock, 1000); interval은 매번 일어나야하는 무언가를 말한다. ..

document는 자바스크립트 콘솔에서 볼 수 있는 object인데, 해당 웹사이트의 HTML에 있는 코드를 자바스크립트 관점에서 보여주도록 object로 설정되어 있다. 그래서 콘솔창에 document.title을 치면 HTML에 저장된 title이 나온다. 이처럼 자바스크립트는 HTML을 읽어올 수 있다. 읽어올 뿐만 아니라 HTML을 변경할 수도 있다. 자바스크립트에서의 document.title = "Hi" 이를 통해 실제로 HTML의 title이 변경된다. 이런 식으로 자바스크립트는 사실 HTML에 이미 연결되어있다. const title = document.getElementById("title"); console.log(title.id); console.dir(title.id); consol..

함수를 통해 단순히 console.log를 해서 console창에 띄우거나 alert를 하는 것은 큰 의미가 있는 것이 아니다. 우리는 함수를 통해 도출된 값을 받아서 활용할 필요가 있다. 이를 위해 필요한 것이 return이다. return을 하지 않으면 콘솔에 띄우고 끝나거나 함수 내부적으로 값을 도출하고 끝나는 데, 이를 함수 외부적으로도 도출된 값을 알리고 받기 위해서는 return을 해야한다. 즉 return을 사용함으로써 함수를 호출하는 코드를 함수를 통해 나온 결과값으로 대체하는 것이다. 이를 통해 variable에다가 함수에서 반환된 값으로 대체할 수 있어 단순히 콘솔에 한 번 띄우는 것보다 큰 의미를 갖고 사용할 수 있다. 요약하자면 함수는 실행되면 결국 결과만 남기고 사라지기 때문에 그..

function, 함수는 반복해서 쓸 수 있는 코드조각을 의미한다. 반복하여 쓰기 편하게 미리 만들어두는 것이다. 형태는 다음과 같다. 실행할 때는 반드시 함수 이름을 쓰고, ()을 써야 실행이 된다. function title(){ 실행코드 } title(); 괄호안에는 argument를 보내야 하는데 argument란 인수를 의미하고, 해당 function내에서 어떤 정보를 줄 수 있는 값을 의미한다. 인수를 받기 위해서 함수를 선언할 때 function 함수명(variable명) { } 를 작성한다. function sayHello(nameOfPerson, age) { console.log("Hello my name is " + nameOfPerson + " and I'm " + age); } sa..

Boolean : True / False (on / off) Null : 아무것도 없다는 뜻, 자연적으로 생기지 않고 variable안에 아무것도 없다, 비어있다는 것을 확실히 하기 위해 쓰인다. 값은 주어졌는데, 즉 값 자체는 있는데 그 값이 "비어있음"이라는 것 Undefined : 정의가 안되어있다는 것. 어떤 variable이 메모리에는 있는 데 값이 없고 주어지지 않은 경우. null과 달리 값 자체가 없음. 예를 들면 let something; 이런식으로 했을때 console.log(something); 했을 때 나오는 값. Array : 하나의 variable안에 데이터의 list를 갖고 싶을 때 사용 ex. const daysOfWeek = ["mon", "tue", "wed"] daysO..

Media Queries는 오직 CSS만을 이용해서 스크린의 사이즈에 따라 설정을 변경할 수 있는 방법이다. 반응형 웹사이트를 만들 수 있고, 스마트폰이나 태블릿이 세로모드인지 가로모드인지(landscape / portrait)에 따라 설정을 바꿀 수도 있다. 먼저 media queries를 { }로 열고, 그 안에 원하는 CSS를 넣어주면 된다. 또 media query는 "and"를 써서 연결된다. @media screen and (min-width: 601px) and (max-width: 1200px) { div { background-color: wheat; } } @media screen and (orientation: landscape) { span { display: none; } } 첫번..

Transition transition은 state에 따라 바뀌는 property를 갖고 있으면 사용된다. 변화하는 state에 애니메이션을 넣고 싶다면 사용한다. transition은 반드시 바뀌는 state가 아닌 원래의 상태(root)에 해당하는 것에 써야한다. 그래야 hover의 경우 마우스를 올려놨을 때, 뗐을 때 둘다 작동하게 된다. 그리고 변화하는 것을 처음에 뭐에서 뭐로 바뀌는지 정확히 쓸 것! transition에 여러개를 개별적으로 설정하고 싶다면 ,를 이용하면 된다. 전부다 똑같은 설정이면 all을 쓰면 된다. a { color: wheat; background-color: tomato; transition : color 5s easy-out, background-color 1s ea..