천진난만 코딩 스토리

- HTML - '시간:분:초' 로 만듬. - JS - const clock = document.querySelector("h2#clock"); 를 하여 clock 라는 변하지 않는 변수에 document.querySelector("h2#clock")를 하여 h2의 clock이라는 id를 가진 element를 저장함. function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; } 를 하여 시:분:초를 clock의 innerText에 작성하는 getClock란 함수를 만듬. ( new Date() 는 new 키워드를 사용한 new Dat..

- 파일정리 - 파일을 좀 더 편히 보기 위해 정리를 함. 정리하며 app.js는 greetings.js로 변경하고 clock.js를 추가함. - HTML - (주황색 박스) 파일을 폴더에 넣고 이름을 변경했기에 파일의 이름을 변경된 이름과 위치로 작성해줌. (분홍색 박스) 시계를 만드는 코드를 적어줌. - JS - const clock = document.querySelector("h2#clock"); 를 하여 clock 라는 변하지 않는 변수에 document.querySelector("h2#clock")를 하여 h2의 clock이라는 id를 가진 element를 저장함. function sayHello() { console.log("hello"); } 를 하여 hello를 console에 보여주는 ..

- 코드 - function solution(a, b) { let answer = 0; for (let x of a) { if (x === b) answer++; return answer; } str = "COMPUTERPROGRAMMING"; console.log(solution(str, 'R')); - 풀이과정 - str = "COMPUTERPROGRAMMING"; console.log(solution(str, 'R')); 를 하여 문자와 단어를 받고 문자를 배열함. function solution(a, b) { 를 하여 solution(a, b) 라는 함수를 만듬. 이때 a는 str이고 b는 'R'임. let answer = 0; 를 하여 answer에 0을 저장함. for (let x of a) ..

- HTML - form에 hidden인 class를 추가함. - JS - const USERNAME_KEY = "username"; 를 하여 localStorage의 key인 저장될 값의 이름인 username를 USERNAME_KEY라는 변수에 저장함. function onLoginSubmit(event) 에 추가로 코드를 작성함. localStorage.setItem(USERNAME_KEY, username); 를 하여 localStorage에 USERNAME_KEY인 username와 username인 loginInput.value을 저장함. paintGreetings(username); 를 하여 paintGreetings(username)인 function을 실행함. function paintG..

- HTML - 를 추가함. - CSS - .hidden { display: none; 를 하여 hidden 라는 class를 가진 요소를 display: none; 하여 보여지지 않도록 함. - JS - const loginForm = document.querySelector("#login-form"); 를 하여 loginForm 라는 변하지 않는 변수에 document.querySelector("#login-form")를 하여 login-form라는 id를 가진 요소를 찾아와 저장함. const loginInput = document.querySelector("#login-form input"); 를 하여 loginInput 라는 변하지 않는 변수에 document.querySelector("#log..

- HTML - 를 하여 div를 form으로 바꿔줌. ('required'라는 기능을 사용하기 위해 바꿈) 를 하여 입력되는 text의 최대길이가 15인 input 박스를 만듬. (required maxlength 는 최대 길이를 말함.) 를 하여 iog in 버튼과 같은 input을 만듬. - JS - const username = loginInput.value; 를 하여 username 이란 변수에 loginInput.value;를 하여 작성되는 text를 저장함. console.log(username); 를 하여 작성되는 text를 보여줌. - 화면 - 오류가 나지만 제대로 작성한 것이 맞음.

- HTML - 로그인 form에 input과 버튼을 넣어줌. js파일도 연결해줌. - JS - const loginInput = document.querySelector("#login-form input"); 를 하여 loginInput 라는 변하지 않는 변수에 document.querySelector("#login-form input")를 하여 login-form input라는 id를 가진 요소를 찾아와 저장함. const loginButton = document.querySelector("#login-form button"); 를 하여 loginButton 라는 변하지 않는 변수에 document.querySelector("#login-form button")를 하여 login-form button..

- 코드 - function solution(s) { let answer = ""; for (let x of s) { if (x === "A") answer += "#"; else answer += x; } return answer; } str = "BANANA"; console.log(solution(str)); - 풀이과정 - str = "BANANA"; console.log(solution(str)); 를 하여 단어를 입력 받음 function solution(s) 를 하여 solution(s)라는 function을 만듬. 이때 s는 str임. let answer = ""; 를 하여 answer를 string으로 저장하지만 내용은 비워둠. for (let x of s) 를 하여 s를 계속 반복하여 ..

function titleclick() { const clickedClass = "clicked"; if(h2.classlist.contains(clickedClass); { h2.classlist.remove(clickedClass); } else { h2.classlist.add(clickedClass); } => 클릭 시 clicked가 있으면 없애고 있으면 추가함. 이 때 h2는 const h2임. ① 변수에 class를 작성하여 오류를 최소화함. ⓐ class name을 작성한 것. ⓑ classlist는 HTML element가 가진 또 하나의 요소를 사용하고, element의 class 내용물을 조작하는 것을 허용함. classname은 모든 걸 교체하고 이전의 class는 상관하지 않음. ..

* document. 외에 window. 으로 화면을 불러올 수 있음. 예제 코드) window.addEventlistener = online; Wifi가 온라인 상태일 때 window.addEventlistener = offline Wifi가 오프라인 상태일 때 window.addEventlistener = mouse ~ ; 화면에 마우스가 ~ 할 때 등 등