DOTY

Import : 가져오기 Export : 내보내기 어떤 A.js 파일에서 B.js 파일에서 쓰던 것을 가져오고 싶을 때 Import 와 Export 를 쓰면 된다. // A.js에 맨 위에 import B from "/B"; // B.js에 맨 아래에 export defult B; 그런데 만약에 B의 변수를 사용하고 싶으면 다음과 같이 작성한다. // A.js 에서 import { var } from "./B"; // B.js 에서 export const var = ...;

- createElement JS로 DOM을 통해서 새로운 Element를 만들어준다. span도 만들 수 있고, li도 만들 수 있고, button 등등 다양한 것을 만들 수 있다. const span = document.createElement("span"); const Btn = document.createElement("button"); const li = document.createElement("li"); 이런식으로 만들면 되는데 Element를 만들었으면 그 안에 글들 또한 넣을 수 있어야 한다. const span = document.createElement("span"); span.innerText("BlahBlah"); 이렇게 만든 Element들을 어떤 부모의 밑으로 넣을 수 있다. ..

- setInterval 함수를 일정 시간동안 실행시켜주고 싶을 때 사용하는 함수다. 시계로 예를 들어보자. const clockContainer = document.querySelector(".js-clock"); const clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const seconds = date.getSeconds(); const minutes = date.getMinutes(); const hours = date.getHours(); clockTitle.innerText = `${hours}:${minutes}:${seconds}`; } function init() ..

무언가 변경이 되었을때 함수를 실행하고자 한다. 예를 들어보자. function handelResize() { console.log("화면 크기가 바뀌었어유!!!"); } window.addEventListener("resize", handelResize); resize는 브라우저의 크기가 변경됬을 때 를 말한다. 브라우저 크기가 변경되면 handelResize함수를 실행시키게 된다. 이처럼 log찍히는 횟수가 화면 크기가 바뀔때 마다 늘어난다. 그만큼 함수가 불린것이다. function handelResize(event) { console.log(event); } window.addEventListener("resize", handelResize); 다음과 같은 경우가 있다. 그런데 event가 여기서..

- getElementById const title = document.getElementById("title"); HTML에서 id 가 title인 곳을 찾아오게 된다. 이를 console.log로 찍어서 확인해보면!! 이런식으로 나오게 된다. 그런데 이를 바꿀 수 있다!!! (응? HTML에 쓰여져 있는걸 바꿀 수 있다고..?) title.innerHTML = "HI! I changed in JS!" 왼쪽은 Visual Code 에서 HTML이고, 오른쪽은 해당 페이지의 소스를 보여주는 화면이다. 그냥 써있는 내용까지 다 바뀌었다. 같은 방법으로 글자 색을 바꿀 수도 있다. title.style.color = red; console.dir을 통해서 title로 innerHTML나 style.color..

배열은 잘 알고 있지만 Object는 조금 다른 듯 하여 헷갈릴까봐 기록해둬야 할 듯 싶었다. const Week = ["Mon", "Tue", "Wen", "Thur", "Fri", "Sat", "Sun"]; C++ 에서는 중괄호 ( '{ }' ) 를 썼다면, JS 에서는 대괄호 ( '[ ]' )를 쓴다. JS 에서의 중괄호는 Object에서 쓰이는데, 이를 배열처럼 쓴다면, SyntaxError가 뜰 것이다. 그럼... Object는 어떤 방식으로 써야할까..? ☞ 짝을 지어주자! const MyInfo = { age : "25", gender : "Male", isHandsome : true } 이런식으로 console.log를 찍으면, 이런식으로 나오게 되고, 또 신기한건 console.log(M..

JS는 HTML과 CSS를 더 멋있게 만들어준다고 생각하면 될 듯 하다. html의 코드에서 body 안에 반드시 마지막에!!!! 넣어야 한다. This is my first JS! body { background-color: tomato; } alert('Hello world!!!!'); HTML에 첫 JS를 씌운 것이다. 페이지를 켜게 되면(새로고침 포함) alert가 뜬다. 원하는 문장을 쓸수도 있고 뭐 여러가지 할 수 있다!!!! (심지어 변수까지) 여기서는 선언을 let 으로 하는 듯 보인다. 등등!!!! 흠.... 뭔가 다른게 있으려나 싶었는데 C++ 쓰는거랑 비슷한 느낌이 들어서 자세한건 적지 않을 것이다. 처음 알게 된 것들만 적어둬야징~