javascript_study_d2_정리

객체 알아보기 (1) |

자바스크립트는 웹과 관련된 대상을 모두 객체로 인식합니다.

자바스크립트에서 사용하는 객체

종류설명

문서 객체 모델(DOM)	웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체입니다.
브라우저 관련 객체	웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있습니다.
내장 객체	웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 합니다.

객체의 인스턴스 만들기

new 객체명
Copy

• 자바스크립트에서 객체는 참조 형태인 인스턴스(instance)의 형태로 만들어서 사용해야 합니다.
• 객체의 인스턴스를 만들 때는 new라는 예약어를 사용합니다.

객체 알아보기 (2) |

프로퍼티와 메서드 이해하기

• 프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할 수 있는 동작을 표현합니다.

마침표 표기법으로 프로퍼티와 메서드 작성하기

• 프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표(.) 를 붙이고 객체의 프로퍼티나 메서드 이름을 작성합니다.

자바스크립트의 내장 객체 - Array 객체 |

Array 객체로 배열 만들기

• 초깃값이 없는 경우 : 배열의 크기를 지정하지 않을 수도 있고, 몇 개의 요소가 있는지 크기를 지정할 수도 있습니다.

var numbers = new Array(); // 배열의 크기를 지정하지 않음
var numbers = new Array(4); // 배열의 크기를 지정함
Copy

• 초깃값이 있는 경우 : 인스턴스 선언과 요솟값을 한 번에 할당해 작성할 수 있습니다.

var numbers = Array("one", "two", "three", "four"); // Array 객체를 사용한 배열 선언
Copy

Array 객체의 length 프로퍼티 사용하기

• length 프로퍼티에는 배열 요소의 개수가 저장되어 있습니다.

자바스크립트의 내장 객체 - Array 객체의 메서드 (1) |

배열끼리 합치는 concat() 메서드

• concat() 메서드는 서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 줍니다.

배열 안의 요소끼리 합치는 join() 메서드

• join() 메서드는 배열 요소를 연결해서 하나의 문자열로 만들어 줍니다.
• 각 요소 사이에 원하는 구분자를 넣을 수도 있는데, 따로 지정하지 않으면 요소를 쉼표(,)로 구분합니다.

새로운 요소를 추가하는 push(), unshift() 메서드

• 배열 맨 끝에 요소를 추가하려면 push() 메서드를 사용하고, 배열 맨 앞에 요소를 추가하려면 unshfit() 메서드를 사용합니다.
• 배열 맨 앞과 맨 뒤에 요소를 추가하면 원래 있던 배열이 바뀐다는 것을 주의해야 합니다.

배열에서 요소를 꺼내는 pop(), shift() 메서드

• 배열에서 뒤에 있는 요소를 꺼낼 때는 pop() 메서드를 사용하고, 앞에 있는 요소를 꺼낼 때는 shift() 메서드를 사용합니다.
• 두 메서드는 꺼낸 요솟값을 반환하며 기존 배열은 꺼낸 요소가 빠진 상태로 변경됩니다.

자바스크립트의 내장 객체 - Array 객체의 메서드 (2) |

원하는 위치에 요소를 추가·삭제하는 splice() 메서드

1. 인수가 1개인 경우 : 배열의 인덱스값을 가리킵니다. 인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제합니다.
2. 인수가 2개인 경우 : 첫 번째 인수는 인덱스값이고 두 번째 인수는 삭제할 요소의 개수입니다.
3. 인수가 3개 이상인 경우 : 첫 번째 인수는 배열에서 삭제할 시작 위치를 나타내고, 두 번째 인수는 삭제할 개수를 알려 줍니다. 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정합니다.

자바스크립트의 내장 객체 - Array 객체의 메서드 (3) |

기본 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드

1. 인수가 1개인 경우 : 인수를 시작 인덱스로 간주하고 지정한 요소부터 마지막 요소까지 꺼내서 변환합니다.
2. 인수가 2개인 경우 : 인수 2개는 꺼낼 요소의 구간을 의미합니다. 번째 인수는 배열의 시작 인덱스이고, 두 번째 인수는 끝 인덱스의 바로 직전 인덱스를 가리킵니다.

자바스크립트의 내장 객체 - Date 객체 |

• Date 객체는 현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고, 특정일까지 얼마나 남았는지 알려 주는 등 사이트에서 여러 가지로 응용할 수 있습니다.
• Date 객체 인스턴스 만들기

new Date();

• Date 다음에 붙이는 괄호 안에 날짜 정보를 입력하면 특정한 날짜를 저장한 Date 객체를 만들 수 있습니다.

new Date("2020-02-25")
new Date("2020-02-25T18:00:00")

• Date 객체의 메서드 : 날짜/시간 정보를 가져오는 메서드, 사용자가 원하는 날짜/시간으로 설정하는 메서드, 마지막으로 날짜/시간 형식을 바꿔 주는 메서드가 있습니다.

 

자바스크립트의 내장 객체 - Math 객체 |

• Math 객체는 따로 인스턴스를 만들지 않습니다.

Math.프로퍼티명
Math.메서드명

