차근차근 배움터

위치정보 동의 이름 입력 새로고침하고 할 일 입력 랜덤하게 배경 결과는 아래 링크에서 확인할 수 있다! Momentum uz1ns.github.io

#8.0 Geolocation navigator 함수 사용 아주 간단하게 내 위치 정보를 확인할 수 있다 function onGeoOk(position){ const lat = position.coords.latitude; const long = position.coords.longitude; console.log("You live in ", lat, long ); } function onGeoError(){ alert("[Error : can't load your current location.]"); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); OPEN API를 이용해서 날씨 정보를 불러와보자 Weather API - OpenWe..

#7.0 Setup const todoFrom = document.getElementById("todo-form"); const todoList = document.getElementById("todo-list"); function todoSubmit(event){ event.preventDefault(); const todoList = document.getElementById("todo-list"); const todo = document.querySelector("#todo-form input").value; todoList.innerHTML += ""+todo+" [x] "; document.querySelector("#todo-form input").value = ""; } todoFrom.ad..

#6.0 Quotes Math.random() 은 0과 1사이의 정수를 반환한다. Math.floor() 소수점 버림 Math.ceil() 올림 Math.round() 반올림 const quotes = [ { quote: "삶이 있는 한 희망은 있다", author: "키케로" }, { quote: "산다는것 그것은 치열한 전투이다.", author: "로망로랑" }, { quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.", author: "사무엘존슨" }, { quote: "언제나 현재에 집중할 수 있다면 행복할 것이다.", author: "파울로 코엘료" }, { quote: "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해", author: "찰리..

#5.0 Intervals const date = new Date(); new Date(); 를 이용해서 현재 월/일/시/분/초 등 다양한 값을 구할 수 있다 #5.1 Timeouts and Dates const clock = document.querySelector("h2#clock"); function getClock(){ const date = new Date(); let hour = addZero(date.getHours()); let minute = addZero(date.getMinutes()); let second = addZero(date.getSeconds()); let time = `${hour}:${minute}:${second}`; clock.innerText = time; } fu..

#4.0 Input Values input의 내용을 가져오려면 value 라는 property를 이용해야 함을 console.dir ( 객체 ) ; 사용하여 확인할 수 있었다. #4.1 Form Submission input 태그에 max-length 라던지, required 같은 속성은 input 태그가 form 태그 안에 존재할 때만 브라우저에서 작동하고 있다 #4.2 Events preventDefault() 메소드는 일반적으로 하는 기본 행동을 실행하지 않게 하는 것 (브라우저의 기본동작을 막아주는 메소드) (submit 버튼을 클릭했을 때 브라우저를 새로고침하는 기능을 포함) function login(tomato){ tomato.preventDefault(); console.log(tomato..

#3.0 The Document Object 브라우저에 대해서 더 이해하는 시간이 될 것이다 js가 브라우저를 어떻게 움직이게 하는 지 알 수 있다. html이 css와 js 를 가져오기 때문에 자바스크립트르 사용하는 이유는 HTML과 상호작용하기 위해서이다. HTML의 Element들을 Javascript을 통해 변경하고 읽을 수 있다. document를 console창에 작성하면 줄줄이 HTML 코드를 확인할 수 있다 그 말은 즉슨 document는 브라우저에 이미 존재하는 object ㄴ 우리가 접근할 수 있는 HTML을 가리키는 객체 자바스크립트의 관점으로 HTML에 존재하는 객체들을 보여준다. 자바스크립트는 html을 읽어오는 것이다. 브라우저 HTML 정보가 아주 많이 들어있는 document..

#2.9 Recap 데이터 타입에는 string, number 이 있다. variable을 만드는 두가지 옵션 const a = 5; let b = 6; 데이터의 값을 업데이트 하고 싶을 때 자바스크립트는 프랑켄슈타인 같아서, 계속해서 추가해가나는 것이지 언어 자체가 완전히 업데이트 되는것(예: 구식 개념이 사라지는)은 불가능하다. const와 let(가끔) 사용하지, var는 절대 사용하지 말 것! 변수안에 아무것도 없음을 알려주고 싶으면, null을 입력 const a = null ; Array 만들기 const days = [1, 2, false, undefined, "text", me ]; #2.10 Recap II - obejct를 만들어보자 const player = { name: "Nico"..

#2.0 Your first JS Project 자바스크립트는 이미 브라우저에 설치되어 있다. console 사용법을 알아보자 한줄씩 사용가능 자바스크립트 파일을 만들어서, 쉽게 사용해보자 Html is like a glue html 접착제 같은 역할을 한다 javascript나 css를 실행하고 싶을 때, 코드를 보여주는 게 아니라 "실행" 하고 싶을 때 html 안에서 두 가지 형식의 파일을 불러와 "실행" 해볼 수 있다. 자바스크립트 파일은 주로 맨 위에다가 적지 않고 맨 끝에 작성한다. HTML 브라우저가 CSS와 JS를 실행한다. 즉 두 가지 엔진이 돌아가고 있다. 하나는 css 하나는 js 브라우저가 실행되어야 하는 파일이 있다는 것을 확인했 때, 두 가지 모두 브라우저에서 활용된다. 원하는 ..

워낙 유명한 노마드코더 니코 센세의 바닐라 JS 강의를 들어볼까 한다 초반에 사기를 돋아주는 정보들 JS로 무엇을 할 수 있는지 그 장점에 대해서 열거한 부분들이 상당히 열정을 더 고취시키는 것 같다. 오늘부터 기록을 하기로 하고 오늘은 #1 INTRODUCTION을 마무리했다. 브라우저에 내장되어 있는 언어 HTML, CSS, Javascript 파이썬처럼 따로 설치해야 할 필요가 없다 > 즉 js는 접근성이 좋다 프론트엔드를 하고 싶다면 무조건, js를 배우면 된다 즉 프론트엔드에는 언어 선택의 옵션이 없다. 그래서 어떤 언어를 주 언어로 삼을 건지는 꽤나 중요하다. three.js 를 통해서 멋진 모델 가능 리액트 네이티브는 자바스크립트만으로 안드로이드와 ios 앱을 만들 수 있게 해준다. 일렉트론..