천진난만 코딩 스토리

- 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; 도 가능.

- Array - arr = [ , , ]; 항목배열 (리스트화) console.log(arr[n]); arr 배열의 n번째 자리에 있는 것을 불러옴. arr.push("n"); arr 배열에 n을 추가함.

- true - 켜져있음 / "참" - false - 꺼져있음 / "거짓" - null - 비어있음 / "비어있음" 이라고 말함. * null은 variable 안에 어떤 것이 없다는 것을 확실히 하기 위해 사용. undefined와 다른 것. * undefined는 메모리에는 있지만 정의되지 않은 것을 말함. 즉, 인지는 하지만 값은 없는 것.

- const - 상수로 변수를 선언함. 변수값 변경 X. 즉, 바뀌지 않는 값 선언. - let - 변경 가능한 변수를 선언함. 업데이트가 가능한 변수. * 기본적으로 const 사용. * 때때로 상황에 따라 let 사용. * var 이란 변수는 별다른 규칙없이 변수 선언함. But 사용하지 않음.