0308. UI 구현 Test

☑️ Uncaught ReferenceError : $ is not defined

—> jQuery 라이브러리 적용안해서 뜨는 에러

☑️ jQuery 라이브러리 연결 방법

1. jQuery 라이브러리를 다운로드 받아 external 방식으로 연결하는 방법
2. CDN을 이용하여 온라인 환경에서 페이지 로딩 시 다운로드하여 연결하는 방법

☑️ typeof 변수명

해당 변수의 자료형을 반환하는 연산자

☑️ scope

• var : 함수 레벨 scope
• let : block{} 레벨 scope
• const : block{} 레벨 scope

☑️ NaN 속성

숫자(number) 타입 리터럴 표기법

• 123(정수), 9.321(실수), NaN(Not a Number), Infinity(무한)

☑️ undefined

자료형이 정의되지 않은 변수, ** 자료형
-> 값이 대입되지 않은 변수

☑️ BOM(Browser Object Model)

• location
• history
• screen
• navigator

☑️ js 자료형

• string ( 문자열 / "abc", 'abc' )
• number ( 숫자 / 100(정수), -3.14(실수) )
• boolean ( 논리값 / true, false )
• object ( 객체 / 배열(Array), JS객체 {K:V, k:V} )
• function ( 함수 )
• undefined ( 자료형이 정의되지 않은 변수 ) -> 값이 대입되지 않은 변수

** null은 참조하는게 없음을 나타내는 리터럴 (자료형 X)

☑️ js 작성하는 방법

1. 브라우저 콘솔에 직접 작성
2. html 내부에 script 태그를 이용해서 작성(internal)
3. html 외부에 (.js)파일을 이용해서 작성(external 외부 파일)
4. 태그에 직접 JS코드를 작성(inline)

☑️ js 태그 요소 객체 정보 얻어오는 방법

1. document.getElementsByTagName("태그명");
2. document.querySelector()

☑️ 화살표 함수에서의 this

e.target : 이벤트가 발생한 대상(요소)

☑️ js 배열 선언 초기화 방법 2가지

1) const arr1 = new Array(); // 0칸 짜리 배열 생성

2) const arr2 = new Array(3); // 3칸 짜리 배열 생성

3) const arr3 = []; // 0칸 짜리 배열 생성

4) const arr4 = ['사과', '딸기', '바나나'];
// 3칸짜리 초기화된 배열 생성

☑️ js 원시타입 / 참조타입

• 원시타입 : 자료형(string, number,boolean, undefined)
• 참조타입 : 객체, 배열 함수(객체의 주소 참조, 원본 데이터 바뀌면 참조형도 바뀜)

☑️ 웹 표준과 관련된 기술

css, xml, DOM, html, javascript

☑️ 매개변수로 전달받은 문자열 (함수) 가 일치하는 클래스 속성을 가진 요소를 찾아서 Element 객체를 반환하는 document 매소드

→ document.getElementByClassName("클래스명");

☑️ css 선택자가 지정하는 요소를 찾아서 반환하는 메소드

document.querySelector("#test");

☑️ input type

☑️ DOM을 이용한 요소 접근 방법

1. id 속성값으로 접근하기
   document.getElementById("id속성값");

2. class 속성값으로 접근하기
   document.getElementsByClassName("class 속성값");

3. name 속성값으로 접근하기
   document.getElementsByName("name 속성값");

4. 태그명 tag name으로 접근하기
   document.getElementsByTagName("태그명");

5. CSS 선택자를 이용해서 접근하기
   1) document.querySelector("#test");

   • 단일 요소를 선택하는 방법
   • 만약 선택된 요소가 여러개이면(클래스, 태그명 등) 첫번째 요소만 선택한다

   2) document.querySelectorALL("CSS 선택자");

   • 선택된 모든 요소를 얻어와서 배열 형태로 반환
     (각각의 index에 선택된 요소가 하나씩 있음)