천진난만 코딩 스토리

- HTML - 변경사항X - JS - const hours = String(date.getHours()).padStart(2, "0"); 를 하여 hours라는 변하지 않는 변수에 date.getHours()를 하여 시간을 저장하는데 String(date.getHours()) 을 하여 number를 string으로 변경해주고 padStart(2, "0")를 하여 표시되는 시간이 2글자가 안된다면 앞에 0을 추가함. padStart 는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환함. padEnd 는 현재 문자열의 끝을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환함. padStart와 padEnd 모두 string에만 적용 가능함. 즉, nu..

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 ~ ; 화면에 마우스가 ~ 할 때 등 등

- Listen 하고 싶은 event를 찾는 방법 - 1) 구글->찾고싶은 element 검색 -> MBN에서 찾기 ex) div html element mdn JS의 내용을 보려면 "Web Apls" 로 검색 즉, JS 관점의 HTML Heading Element 2) console.dir 하여 나오는 정보를 활용. onclick 처럼 앞에 on이 붙는 것이 event임. JS 파일에 작성할 땐 앞의 on은 떼고 작성. - addEventlistener - Event를 Listen함. 예제 코드) title.addEventlistener("click", your click); => title 클릭 시 your click 을 실행함. title.onclick = yourclick; 위의 코드를 이렇게도 ..

* JavaScript 는 Html을 읽고 변경할 수 있음. - document. - title, body, head 는 바로 불러올 수 있음. 그 외의 element는 다른 방법으로 불러와야 함. 예제 코드) document.title = Hi title 이 hi로 변경됨. document.body body를 불러옴. document.getElementById("title"); Id가 title인 element를 불러옴. document.querySelector("hi:fiest child"); h1의 첫번째 자식을 불러옴. document.querySelector(".hi h1"); hi라는 class의 h1을 불러옴. class는 . id는 # 으로 불러옴. 단, 여러개라면 그 중에 첫번째만 가져옴..

=== : A===B / A가 B라면 !== : A!==B / A가 B가 아니라면 $$ : and || : or -if else- if문 (조건)에 해당하지 않는다면 if else안의 코드를 실행. (else 전에 사용하는 또 다른 조건문) 예제 코드) const age = parseInt(prompt("how old are you?")); if (isNaN(age) || age 18) { console.log "You can drink"); } -1 => write a real age 5 => You are..

- if - 만약 (조건)에 해당한다면 if안의 코드를 실행. - else - if문 (조건)에 해당하지 않는다면 else안의 코드를 실행. - isNaN - 숫자이면 False, 문자이면 Ture를 도출. 예제 코드) const age = parseInt(prompt("how old are you?")); if (isNaN(age)){ console.log("Not age"); } else { console.log("Good"); } 15 => Good Ori => Not age *숫자 입력 시 isNaN 은 False -> Not age 출력 문자 입력 시 isNaN 은 Ture -> Good 출력

- typeof - string(문자)인지 number(숫자)인지 알려줌. - parseInt - string을 number로 변환, 변환이 안될 시 NaN - prompt - 알림창에 질문창을 만듬. 예제 코드) const age = prompt ("How old are you?"); console.log (typeof age); 15 => number ori => string const age = prompt ("How old are you?"); console.log (age, parseInt(age)); 15 => 15 15 ori => ori NaN *NaN = Not a number

- function - 계속 반복해서 사용할 수 있는 코드 조각. - console.log - consloe에 무엇은 log 해줌. -return - 함수 실행을 종료하고 주어진 값을 호출지점에 반환함. 예제 코드) => Hello you => My name is Ori I'm 10 My name is Olaf I'm 5 => 12 => Ori Hi Olaf !

const player = { name: "Ori", points: "25" }; console.log(player); console.log(player.name); player = { 이 안의 내용이 모두 object } * 이 때 const 내의 object는 수정, 추가 가능. *player.points = points + 10; 도 가능.