5번 폴더의 주석과 함께 복습하기
3강
-
JS로 HTML을 조작할 수 있다
-
개발자 도구 > document로 HTML파일을 확인할 수 있다
-
개발자 도구 > console.dir()로 특정 객체의 정보를 확인할 수 있다
따라서 console.dir(document)로 해당 페이지의 정보를 확인할 수 있다 -
document.querySelector("") 또는
document.querySelectorAll("")은 요소를 css방식으로 가져올 수 있다
document.querySelector("")에 해당하는 요소가 여러개일 경우 첫 번째 요소를 가져온다
document.querySelectorAll("")는 NodeList라는 배열로 요소들을 가져온다 -
elem.addEventListener("event", function)로 선택한 요소에 이벤트를 추가할 수 있다
https://developer.mozilla.org/ko/docs/Web/Events -
document.body는 예외적으로 js에서 querySelector로 가져오지 않아도 조작이 가능한 요소이다
-
되도록 JS에서는 HTML만을 조작하는 것이 좋다
css를 조작해야 할 때는 사전에 만들어 둔
class, id를 활용하여 html을 통해 css를 조작한다 -
js에서 class를 조작할 때는, classList를 통해 class를 추가, 제거 한다
-
elem.classList.toggle("")을 사용하여 한번에 해당 클래스를 추가 또는 제거 할 수 있다
4강
-
이벤트 리스너로 호출되는 함수는 이벤트에 대한 정보를 객체 인자로 가지며,
매개 변수를 통하여 함수 내에서 이벤트 객체 정보를 활용할 수 있다 -
event.preventDefault()를 통하여 브라우저 기본 동작을 제어할 수 있다
-
탬플릿 레테럴: `${variable} text sample`
-
localStorage는 브라우저의 api이며 브라우저에 정보를 저장할 때 사용된다
경로: 개발자 도구 > application > local Storage
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage#예제
5강(시계 기능)
-
기능별로 js파일을 분리하고, HTML파일에 import하여 관리하는 것이 좋다
-
setInterval(function, ms);
-
setTimeout(function, ms);
-
Date 객체
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date -
String.padStart(원하는 string의 자리수, "추가 할 string");
String. padEnd(원하는 string의 자리수, "추가 할 string");
6강(무작위 문구 출력)
-
Math 객체
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math -
createElement("생성할 태그");
-
부모태그.prepend(자식 태그 변수);
-
부모태그.append(자식 태그 변수);
7강(to do list)
-
input이 form태그 안에 있다면 이벤트는 form태그에 추가해야 한다
-
append();는 문자열과 객체를 추가할 수 있지만
appendChild();는 객체만 추가할 수 있다 -
event.target를 통하여 같은 태그 중 이벤트가 발생한 태그를 찾을 수 있다
부모 요소까지 함께 선택해야 한다면 event.target.parentElement로 부모 태그를 선택할 수 있다 -
localStorage에는 오직 text만 저장이 가능하다 다만 value값을 배열로 넣는다면
배열이 변경될 때 localStorage에 저장되는 text값도 변경되며 배열의 요소들은 ,로 구분된다 -
JSON.stringify()은 입력된 모든 값을 string으로 변환한다
따라서 객체나 배열 또한 string으로 변환된다.
(중괄호와 대괄호가 문자로 처리되는 방식으로 처리된다) -
JSON.stringify()를 활용하여 localStorage에 배열'처럼'보이는 value를 입력할 수 있으며
이렇게 localStorage에 저장한 배열'처럼'보이는 value값을 JSON.parse로 변환하면 다시 배열이 된다
이를 할용하여 text만 저장 가능한 localStorage에
배열'처럼'보이는 값을 저장한 뒤 배열로 꺼내 쓸 수 있다 -
arr.forEach(function) 배열의 각 요소마다 입력한 함수를 적용한다
이 때, forEach에서 호출되는 함수는 item이라는 매개변수를 생성하여 인자를 받아온다
따라서 forEach로 보내진 인자를 item이라는 매개변수로 받아서 함수 내에서 사용이 가능하다
이것을 화살표 함수를 사용하여 한 줄로 줄인 것이 arr.forEach((item) => 실행 동작 코드);이다
https://velog.io/@yopi27/JSArray배열-omj79o2h -
생성한 요소 중 특정 요소를 제거하고싶다면 요소 생성 시 요소에 id와 text를 가지는 객체를 생성하여
생성한 객체를 배열의 요소로 push해주고 이후 부여된 id를 찾아 제거하는 방식을 사용한다
이는 5번 폴더의 js파일 주석을 참고하면 좋다 -
배열의 고차 함수인 filter로 호출되는 함수는 return값이 true일 때
해당 item을 새로운 배열에 추가한다
(모든 고차함수는 배열의 각각의 요소를 인자로 하여, 인자의 수 만큼 함수를 동작시킨 결과물을 만들어 낸다)
8강(오픈 API 사용)
navigator.geolocation.getCurrentPosition()으로
현재 사용자의 위치 정보를 확인할 수 있다
(navigator는 WEB API이다)
fetch를 사용하여 파일이나 url에서 정보를 받아올 수 있다(fetch는 웹API이다)
fetch('경로')
.then(res => res.json())
.then(data => {
console.log(data)
})