[노마드코더] 바닐라JS로 크롬 앱 만들기

불리언

true = 켜져있음

false = 꺼져있음

null = 비어있음

undefined = 변수가 메모리에 만들어져있고 인지하고 있지만 값이 없음

 

배열

const days = ["mon", "tue", "wed"];

days.push("thu");

 

객체(objects)

const player = {
  name: "nico",
  points : 10,
  fat: true
};
player.lastname = "potato";
player.points = 15;
console.log(player.name, player["points"]);

 

함수(function)

코드를 어떤 코드를 캡슐화해서 그걸 계속 반복해서 사용할 수 있도록 하는 것

반복 실행 싶은 걸 만든다

()으로 함수를 실행한다.

()에 정보를 담아 보낸다.

function sayHello(name, age){
	console.log(name, age)
}

sayHello("nico",10);

function plus(a,b){
	console.log(a+b)
}
plus(1,2)

const player = {
	name: "nico",
    sayHello: function(name){
    console.log("hello" + name);
    },
  };
  
  console.log(player.name);
  play.sayHello("nico");

결과 반환(Return)

const calculater = {
   add : function (a,b){
   return a+b;
	}

const addResult = calculater.add(2,3);

if문 (조건문)

const age = parseInt(prompt("몇살이니?")); //숫자 또는 NaN으로 반환됨

if(isNaN(age)){  //true면 실행하고 아니면 else구문으로 넘어감
	console.log("숫자를 입력해");
 } else {
 	console.log("나이를 써서 고맙다");
 }

 

HTML in Javascript

1. document 라는 객체는 JS에서 HTML파일을 불러올 수 있도록 도와준다
2. document의 함수 중에는 getElementById 라는 함수가 있는데,

    이 함수가 HTML에서 id를 통해 element를 찾아준다  ex)document.getElementedById("idname")

const title = document.getElementById("title");
title.innerText = "Got you!";
console.log(title.className);

- getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환)
- getElementsByTagName() : name을 할당할 수 있음(array를 반환)
- querySelector : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
단 하나의 element를 return해줌

한개만 아니라 동일한 하위요소를 가져오고 싶다면 querySelectorAll

⇒ hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능함)
- 첫번째 element만 가져옴
- 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll
⇒ 세개의 h1이 들어있는 array를 가져다 줌
- querySelector("#hello); 와 getElementById("hello"); 는 같은 일을 하는 것임
하지만 후자는 하위요소 가져오는 것을 못하므로 전자만 쓸거다

const title = document.querySelector("#hello form");
const title = document.getElementById("#hello");

 

* javascript가 document로 html을 불러올 수 있고 수정 추가도 가능하다*

1.불러오는 함수
querySelector/ querySelectorAll 이 유용하다.
2.사용자의 event를 listen해서 반응
addEventListener("event", function);
**이때 function에 실행 하는 () 기호는 쓰지 않는다. 우리가 원하는 건
이벤트 발생 시 함수가 실행 되는 것이기 때문에 ()를 임의로 쓰면 이벤트 발생 전에 실행됨.
3.바꿀 수 있는 property 중 style도 있다.
title.style.color = "blue"; 혹은
function changeColor() {title.style.color = "blue";}
title.addEventListener("click", changeColor); 처럼 쓸 수 있다.

const title = document.querySelector("div h1");

function handleTitleClick(){
const ranColor = ["blue","red","green","yellow","black"];

let num = Math.floor(Math.random() * ranColor.length);
title.style.color = ranColor[num];
}

title.addEventListener("click",handleTitleClick);

title.onclick = handleMouseEnter;
title.addEventListener(“mouseenter” , handleMouseEnter);

위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
removeEventListener을 통해서 event listener을 제거할수있기 때문이다.

document에서 body,head,title 은 중요해서 언제든
ex) document.body 로 가져올수있지만
div나 h1 등 element 들은 querySelector getElementById등으로 찾아야한다.
ex) document.querySelector(“h1”);

//window는 기본제공
function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}

window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);

1. element 찾기
2. event를 listen
3. 그 event에 반응하기

 

classList 우리가 class들의 목록으로 작업할수 있게끔 허용해준다.
className은 이전calss를 상관하지않고 모든걸 교체해 버린다.

classList를 이용하는건
js에서 건드리는건 HTML element가 가지고있는 또하나의 요소 사용하는 것이다.
= element의 class내용물을 조작하는 것을 허용한다는 뜻

contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다

toggle은 토큰이 존재하면 토큰제거
토큰존재 하지않으면 토큰 추가

ex)
toggle은 h1의 classList에 clicked class가 이미있는지 확인하여
만약있다면 toggle 이 clicked를 제거해준다
만약 class name이 존재하지 않는다면 toggle은 classname 추가