노마드 코더/바닐라 자바스크립트
초보자를 위한 바닐라 자바스크립트 #2-6
초보자를 위한 바닐라 자바스크립트 #2-6
2021.08.29const title = document.querySelector("#title"); const BASE_COLOR = "rgb(57, 73, 94)"; const OTHER_COLOR = "#7f8c8d"; function handleClick(){ const currentColor = title.style.color; if (currentColor === BASE_COLOR){ title.style.color = OTHER_COLOR; } else { title.style.color = BASE_COLOR; } } function init(){ title.style.color = BASE_COLOR; title.addEventListener("click", handleClick) init(); 만약 ..
초보자를 위한 바닐라 자바스크립트 #2-5
초보자를 위한 바닐라 자바스크립트 #2-5
2021.08.29if-else if 조건문은 적은 것을 실행하려면 항상 참이어야 한다. else if를 사용해 여러개의 조건문을 만들수도 있다. if(10>5){ console.log("hi") } elsee { console.log("ho") } //hi if("10" === 10){ console.log("hi"); } else if("10" === "10"){ console.log('lalala') } else { console.log("ho"); } //lalala 피연산자 다른조건들을 합치는 것이다. && : and : 둘다 참이어야 조건문 실행한다. true && true = true true && false = false false && true = false false && false = false tru..
초보자를 위한 바닐라 자바스크립트 #2-4
초보자를 위한 바닐라 자바스크립트 #2-4
2021.08.29자바스크립트는 단지 html와 css를 바꾸고 싶어서 만들어지지 않았다. 이벤트에 반응하기 위해서 만들어 졌다. 이벤트는 웹사이트에서 발생하는 것들을 말한다.(click residze submit input change load before closing printing 등) const title = document.qeurySeletor("#title"); function handleResize(){ console.log("I have been resized") } window.addEventListener("resize", handleResize); window resize는 handleResize를 호줄한다. handleResize(); 를 적으면 함수를 바로 호출한다. 이벤트 예시 const ti..
초보자를 위한 바닐라 자바스크립트 #2-3
초보자를 위한 바닐라 자바스크립트 #2-3
2021.08.29const title = document.getElementById("title"); title.innerHTML = "His From JS"; title.style.color = "red"; console.dir(title); style.color를 사용하여 글씨색을 red로 변경하였다. 이런 방식으로 html을 바꿀 수 있다. querySelector 노드의 첫번째 자식을 반환한다. const title = document.querySelector("#title"); title.innerHTML = "Hi! From JS"; title.style.color = "red"; console.dir(title); querySelector는 document에 가서 모든 자식들을 선택한다.
초보자를 위한 바닐라 자바스크립트 #2-2
초보자를 위한 바닐라 자바스크립트 #2-2
2021.08.29DOM Document Object Module 사용하면 자바스크립트는 html에 있는 모든요소를 가지고 와서 객체로 바꾼다. This works! id를 선언할때는 #, class를 선언할때는 . 으로 시작된다. h1에 hello라고 적어놔서 출력이 hello라고 되야하지만, innerHTML을 사용해서 Hi! from JS로 변환시킬 수 있다.
초보자를 위한 바닐라 자바스크립트 #2-1.1
초보자를 위한 바닐라 자바스크립트 #2-1.1
2021.08.29자바스크립트에선 "" - 스트링이고, ''도 스트링이다. 주의해야 할 건 "로 시작했으면 반드시 "로 끝내야 하고, '로 시작했으면 반드시 '로 끝내야 한다. 다른 방법은론 ``(백틱)을 사용하는 방식이 있다. 백틱을 사용할 땐 인자를 ${ }안에 넣어서 사용한다. function sayHello(name, age){ console.log(`Hello ${name} you are ${age} years old`); } const greenNicolas = sayHello("Nicolas", 14) console.log(greenNicolas) //Hello Nicolas you are 14 years old //undefined greenNicolas는 sayHello 함수의 리턴 값이다. greenNi..
초보자를 위한 바닐라 자바스크립트 #2-1
초보자를 위한 바닐라 자바스크립트 #2-1
2021.08.29함수란? 함수는 함수, 어떠한것의 기능 어떤 걸 수행하려는 한 부분으로, 원하는 만큼 쓸 수 있다. console.log('Hello') console.log('Hello') console.log('Hello') console.log('Hello') //Hello //Hello //Hello //Hello console.log('Hello Nicolas') console.log('Hello Jun') console.log('Hello Liyn') console.log('Hello Dal') //Hello Nicolas //Hello Jun //Hello Liyn //Hello Dal 함수의 사용법은 아래와 같은 방식으로 사용한다. function 변수명(){}를 사용하여 표현한다. function say..
초보자를 위한 바닐라 자바스크립트 #1-10
초보자를 위한 바닐라 자바스크립트 #1-10
2021.08.24Object란? 각 value에 이름을 줄 수 있다. Object를 선언하기 위해서는 {컬리 브라켓}을 써주면 된다. const nicoInfo = { name:"Nico", age:33, gender:"Male", isHandsome:true, } console.log(nicoInfo.gender) //Male 선언 한 뒤 다시 선언하면 데이터가 변경되서 출력하는걸 확인할 수 있다. const nicoInfo = { name:"Nico", age:33, gender:"Male", isHandsome:true, } nicoInfo.gender = "Female" console.log(nicoInfo.gender) //Female 객체안에 배열을 넣을 수 있다. 또한, 배열안에 객체를 넣을 수 있다. co..