• Math 객체의 프로퍼티 : E, PI, SQRT2, SQRT1_2, LN2, LN10, LOG2E, LOG10E 등 다양한 프로퍼티가 있습니다. Math 객체의 프로퍼티는 항상 정해진 값을 가지고 있습니다.
• Math 객체의 메서드 : Math 객체의 메서드는 링크에서 확인할 수 있습니다.

브라우저와 관련된 객체 - window 객체 (1) |

window 객체는 브라우저 창이 열릴 때마다 하나씩 만들어집니다. 브라우저 창 안의 요소 중에서 최상위에 있습니다.

window 객체의 프로퍼티

• 프로퍼티 이름 앞에 window. 를 붙여 사용합니다.

window 객체의 메서드

• window 객체의 메서드에는 alert(), confirm(), prompt() 등이 있습니다.

새 브라우저 창을 여는 open() 메서드

window.open(경로, 창 이름, 창 옵션)
Copy

• 경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냅니다.
• 창 이름 : 팝업 창의 이름을 지정하면 항상 이 창에 팝업 내용이 나타나도록 할 수 있습니다.
• 창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정할 수 있습니다.

브라우저와 관련된 객체 - window 객체 (2) |

새 브라우저 창을 여는 open() 메서드

• open() 메서드 중에서 두 번째 옵션인 창 이름을 지정하면 똑같은 팝업 창이 여러 번 나타나는 문제를 해결할 수 있습니다.

브라우저와 관련된 객체 - window 객체 (3) |

새 브라우저 창을 여는 open() 메서드

• 팝업 창의 위치는 open() 메서드의 left와 top 속성으로 지정할 수 있습니다.
• left 속성은 화면의 왼쪽 측면을 기준으로 하고, top 속성은 화면의 위쪽을 기준으로 해서 팝업 창을 얼마나 떨어뜨릴지 지정합니다.

브라우저와 관련된 객체 - window 객체 (4) |

새 브라우저 창을 여는 open() 메서드

• 중요한 내용을 팝업 창으로 보여 주어야 한다면 팝업 차단된 상태인지 체크하여 사용자에게 알려 주는 것이 좋습니다.

브라우저와 관련된 객체 - navigator 객체 |

• navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온·오프라인 등의 여러 정보가 담겨 있습니다.
• navigator 객체의 정보는 사용자가 수정할 수 없으며 가져와서 보여 줄 수만 있습니다.
• navigator 객체의 주요 프로퍼티에는 battery, cookieEnabled, geolocation, language, oscpu, userAgent 등이 있습니다.
• navigator 객체의 userAgent 프로퍼티는 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용합니다.

브라우저와 관련된 객체 - history 객체 |

• history 객체에는 방문한 URL 정보가 배열 형태로 저장됩니다.
• history 객체의 프로퍼티에는 length가 있습니다.
• history 객체의 메서드에는 back(), forward(), go()가 있습니다.

브라우저와 관련된 객체 - location 객체 |

• location 객체에는 현재 문서의 URL 주소 정보가 들어 있습니다.
• location 객체의 프로퍼티에는 hash, host, hostname, href, pathname, port, protocol, password, search, username이 있습니다.
• location 객체의 메서드에는 assign(),
  reload(), replace(), toString()이 있습니다.

브라우저와 관련된 객체 - screen 객체 |

• 사용자의 화면 크기나 정보를 알아낼 때 screen 객체를 사용합니다.
• screen 객체의 프로퍼티에는 availHeight, availWidth, colorDepth, height, orientation, pixelDepth, width가 있습니다.
• screen 객체의 메서드에는 lockOrientation(), unlockOrientation()가 있습니다.

문서 객체 모델 알아보기 |

문서 객체 모델

• 문서 객체 모델(DOM: document object model) 은 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법을 의미합니다.
• DOM은 웹 문서와 그 안의 모든 요소를 ‘객체’로 인식하고 처리합니다.

DOM 트리

• DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분합니다.
• DOM은 문서 안의 요소뿐만 아니라 각 요소에서 사용한 내용과 속성도 자식으로 나타냅니다.
• DOM의 기본 원칙

1. 모든 HTML 태그는 요소(element) 노드입니다.

2. HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드입니다.

3. HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드입니다.

4. 주석은 주석(comment) 노드입니다.

DOM에 접근하기 |

id 선택자로 접근하는 getElementById() 메서드

요소명.getElementById("id명")

• 특정한 id가 포함된 DOM 요소에 접근할 수 있습니다.

class값으로 접근하는 getElementsByClassName() 메서드

요소명.getElementsByClassName("class명")

• 지정한 class 선택자 이름이 들어 있는 DOM 요소에 접근할 수 있습니다.
• class 선택자는 웹 문서 안의 여러 요소에서 사용할 수 있으므로 반환하는 요소가 2개 이상일 수 있습니다.

태그 이름으로 접근하는 getElementsByTagName() 메서드

요소명.getElementsByTagName("태그명")

• 지정한 태그명을 사용한 DOM 요소에 접근할 수 있습니다.

다양한 방법으로 접근하는 querySelector(), querySelectorAll() 메서드

노드.querySelector(선택자)
노드.querySelectorAll(선택자 또는 태그)

