인생 1회차 (First-Life) Ing

getCurrentPosition() : 장치의 현재 위치를 가져옴 openwhathermap 사이트 : https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweat..

JSON.stringify () : javaScript 값이나 객체를 string(문자열)으로 만들어줌 JSON.parse() : JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성함 fliter() : 지우고 싶은 (배열)아이템을 제외함, 넣고 싶은 아이템은 반드시 true로 리턴함, filter 는 원래 array를 변경하지 않고 새 array를 생성함 // filter 예제 function abc(item) { return item !==3 } [1,2,3,4,5].filter(abc); // 결과 [1,2,4,5] parseInt() : 문자열을 숫자로 바꿔줌 to do list 만들기 const toDoForm = document.querySelector("#..

Math.random() : 랜덤한 숫자 Math.ceil() : 올림 Math.round() : 반올림 Math:floor() : 내림 랜덤하게 노래 / 가수 제목 표시하기 ( Quotes 대신) const quotes = [ { title : "꽃길만 걷자", singer : "버블 사운드" }, { title : "있잖아", singer : "데이식스" }, { title : "너를 생각해", singer : "주시크" }, { title : "savage", singer : "aespa" }, { title : "My Universe", singer : "방탄소년단" }, { title : "나의 첫사랑", singer : "다비치" }, { title : "Only You", singer : "..

setIntervals : '매 n초/분…마다' 무언가를 실행하고 싶을 때 사용 setTimeout : 일정 시간 후에 실행하게 함 new Date : 오늘 날짜 (getDate/Day/FullYear/Hours/Minutes/Second) padStart() : string에 쓰는 함수로 원하는 글자수를 만들 때 (앞부분에 string을 추가하여) 사용 ↔ padEnd() "1".padStart(2,"0") // padStart(원하는글자수, "추가할 글자") // 결과 "01" 시계만들기 const clock = document.querySelector("#clock") function getClock (){ const date = new Date(); const hours = String(date...

username 입력받고 저장하고 불러오기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit (event){ event.preventDefault(); // 브라우저 기본동작 막기 loginForm.classList.add(HIDDEN_CLASSNAME) // form 다시 숨겨주기 c..

DOM : Document Object Model 자바스크립트로 HTML를 object 형태로 제어(읽고 수정하고 추가 등)할 수 있음! const hello = document.getElementById("Hi"); const hello = document.getElementByClassName("Hi"); querySelector - element를 CSS 방식으로 가져올 수 있음, 단 하나의 element를 가져옴 (여러개의 경우 제일 첫번째 것만 가져옴) querySelectorAll - 조건에 부합하는 모든 element를 가져옴 const title = document.qeurySelector(".hello h1"); addEventListener const h1 = document.query..

변수 : 값을 저장하거나 유지 const : 변하지 않는 상수, 재할당 불가 // const 의 재할당이란? // 전체를 하나의 값으로 업데이트 하려고 할 때는 불가. 배열추가, 오브젝트 property 추가 등은 가능. const player = ["One"] player.push("Two"); // 가능 player = false // 불가능​ let : 값 변경 가능, 재할당 가능(재할당 할 때 let을 안붙이고 변수 이름만 쓰면 됨) var : 실수할 가능성이 크기 때문에 쓰지 말 것 → const 를 기본적으로 사용하고, 업데이트 하고 싶은 변수에만 let을 사용 → 변수의 사용만 보고도 의도를 파악할 수 있기 때문에 var 는 비추천 null & undefined null : 비어있음, 자연적..

실행 컨텍스트 개념 함수를 호출할 때 해당 함수의 호출 정보가 차곡차곡 쌓여있는 스택을 콜 스택call stack 이라 한다. 실행 컨텍스트는 콜 스택에 들어가는 실행 정보 하나와 비슷하다. 실행 컨텍스트는 "실행 가능한 코드를 형상화하고 구분하는 추상적인 개념" 으로 콜스택과 연관하여 정의하면 "실행 가능한 자바스크립트 코드 블록이 실행되는 환경" 이라고 할 수 있고, 이 컨텍스트 안에 실행에 필요한 여러가지 정보를 담고 있다. 여기서 말하는 실행 가능한 코드 블록은 대부분의 경우 함수가 된다. “현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다. ” 실행 컨텍스트 생성 과정 활성 객체 생성 > argum..

프로토타입의 두가지 의미 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. 이러한 링크를 암묵적 프로토타입 링크implicit prototype link 라고 부르며 이러한 링크는 모든 객체의 [[Prototype]] 프로퍼티에 저장된다. 주의해야 할 점은 prototype 프로퍼티와 객체의 숨은 프로퍼티인 [[Prototype]] 링크를 구분해야 한다는 점이다. 자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 프로토타입 객체를 자신의 부모 객체로 설정하는 [[Prototype]] 링크로 연결한다. 객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝 자바스크립트에서 객체는 자기 자신의 프로퍼티뿐만..

함수호출 함수를 호출하여 코드를 실행하는 것 arguments 객체 C와 같은 엄격한 언어와 달리 자바스크립트에서는 함수를 호출할 때 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 발생하지 않는다. 정의된 함수의 인자보다 적게 함수를 호출했을 경우 : 넘겨지지 않은 인자에게 undefined 값이 할당 정의된 인자 개수보다 많게 함수를 호출 했을 경우 : 에러가 발생하지 않고, 초과된 인수는 무시 이러한 특성 때문에 함수 코드를 작성할 때, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해줘야할 경우가 있는데, 이를 가능케 하는 것이 바로 arguments 객체이다. arguments 객체는 매개변수 개수가 정확하게 정해지지 않은 함수를 구현하거나, 전달된 인자의 개수에 따라 서로..