- 노마드코더 JS 기초 강의 들으며 TODO LIST 만들어 보기!
- 결과물
html에서 js를 불러오는 법
<body>가 끝난 후에 <script type="text/javascript" src="prac.js"></script><body> 이전에 <script async type="text/javascript" src="prac.js"></script>
template literals with use backtick(`) (ES6)
- backtick(`) 문자를 사용해서 줄바꿈을 쉽게 할 수 있으며, 수식과 문자열을 한꺼번에 표현 가능(표현식 삽입)하다.
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
//줄바꿈이 자동으로 되며, 수식의 결과를 $로 나타낼 수 있다.JS DOM functions
- JS에서도 CSS 처럼 HTML element를 선택하고, 변형할 수 있다.
- JS에서 HTML element에 접근하는 방법은 document를 쓰는 것이다.
- document.get... 으로 여러 element를 가져올 수 있다.
- 이 가져온 객체를 DOM (document object module) 이라 부른다.
- JS는 모든 HTML element를 가져온 후, DOM객체로 바꿈.
const title = document.getElementById("title");
title.innerHTML = "hi!!"
//`.innerHTML` 사용으로 HTML 문서에서 작성했던 title을 바꿀 수 있다!!Modifying the DOM with JS
console.dir(document)로 무엇을 할 수 있는지 확인! (사용 가능한 JS 객체들 확인 가능하다)document.querySelector("선택자")CSS 선택자와 일치하는 노드의 첫 번째 자식 반환.DOM 객체.style.colors = 'red'이 명령어로 색을 수정 가능!
Events and event handlers
- JS는 이벤트와 반응하기 위해 만들어짐.
function handleResize(event) {
console.log(event); //event 객체를 호출함! (timestamp, path 등 포함..)
console.log("resized");
}
window.addEventListener("resize", handleResize);
//window.addEventListener("resize", handleResize());
//중요! 만약 이렇게 쓰면 함수가 즉시 호출이 되면서 resize 되지 않았는데도 handleResize를 호출함!!!DOM HTML class in JS
- JS 파일에서 HTML class 수정하기
className: 새 class를 추가하면 기존 class가 삭제되고, 기존 class의 CSS가 적용되지 않는다. (빈 문자열을 할당하면 모든 class 삭제됨.)- 원래 class 전부를 삭제한 후, 변경한다.
- 다른 class가 사용되지 않을 것이 확실할 때 써야 좋다.
classList: 다른 element에 영향을 주지 않고 class를 추가하거나 제거할 수 있다.- 변경되는 부분을 제외한 class의 다른 부분에 영향을 주지 않는다.
- toggle, replace 함수를 편리하게 사용 가능.
querySelector & local storage
-
querySelector: 찾은 첫 번째 element 가져옴. 없으면 null -
querySelectorAll: 선택자를 만족하는 모든 element 가져옴 (array 형태) -
local storage로 유저의 브라우저에 정보를 저장할 수 있다!
- local storage에는 key : value 형태로 저장되고, key 값으로 조회 가능하다.
- 창을 새로고침 하거나 껏다 켜도 저장된 상태가 남아있다.
-
local storage에 자바스크립트의 data(object)를 저장하면 읽을 수 없고, 오직 string만 바로 읽기 가능하다.
localStorage.setItem("toDos", []);
// [object Object] 로 나온다.- javascript object notation 줄임말 JSON
- JSON.stringify : JS object를 string으로 바꿔줌.
- JSON.parse : string을 object로 바꿔줌.
event
-
event의 default 동작
- 보통 event가 발생하면 root, form에서 일어남.
- 다른 모든 것들이 event에 반응함.
- form submit (엔터로) → 이를 감지해서 event를 보내고 새로고침
- form에서 submit event 발생하면 이 event는 document까지 계속 올라간다.
-
event.preventDefault (event의 기본 동작을 막음 ⇒ input에 적은 text가 사라지지 않음)
- 이후 input.placeholder, input.value 로 값을 받아올 수 있음.
-
event.target (이벤트가 일어난 타겟의 html 반환)
- console.dir(event.target)으로 dom 반환해서 원하는 명령어 찾아볼 수 있다.
- → 부모를 찾는 것 .parentNode ⇒ event.target.parentNode 로 부모 반환
스크립트의 로딩
- JS가 조작 대상인 HTML보다 먼저 실행된다면 조작할 요소가 존재하지 않는 상태이기 때문에 제대로 동작하지 않는다.
body가 해석되기 전에 script가 로드 및 실행되면 동작하지 않는 문제의 해결 방법
-
"DOMContentLoaded" 이벤트는 브라우저가 완전히 로드 및 해석될 때 발생함.
document.addEventListener("DOMContentLoaded", function() { ... }); -
async을 사용하면 비동기 방식으로
<script>태그에 도달해도 브라우저가 HTML 요소를 멈추지 않고 계속 다운받음.<script src="script.js" async></script>
- 즉 script와 HTML이 동시 로드 및 작동함.
- 단, async 속성은 외부 스크립트인 경우만 동작함.
- async & defer 차이
<script async src="js/vendor/jquery.js"></script> <script async src="js/script2.js"></script> <script async src="js/script3.js"></script>
-
async은 나머지 페이지가 나타나는 동안 스크립트들이 비동기 방식으로 다운되며 중단되지 않는다는 것만 보장한다. 스크립트의 다운이 끝나자마자 이를 실행.
-
구체적인 실행 순서는 보장하지 않는다.
<script defer src="js/vendor/jquery.js"></script> <script defer src="js/script2.js"></script> <script defer src="js/script3.js"></script> -
defer는 다운로드 한 후 모든 스크립트와 내용이 다운되었을 때 실행되며, 순서가 보장된다. (jquery → script2 → script3)
연산자, ==과 ===의 차이
Equality operator
- 추상(동등) 비교 ⇒ 비교 전에 두 피연산자를 동일한 자료형으로 바꿈.
==!=
Identity operator
-
엄격(일치) 비교 ⇒ 두 피연산자가 다른 자료형이면 false 반환
===!== -
==은 강제로 자료형을 변환시키기 때문에 의도치 않은 결과가 발생할 수 있어 조심해야 한다.
느리더라도 꾸준히 https://turtle-hwan.tistory.com/