오늘의 노래 추천 🥖
- 아티스트
- 스텔라장 (Stella Jang)
- 앨범
- Stairs
- 발매일
- 1970.01.01
내 자장가 스텔라장 샹송 계속 내주라 . . .
DAY 2
ㅡ 배열 ( Array ) ㅡ
여러개의 데이터를 한번에 다룰 수 있도록 해주는 자료구조
* 길이가 정해지지 않은 가변길이 이며 자료형 제한이 없음
변수 선언 키워드 + 배열명 = [ ]
자바 배열 사용 방식과 동일
ㅡ> 배열에 숫자, 문자, boolean, 배열, 객체 등의 다양한 자료형 값 초기화 가능
배열명.push() : 배열의 뒤쪽에 자동으로 추가됨
배열
배열 재대입 ㅡ> 데이터 수정
splice ( 시작인덱스, 삭제할 개수) ㅡ> 데이터 삭제
includes ( 확인할 데이터 값 ) ㅡ> 특정 데이터가 있는지 확인
indexOf ( 확인할 데이터 값 ) ㅡ> 특정 데이터의 인덱스 번호 확인
slice ㅡ> 배열 자르기
https://velog.io/@natural_min/JS-array-fn
[JS] 배열 관련 함수 정리
: 순서가 있는 리스트, 고유번호(index) 존재: 배열 끝에 추가: 배열 끝 요소 제거: 배열 앞에서 추가: 배열 앞에서 제거unshift & shift는 여러 요소를 한꺼번에 추가 가능일반 for문보다는 간단하지만,
velog.io
* 배열 예제 실습
pop : 배열 마지막 요소 삭제
ㅡ> splice ( 배열명.indexOf ( '삭제할 아이템' ), 1 ) 으로도 삭제가능
push : 배열 마지막에 요소 추가 (여러개 가능)
includes : 요소가 배열에 있는지 확인
indexOf : 요소의 인덱스 번호 반환
splice : 배열에서 삭제
ㅡ> 인자를 하나만 쓰면 해당 인덱스부터 끝까지 삭제
slice : ~부터 ~까지 잘라내기 ( 재대입 활용 )
ㅡ 함수 ( function ) ㅡ
독립적으로 설계된 불록으로 호출하여 작업을 수행할 수 있음
* java 의 메서드 형태와 유사
* 함수 선언문
function 함수명 ( 매개변수 ) {
동작 로직
return 반환값
}
* 선언된 위치와 상관없이 함수 호이스팅 ( function hosting ) 발생
함수 선언문으로 선언된 함수는 html 문서가 해석될 때 최상단으로 끌어올려짐
ㅡ> 경우에 따라 원치 않는 결과가 나올 수도 있음
* 함수 표현식
함수명이 없는 함수 선언문을 변수에 저장 ㅡ> 함수 표현식
자바스크립트의 함수는
값, 데이터로 취급 가능하며 '1급 객체' 임
** 1급 객체의 특징 **
1. 변수에 담아 사용하거나 속성값, 배열의 요소 등으로 사용 가능
2. 함수의 매개인자로서 함수를 사용 가능
3. 함수의 리턴값으로 함수 사용 가능
* 화살표 함수
function 을 생략하고 => 를 사용해 함수식 작성 ㅡ> 화살표 함수
ㅡ> 매개인자나 실행구문이 1개일 경우 괄호 생략 가능
* 두 수를 입력받아 더하는 함수 생성 예제
* 이모지와 줄 수를 입력받아 피라미드 그리기 예제
ㅡ> 이중 for 문을 사용해 피라미드 함수 작성
ㅡ 객체 ( object ) ㅡ
여러 속성을 하나의 변수에 저장할 수 있는 자료형
* Key/Value 로 저장하는 구조
ㅡ> 속성 ( property ) + 메서드 ( method )
* java의 field 와 method
* 객체 구조
{ key1:value1, key2:value2 . . . }
** 객체의 속성에 접근하기 위해서는 객체명.(온점)속성명
ㅡ 사용자 정의 객체 ㅡ
Host Object
ㅡ 브라우저 객체 모델 ㅡ
Browser Object Model
window : 최상위의 브라우저 객체 모델, 브라우저 창을 제어할 수 있는 객체
location : 주소 관련 정보를 가진 객체
screen : ( 디스플레이 ) 화면 정보
navigator : 현재 브라우저 정보
history : 브라우저의 이동 관련 정보
ㅡ 문서 객체 모델 ㅡ
Document Object Model
* 브라우저 객체 모델의 요소 (Documnet)
html 문서에 정의된 태그를 Javascript 가 이용할 수 있는 객체로 작성
웹 브라우저가 html 문서를 '인식하는 방식'
Tree 구조를 만들고 랜더링하는 과정을 거침
ㅡ HTMLElement ㅡ
모든 종류의 HTML 요소를 나타내는 인터페이스
* Node Type 중 하나
ㅡ> getElement 메서드를 통해 원하는 객체 조회 후 조회된 객체로 구체적 작업
* html 객체에 접근하는 함수 *
getElementById () : id 속성을 가진 HTML 객체를 반환
getElementsByName () : name 속성을 가진 HTML 객체들을 반환
getElementsByClassName () : class 속성을 가진 HTML 객체들을 반환
getElementsByTagName () : tag 이름에 해당하는 HTML 객체들을 반환
getElement ㅡ> HTMLElement 객체
getElements ㅡ> HTMLCollection 객체(유사배열)
* 접근/변경 관련 속성과 함수 *
HTML객체.innerHTML : HTML 객체의 내용 (html, xml, text...)을 접근, 변경, 추가
HTML객체.textContent : HTML 노드 속성으로 텍스트 값을 접근, 변경, 추가
HTML객체.value : input HTML 객체의 텍스트 내용을 접근, 변경
HTML객체.style.property : HTML 객체의 스타일을 접근, 변경
HTML객체.setAttribute : HTML 객체의 속성을 변경
value와 InnerHTML / InnerText 용도 구분
ㅡ> addEventListener 함수 : 버튼에 'click' 이벤트가 발생할 경우 function 실행 (이벤트리스너)
' on ~ 속성 '
자바 코드를 실행하기 위한 속성
ㅡ> 따옴표에 실행 구문을 작성해줘야함
* 버튼을 클릭하면 h1태그 수정, a태그 생성, ul태그 생성하는 예제
getElement 를 이용해 객체를 불러오고
click 이벤트가 발생할 경우 h 태그의 텍스트를 수정하고,
aArea 에 a태그의 내용을 추가하고,
ulArea 에 ul태그의 내용을 추가하는 함수 작성
* 단, 편의상 행을 구분해야할 경우 복합대입연산자를 활용할 수 있음
* 버튼을 누르면 숫자가 증가, 감소하는 예제
getElement 메서드를 사용해 객체를 불러오고
click 이벤트가 발생할 경우 n 의 값이 증감하는 함수 작성
* 가위바위보 박스 예제
ㅡ> getElementById 로 객체를 불러오고 가위, 바위, 보 배열 생성
ㅡ> 승패에 따른 테두리 색 변경을 위해 parentElement 로 부모 요소에 접근
setAttribute 를 이용해 class 속성을 변경
ㅡ> 사용자와 컴퓨터의 결정을 매개변수로 받아 승패를 결정해서 출력하는 함수 judge 생성
* judge 함수 내에서 테두리 색 변경
ㅡ> 랜덤으로 사용자와 컴퓨터의 가위바위보 결과를 결정하고 출력하는 play 함수 생성
* play 함수 내에 judge 함수 호출
BYE