바닐라JS크롬앱

Weather날씨 만들기

navigator.geolocation.getCurrentPosition(success, error) Step 1. 사용자의 위치를 알아본다. (현재 위치의 위도와 경도) function onGeoOk(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you."); } // 사용자의 현재 위치를 요청한다. navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); function onGeoOk(position) { const lat = position.coords.latitude; const lon = position.coor..

To Do List 만들기

기본 세팅 const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector(" #todo-form input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { event.preventDefault(); // input의 현재 value를 새로운 변수에 복사하는 것. const newTodo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit", handleToDoSubmit); ToDo 추가하기 co..

Quotes and Background 명언 만들기

Quotes 기본 세팅 // 10개의 명언들을 object안에 10개의 array들이 ,으로 연결되어있ㄷ. const quotes = [ { quote: "Be the change that you wish to see in the world.", author: "Mahatma Gandhi", }, { quote: "Be yourself; everyone else is already taken.", author: "Oscar Wilde", }, { quote: "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me..

Clock만들기

기본 세팅 00:00 const clock = document.querySelector("h2#clock"); Intervals interval : "매번" 일어나야 하는 무언가를 말한다. setInterval(실행하고자 하는 function, 호출되는 function간격 {ms}) ex. setInterval(sayHello, 5000) - 매 5초마다 실행하는 것! function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); Timeouts and Dates Timeout 도 마찬가지이다. function sayHello() { console.log("hello"); } setTimeout(sayHello, 5000); Date..

Login만들기

Input values Log In // 방법 1. //form형태를 가져오고 싶은 코드 const loginForm = document.getElementById("login-form"); //input의 value값을 가져오고 싶은 코드 const loginInput = loginForm.querySelector("input"); //button형태를 가져오고 싶은 코드 const loginButton = loginForm.querySelector("button"); // 방법 2. document 또는 하나의 element를 통해서 const loginInput = document.querySelector("#login-form input"); const loginButton = document.q..

JavaScript - 브라우저(Document, Elements, Events)

Document - Object HTML이 CSS와 JS를 가져온다는 건 국룰~ HTML의 Element들을 JS로 변경하거나 가지고 올 수 있다. (HTML과 상호작용) 마치 object내부에 있는 property들의 값들을 변경할 수 있다. Console창에서 HTML코드를 JS관점에서 불러올 수도 있고, 수정도 가능 ex. document.title = "Hi" 라고 하면, 웹페이지 제목이 Hi로 변경됨. 여기서 document 는 웹페이지를 말하는 것. 그리고 Javascript의 시작점이라 말할 수 있다. ※ console.log(document) Vs console.dir(document)의 차이 console.log(document) -> 태그내용이 나온다. 우리가 보는 HTML의 구조 co..

Conditionals : 조건문 (if,else)

variable값의 type을 보는 방법 (디폴트: string(문자)이다.) // prompt는 사용자에게 창을 띄울 수 있도록 해준다. const age = prompt("How old are you?"); //variable값의 type을 보고싶으면, typeof를 넣는다. console.log(typeof age); variable값의 type을 변경하는 방법(적용) // prompt는 사용자에게 창을 띄울 수 있도록 해준다. const age = prompt("How old are you?"); // variable값의 type을 보고싶으면, typeof를 넣는다. // parseInt는 string을 number로 바꿔준다. console.log(typeof "15", parseInt("15"..

Function(코드를 캡슐화해서, 실행을 여러번 가능)

Function이란? 계속 반복해서 사용할 수 있는 코드 조각 어떤 코드를 캡슐화해서, 실행을 여러 번 가능하게 해준다. (실행되고 나면) 사라지고, 마지막엔 결과를 남기게 한다. 기본 function sayHello() { // 실행하게 될 코드 블록 console.log("Hello"): } sayHello("Hello") sayHello("Hello") sayHello("Hello") 절차 (1) Function안으로 값이나 데이터를 보내는 방법 function sayHello() { console.log("Hello my name is A"); } sayHello("jiyoung"); sayHello("gyeogmi"); sayHello("junhan"); 콘솔창에는 Hello my name is..