<객체예제1-자동차>
1.prompt 사용하여 초기 비밀번호 설정하기
- let pw_input = prompt ("자동차 초기 비밀번호 입력");
2.초기 이미지는 "출발전.png"로 설정
- <body> 안 img src속성에 넣어주기.
3.textarea(status), img(img), button(on,off) ,input(pw)모두 style 변경 해주어야 하므로 모두 데려오기
let status = document.getElementById("status")
let img = document.getElementById("img")
let on = document.getElementById("on")
let off = document.getElementById("off")
let pwTag = document.getElementById("pw")
4.input 태그 객체 안보이게 해두기
pwTag.style.visibility = "hidden";
5.
1) 시동 켜기 클릭시 시동이 꺼져 있다면 input태그객체.style.visibility ="visible"설정
(이미 켜져있다면 시동이 이미 켜져있습니다 textaea태그에 대입하기)
engine:false;
engineStart=function(){
if(! this.engine){
let visibility = pwTag.style.visibility;
if(visibility="hidden"){
pwTag.style.visibility ="visible";
}
}else{
status.innerHTML = "시동이 이미켜져있습니다."
}
}
6.비밀번호 입력후 엔터 누르면 비밀번호 체크
7.비밀번호 3회 연속 오류시 "경찰 출동중" 경고 텍스트 textarea태그에 대입 후 이미지는 경찰.png설정
8.시동켜기,시동끄기 버튼객체.style.display=none으로 설정
9.3회 오류 전 시동 켜기 성공시 오류 횟수 초기화
10.시동이 켜지면 "시동켜짐" textarea태그에 대입 이미지 바꾸기 (시동꺼짐도 마찬가지)
11.초기화버튼 클릭시 history.go(0)로 새로고침
- let cnt = 0; (비밀번호 3번 잘못 누를시 경찰 불러야하므로)
if(! this.engine){
let visibility = pwTag.style.visibility;
if(visibility="hidden"){
pwTag.style.visibility ="visible";
}
else{
let pw = pwTag.value;
if(this.pw == pw){
img.src="./시동켜기.gif"
status.innerHTML = "시동 켜짐";
pwTag.value="";
pwTag.style.visibility = "hidden";
this.engine = true;
cnt = "0 "
}else{
cnt++;
status.innerHTML = `비밀번호 오류: ${cnt}회`
if(cnt==3){
img.src = "./경찰.png";
status.innerHTML = "경찰출동";
pwTag.style.visibility = "hidden";
on.style.display = "none";
off.style.display = "none";
}
}
}
}
>콜백 함수(Callback Function)
- 파라미터로 함수를 전달받아서 함수의 내부에서 호출하는 함수
- 자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해 특정 시점에서 호출이 되도록 사용하는 함수이다.
쉽게 말하면 콜백함수 문법은 특정 함수의 동작이 끝남과 동시에 다른 여러가지 함수를 호출해야 할 경우에 사용된다.
*자바스크립트의 비동기 처리란?
: 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성.
(출처:https://kongda.tistory.com/20)
>window 객체
- 현재 웹브라우저의 창이나 탭을 표현하기 위한 객체
- 비표준 객체
1.timeout
- 일정 시간 뒤에 수행해야 하는 기능이 있을 때 사용한다.
1)setTimeout(콜백함수, n)
- n밀리초 이후에 넘겨준 콜백함수를 호출한다.
2)clearTimeout
- 만들어진 timeout 기능을 없앤다.
ex)
let timeout = setTimeout(()=> { alert("Hello World")}, 5000)
//콜백함수: (setTimeout()함수를 5초 수행한 후에 익명함수를 수행해라.)
clearTimeout(timeout)
2.interval
-일정 시간 마다 수행해야 하는 기능이 있을떄 사용한다.
1)setInterval(콜백함수, n)
- n 밀리초마다 넘겨준 콜백함수를 호출한다.
2)clearInterval
- 만들어진 interval기능을 없앤다.
ex)
let interval = setInterval( ()=>{alert("Hello world")}, 5000);
clearInterval(interval);
>Date객체
-시간에 대한 정보들을 가지고 있는 객체
1.현재시간 나타낼 경우
new Date()
2.시간을 직접 입력하고 싶을 경우
new Date(2022,0,12,10,32,33) // 2022-01-12 10:32:33
*년도는 뒤의 두글자만 적을지 19년도로 인식함 또한 월은 0월부터 시작하므로 원하는 월보다 -1 적게
적어주어야 한다. 시,분,초는 같다.
3.현재년도, 월,일,시,분,초 각각 데려오고 싶을 경우
const date = new Date;
현재년도 : date.getFullYear()
월 : date.getMonth()
일 : date.getDate()
시 : date.getHours()
분 : date.getMinutes()
초 : date.getSeconds()
<Date객체 예제-현재시간 실시간으로 보여주기>
>문서 객체 모델(Document Object Model) ★★★
- xml 이나 html 문서에 접근하기 위한 일종의 인터페이스
- 문서내의 모든 요소를 정의하고 요소에 접근하는 방법을 제공
<html>
<head>
<title>초간단 문서</title>
</head>
<body>
<h2>초간단 문서</h2>
<p>>간단한 문서</p>
</body>
</html>
>document 객체
- 웹 페이지 자체를 의미
- 웹페이지에 존재하는 HTML 요소에 접근할 때에는 반드시 document 객체로부터 시작
getElementById() :해당 값을 id속성으로 가지고 있는 요소 선택
getElementsByTagName() :해당 태그인 요소들 선택(Array)
getElementsByClassName() :해당 값을 class속성으로 가지고 있는 요소들 선택(Array)
getElementsByName() :해당 값을 name속성으로 가지고 있는 요소들 선택(Array)
querySelector() :CSS선택자에 해당하는 요소 선택
querySelectorAll() :CSS선택자에 해당하는 요소들 선택(Array)
>노드(Node)
- HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장한다.
- 노드트리는 노드들의 집합이며 노드간의 관계를 보여준다.
<노드의 종류>
문서 노드(document 노드) :문서 전체를 나타내는 노드
요소 노드(element 노드) :HTML 요소(태그)는 요소 노드이며 속성 노드를 가질 수 있는 유일한 노드
속성 (노드)(attribute 노드) :HTML 요소의 속성은 속성노드이며 요소노드에 관한 정보를 가지고 있음.
텍스트 노드(text노드) :HTML 문서의 모든 텍스트는 텍스트 노드
*요소와 주석 노드 사이사이에 존재한다.
주석 노드(comment 노드) :HTML 문서의 모든 주석은 주석 노드
<노드간의 관계>
parentNode :부모노드
childNodes :자식노드들 (children : 자식 요소인 노드들)
firstChild :첫번째 자식노드
lastChild :두번쨰 자식노드 <----요소인 노드만 데리고 오는 경우 중간데 Element 써주기
nextSibling :다음 형제노드 ex)firstElementChild
previousSibling :이전 형제노드
<노드추가>
appendChild() :새로운 노드를 해당 노드의 자식 노드 리스트 맨 마지막에 추가한다.
insertBefore() :새로운 노드를 특정 자식 노드 바로 앞에 추가한다.
insertData() :새로운 텍스트 데이터를 텍스트 노드에 새롭게 추가한다. (문자열안에 넣어주는 의미가 아니다.)
*나의 궁금증 innerText vs innerHTML
1.innerText
-innerText는 'Element'의 속성으로, 해당 Element 내에서 사용자에게 '보여지는' 텍스트 값을 읽어온다.
ex)<div style='color:red'>A</div>
2.innerHTML
- innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있다.
ex)A
출처: https://hianna.tistory.com/483 [어제 오늘 내일]
'프로그래밍 > Javascript' 카테고리의 다른 글
| Javascript 5일차 - 이벤트, jquery (0) | 2022.01.14 |
|---|---|
| Javascript 4일차 -노드생성_복제_제거, 폼객체 (0) | 2022.01.13 |
| Javascript 2일차 - 함수,객체 (0) | 2022.01.12 |
| Javascript 1일차 - 탄생배경, 문법 (0) | 2022.01.10 |