바닐라 js

[바닐라 JS 기초] 크롬앱 클론코딩 ( 시계 구현, Local Storage, Math 모듈로 난수생성, API로 유저 위치와 날씨 받아오기 )

시계 만들기 특정요소에서 찾기 document에서 어떤 요소를 찾을 때는 document.querySelector을 사용했지만, 어떤 요소에서 찾고 싶다면 해당 element에서 element.querlySelector을 하면 된다. 00:00 const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime() { const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); // 아래..

[바닐라 JS 기초] 조건문 ( + ClassList, Toggle )

조건문 If-else If-else는 조건문이다. 조건에 따라 수행할 내용을 쓸 때 사용한다. 사용방법은 아래와 같다. if(condition){ // block (조건이 참일 때 수행할 내용) }else{ // block (조건이 거짓일 때 수행할 내용) } block은 JS의 expression들을 말하며 console.log, alert와 같은 코드를 말한다. 예시 if(10 > 5){ console.log("Hi"); }else{ console.log("ho"); } JS에서 '같다'와 '같지 않다' 기호 JS에서 조건문을 사용할 때 '같다'는 ===이고 '같지 않다'는 !== 이다. if('10'=== 10){ console.log("Hi"); }else{ console.log("ho"); } ..

[바닐라 JS 기초] DOM, Event

JS DOM Functions Document document도 object이다. console.log(document); 를 통해 해당 웹페이지의 html 전체를 받을 수 있다. 즉, document를 console.log 하면 문서 전체가 출력된다. DOM (Document Object Module) JS는 HTML에 있는 모든 요소를 가져올 수 있으며, 가져온 요소의 내용을 객체로 바꾼다. document , 즉, 모든 HTML은 객체가 되는 것이다. 그리고 객체는 많은 키(=이름, label....)을 가지고 있다. ex) .log, .error, .name, .handsome, .age 아래와 같은 방식으로 HTML를 JS로 가져오거나 JS를 통해 HTML요소를 쓸 수 있다. 1. JS로 HTM..

[바닐라 JS 기초] 함수

함수 어떤 것을 수행하려는 로직의 한 부분이다. 함수로 정의하고 나면 해당 로직 부분을 필요한데서 원하는 만큼 사용할 수 있게 된다. 즉, 원하는 만큼 쓸 수 있는 코드의 부분을 말한다. JS에서 함수를 만드는 방법 function sayHello(){ console.log('Hello!'); } sayHello(); //function 함수이름(argument인자){ //코드 } 주석으로 쓰여진 코드와 같은 방식으로 함수를 만들 수 있다. Argument ( or parameter ) (인자) function sayHello(name){ console.log('Hello!', name); } sayHello("grit"); 인자를 받을 수 있는 함수를 만드려면 ()안에 argument (인자)를 써줘야..

[바닐라 JS 기초] JS와 바닐라JS, 출력, 변수, 데이터타입

JS와 바닐라 JS Javascript versions ECMAScript는 Specification(설명서)의 명칭 같은 것이다. ECMAScript의 예로 ES5, ES6 등이 있다. ES5 = ECMAScript5, ES6 = ECMAScript6 위와 같이 계속 Specifiacation을 업데이트 한다. Specification Specification은 일종의 매뉴얼로 어떤 것을 적었을 때 브라우저에서 출력되는방식이나 어떤 경우에 에러가 뜨는지 등등에 대해 알려주는 안내책자 같은 것이다. Javascript에서는 ECMAScript(이그마스크립트)가 Specification이다. Javascript는 중앙집중화 되어 있어서 누군가 업데이트를 했을 때 모든 브라우저에서 작동하게 된다. 브라우저는..