HTML 문법으로 작성한 태그, 주석, 텍스트와 같은 구성 요소들은 웹브라우저에서 각각 하나의 객체로 인식 합니다. 이러한 HTML 구성 요소들을 다루는 객체를 문서 객체 모델(DOM)이라고 합니다. header link DOM 트리는 document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 '트리' 형태로 구성되는데, 이들을 각각 '노드'라고 합니다. document는 노드가 아니라 객체이므로 여기서는 html이 루트 노드가 됩니다. 메소드로 노드 선택하기 일반적으로 요소 노드를 바로 선택할 수 있는 메소드를 이용한 노드 선택 방법이 많이 쓰입니다. 속성값과 태그명 사용 - get 메소드 getElementById("id명") getElementById() 메소드로 선택하는 요소 노..

자바스크립트에서의 class와 자바의 class는 유사한 점이 많습니다. 공통사항은 따로 다루지 않고, 차이점에 대해서만 다루겠습니다. 차이점 ☕ 자바 클래스는 인터페이스를 사용하여 다중 상속을 모방할 수 있습니다만, 🍦 자바스크립트에서는 인터페이스 개념이 없으므로 다른 방법을 사용해야 합니다. ☕ 자바 클래스에서는 super 키워드를 사용하여 상위 클래스의 생성자를 명시적으로 호출해야 합니다. 🍦자바스크립트 클래스에서는 super 키워드를 사용하여 상위 클래스의 '생성자'를 호출하는 것 이외에도, super 키워드를 사용하여 상위 클래스의 '메소드'를 호출할 수 있습니다. ☕자바 클래스에서는 상위 클래스의 메소드를 super 키워드를 사용하여 오버라이딩을 방지할 수 있습니다만, 🍦자바스크립트에서는 오버..

Map Map은 자바스크립트에서 제공하는 데이터 구조 중 하나로, key - value 쌍으로 데이터를 저장하고 관리합니다. Map은 은 객체와 유사하지만, 객체와는 다르게 key에 다양한 자료형을 사용할 수 있으며, 원시 자료형도 key에 사용할 수 있습니다. set(key, value) : Map은 객체에 key - value 쌍을 추가합니다. get(key) : Map은 객체에서 지정한 key에 대한 값을 반환합니다. has(key) : Map은 객체에서 지정한 key가 존재하는지 여부를 반환합니다. delete(key) : Map은 객체에서 지정한 key에 대한 key - value 쌍을 제거합니다. clear() : Map은 객체에서 모든 key- value 쌍을 제거합니다. size : Map..

날짜와 시간을 다루는 Date 객체 const date = new Date(); console.log(date); Date 객체는 운영체제에서 날짜와 시간 정보를 가져옵니다. 시간 직접 세팅하는 법 인스턴스 만들기 월(月)은 0부터 시작, GMT 기준 시간으로 설정 됨. const date1 = new Date(2022, 11, 27, 18, 30, 50); console.log(date1); // 원하는 달로 입력 됨 const date2 = new Date("2022-12-25/18:30:50"); console.log(date2); Date 객체 메소드 let myDate = new Date(); console.log(myDate.getFullYear()); // 2023 (현재 연도 출력) con..

🍦 배열 객체에는 [파괴적 메소드]와 [비파괴적 메소드]가 있습니다. 파괴적 메소드? 메소드를 호출하는 객체를 변경하며, 원래의 객체를 수정합니다. (추가, 추출, 정렬 등) 비파괴적 메소드? 요소를 사용하되 변경하지 않는 것 자바 stream API와 동일 : 원본 데이터를 변경하지 않습니다. React에서도 자주 나옴 비파괴적 메소드 forEach() : 요소를 순회 const arr = [10, 20, 30, 40, 50]; arr.forEach(function(n) { console.log(n); }); 10 20 30 40 50 toString() : 배열 안의 문자를 하나의 문자열로 반환 배열 안의 모든 문자를 쉼표(,)를 이용해 모두 결합하여 하나의 문자열로 반환합니다. let fruits ..

