2024.09.24 (Day 13) - JavaScript OOP / 생성자 함수
·
BootCamp Review
생성자란? • 객체지향 프로그래밍에서 중요한 용어이다.한마디로 정의하면 어떤 객체의 모형이 있고 그 모형으로 객체를 만들어주는 역할자를 생성자라고 한다.소프트웨어 언어마다 객체의 모형을 정의하고 이 모형을 통해 객체를 만드는 방법에는 차이가 있지만모든언어에서 이 객체를 만드는 작업을 “객체를 생성한다” 라는 표현을 하고그 객체 생성 역할을 하는 것을 “생성자”라고 한다. 생성자 함수▼ 객체 모형을 이용한 객체 생성• 동일한 멤버로 구성되는 객체를 여러 개 만드는 경우에는 객체를 만드는 모형이 하나 선언하고 그 모형을이용해 여러 개의 객체를 쉽게 만드는 방법이 있으면 쉬울 것 이다.객체를 만드는 모형을 선언하고 그 모형을 이용해 객체를 생성하는 방법은 2가지가 있으며 생성자 함수를 이용해 객체 생성 하거나..
2024.09.23 (Day 12) - JavaScript OOP / Object Literal
·
BootCamp Review
객체 리터럴• 객체를 만드는 방법은 여러가지가 있는데 가장 간단한 방법이 객체 리터럴(Object Literal)을 이용하는 방법이다. • 객체 리터럴은 객체의 내용을 중괄호( { } ) 로 묶고 그 안에 객체의 내용을 프로퍼티로 등록한다.객체의 프로퍼티는 키:값 형태를 띄며 여러 프로퍼티를 콤마( , ) 로 구분해서 등록하는 방식이 객체 리터럴이다. • 객체내에 선언된 것을 객체의 멤버라 표현하며 객체의 멤버 접근은 DOT( . ) 을 이용하고형태는“객체명.프로퍼티명”이며 user 객체의 name 프로퍼티에 접근하는 코드는 user.name 이다.또한 user 객체의 order 프로퍼티가 객체이고 이 order 객체의 productId 에접근하려면user.order.productId를 쓴다.   • 함..
2024.09.20-23 (Day 11, 12) - JavaScript Implicit Object 3
·
BootCamp Review
Implicit Object DOM Node• document 는 브라우저에서 실행되는 프런트 웹 애플리케이션에서 이용할 수 있는 내장 객체로 브라우저에 출력 되는 HTML 문서 자체를 지칭하는 객체• document 에 HTML 문서가 파싱되어 만들어진 다양한 DOM 노드 객체가 만들어지며 코드에서는document 객체를 이용해 이 노드에 접근해 다양한 작업을 한다.요소 노드 : 태그를 지칭하는 노드속성 노드 : 태그의 속성을 지칭하는 노드텍스트 노드 : 태그의 바디에 작성된 글을 지칭하는 노드주석 노드 : 문서의 주석을 지칭하는 노드 Node Selector▼ getElementById()• HTML 문서의 태그를 지칭하는 DOM 노드를 선택하여 그 노드에 있는 값을 획득하거나 그 노드에 값을 출력한..
2024.09.19-20 (Day 10,11) - JavaScript Implicit Object 2
·
BootCamp Review
2. 브라우저 내장 객체  브라우저 내장 객체• 브라우저 내장 객체는 브라우저에서 제공하는 자바스크립트 내장 객체임으로브라우저에서 실행되는 프런트 웹 애플리케이션에서만 사용할 수 있다.window : 브라우저 창을 지칭하는 객체document : 브라우저에 출력되는 HTML 문서를 지칭하는 객체history : 브라우저의 인터넷 방문 기록을 지칭하는 객체screen : 브라우저가 떠 있는 스크린 창을 지칭하는 객체navigator : 브라우저에 대한 정보를 제공하는 객체location : 브라우저의 출력 URL 을 지칭하는 객체• 브라우저의 객체들은 모두 window 의 객체들로 window 부터 계층 구조로 구성되어 있다 • document, history, screen, navigator, locat..
2024.09.13-19 (Day 9,10) - JavaScript Implicit Object 1
·
BootCamp Review
I. Javascript 내장 객체객체객체 - 함수와 데이터의 집합 • 자바스크립트에서 객체를 만드는 방법  3가지1. 객체 리터럴2. 함수 생성자3. 클래스 • OOP 는 Object Oriented Programming 의 약어이며 ‘객체지향 프로그래밍’이라고 한다.객체를 선언하고 객체를 이용해 코드를 작성하는 기법을 이야기 하는 용어이며 자바스크립트 뿐만 아니라대부분의 소프트웨어 언어에서 화자되는 용어이다.어떤 소프트웨어 언어에서 OOP 를 지원한다는 이야기는 그 언어에서 객체를 선언하고 이용하는 방법을 지원한다는 이야기이며, OOP 문법이라는 것은 객체를 선언하고 이용하기 위한 언어의 문법을 의미한다. ▼ 내장 객체• 개발자가 직접 객체를 선언해서 필요한 객체를 만들 수도 있고 이미 존재하는 객체..
2024.09.12 (Day 8) - JavaScript Event Programming
·
BootCamp Review
이벤트 프로그래밍▼ 이벤트 종류 1. 브라우저 이벤트2. 사용자 이벤트 • 브라우저 이벤트는 브라우저 자체에서 발생하는 이벤트이다• 사용자 이벤트란 애플리케이션 화면에서 사용자가 키보드 혹은 마우스로 발생시키는 이벤트를 의미한다.• 사용자 이벤트는 이벤트 종류에 따라 3가지로 구분해 볼 수 있다. - 마우스 이벤트- 키 이벤트- HTML FORM 관련 이벤트 ▼ 이벤트 프로그래밍 구조 • 애플리케이션에서 이벤트 처리를 하기 위해서는 이벤트 소스와 이벤트 핸들러를 리스너로 연결해야 합니다.• 이벤트 소스 : 이벤트 발생 객체• 이벤트 핸들러 : 이벤트 처리 내용• 리스너 : 이벤트 소스와 이벤트 핸들러를 연결 ▼ 방법1 - addEventListener() • 자바스크립트에서 이벤트를 등록하는 가장 기본적..
2024.09.11 (Day 7) - JavaScript Scope 와 Hoisting
·
BootCamp Review
변수와 호이스팅• 호이스팅(Hoisting)은 ‘무언가를 끌어올린다’ 라는 의미의 단어로아래에 선언된 변수를 위에서 사용하게 해주는 기법이다.코드는 위에서 아래로 흐르면서 실행됨으로 코드 위치만 보자면 변수가 아랫부분에 선언되어 있다면윗 부분이 실행될때는 변수가 선언되지 않은 상태가 됨으로 에러가 발생되어야 하는데실행시에 아래에 작성한변수 선언 부분을 자동으로 위로 끌어올려서 에러 없이 코드가 진행되게 해주는 기법이다. • 변수를 선언하는 방법은 var, let, const 예약어중 하나를 이용하며이중 호이스팅을 지원하는 변수 선언은 var 이다. • 코드 아래에 선언된 변수가 호이스팅이 되면 어디선가 값 대입이 되기 전까지는 undefined 상태가 된다. • 변수 선언을 let 과 const 로도 선..
2024.09.11 (Day 7) -JavaScript Function
·
BootCamp Review
함수• 함수는 하나의 관련된 업무를 실행하기 위한 코드들을 묶기 위해서 선언되는 프로그램의 구성요소이다각 업무가 각각의 함수로 구분되어 작성됨으로 코드를 작성하기도 편하고 나중에 필요한 부분의 코드를 식별해서 분석하거나 실행시키기에도 편하다. • 함수를 메서드라 부르기도 하고 혼용되어 사용되기는 하지만 두 용어에는 엄밀히 이야기하면 차이가 있다.함수는 영어 단어로 function 즉 기능이라는 뜻의 단어이며 함수내에 작성된 기능에 초점을 맞춘 단어이다.그런데 클래스내에 함수가 선언될 수도 있는데 이 클래스에 선언된 함수를 메서드라고 부르기도 한다.메서드는 영어 단어로 method, 즉 수단이라는 뜻이며 함수이지만 클래스내에 선언되어 있어그 클래스를 이용하는 수단으로 본다는 측면의 용어이다.정리하자면 모두..
2024.09.10 (Day 6) -JavaScript Operator
·
BootCamp Review
▶ 제어문• 제어문이란 프로그램의 실행 흐름을 제어하기 위한 구문이며어떤 특정 영역의 구문을 조건에 만족하는 경우에만 실행시키고자 할 때 혹은 반복적으로 실행시키고자 할 때 사용하는 기법이다.   ▶ 조건문• 조건문은 참 거짓이 나오는 조건을 명시하고 어떤 조건이 참인 경우에만 특정 코드가 실행되게 하고자 할 때 사용되는구문이며 크게 if 문과 switch문 그리고 3항 연산자가 있다. IF 문• 조건문의 가장 대표적이고 가장 많이 사용되는 것이 if 문이다.• if 문은 조건이 true 인 경우에만 실행되는 코드를 묶기 위해서 사용된다.  let age = 23 let adress ='서울'//if if(age  ▼ 조건을 명시하는 ( ) 부분은 true 혹은 f..
2024.09.09 (Day 5) -JavaScript Operator
·
BootCamp Review
연산자▼ 산술 연산자 • 수학적인 계산을 목적으로 하는 연산자이며 수학에서 주로 사용하는 연산 기호를 그대로 이용한다. • ++, -- 을 통칭해서 흔히 증감연산자라고 한다.피연산자(연산 대상이 되는 데이터) 앞에 사용할 수 있고 뒤에도 사용할 수 있으며  연산자 우선 순위를 고려해서 이용해 주어야 한다  //증감 연산자 let data3 = 10 data3++ console.log(data3); //11 ++data3 console.log(data3); //12 data3-- console.log(data3); //11 --data3 console.log(data3); /..