본문 바로가기

JavaScript38

[JavaScript] Chapter 08. 객체 객체 리터럴 데이터와 함수의 집합 프로퍼티와 메소드 var person = {}; var objName = { name1 : value1, name2 : value2, name3 : value3, name4 : function() { alert("test"); } }; 프로퍼티 (property) 객체 내부 속성 => key : value key 키, 속성명 문자열 따옴표 사용 또는 미사용 value 값, 속성 값 문자열, 숫자, 배열, 객체, 함수 등등 ex) var info = { age : 20, name : "홍길동", weight : "50kg", interests : ["music", "dancing"], desc : function() { alert("나의 정보"); } }; console... 2022. 12. 10.
[JavaScript] Chapter 07. 화살표 함수 화살표 함수 arrow function 함수의 표현식보다 간결하게 사용 가능 화살표 함수 사용 방법 let func = (arg1, arg2, ···) => expression arg1, arg2···은 매개변수 expression은 반환 결과 식 // 함수 선언 function sum(num1, num2) { return num1 + num2; } // 화살표 함수 let sum = (num1, num2) => num1 + num2; // 함수 호출 sum(10, 20); let myAge = 20; // 일반 함수 function checkMyAge(myAge) { document.write((myAge > 30) ? "30살 이상" : "30살 미만"); } // 화살표 함수 let checkMyA.. 2022. 12. 10.
[JavaScript] Chapter 06. 배열과 함수 Array 함수 (method) Array 객체 내 존재하는 함수 추가, 삭제, 분리, 합침, 정렬 등 존재 함수 (method) 설명 push 배열 끝에 추가 pop 배열 끝 삭제 unshift 배열 처음 추가 shift 배열 처음 삭제 indexOf 배열에서 탐색한 문자열을 처음 만난 요소 위치 반환 lastIndexOf 배열에서 탐색한 문자열을 처음 만난 요소 위치 반환 (역순) sort 배열 정렬 reverse 배열 거꾸로 뒤집기 slice 시작과 끝 범위 요소를 잘라 새로운 배열 생성 splice 일정 범위 요소 삭제, 새로운 요소 추가 concat 합치는 기능 join 배열 합쳐 문자열로 반환, 구분자 이용 가능 순회 함수 (method) 배열의 값을 읽기 위한 함수 배열 순회하면서 복사, 수.. 2022. 12. 10.
[JavaScript] Chapter 05. 배열 배열 대괄호를 사용하여 표현 각 요소 자료형 고정X 배열의 길이 존재 let arr1 = new Array("H", "e", "l", "l", "o"); let arr2 = ["H", "e", "l", "l", "o"]; 배열 선언 방법 let arr = new Array("사과", 1); let arr = new Array(2); let arr = ["사과", 1]; arr[0] // 사과 => 문자열 타입 arr[1] // 1 => 숫자 타입 arr.length // 2 => 문자열 길이 배열 요소 접근 방법 인덱스(index) indexOf() at() let arr = new Array("사과", "바나나", "오렌지"); arr.index0f(0); // -1 arr.index0f("오렌지");.. 2022. 12. 8.
[JavaScript] Chapter 04. 연산자 typeof 연산자 변수, 객체, 함수 또는 표현식의 데이터 타입을 반환해주는 연산자 typeof "John" // Return string typeof 3.14 // Return number typeof Nan // Return number typeof false // Return boolean typeof [1, 2, 3, 4] // Return object typeof {name:'John', age:34} // Return object typeof new Data() // Return object typeof function(){} // Return function typeof myCar // Return undefined typeof null // Return object instanceof 연.. 2022. 12. 8.
[JavaScript] Chapter 03. ==, ===의 차이점 ==는 Equal Operator이고, ===는 Strict Equal Operator이다. ==는 a == b 라고 할때, a와 b의 값이 같은지를 비교해서, 같으면 true, 다르면 false라고 한다.(값만 같으면 true이다.) ===는 Strict, 즉 엄격한 Equal Operator로써, "엄격하게" 같음을 비교할 때 사용하는 연산자이다. ===는 a === b 라고 할때, 값과 값의 종류(Data Type)가 모두 같은지를 비교해서, 같으면 true, 다르면 false라고 한다. 값은 똑같이 1이지만 값의 종류가 숫자냐, 문자열이냐에 따라 === 연산자를 사용할 때 결과가 false라고 나온다. var a = 1; var b = "1"; console... 2022. 12. 5.
[JavaScript] Chapter 02. 값 값 (Value) 조작 가능한 어뗜 표현 문자열, 문자, 숫자 등이 가짐 값 종류 원시 값 참조 값 원시 값 원시적인 값 단순 값 단순 데이터 원시 값 종류 숫자, 문자열, 불리언, null, undefined 원시 값은 한 번 메모리에 올라간 값이 변경되지 않는다. 참조 값 참조하여 값을 조작함 메모리에 객체로 저장됨 래퍼 객체 (Wrapper Object) 원시 타입을 객체화 -> new String() 임시 객체 생성 원시 타입 number, string, Boolean, undefined, null 래퍼 객체 종류 number, string, Boolean 래퍼 객체 변환 과정 원시 타입에 해당하는 객체 생성 생성된 객체의 함수 호출 함수 처리 생성된 객체 소멸 원시 타입만 존재 래퍼 객체 예시 .. 2022. 12. 5.
[JavaScript] Chapter 01. 자바스크립트와 웹 브라우저 렌더링 엔진 HTML / CSS 코드를 해석하여 트리를 구성해 전달해주는 역할 받아온 것 중, 자바스크립트는 인터프리터에게 줌 자바스크립트 해석기 인터프리터 HTML 태그 동적으로 움직이게 함 자바스크립트 위치 중요 스크립트는 body 요소 가장 아래 위치 페이지 로딩 문제 중간중간에 자바스크립트 코드가 들어간다면, DOM을 생성하다가 다시 자바스크립트 실행기에 자바스크립트 코드를 보내고 난 후, 다시 DOM을 생성하는 형식이 되기 때문이다. DOM 조작 에러 발생 페이지가 만들어지지 않은 상태에서 에러가 발생할 수 있다. DOM (Document Object Model) 문서 객체 모델 웹 페이지를 이루는 Tag들을 자바스크립트가 이용할 수 있게 브라우저가 렌더링 엔진을 이용해서 Node 객체들이 구성.. 2022. 12. 4.