🍦 자바스크립트에는 개발 편의를 위해 수많은 객체가 미리 만들어져 있습니다. 🍦 이렇게 만들어진 객체는 자바스크립트에 기본으로 내장되어 있어서 스코프의 위치를 따지지 않고 모든 영역에서 공통으로 사용할 수 있습니다. Object : 가장 기본적인 객체, 모든 객체의 상위 객체 입니다. Array : 배열을 나타내는 객체, 여러 개의 값을 하나의 변수에 저장할 수 있습니다. String : 문자열을 나타내는 객체, 문자열을 다루는 다양한 메소드를 제공합니다. Number : 숫자를 나타내는 객체, 숫자를 다루는 다양한 메소드를 제공합니다. Boolean : true / false를 나타내는 객체입니다. Date : 날짜와 시간을 다루는 객체, 날짜와 시간을 다루는 다양한 메소드를 제공합니다. Math : ..

객체는 자바스크립트에서 가장 중요하고 강력한 개념 중 하나 입니다. 자바스크립트에서 객체는 다른 객체 또는 기본,원시타입(primitive type) 값을 포함할 수 있는 컨테이너 입니다. 객체는 중괄호 {}를 사용하여 만들며, 속성(property)과 값(value)의 쌍으로 구성됩니다. 객체를 만드는 방법은 [객체 리터럴]과 [클래스]가 있지만, [객체 리터럴]로 객체를 만드는 것이 간단하고 직관적 입니다. 웹 개발에서 브라우저 객체 모델(BOM)과 문서 객체 모델(DOM) 등 다양한 객체를 사용하여 웹 페이지를 조작 및 상호작용하는 데 사용됩니다. 객체 리터럴 객체 리터럴은 백엔드와 통신할 때 주로 쓰입니다. 📌 예) 회원정보 3000번 포트에서 8211번 포트로 전달 (BE : 8211번 / FE..

계산기 만들기 함수와 switch문 사용하여 계산기 만들기 💡 prompt, input 등에서 받아오는 값은 문자열이기 때문에 형변환 해줘야 함. * input 태그로 첫번째 숫자 입력 받기 (예. 10) -> let firstNum = document.getElementById("num1").value; * select 콤보 박스로 (사칙연산 선택) (+, -, *, /) -> let op = document.getElementById("operator").value; * input 태그로 두번째 숫자 입력 받기 (예. 20) -> let secondNum = document.getElementById("num2").value; * 계산 버튼을 만들기 -> html에서 자바스크립트 함수 호출 : 계산하..

함수? 자바스크립트에서 가장 중요한 개념 (자바에서는 메소드라는 용어로 사용) 특정 작업을 여러번 반복해야 하는 경우, 해당 작업을 재사용 가능한 구조로 만들게 되는데 이 때 사용하는 것이 함수 입니다. 입력값을 검증하고 올바르지 않은 경우, 예외를 발생시킬수 있습니다. (try ~ catch) 전역 변수 사용을 줄이고, 함수 내에서만 유효한 변수(지역변수)를 선언 합니다. 비동기적으로 실행되는 코드를 처리하기 위해 콜백 함수를 정의 합니다. 객체를 생성하고, 객체의 속성과 메소드를 정의 합니다. 함수를 인자로 받아서, 다른 함수에서 실행 합니다. 자바스크립트에서 함수는 [함수 선언문] 또는 [함수 표현식]으로 작성할 수 있습니다. 1️⃣함수 선언문 function 키워드로 선언하며 함수 이름을 가집니다..

구현 화면 PC 모바일 코드 HTML search video_call notifications account_circle home 홈 ondemand_video Shorts video_library 구독 smart_display Originals headphones YouTube Music subscriptions 보관함 history 시청 기록 live_tv 내 동영상 schedule 나중에 볼 동영상 download 오프라인 저장 동영상 구독 지니몬JINIMON 피식대학Psick Univ 드림코딩 돌비공포라디오 기묘한 밤 © 2023 Google LLC, Sundar Pichai, 1600 Amphitheatre Parkway, Mountain View CA 94043, USA, 0807-882-59..