interval 매번 발생해야 하는 기능을 말함 setInterval(func, intervaltime) -> func을 intervaltime(ms) 마다 실행하는 함수 how to use clock.js function sayHello() { console.log("hello"); } // 5000ms(5초)마다 sayHello 함수가 호출됨. setInterval(sayHello, 5000);
Saving & Loading Username index.html app.js const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit(event) { event.preventDefault(); // 기본동작 실행되지 않도록 막기 loginForm.classList.add(HIDDEN_CLAS..
index.html app.js const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); function onLoginSubmit() { const username = loginInput.value; console.log(username); } loginForm.addEventListener("submit", onLoginSubmit); 브라우저의 기본 동작 막기 1. form submit의 기본동작은 "새로고침" app.js const loginForm = document.querySelector("#login-form"); const login..
CSS in Javascript function handleTitleClick() { const currentColor = h1.style.color; let newColor; if (currentColor === "blue") { newColor = "tomato"; } else { newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click", handleTitleClick); ** - raw string이 반복되면 상수로 만들어 주자. JS는 string이 오타나면 오류라고 알려주지 않는다. 하지만, 변수명이 오타나면 오류라고 알려준다. what is toggle - toggle 사용 전 const h1 = document..
Events ** - js 파일이 있기 때문에, js를 통해 html의 내용을 가져올 수 있다. - document가 html이 js파일을 load하기 때문에 존재 - element의 내부를 보고 싶으면 console.dir() --> 기본적으로 object 로 표시한 element를 보여줌 --> 그 element 중, 앞에 'on'이 붙은 것들이 "event". ** - 모든 event는 js가 listen할 수 있다. - eventListener event를 listen함 -> js에게 어떤 event를 listen하고 싶은지 알려줘야 함. const title = document.querySelector("div.hello:first-child h1"); // title을 click하는 것을 li..
Searching For Elements -getElementsByClassName() 많은 element를 가져올 때 쓴다. (array를 반환!) -getElementsByTagName() name을 할당할 수 있다. (array를 반환!) -querySelector element를 CSS selector 방식으로 검색할 수 있다. 단 하나의 element를 return해준다. // class="hello" 를 가진 태그의 하위 태그인 hi 선택 const title = document.querySelector(".hello hi"); -querySelectorAll 조건에 맞는 element들을 모두 가져오고 싶을 때.
HTML In Javascript -document의 함수들 중, getElementById 라는 함수는 HTML에서 id를 통해 element를 찾아준다. const title = document.getElementById("title"); -element를 찾고 나면, JS로 해당 HTML의 무엇이든 바꿀 수 있다. ex) element의 innerText를 바꿈 title.innerText = "Got you!"; -id, className 등을 가져올 수 있음 console.log(title.id); console.log(title.className);
The Document Object -console에 document를 입력하면, 작성한 HTML을 가져올 수 있다. -'document'는 브라우저에 존재하는 object. -console에 console.dir(document)를 호출하면, document.title 이 HTML에서 정의한 title과 같다. -JS에서 HTML document 객체로부터 title을 가져올 수 있다. -document.body를 호출하면 HTML에서 body항목을 가지고 온다. --> JS는 HTML을 바꿀 수 있다. --> document는 우리가 JavaScript에서 HTML에 접근할 수 있는 방법이다. --> document가 모든 것의 시작점 ! (document는 web site를 의미함.)
조건문 1. conditionals prompt(); 함수는 사용자에게 창을 띄어서 값을 받음 이 함수를 사용하면 답을 할 때까지 코드의 실행을 멈추고, css로 바꾸지도 못함. 오래된 방법. typeof 키워드 : type을 볼 수 있음 * prompt(); 에서는 string이 디폴트값. parseInt(); == string --> number 로 변환해주는 함수 ** 숫자가 아닌 것이 입력되면 변환이 안됨 -> NaN(Not a Number) 2. isNaN isNaN 함수는 무언가가 NaN인지 판별하는 함수. boolean 즉, true or false 값을 리턴함.
함수 function sayHello() { console.log("Hello my name is C."); } sayHello(); // Hello my name is C. 1. 함수에 데이터 보내기 function plus(a, b) { console.log(a + b); } plus(3, 10); // 13 2. Returns function 안에서 return 과 추가작업을 입력하면, return 만 작업하고, 추가수행은 이루어지지 않는다. but, 만약 return 앞에 기타작업이 있다면, 이 작업은 수행된다. 즉, return "까지만" 수행된다!
