자바스크립트

<script>태그는 주로 HTML 문서 내용이 끝나는 </body>태그 바로 앞에 삽입한다.
HTML 문서와 자바스크립트 소스 분리하여 작업해야한다.
- <script src="js/test.js"></script>
사용자 입력값 받기
- prompt("설명","기본값");
알림 창으로 출력하기 - alert()
웹 브라우저 화면에 출력하기 - document.write()
콘솔에 출력하기 - console.log()
규칙
- 대소문자 구별
- 세미콜론으로 문장 구분
- 주석 - "//", "/**/"
let과 const 예약어
- ES6버번부터는 변수를 선언할 때 var 예약어 외에 let과 const 예약어를 사용할 수 있다.
- let으로 선언한 변수는 블록({}로 묶은 범위)를 벗어나면 사용할 수 없다.
- const는 상숫값을 선언할 때 사용한다.
- function calc(){ const currentYear = 2019; let birthYear = prompt("태어난 연도를 입력하세요.", "YYYY"); let age = currentYear - birthYear + 1; }

자료형

자료형		설명
기본형	number(숫자)	따옴표 없이 표기한 숫자
	string(문자열)	작은 따옴표(')나 큰 따옴표(")로 묶어 나타냄
	boolean(논리형)	참과 거짓
	undefined	자료형을 지정하지 않았을 때의 유형
	null	값이 유효하지 않음
복합형	array(배열)	하나의 변수에 여러 값을 저장, var seasons = ["봄", "여름", "가을", "겨울"];
복합형	object(객체)	함수와 속성이 함께 포함된 유형

자료형 확인 - typeof()
자바스크립트는 미리 변수의 자료형을 지정하지 않는다 : 느슨한 자료형 체크(Weak Data Type Check) => 강한 자료형으로 만들자 : Typescript
템플릿 문자열
- ES6 버전부터 문자열 안에 값을 채우는 방법인 '템플릿 문자열'이 도입됨.
- 문자열과 값 그리고 다시 문자열을 연결하는 방식이 아니라, 문자열 안에 값을 끼워 넣는 방식
- 문자열을 백 쿼트(`)로 묶고, 값이 들어가는 부분은 ${ } 사이에 표시한다.
  - ```
  const originPrice = 24500;
  document.querySelector("#showResult").innerHTML = `원래 가격은 ${originPrice} 원입니다.`;
```

== 연산자와 ===연산자
- == 연산자는 피연사자의 자료형이 다를 때 자동으로 자료형을 변환하여 비교
- === 연산자는 두 자료형의 변환을 허용하지 않는다.
- 연산자 우선순위
  - 단항 -> 산수 -> 비교 -> 논리 -> 할당
- truthy값과 falsy 값
  - falsy 값 : 0, ""(빈문자열), NaN, undefined, null
  - truthy 값 : falsy 값을 제외한 나머지 값
  - ```
  var input = prompt("이름을 입력하세요");
  if(input){ // input에 값이 들어있으면 truthy하다.
  	참일 때 실행할 문장
  }
  else{
  	거짓일 때 실행할 문장
  }
```
- prompt() 입력창에서 사용자가 "취소"버튼을 누르면 null이 반환됨
  - ```
  var userNumber = prompt("숫자입력");
  
  if(userNumber != null){
  	//[확인]을 눌렀을 때 실행할 명령
  }
  else{
  	//[취소]를 눌렀을 때 실행할 명령
  }
```
- 반복문
  - for문 : C언어와 동일
  - for ··· of 문
    - ```
    let seasons = ["봄", "여름", "가을", "겨울"];
    for(let vlue of seasons) {
    	console.log(value);
    }
    
    봄
    여름
    가을 
    겨울
```
- while문과 do while문은 C언어와 동일
- break와 continue도 동일

함수 선언

```
function 함수명(){ }
```
웹 브라우저에서 자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석한다. 즉, 함수 선언 위치는 프로그램 흐름에 영향을 주지 않는다.
보통 한 문서 안에 여러 함수를 선언했을 때 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 소스를 모아 놓고 필요할 떄마다 함수를 호출한다.
함수를 선언할 때 지역 변수를 선언하려면 예약어 var와 함께 변수 이름을 지정해야 한다. 만약 번수 이름 앞에 var가 앖다면 함수 안에서 선언했어도 전역 변수로 취급되니 주의해야 한다.
마우스 이벤트

이벤트	설명
click	사용자가 HTML 요소를 마우스로 클릭했을 때 이벤트가 발생
dbclick	사용자가 HTML 요소를 마우스로 더블클릭했을 때 이벤트가 발생
mousedown	사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트가 발생
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생
mouseup	사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트가 발생
mouseout	마우스 포인터가 요소를 벗어날 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

키보드 이벤트

이벤트	설명
keydown	사용자가 키를 누르는 동안 이벤트가 발생
keyup	사용자가 키에서 손을 뗄 때 이벤트가 발생
keypress	사용자가 키를 눌렀을 때 이벤트가 발생

문서 로딩 이벤트

이벤트	설명
load	문서의 로딩이 완료되었을 때 이벤트 발생
abort	웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생
error	문서가 정확히 로딩되지 않았을 때 이벤트가 발생
unload	문서를 벗어날 때 이벤트가 발생
resize	문서 화면 크기가 바뀌었을 때 이벤트가 발생
scroll	문서 화면이 스크롤 되었을 때 이벤트 발생

폼 이벤트

이벤트	설명
focus	폼 요소에 포커스가 놓였을 때 이벤트가 발생 (<lable>, <select>, <textarea>, <button> 태그에서 사용
blur	폼 요소에 포커스를 잃었을 때 이벤트가 발생
change	목록이나 체크 상태 등이 변경되었을 때 이벤트가 발생 (<input>, <select>, <textarea> 태그에서 사용)
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	폼이 다시 시작되었을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events
이벤트 처리기(이벤트 핸들러)
- 이벤트와 이벤트 처리 함수를 연결해 주는 것
- 이벤트 이름 앞에 on을 붙여서 사용한다. ( 예를 들어 click 이벤트가 발생했을 때 이벤트 처리기는 onclick 다음에 있는 실행 명령이나 함수를 연결한다.)

객체의 종류
- 내장 객체
  - 자주 사용하는 요소를 미리 객체로 정의해 둔 것
  - 예) Date객체를 사용해 현재 시각을 알아내고 그 정보를 가져다 사용할 수 있음.
  - Number, Boolean, Array, Math 등
- 문서 객체 모델(DOM)
  - 객체를 사용해 웹 문서를 관리하는 방식
  - 웹 문서뿐만 아니라 웹 문서 안에 포함된 이미지 · 링크 · 텍스트 필드 등도 모두 각각 별도의 객체로 미리 만들어 놓았다.
  - 예) 웹 문저 자체를 담는 Document 객체, 웹 문서 안의 이미지를 관리하는 Image 객체
- 브라우저 객체 모델(BOM)
  - 웹 브라우저의 주소 표시줄이나 창 크기 등 웹 브라우저 정보를 객체로 다루는 것
  - 예) 사용 중인 브라우저 종류나 버전을 담고 있는 Navigator 객체, 브라우저에서 방문한 기록을 남기는 History 객체, 주소 표시줄 정보를 담고 있는 Location객체, 화면 크기 정보가 들어있는 Screen 객체 등
- 사용자 정의 객체
  - 사용자가 필요할 때마다 자신의 객체를 정의해서 사용할 수 있다.
속성(Property)
- 객체에서 값을 담고 있는 정보
- 객체의 속성 값을 가져올 때는 객체 이름 뒤에 마침표(.)를 찍고 그 뒤에 속성 이름을 적는다.
메서드(Method)
- 객체가 어떻게 동작할지 선언해 놓은 함수
- 예) window.alert("안녕하세요")
객체의 인스턴스 만들기
- ```
var 인스턴스명 = new 객체명( )
```

사용자 정의 객체 만들기

릴터럴 표기법을 사용해 객체 만들기
- 리터럴 : 프로그래밍에서 자료를 표기하는 방식, 변수를 선언하면서 동시에 값을 지정해 주는 표기 방식 ( 예) var a = 10; )
- 중괄호{} 안에 '속성이름 : 값'을 하나의 쌍으로 지정하고, 속성이 여러 개일 경우 쉼표(,)를 넣어 구분한다.
- ```
var tistory = {
	title: "이효의 보안일기",
    name: "여보세효",
    start: 2022,
    info: function() {
    	alert(this.title + "은 " + this.start + "에 만들어졌습니다.");
    }
};
```
- 속성 값 가져오기, 함수 실행
- tistory.title tistory.info()
- 새로운 속성 추가
- ```
tistory.field = "IT"
```

생성자 함수를 사용해 객체를 만드는 방법

생성자 함수 : 객체를 만들어 내는 함수

function Tistory(title, name, start) {
	this.title = author;
    this.name: name;
    this.start: start;
}

인스턴스 만들기

tistory1 = new Tistory("이효의 보안일기", "여보세효", 2022)

목록 객체 만들기

tistory1 = new Tistory("이효의 보안일기", "여보세효", 2022)
tistory2 = new Tistory("삼효의 보안일기", "안녕하세효", 2023)
tistory3 = new Tistory("사효의 보안일기", "감사해효", 2024)

var tistoryList = [tistory1, tistory2, tistory3];

Array 객체로 배열 만들기

var myArray = new Array(  ); 
// 빈 괄호를 사용하면 배열 요소의 개수가 고정되지 않기 때문에 myArray 배열에 많이 저장할 수 있다.

var numbers = ["one", "two", "three", "four"]; //리터럴을 사용한 배열
var numbers = new Array("one", "two", "three", "four"); // Array 객체를 사용한 배열

Array 객체의 함수
- concat() : 둘 이상의 배열 연결
- join() : 배열 요소 연결
- push() : 배열의 맨 끝에 새로운 요소 추가, 새 요소가 추가된 후의 배열 요소의 개수가 반환됨
- unshift() : 배열의 맨 앞에 새로운 요소 추가, 새 요소가 추가된 후의 배열 요소의 개수가 반환됨
- pop() : 맨 뒤에 있는 요소 추출, 배열에서 삭제됨
- shift() : 맨 앞에 있는 요소 추출, 배열에서 삭제됨
- splice() : 원하는 위치의 요소를 삭제하거나 추가
  - splice(삭제할 인덱스)
  - splice(삭제할 인덱스, 삭제할 개수)
  - splice(삭제할 인덱스, 삭제할 개수, 삭제한 위치에 새로 추가할 요소들)
- slice() : 원하는 위치의 요소들을 추출
  - slice(시작 인덱스, 끝 인덱스)
  - 끝 인덱스를 생략하면 배열 끝까지 추출
  - 원래 배열은 변경되지 않음

여행 준비물 점검 프로그램

index.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>To do list</title>
	<link rel="stylesheet" href="input.css">
	<link rel="stylesheet" href="list.css">
</head>
<body>
	<div id="wrapper">
		<h2>여행 준비물 점검 목록</h2>
		<form>
			<input type="text" id="item" autofocus="true">
			<button type="button" id="add" class="addBtn">추가</button>
		</form>
		<div id="itemList"></div>
	</div>    
	<script src="checklist.js"></script>
</body>
</html>

input.js

var itemList = [];

var addBtn = document.querySelector("#add"); //add인 요소를 가져와 addBtn으로 저장
addBtn.addEventListener("click", addList); // addbtn을 클릭하면 addList함수 실행

function addList() {
    var item = document.querySelector("#item").value; //텍스트 필드 내용 가져옴
    if(item != null){
        itemList.push(item); //itemList 배열 끝에 item 변숫값 추가
        document.querySelector("#item").value = ""; //id = "item"인 요소 값을 지움
        document.querySelector("#item").focus(); //텍스트 필드에 focus()함수 적용
    }
    showList(); // 목록을 표시하는 showList() 함수 실행
}

function showList() {
    var list = "<ul>"; //목록을 시작하는 <ul> 태그 저장
    for(var i=0; i<itemList.length; i++){ //배열 요소마다 반복
        list += "<li>" + itemList[i] + "<span class='close' id=" + i + ">X</span></li>";  // 요소와 삭제 버튼을 <li>~</li>로 묶음
    }
    list += "</ul>"; // 목록을 끝내는 </ul> 태그 저장

    document.querySelector("#itemList").innerHTML = list; // list 변숫값 표시

    var remove = document.querySelectorAll(".close");  // 삭제 버튼을 변수로 저장. 배열 형태가 됨
    for(var i = 0; i < remove.length; i++) {  // remove 배열의 요소 모두를 확인
        remove[i].addEventListener("click", removeList);  // 요소를 클릭하면 removeList() 실행
    }
}

function removeList() {
    var id = this.getAttribute("id");
    itemList.splice(id, 1);
    showList();
}

문서 객체 모델(Document Object Model)

웹 문서의 모든 요소를 자바스크립트를 이용해여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법
DOM 트리 - DOM 구조는 나무처럼 생겼다.
표현
- 웹 문서의 태그는 요소(Element) 노드로 표현한다.
- 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현한다.
- 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현한다.
- 주석은 주석(Comment) 노드로 표현한다.
- ```
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>DOM TREE 알아보기</title>
    </head>
    <body>
        <h1>DOM</h1>
        <p>DOM을 공부합시다.</p1>
    </body>
</html>
```
DOM 요소에 접근하는 방법
- getElementByID() : DOM 요소를 id 선택자로 접근하는 함수
- ```
document.getElementById("heading").onclick = function(){
    this.style.fontSize = "5em"
}
```
- getElementByClassName() : DOM 요소를 class 값으로 찾아내는 함수
- ```
document.getElementsByClassName("accent")[0].style.textDecoration="underline"
```
- getElementByTagName() : DOM 요소를 태그 이름으로 찾아내는 함수
- ```
document.getElementsByTagName("h2")[0].style.backgroundColor = "#eee"
```
- querySelector(), querySelectorAll() : DOM 요소를 다양한 방법으로 찾아주는 함수
  - class값 앞에는 마침표(.)를, id 값 앞에는 샵(#)을 분인다. 태그 이름은 기호없이 태그 이름만 사용
- ```
document.querySelector("#heading")
document.querySelector(".accent")
document.querySelectorAll(".accent")[1].style.backgroundColor="yellow"
```

웹 요소의 태그 속성 가져와서 수정하기

getAttribute(), setAttribute() : HTML 태그 속성을 가져오거나 수정하는 함수

document.querySelector("#prod-img > img").getAttribute("src")
document.querySelector("#prod-img > img").setAttribute("src", "image/coffee.jpg")

DOM에서 이벤트 처리하기
- addEventListener() 함수
  - 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수로 웹 문서에서 이미지나 텍스트 등 특정 요소뿐만 아니라 Document 객체나 Window 객체 어디에서든 사용할 수 있다.
  - ```
  var pic = document.querySelector('#pic');
  pic.addEventListener("mouseover", "changePic", false);
  pic.addEventListener("mouseout", originPic, false);
  
  function changePic(){
  	pic.src = "image/boy.png";
  }
  function originPic(){
      pic.src = "image/girl.png";
  }
```

DOM으로 CSS 속성에 접근하고 수정하기

var myRect = document.querySelector("#rect");
myRect.addEventListener("mouseover", function( ){ //mouseover 이벤트 처리
	myRect.style.backgroundColor = "green"; // myRect 요소의 배경색
    myRect.style.borderRadius = "50%"; //myRect 요소의 테두리 둥글게 처리
});
myRect.addEventListener("mouseout", function( ){ // mouseout 이벤트 처리
	myRect.style.backgroundColor = ""; // myRect 요소의 배경색 지우기
    myRect.style.borderRadius = ""; // myRect 요소의 테두리 둥글게 처리 안 함
});

웹 요소를 화면에 표시하기/감추기
- "display : none" : 웹 요소를 화면에서 감추고 그 요소가 차지하던 공간도 사라짐
- "display : hidden" : 웹 요소를 화면에서 감추고 그 요소가 차지하던 공간은 빈 상태로 남아 있음
- "display : block" : 상제 정보를 화면에 표시

DOM에 요소 추가하기

함수

	함수	설명
1	createElement()	새 요소 노드를 만든다
2-1	createTextNode()	텍스트 내용이 있을 경우 텍스트 노드를 만든다
2-1	appendChild()	텍스트 노드를 요소 노드에 자식 노드로 추가한다.
2-2	createAttribute()	요소에 속성이 있을 경우 속성 노드를 만든다.
2-2	setAttributeNode()	속성 노드를 요소 노드에 연결한다.
3	appendChild()	새로 만든 요소 노드를 부모 노드에 추가한다.

추가할 소스

<p class="accent">주문이 완료되었습니다.</p>

추가하기 위한 소스코드

var newP = document.createElement("p")

var newText = document.createTextNode("주문이 완료되었습니다.")

newP.appendChild(newText)

document.body.appentChild(newP)

var attr = document.createAttribute("class")
attr.value = "accent"

newP.setAttributeNode(attr)

추가한 노드 순서 바꾸거나 삭제하기
- hasChildNodes() 함수 : 자식 노드 확인하기, 자식 노드가 있다면 true, 없으면 false 반환
- ```
document.querySelectorAll("p")[0].hasChildNodes()

=> true
```
- childNodes 속성 : 자식 노드에 접근하기
- ```
document.querySelector("#nameList").childNodes

=> NodeList(7) [text, p, text, p, text, p, text]
// 줄바꿈을 빈 텍스트 노드로 인식함
```
- insertBefore() 함수 : 원하는 위치에 노드 삽입하기
  - 부모 노드에 자식 노드를 추가할 때 기준이 되는 노드를 지정하고 그 앞에 자식 노드를 추가할 수 있다.
- ```
var nameList = document.querySelector("#nameList")

nameList.insertBefore(nameList.children[2], nameList.children[0])
//(추가하는 노드, 기준이 되는 노드)
```
- remeveChild(삭제할 자식 노드)함수와 parentNode 속성 : 특정 노드 삭제하기
  - 노드는 스스로 자신을 삭제할 수 없기 때문에 부모 노드에 접근한 후 부모 노드에서 삭제해야 한다.
  - 그래서 특정 노드를 삭제하려고 할 때 그 노드의 부모 노드를 먼저 찾아야 하는데, 부모 노드 정보를 가지고 있는 속성이 parentNode 속성이다.
  - parentNode 속성은 현재 노드의 부모 요소 노드를 반환한다.
- ```
document.querySelectorAll(".del")[0].parentNode
```

폼과 자바스크립트

폼 요소에 접근하는 여러 가지 방법
- id 값이나 class값을 사용해 폼 요소에 접근하기 : querySelector(), querySelectorAll()
- name 값을 사용해 폼 요소에 접근하기
  - <form> 태그에 name 속성이 지정되어 있어야 하고, <form> 태그 안에 포함된 폼 요소에도 name 속성이 있어야 한다.
  - form의 name값부터 폼 요소의 name값까지 계층을 따라 하나씩 지정해야 한다.
- ```
document.form name.요소 name

documnet.ship.shippingName
또는
document.forms["ship"].elements["shippingName"]

텍스트 필드의 내용 가져오기
documnet.ship.shippingName.value
```
- 폼 배열을 사용해 폼 요소에 접근하기
  - documnet의 속성 중 forms 속성은 문서 안에 있는 <form> 태그를 모두 가져와 배열 형태로 반환한다.
  - <form> 태그와 그 안에 있는 다른 폼 요소에도 id나 class 선택자가 없고 name 속성도 없을 때 사용한다.
  - <form> 태그 안에 포함된 요소에 접근하려면 elements 속성을 사용한다. 해당 폼 안에 있는 폼 요소를 모두 가져오는 속성이다.
  - ```
  document.forms[0].elements
  
  요소 값 가져오기
  document.forms[0].elements.value
```

폼 요소에서 입력값 검증하기

입렵값 검증 프로그램 만들기 - 아이디 글자 수 확인하기
register.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="css/register.css">
	<title>회원 가입</title>
</head>
<body>
	<div id="container">
		<h1>회원 가입</h1>
		<form action="#" id="register">
			<ul id="user-info">
				<li>
					<label for="user-id" class="field">아이디</label>
					<input type="text" id="user-id" placeholder="4~15자리의 영문과 숫자로 입력" required>
				</li>
				<li>
					<label for="email" class="field">이메일</label>
					<input type="email" id="email" required>
				</li>
				<li>
					<label for="user-pw1" class="field">비밀번호</label>
					<input type="password" id="user-pw1" placeholder="8자리 이상" required>
				</li>
				<li>
					<label for="user-pw2" class="field">비밀번호 확인</label>
					<input type="password" id="user-pw2" required>
				</li>
				<li>
					<label class="field">메일링 수신</label>
					<label class="r"><input type="radio" value="yes" name="mailing">예</label>
					<label class="r"><input type="radio" value="no" name="mailing">아니오</label>
				</li>
			</ul>
			<ul id="buttons">
				<li>
					<button type="submit" class="btn btnBlack">가입하기</button>					
				</li>
				<li>
					<button type="reseet" class="btn btnGray">취소</button>
				</li>
			</ul>
		</form>
	</div>
	<script src="register.js"></script>
</body>
</html>

var userId = document.querySelector("#user-id");
var pw1 = document.querySelector("#user-pw1"); // '비밀번호' 필드를 가져와 변수에 저장
var pw2 = document.querySelector("#user-pw2"); // '비밀번호 확인' 필드를 가져와 변수에 저장

userId.onchange = checkId; // change 이벤트는 텍스트 필드 안의 내용이 바뀔 때, 즉 [아이디]필드에 입력을 마치고 그 필드를 빠져나올 때 발생하는 이벤트
pw1.onchange = checkPw;
pw2.onchange = comparePw

function checkId(){
    if(userId.value.length < 4 || userId.value.length > 15){
        alert("4~15자리의 영문과 숫자를 사용하세요.");
        userId.select(); // 다시 입력할 수 있도록 userId 필드 선택
    }
}

function checkPw(){
    if(pw1.value.length < 8){
        alert("비밀번호는 8자리 이상이어야 합니다.");
        pw1.value = "";
        pw1.focus();
    }
}

function comparePw(){
    if(pw1.value != pw2.value){
        alert("암호가 다릅니다. 다시 입력하세요");
        pw2.value = "";
        pw2.focus();
    }
}

* select() 함수와 focus함수
- select() 함수는 사용자가 기존에 입력한 값을 선택하고, focus() 함수는 기존에 입력한 값이 지워진 자리에 새로운 값을 입력하도록 텍스트 필드에 커서를 가져다 놓는다.

태그 자체에서 폼 검증하기

<input>태그의 새로운 유형

유형	설명
<input type = "email">	이메일 주소 필드. 이메일 주소 형식에 맞지 않으면 오류 메시지를 표시한다.
<input type = "tel">	전화번호 필드. 전화번호 숫자가 아닌 내용을 입력하면 오류 메시지를 표시한다.
<input type = "url">	사이트 주소 필드. http:로 시작하지 않으면 오류 메시지를 표시한다.

<input> 태그의 새로운 속성

속성	설명
autocomplete	자동 완성 기능을 켜고 끄는 속성
autofocus	해당 필드에 마우스 커서를 자동으로 표시
placeholder	필드 안에 힌트가 표시되어 사용자에게 어떤 내용을 입력해야 하는지 알려 준다. 필드 내부를 누르면 표시된 힌트가 사라진다.
required	필수 입력 항목으로 지정한다. 필드가 작성되지 않으면 오류 메시지를 표시하며 다음 단계로 넘어갈 수 없다.

브라우저 객체 모델(BOM)

자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 개체화해 놓은 것
브라우저 창이 열리면 가장 먼저 Window 객체가 만들어지고, 그 하위에 브라우저 각 요소에 해당하는 객체가 만들어진다.이들 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저의 각 요소에 해당하는 객체이며 각각 또 다른 하위 객체를 가지고 있다.
출처 :&nbsp;http://www.ktword.co.kr/test/view/view.php?m_temp1=5991&amp;id=51
자주 사용하는 브라우저 내장 객체

객체	설명
Window	브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체
Document	웹 문서에서 <body> 태그를 만나면 만들어지는 객체. HTML 문서 정보를 가지고 있다.
History	현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
Location	현재 페이지에 대한 URL 정보를 가지고 있는 객체
Navigator	현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
Screen	현재 사용 중인 화면 정보를 다루는 객체

Window 객체

document	브라우저 창에 표시된 웹 문서에 접근할 수 있다.
frameElement	현재 창이 다른 요소 안에 포함되어 있으면 그 요소를 반환한다. 포함되어 있지 않으면 null을 반환한다.
innerHeight	내용 영역의 높이를 나타낸다.
innerWidth	내용 영역의 너비를 나타낸다.
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환한다.
location	Window 객체의 위치/현재 URL을 나타낸다.
name	브라우저 창의 이름을 가져오거나 수정한다.
outerHeight	브라우저 창의 바깥 높이를 나타낸다.
outerWidth	브라우저 창의 바깥 너비를 나타낸다.
pageXOffset	스크롤했을 때 화면이 수평으로 이동하는 픽셀 수, scrollX와 같다.
pageYOffset	스크롤했을 때 화면이 수직으로 이동하는 픽셀 수, scrollY와 같다.
parent	현재 창이나 서브 프레임의 부모 프레임
screenX	브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서부터 떨어져 있는 거리
screenY	브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서부터 떨어져 있는 거리
scrollX	스크롤 했을 때 수평으로 이동하는 픽셀 수
scrollY	스크롤 했을 때 수직으로 이동하는 픽셀 수
sessionStorage	웹 브라우저에서 데이터를 저장하는 세션 스토리지 반환

Window 객체의 함수
- Window 객체는 기본 객체이기 때문에 window.를 생략할 수 있음

alert( )	알림 창(Alert Dialog)을 표시한다.
blur( )	창에서 포커스를 제거한다.
close( )	현재 열려 있는 창을 닫는다.
confirm( )	[확인], [취소]가 있는 확인 창을 표시한다.
focus( )	현재 창에 포커스를 부여한다.
moveBy( )	현재 창을 지정한 크기만큼 이동한다.
moveTo( )	현재 창을 지정한 좌표로 이동한다.
open( )	새로운 창을 연다.
postMessage( )	다른 창으로 메시지를 전달한다.
print( )	현재 문서를 인쇄한다.
prompt( )	프로프트 창에 입력한 텍스트를 반환한다.
resizeBy( )	지정한 크기만큼 현재 창 크기를 조절한다.
resizeTo( )	동적으로 브라우저 창의 크기를 조절한다.
scroll( )	현재 문서에서 특정 위치로 스크롤한다.
scollBy( )	지정한 크기만큼씩 스크롤한다.
scollTo( )	지정한 위치까지 스크롤한다.
setCursor( )	현재 창의 커서를 변경한다.
showModalDialog( )	모달 창을 표시한다.
sizeToContent( )	내용에 맞게 창 크기를 맞춘다.
stop( )	로딩을 중지한다.

* 모달 창(Modal Window) : 이벤트 정보나 공지 내용 등을 표시하기 위해 현재 브라우저 창 위에 띄우는 새로운 창이다. 문서 소스 안에 <div> 태그를 사용해 삽입하고 레이어로 표시한 창이다.

브라우저 정보가 담긴 Navigator 객체

웹 브라우저 버전을 비롯해 웹 브라우저의 어떤 플러그인이 설치되어 있는지, 웹 브라우저가 온라인 상태인지 오프라인 상태인지 등

렌더링 엔진(Rendering Engine)

: 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램
웹 브라우저마다 내장된 렌더링 엔진이 다르기 때문에 HTML이나 CSS를 해석하는 방법이 다르다. 그래서 표준화되지 않은 CSS3 속성 앞에 -webkit- 또는 -oz-같은 접두어를 붙여 사용자가 접속한 브라우저에 맞게 렌더링한다.
* 자바스크립트 엔진도 있음

브라우저	렌더링 엔진	자바스크립트 엔진
크롬(Chrome)	블링크(Blink)	V8
파이어폭스(Firefox)	게코(Gecko)	스파이더몽키(SpiderMonkey)
인터넷 익스플로러(Internet Explorer)	트리이덴트(Trident)	차크라(Chakra)
사파리(Safari)	웹킷(Webkit)	자바스크립트코어(JavascriptCore)
오페라(Opera)	블링크(Blilnk)	V8

Navigator 객체의 속성
- 브라우저 버전이나 플랫폼(OS) 정보를 가진다. 이 정보는 사용자가 수정할 수 없고 볼 수만 있다.
- 크롬 브라우저에서 콘솔창에 navigator라고 입력하면 볼 수 있음.

속성	설명
appCodeName	브라우저 이름(코드 이름)을 문자열로 반환
appName	브라우저 공식 이름을 문자열로 반환
appVersion	브라우저 버전을 문자열로 반환
battery	배터리 충전 상태를 알려주는 정보가 담긴 객체를 반환
connection	브라우저 장치의 네트워크 정보가 담긴 객체를 반환
cookieEnabled	쿠키 정보를 무시한다면 false, 그렇지 않다면 true를 반환
geolocation	모바일 기기를 사용한 위치 정보가 담긴 객체를 반환
maxTouchPoints	장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환
platform	브라우저 플랫폼 정보를 가지고 있는 문자열을 반환
userAgent	현재 브라우저 정보가 잇는 사용자 에이전트 문자열을 반환

그 밖의 브라우저 객체들
History 객체의 속성과 함수
속성 설명

length 현재 브라우저 창의 History 목록에 있는 항목의 개수, 즉 방

함수	설명
back( )	History 목록에서 이전 페이지를 현재 화면에 불러온다.
forward( )	History 목록에서 다음 페이지를 현재 화면에 불러온다.
go( )	History 목록에서 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다. 예를 들어 history.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러온다.

Location 객체의 속성과 함수
Location객체 : 브라우저의 주소 표시줄과 관련. 현재 문서의 URL 주소 정보를 가지고 있음. 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있다.
Location 객체의 속성과 함수

속성	설명
hash	URL 중 #으로 시작하는 해시 부분을 나타낸다.
host	URL의 호스트 이름과 포트 번호를 나타낸다.
hostname	URL의 호스트 이름을 나타낸다.
href	전체 URL이다. 이 값을 변경하면 해장 주소로 이동할 수 있다.
pathname	URL 경로를 나타낸다.
port	URL의 포트번호를 나타낸다.
protocol	http://나 ftp:// 같은 URL의 프로토콜을 나타낸다.
password	도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 URL일 경우 password 정보를 저장한다.
search	URL 중 ?(물음표)로 시작하는 검색 내용 부분을 나타낸다.
username	도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트 URL일 경우 username 정보를 저장한다.

함수	설명
assign( )	현재 문서에 새 문서 주소를 할당해 새 문서를 가져온다.
reload( )	현재 문서를 다시 불러온다. 브라우저의 [새로고침]과 같은 역할을 한다.
replace( )	현재 문서의 URL을 지우고 다른 URL의 문서로 교체한다.
toString( )	현재 문서의 URL을 문자열로 반환한다.

Screen 객체의 속성과 함수
주로 화면 정보를 알아낼 때 많이 사용하는 객체

속성	설명
availHeight	화면에서 윈도우의 작업 표시줄이나 맥의 메뉴/독 같은 UI 영역을 제외한 부분의 높이를 나타낸다.
availWidth	UI 영역을 제외한 부분의 너비를 나타낸다.
colorDepth	화면상에서 픽셀을 렌더링할 때 사용하는 색상의 수
height	UI 영역을 포함한 화면의 높이
orientation	화면의 현재 방향을 나타낸다. 기본은 가로방향이다.
pixelDepth	화면상에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타낸다.
width	UI 영역을 포함한 화면의 너비를 나타낸다.

함수 설명

lockOriention( ) 화면 방향을 잠근다.

unlockOriention( ) 화면 방향 잠금을 해제한다.

* <button onclick = "함수이름();return false;">버튼</button>에서 return false는 원래 버튼의 기능(입력 내용을 서버로 전송하는 기능)을 사용하지 않겠다는 뜻

참고 : Do it! 웹 프로그래밍을 위한 자바스크립트 기본편

'공부' 카테고리의 다른 글

kali-linux-2016.2 다운로드, 칼리 실습 환경 구축 (0)	2022.02.04
PHP (0)	2022.01.28
버프 수트 디스플레이 설정, 한글 깨짐, 다크 모드, 글씨 크기 (0)	2022.01.10
라우팅 테이블 (0)	2022.01.04
서버, 클라우드 서비스, 온프레미스 (0)	2022.01.04

이효의 보안일기

자바스크립트

'공부' 카테고리의 다른 글

댓글

티스토리툴바

속성	설명
length	현재 브라우저 창의 History 목록에 있는 항목의 개수, 즉 방

함수	설명
lockOriention( )	화면 방향을 잠근다.
unlockOriention( )	화면 방향 잠금을 해제한다.

자바스크립트

'공부' 카테고리의 다른 글

관련글

댓글

티스토리툴바