즐거운인생 (미련없이 하자)

개요 var, let, 그리고 const는 JavaScript (및 Node.js)에서 변수를 선언할 때 사용하는 키워드들입니다. 이들의 주요 차이점을 아래에 정리하였습니다: Scope (범위): var Function scope입니다. 즉, 변수는 선언된 함수 내에서 액세스할 수 있습니다. 함수 외부에서 선언된 경우 전역 범위를 갖습니다. let과 const Block scope입니다. 즉, 중괄호 {} (예: if 문, for 루프 등) 내에서 선언된 변수는 해당 블록 내에서만 액세스할 수 있습니다. Reassignment (재할당): - var와 let: 변수에 새로운 값을 재할당할 수 있습니다. - const: 한 번 값을 할당하면 재할당할 수 없습니다. 그러나 const로 선언된 객체의 프로퍼티..

[javascript] 9. event 사용 및 event 모델 정리 * 목차 *1. Event 란?2. Event handler(이벤트 핸들러) or Event listener(이벤트 리스너)3. Event 종류4. Event 모델5. Event 모델 별 사용법 1. Event 란? 1) Event 정의 - 특정 대상에 가하는 어떠한 행동 이라고 할수 있습니다. 또한 행동의 주체는 누구든 상관이 없습니다. 사람이 할 수도 있고 프로그램이 할 수도 있습니다. C언어를 배우고 바로 Javascript로 넘어오신분들에게는 생소 할 수도 있습니다. 왜냐하며 시스템 프로그램에서는 나오지 않는 개념 이기 때문입니다. 2) Exmaple 다음은 예제들 입니다. - 마우스의 왼쪽 버튼을 클릭한다. - 버튼을 눌렀다...

[javascript] 8. 객체 모델 정리 1. 객체 모델의 종류 2. 기본 내장 객체 모델 1) 정의 - JavaScript관련 객체 - 자바스크립트 엔진에 내장되어있다. 2) 객체 종류- developer.mozilla.org 에서 제공하는 내장 객체https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 3. 브라우저 객체 모델 1) 정의 - 브라우저를 다루기 위한 객체 - 브라우저에 계층적으로 내장되어있는 객체들이다. 2) 객체 종류 4. 문서 객체 모델 1) 정의 - HTML을 조작 하기 위한 객체 2) 객체 종류 - HTML Tag 하나를 노드(Node) 또는 객체 라고 합니다.분류 메소드 설명 document..

javascript] 7. 자바스크립트 생성자 함수와 프로토타입(Prototype) * 목차 *1. 생성자 란?2. 생성자의 필요성?3. 생성자의 형태4. 생성자의 사용법5. 생성자 함수에서 사용되는 함수 정의6. Prototype 이란?7. Prototype을 이용한 객체 상속 1. 생성자 함수 란? - "객체"를 생성할 때 사용하는 함수 입니다. - C++의 클래스의 Class 라고 보시면 됩니다. 2. 생성자 함수의 필요성? - 여러개의 동일한 프로퍼티를 가지는 객체를 생성하기 위해서 필요합니다. - Prototype을 이용하여 메모리 절감을 위해서도 필요 합니다. 3. 생성자 함수의 형태 - 생성자 명 : 대문자로 시작 (일반 함수와 구별을 하기 위한 관례 입니다) - 내부의 식별자 선언(var ..

[javascript] 6. 자바스크립트 값 복사와 참조 복사 * 목차 *1. 자바 스크립에서의 복사2. 자바 스크립에서의 배열 및 객체의 깊은 복사 방법 1. 자바 스크립에서의 복사 1) 자바스크립에 존재하는 복사 방식복사 방식 복사 대상 해당 되는 자료형차이점 값 복사 값 자체를 복사 기본 자료형 중 (숫자, 문자열, bool) 메모리의 값을 복사 참조 복사 값이 들어있는 메모리 주소 값을 복사 객체 또는 배열 (자료형들이 모인것) 메모리의 주소를 복사 * "참조" 란? 주소 값을 이야기 합니다. 2) 예제를 통한 정확한 이해 (1) 값 복사 - "test"에 할당된 값(10)을 복사 하기 때문에 복사 한 후 원본(test)의 값이 변하여도 미리 복사한 대상(test1)의 값은 변하지 않는다. var..

