- console.log("str");
- console에 괄호 안의 내용 출력
- MDN
- Mozilla Developer Network
VS Code 단축키
다중선택
- Alt + Click
- Shift + Alt + 드래그
- Alt + Click -> Shift + 방향키
변수
- const a : 상수, 변경 불가 //default
- let a : 변경 가능 //업데이트가 필요한 경우
- var : 구버전, 변경에 대한 규칙X, 비추천
데이터 타입
- boolean : true, false
- null :없다, 비어있음을 명시
- undefined : 정의되지 않음
배열
const name = [1 ,null ,true ,"hi" ];- 데이터 타입 상관X
- .push() : 배열 추가
오브젝트
const player = {
name: "kai",
points: 10,
hansome: true,
fat: "never",
};
console.log(player);
console.log(player.name);
console.log(player["name"]);
//update
player.fat=false;
player.lastName="kim";
console.log(player);
console.log(player.fat);- 오브젝트만의 규칙 적용 (: ,)
- 리스트와 달리 의미를 가짐
- object는 const이지만 내부의 속성은 업데이트 가능
- 외부에서 수정/추가 가능
JavaScript에서 HTML 읽어오기
<!DOCTYPE html>
<html>
<head>
<meta setchar="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<meta name="viewprot" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum App</title>
</head>
<body>
<div class="Hello">
<h1 class="Hi" id="title">Grab me!</h1>
</div>
<script src="script.js"></script>
</body>
</html>1. document.getElementById()
const title = document.getElementById("title")
console.log(title)
console.log(title.id)
console.log(title.textContent)2. document.getElementsByClassName()
const His = document.document.getElementsByClassName("Hi")
console.log(His)
//배열의 형태로 읽어옴
//console.log(His.id)3. document.querySelector()
- 다수가 있을 경우 첫번째 것만
- querySelectorAll() : 배열의 형태로 모두 가져옴
- class는 . 으로, id는 #으로
const title = document.querySelector(".Hello h1")
console.log(title.id);
console.log(title.textContent);
Events
<!DOCTYPE html>
<html>
<head>
<meta setchar="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<meta name="viewprot" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum App</title>
</head>
<body>
<div class="Hello">
<h1>Click!</h1>
</div>
<script src="script.js"></script>
</body>
</html>1. HTML element 가져오기
2. addEventListener(event, function)
- event : "click"...
- title.dir에서 on- 으로 시작하는 것들
const title = document.querySelector("div.Hello:first-child h1")
console.log(title)
console.dir(title)
function handleTitleClick(){
console.log("title was clicked.");
title.style.color = "blue"
}
function handleMounsEnter(){
title.innerText = "Mouse is here!";
}
function handleMounsLeave(){
title.innerText = "Mouse is gone!";
}
//if user click, excute hadleTitle Click
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMounsEnter);
title.addEventListener("mouseleave", handleMounsLeave);
'코딩 > HTML\CSS\JS' 카테고리의 다른 글
| [html] MDN 정리2 (0) | 2023.01.03 |
|---|---|
| [html] MDN 정리1 (0) | 2022.12.27 |
| [CSS] 생활코딩 반응형 디자인, 미디어쿼리, CSS 파일 (0) | 2022.11.05 |
| [CSS] 생활코딩 box model : block, inline, div, span, grid (0) | 2022.11.05 |
| [CSS] 기초 복습 : id, class, (0) | 2022.11.05 |