[원하는 element 찾기]
- getElementById: Id를 통해 원하는 element를 찾음
- getelementByClassName: class를 통해 element 찾음
- getQuerySelector: 선택자를 통해 element 1개를 찾음
- tag로 찾을 경우: document.getQuerySelector("tagname")
- class로 찾을 경우: document.getQuerySelector(".class")
- id로 찾을 경우: document.getQuerySelector("#id")
- tag와 class로 찾을 경우: document.getQuerySelector("tagname.class")
- tag와 id로 찾을 경우: document.getQuerySelector("tagname#id")
- 특정 tag와 id 하위의 class로 찾을 경우: document.getQuerySelector("tagname#id .class")
- getQuerySelectorAll: 선택자에 해당하는 element를 모두 찾음(array형태로 반환)
[원하는 element생성]
- const bgImg = document.createElement("img"): img 태그 생성
- bgImg.src = "주소": bgImg에 src속성 추가
- document.body.appendChild(bgImg): body에 태그 추가
- id지정할때 Date.new() 함수로 반환되는 랜덤값을 가지고 지정하는 방법도 있음
[print문]
- console.log()
- console.dir(): element가 가지고 있는 속성을 보고 싶을 때
[for 문]
- for (변수, 조건, 조건 후)
- for... in: object의 구성 요소들에 하나씩 뭔가 할때
- for... of: array의 구성 요소들에 하나씩 뭔가 할때
- forEach: array의 구성 요소들에 하나씩 뭔가 할때
[event: 특정행동을 했을때 어떤 결과가 실행되는 것]
- console.dir([element])이후 나오는 property들 중 on으로 시작하는 것들이 모두 이벤트 이름 이다.
// ------------------ 요소에 대해 이벤트 적용
const title = document.querySelector('div.ryu h2.minsoo'); // element 찾기
function handleClick() {
title.style.color = "blue" //title > style > color를 파란색으로
}
// event 추가: title을 클릭했을때 handleClick함수를 실행하라
// 방법1(이걸 더 선호)
title.addEventListener("click", handleClick)
// 방법2: 방법 1의 "click"앞에 on만 붙여주면 됨
title.onclick = handleClick;
// ------------------- window에 대해 이벤트 적용
// window: 창 전체를 의미
function handleCopy() {
document.body.style.backgroundColor = "red"; //배경색 변경
alert("stop copy!!"); //경고창
}
window.addEventListener("copy", handleCopy);
- 클래스 변경하여 style적용시키기
- 클래스를 아예 교체하며 CSS적용할 수 있음(className 교체)
- 이 경우 원래 지키고 싶던 CSS는 적용 불가할 수 있음
- 따라서 classList를 이용해 기존 className을 지키는 방법 사용
//style.css
body {
background-color: bisque;
}
h2 {
color: blue;
}
.minsoo {
font-family:'Courier New', Courier, monospace;
color: brown;
}
.active {
color: red;
}
const title = document.querySelector('div.ryu h2.minsoo');
//-------------------- 클래스 변경해서 스타일 바꾸기
function handleClick() {
const currentClassName = title.className;
const orgClassName = "minsoo"
let newClassName;
// 클래스를 아예 교체하며 CSS적용
if (currentClassName === orgClassName) {
newClassName = "active"
} else {
newClassName = orgClassName
}
title.className = newClassName
}
title.addEventListener("click", handleClick);
//-------------------- 기존 클래스 유지하면서 다른 클래스 넣었다 빼며 스타일 변경
// 방법1: 이게 더 직관적이고 좋음
const title = document.querySelector('div.ryu h2.minsoo');
function handleClick() {
const currentClassList = title.classList;
const stdClassName = 'active'
if (currentClassList.contains(stdClassName)) {
currentClassList.remove(stdClassName)
} else {
currentClassList.add(stdClassName)
}
}
title.addEventListener("click", handleClick);
// 방법2: toggle함수를 이용해서 코드를 한줄로 함축
const title = document.querySelector('div.ryu h2.minsoo');
function handleClick() {
title.classList.toggle("active");
}
title.addEventListener("click", handleClick);
[form]
- input, button은 브라우저 상에서 submit됨
- 정보가 전달되기 위해서는 <form> 태그 안에 있어야 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<-- form으로 감싼 상태 -->
<form id="loginForm">
<input required maxlength="5" type="text" placeholder="what is your name?">
<button>Login</button>
<button>Clear</button>
</form>
<script src="app.js"></script>
</body>
</html>
- form을 통해 submit되면 페이지는 새로고침됨
- 이를 방지하기 위해 submit될때 새로고침 되지 않도록 작동하는 함수(event.preventDefault) 필요addEventListener시 실행되는 함수는 기본적으로 event인자를 받는다.
- 함수 정의시 인자로 event를 넣어주면 event의 Default로 정의된 기능들이 실행된다(새로고침 등)
- event.target을 해주면 event에 들어오는 HTML element의 정보를 확인 가능하다
function test(event) {
//예시
event.preventDefault(); //event의 default기능(새로고침) 방지
event.target //event가 적용된 element의 정보 반환
event.target.parentElement // event의 부모element
evvent.target.parentElement.innerText //event의 부모 elment에 들어있는 글자
}
[localstorage]
- 브라우저에 데이터를 저장하는 기능
- 개발자도구(F12) > Application > localStorage에서 확인 가능
- key-value값으로 이루어져 있음
- localStorage.setItem("[key]", "[value]"): localStorage에 데이터 저장
- localStorage.getItem("[key]"): localStorage에서 key값을 갖는 value 반환
- localStorage는 텍스트만 저장 가능
[함수]
- [String].length: [String]의 글자 수 반환
- setInterval([function], "5000"): 5초에 한번씩 [function]실행
- setTimeout([function[, "5000"): 5초 뒤 function 마치기
- new Date(): 현재 날짜, 시간 반환
- new Date().getHours(): 현재 날짜, 시간에서 시간만 반환
- new Date().getMinutes(): 현재 날짜, 시간에서 분만 반환
- new Date().getSeconds(): 현재 날짜, 시간에서 초만 반환
- [String].padStart(100, "0"): [String] 글자수를 100글자로 확장시키고 확장시킨 앞에 부분은 "0"으로 채우기
- Math: 수학관련 매서드
- Math.pi: 3.14.....
- Math.random(): 0~1 사이의 숫자 반환
- Math.round(1.5): 1.5를 반올림 > 2가됨
- Math.ceil(1.2): 1.2를 올림 > 2가됨
- Math.floor(1.7): 1.7을 내림 > 1이
- function(event)
- event.preventDefault(): 기본 기능 방지(새로고침)
- event.target: event발생한 element정보 반환
- event.target.parentElement: 이벤트 발생한 element의 부모 element 반환
- event.target.parentElement.innerText: 이벤트 발생한 element의 부모 element에 속한 text
- Array value삭제
- Array.pop(): 배열의 제일 뒤 value 삭제(배열 길이 줄어듬)
- Array.shift(): 배열의 제일 앞 삭제(배열 길이 줄어듬)
- Array.filter([function]): 배열에서 조건이 true인 value들만 만들어서 새로운 배열 생성
[Geolocation]
- navigator.geolocation.getCurrentPosition([success], [error])
- [success]: 함수 실행 성공시 실행될 함수
- [error]: 함수 실행 실패시 실행될 함
function success(){
// 위도 ,경도 구하기
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(lat, lng);
}
function error(){
console.log("error")
}
navigator.geolocation.getCurrentPosition(success, error);
// 위치 동의관련 alert나옴
[fetch]
- url에서 정보를 가져올때(api활용) fetch를 사용
- fetch(url) 후 개발자도구의 network를 들어가면 응답 처리 되는 것을 볼 수 있음
- promise 함수로 fetch가 일어난 후에 브라우저부터 응답을 얻음
- 이것을 위해 then을 통해 fech이후 동작에 대해 설정 함
- fetch(url).then(response => response.json()): url을 통해 fetch한 이후에 받는 응답을 json으로 반환한다
// url fetch > response를 json으로 변환 > json에서 필요부분 추출
fetch(url)
.then((response) => response.json())
.then((data) => {console.log(data.main)})