• DOM 트리의 텍스트, 속성 노드까지 자유롭게 제어할 수 있습니다.
• 반환값이 하나라면 querySelector() 메서드를 사용하고, 여러 값이 한꺼번에 반환될 경우에는 querySelectorAll() 메서드를 사용합니다.
• 선택자를 표시할 때 id 이름 앞에는 해시기호(#)를 붙이고, class 이름 앞에는 마침표(.)를 붙입니다.
• 반환 값은 노드이거나 노드 리스트입니다.

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티 | 

요소명.innerText = 내용
요소명.innerHTML = 내용
Copy

• innerText 프로퍼티는 텍스트 내용을 표시하고 innerHTML 프로퍼티는 HTML 태그까지 반영하여 표시합니다.

속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드 (1) |

getAttribute("속성명")
Copy

• getAttribute() 메서드를 사용하면 원하는 속성에 접근할 수 있습니다.

속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드 (2) |

setAttribute("속성명", "값")
Copy

• setAttribute() 메서드를 사용하면 원하는 속성값으로 지정할 수 있습니다.
• 속성값이 이미 있다면 새로운 속성값으로 수정하고, 아직 해당 속성이 없다면 속성과 속성값을 새로 추가합니다.

DOM에서 이벤트 처리하기 - DOM 요소에 함수 직접 연결하기 |

• 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있습니다.

DOM에서 이벤트 처리하기 - 함수 이름을 사용해 연결하기 |

• 이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있습니다.
• 함수 이름 다음에 괄호(( ))를 추가하지 않습니다.

DOM에서 이벤트 처리하기 - DOM의 event 객체 알아보기 (1) |

event 객체의 전체 프로퍼티와 메서드는 링크를 참고하세요.

• DOM에는 이벤트 정보를 저장하는 event 객체가 있습니다.
• event 객체의 주요 프로퍼티에는 type, target, button이 있습니다.
• event 객체의 주요 메서드에는 preventDefault()가 있습니다.

DOM에서 이벤트 처리하기 - DOM의 event 객체 알아보기 (2) |

• 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 합니다.

DOM에서 이벤트 처리하기 - addEventListener() 메서드 사용하기 (1) |

요소.addEventListener(이벤트, 함수, 캡처 여부);
Copy

• addEventListener() 메서드를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있습니다.
• 이벤트 : 이벤트 유형을 지정합니다. on을 붙이지 않고 씁니다.
• 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정합니다. 여기에서 함수를 정의할 때는 event 객체를 인수로 받습니다.
• 캡처 여부 : 이벤트를 캡처하는지 여부를 지정합니다. true이면 캡처링, false이면 버블링한다는 의미입니다. 이벤트 캡처링은 DOM의 부모 노드에서 자식 노드로 전달되는 것이고, 이벤트 버블링은 DOM의 자식 노드에서 부모 노드로 전달되는 것입니다.

DOM에서 이벤트 처리하기 - addEventListener() 메서드 사용하기 (2) |

• addEventListener() 메서드 안에 함수를 함께 선언하면 특정 이벤트에서 어떤 명령을 실행하는지 한눈에 확인할 수 있어서 더욱 편리합니다.

DOM에서 이벤트 처리하기 - CSS 속성에 접근하기 |

document.요소명.style.속성명
Copy

• 한 단어인 속성명은 그대로 사용합니다.
• 하이픈(-)이 있는 속성은 두 단어를 합쳐서 사용합니다. 이때 두 번째 단어의 첫 글자는 대문자로 표시합니다.

노드 리스트 살펴보기 |

• 노드 리스트란 노드를 여러 개 저장한 데이터 형태를 말합니다.
• 노드 리스트는 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있습니다.

텍스트 노드를 사용하는 새로운 요소 추가하기 |

새로운 요소를 추가하는 방법

1. 요소 노드 만들기 - createElement() 메서드

document.createElement(노드명)
Copy

1. 텍스트 노드 만들기 - createTextNode() 메서드

document.createTextNode(텍스트);
Copy

1. 자식 노드 연결하기 - appendChild() 메서드

부모노드.appendChild(자식노드)

 

속성값이 있는 새로운 요소 추가하기 |

속성값이 있는 새로운 요소를 추가하는 방법

1. 요소 노드 만들기 - createElement() 메서드

document.createElement(노드명)
Copy

1. 속성 노드 만들기 - createAttribute() 메서드

document.createAttribute(속성명)
Copy

1. 속성 노드 연결하기 - setAttributeNode() 메서드

요소명.setAttributeNode(속성노드)
Copy

1. 자식 노드 연결하기 - appendChild() 메서드

부모노드.appendChild(자식노드)

 

노드 삭제하기 |

노드를 삭제할 때 반드시 부모 노드에서 자식 노드를 삭제해야 합니다.

노드 삭제하는 방법

1. 부모 노드 찾기 - parentNode 프로퍼티

노드.parentNode

1. 자식 노드 삭제하기 - removeChild() 메서드

부모노드.remvoeChild(자식노드)

https://voucher.elice.io/courses/7739/lectures/all

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 | 엘리스