[javascript] 5. 자바스크립트 객체 란? * 목차 *1. 객체 란?2. 객체의 필요성3. 객체의 구조4. 객체의 프로퍼티(Property)란?5. 객체의 메소드 란?6. 프로퍼티 및 메소드 사용법7. 객체 메소드내에서 프로퍼티 사용법8. 객체에 프로퍼티 및 메소드 추가/삭제9. 객체와 관련있는 키워드10. 객체의 활용 방법 1. 객체 란? - 여러 정보{property)와 정보를 활용하는 메소드 를 합쳐 놓은 덩어리 라고 할 수 있습니다. - C++의 Class 와 비슷합니다. - C++과 java 스크립트 대응 표 C++javascript class 객체 멤버 변수 프로퍼티(한글로 "속성") 멤버 함수 메소드 - C++의 클래스와 javascript의 객체와의 큰 차이점 1) C++의 Cla..

[javascript] 4. 자바스크립트 실행 순서 목차 1. 브라우저의 javascript 동작 구조 2. 브라우저의 javascript 동작 순서 3. 비동기 이벤트 동작 예제 브라우저의 javascript 동작 구조 - 번역 출처(https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/) - 원본 출처(https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf) 브라우저의 javascript 동작 순서 1) 동기 방식 이벤트 처리 동작 (1) JS(javascript)엔진이 javascript 코드..

[javascript] 3. 자바스크립트 내장 함수 * 목차 *1. 타이머 함수2. 인코딩과 디코딩 함수3. 코드 실행 함수4. 숫자 확인 함수5. 숫자 변환 함수 1. 타이머 함수 - 타이머 함수에서는 초 단위를 miliisecond(ms)로사용한다. - miliisecond(ms)는 1/1000 초이다. (즉, 5000 ms 는 5 초이다) NO메서드 이름 설명 1 setTimeout(function, millisecond) 일정 시간 후 함수를 한번 실행합니다. 2 clearTimeout(id) 일정 시간 후 함수를 한번 실행하는 것을 중지 합니다3 setInterval(function, millisecond) 일정 시간 마다 함수를 반복해서 실행 합니다.4 clearInterval(id) 일정 시..

[javascript] 2.자바스크립트 함수란? * 목차 * 1. 자바스크립트 함수란? 2. 익명 함수 3. 선언적 함수 4. 함수의 생성 및 실행 순서("선언적 함수" -> "익명 함수") 5. "익명 함수 활용" 및 "선언적 함수" 활용법 6. 기타 함수 활용법(Callback) 7. 클로저(closure)란? 1. 자바스크립트 함수란? - javascript에서 코드의 집합을 나타내는 자료형입니다. - 그래서 함수를 변수에 할당 하거나 , 함수를 리턴 할 수 있습니다. - 함수에는 2가지 형태가 존재합니다. "익명 함수" , "선언적 함수", "즉시 실행 함수" 2. 익명 함수 1) 형태 function(, , ...) { 코드... } 2) 사용시기 - 변수에 함수를 할당 할때. - 함수에서 함수..

[javascript] 1. 자바스크립트 기초 (기본 구조) * 목차 *1. 자바 스크립트의 언어 구조2. 식별자(변수) 선언3. 분기(조건)문 (if 문 , if else if 문, switch문)4. 반복문5. 함수6. 정리 1. 자바스크립트의 구조 - 자바스크립트는 또한 객체 언어 입니다.(즉, 모든 것을 객체로 취급합니다) - 자바 스크립트는모든 언어와 동일하게 4개의 구조로 이루어 져 있습니다. 1) 선언 2) 조건 문(분기 문) 3) 반복 문 4) 함수 2. 식별자(변수) 선언 - 모든 언어와 동일 합니다. 1) 주석 - 프로그래밍 코드를 설명 한다. 코드에 아무런 영향을 미치지 않느다. 2) 표현식 - 실행 가능한 코드 한줄을 의미한다. 3) 키워드 - 미리 예약되어있는 프로그래밍 예약어 이..