쌍용강북교육센터 국비 학원 Day 47일차 JavaScript (getElement, Array, for문)

 

쌍용 강북 교육센터 국비학원 Day 47일차

 

Number 주요 method

숫자.toLocaleString ('en')

-> 숫자를 3자리 마다 콤마를 찍어서 문자열로 변환시켜줌.

 

숫자.toFixed (num)

-> 소수 (파라미터) num의 자리까지 반올림 해주는 메소드. 그 이후는 반올림하고 절삭. string 타입으로 리턴.

 

숫자.toPrecision (num)

-> num의 길이만큼 추출한 후 반올림해준다. string 타입으로 리턴.

 

 

getElement

JavaScript에서 Element (태그, 요소)를 잡는 6가지 방법

 

1. 태그를 가지고 선택자를 잡는 방법

document.getElementsByTagName ("태그명")

-> NodeList 타입으로 반환해준다. 마치 배열과 비슷하다. 즉, 객체를 여러개인 형태로 반환

 

2. 클래스명을 가지고 선택자를 잡는 방법

document.getElementsByClassName ("클래스명");

-> NodeList 타입으로 반환해준다. 마치 배열과 비슷하다. 즉, 객체를 여러개인 형태로 반환

 

3. Name 속성을 가지고 선택자를 잡는 방법

document.getElementsByName ("name값");

-> NodeList 타입으로 반환해준다. 마치 배열과 비슷하다. 즉, 객체를 여러개인 형태로 반환

 

4. ID 값을 가지고 선택자를 잡는 방법

document.getElementById ("id값");

-> 리턴타입은 한 개의 객체이다. (즉, Element - 요소를 리턴해준다.)

 

5. CSS 선택자를 가지고 잡는 방법

document.querySelector ("CSS선택자");

-> 리턴타입은 한 개의 객체이다. (즉, Element - 요소를 리턴해준다.)

 

6. CSS 선택자를 가지고 잡는 방법

document.querySelectorAll ("CSS선택자");

-> NodeList 타입으로 반환해준다. 마치 배열과 비슷하다. 즉, 객체를 여러개인 형태로 반환

 

 

태그의 이름을 가져와 속성을 변경하는 getElement 예제

 

이벤트 생성 예제 (btnOK는 button의 id 값이다.)

 

 

 

 

Array

자바스크립트 배열에는 숫자, 문자열, 객체와 같은 서로 다른 타입의 데이터가 혼합되어 들어갈 수 있다.

 

 

자바스크립트에서의 배열 생성하기 (생성할 때 값을 주어 초기화를 동시에 해도 된다)

 

- new 를 이용한 생성

변수타입 배열명 = new Array();

 

- 리터럴 표기법 (literal notation)

변수타입 배열명 = [ ];

 

 

배열에 값 추가하기

배열명.push ()

- 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열의 길이를 리턴

배열명.unshift ()

- 배열의 맨 처음에 새로운 요소를 추가한 후, 변경된 배열의 길이를 리턴

 

배열에 값 삭제하기

배열명.pop()

- 배열의 마지막 요소를 제거한 후, 제거한 요소를 리턴

배열명.shift()

- 배열의 맨 처음 요소를 제거한 후, 제거한 요소를 리턴

 

 

for문

자바에서 자주사용하는 일반적인 고전 for문도 사용가능하고 자바스크립트에서는 몇가지 다른 for 문이 있다.

 

for of 문

for (변수타입 변수명 of 객체명) { 반복문 }

- 자바의 확장 for문과 유사하며 ( : )콜론대신 of 라고 생각하면 편하다.

for ... of 는 배열의 값을 가져올때 사용하는 것이고,  for ... in 은 객체의 속성목록을 가져올때 사용하는 것이다.
배열도 객체인데 배열의 속성은 바로 인덱스번호 이다. 그래서 of 대신에 in 을 사용하면 배열요소의 인덱스번호가 나온다. 

 

for Each문

배열명.forEach (function (value, index, array) { 반복문 } );
value - 현재 처리 중인 배열의 각 요소 값
index - 처리 중인 요소의 인덱스 (optional - 선택사항이므로 생략가능) 
array - forEach() 가 적용되고 있는 원본배열 (optional - 선택사항이므로 생략가능)

 

for in문

for (변수타입 변수명 in 객체명) { 반복문 }

for in 반복문은 모든 객체에서 사용이 가능하고 객체의 속성들을 반복하여 작업을 수행할 수 있다. for of 문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 제공하지 않는다.

 

자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있다. 그 중 하나가 [[Enumerable]]이며, for in 문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않는다. 요약하자면 for in 문은 해당 객체가 상속받는 프로토타입 체인상의 모든 프로퍼티 키를 열거한다.(단, [[Enumerable]] 값이 false인 프로퍼티는 제외)

 

 

※ for of 와 for in의 차이점

for in 문은 객체의 열거 가능한 properties를 임의의 순서로 반복하고, for of 문은 iterable 객체가 반복하도록 정의한 값을 반복한다.

 

 

배열에 담겨있는 목록들을 반복문으로 값을 추가하는 예제

 

위의 예제를 람다식으로 표현한 예제

 

 

 

 

 

 

---

참고 - https://curryyou.tistory.com/202