🟡JavaScript

인프런에서 강의를 듣기 시작했다.앞으로의 글은 강의를 듣고 + 구글링 하고 + 직접 쳐 본 코드를 토대로 이해한 내용을 종합해 쓰려고 한다.    일급 함수란?First-Class Function함수가 '값(variables)'으로 다뤄지는 것  JS에서 함수는 일급 (First Class)이다. 이는 함수를 값으로 다룰 수 있다는건데, 즉 함수를 변수에 담을 수도, 함수의 인자나 결과로도 사용될 수 있다는 뜻이다.    고차 함수란?Higher-Order Function다른 함수를 인자(arguments(callbacks))로 사용하거나 결과로 return하는 함수고차 함수에는 map(), sort(), filter() 등이 있다. 먼저 다른 함수를 인자로 사용하는 경우를 살펴보자.다음 코드에서 ap..

navigator.geolocation.getCurrentPosition()실행 시 브라우저가 위치 좌표(WiFi, 위치, GPS 등)를 주는 함수이다. 두가지 인자를 받는데, 하나는 success 함수이고 나머지 하나는 error 함수이다.success 함수는 GeolocationPosition 객체 하나를 입력 받는다.weather.js 최종 완성 코드 const API_KEY="";//본인 API KEY 입력function onGeoOk(position){ const lat=position.coords.latitude; const lon=position.coords.longitude; //url의 위도와 경도, API를 받은 값 lat, lon, API_KEY로 대체해 줌 //..

● JSON.stringify()값을 string으로 바꾸고 싶을 때 사용하는 함수이다. JS의 object나 array 또는 어떤 JS 코드 건 간에 string으로 바꿔준다.● JSON.parse()string을 인자로 넣어주면 배열로 변환된다.  local storage에 array로 저장이 되지 않기 때문에 JSON.stringify로 string으로 저장 후 JSON.parse()로 그 string을 array로 바꿔주는 작업이다.● filter() filter() 함수는 새로운 배열을 만드는데, true인 값은 남기고 false인 값은 빼준다.#7 TO DO LIST 까지 완성된 todo.js 코드이다.const toDoForm=document.getElementById("todo-form")..

다음은 배경화면 다운로드에 활용했던 사이트이다. WallpaperBetter - 1080P, 2K, 4K, 5K HD 배경 화면 무료 다운로드 www.wallpaperbetter.com  ● Math.random()0부터 1사이의 랜덤 숫자를 제공하는 JS 기본 함수.ex). 0에서 10사이의 랜덤 숫자를 받고 싶으면 다음과 같이 작성하면 된다.  Math.random()*10; ● Math.round(), Math.ceil(), Math.floor()Math.round(): 반올림 함수Math.ceil(): 천장 함수(올림 함수). 수를 천장까지 올린다.Math.floor(): 바닥 함수(내림 함수). 수를 바닥까지 내린다.ex). 위의 random()까지의 함수는 소수점을 갖는데, 정수를 받고 싶은 ..

● setInterval()interval을 정하는 함수. 두가지 인자를 받는데, 첫번째 인자는 실행하고자하는 함수이고 두번째 인자는 호출되는 함수의 간격(ms)이다. setInterval(sayHello, 5000);위 코드는 sayHello()라는 함수를 5000ms, 즉 5초마다 실행한다.● setTimeout()setInterval과 형태는 동일하다.setTimeout(sayHello, 1000);위 코드는 sayHello()라는 함수를 1초 기다렸다가 한번만 실행한다.● padStart(), padEnd()"1".padStart(2,"0");padStart()의 첫번째 인자는 원하는 길이이고, 두번째 인자는 원하는 길이보다 문자가 짧을 때 앞에 채울 문자이다.실행 결과는 '01'이다.위의 경우,..

● 프로그램 작성시 가장 먼저 할 일은 HTML작성HTML을 작성한 후 거기 있는 element를 끌고오기. ● 다음 step은  HTML, CSS, JS를 각각의 역할을 충분히 수행하도록 역할 나누기 login시 input의 길이 등 유효성 검사는 HTML에서.(input이 form 안에 들어있을 때) ● form의 기본 동작은 submit이다. -모든 EventListener function의 첫번째 인자는 항상 지금 막 벌어진 일들에 대한 정보. JS가 정보를 제공함. //querySelector로 classname, tagname 모두 검색 가능하므로 대상이 id인지 명확히 해주기(#)const loginForm=document.querySelector("#login-form");const log..

● DocumentDocument는 이미 브라우저에 존재하는 object이다.JavaScript는 HTML에 접근하고 읽을 수 있게 설정되어있는데, HTML의 element를 (title 등) document로 불러올 수 있다. ● getElementById()document 함수의 일종으로, HTML에서 id를 통해 element를 찾아준다.getElementsByClassName(), getElementsByTagName() 등도 동일한 역할을 수행한다. ● querySelector(), querySelectorAll() 가장 많이 사용element를 CSS 방식으로 검색하는 함수이며 하나의 element를 return한다. Grab me! ->index.htmlcon..

● const와 let의 차이점 const는 값이 고정. 바꿀 일이 없을 때. const로 선언된 변수를 바꾸면 에러 발생. let은 값을 업데이트할 일이 있을 때. let myName="R";console.log("hello"+ myName);myName="Rin";console.log("hello"+myName);● array에 새로운 값 넣을 때 push() 사용. const daysOfWeek=["mon","tue","wed"];daysOfWeek.push("thu");console.log(daysOfWeek);● object  생성 const player={ name:"R", age: 23,};console.log(player);player.name="Rin";console.log(p..