[Javascript] Getter와 Setter

class에서는 getter와 setter를 사용하여 class의 속성에 접근할 수 있다. - getter : 속성 값을 반환하는 메소드 - setter : 속성 값을 설정하는 메소드 [ 가로 세로 값을 입력받아서 넓이를 출력하는 프로그램 ] setter를 통해 외부로부터 받아온 value를 내부적으로 점검한 후에 검증 및 세팅을 한다. ++ undersocore : 변수이름 앞에 언더바를 붙여서 외부에서 접근할 수 없는 숨겨진 필드임을 나타내는 방식 (인스턴스 내에서만 사용하기 위해) class Rectangle { constructor(height, width) { this._height = height; this._width = width; } get width() { return this._wid..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 5.
• textsms

[Javascript] 클래스(class)

01 클래스, 인스턴스 개념 1) 클래스(class) : 객체를 만들기 위한 설계도 (ex. 자동차 설계도) 2) 인스턴스(instance) : 이 설계도를 바탕으로 만들어진 실체 객체들 (ex. 여러 자동차들) 02 생성자 Constructor class의 생성자 함수로 객체를 생성할 때 호출되며, 객체를 초기화하는 역할을 한다. class Person { constructor(name, age) { // 생성자 함수 this.name = name; // 외부로부터 받아온 this.age = age; } sayHello() { console.log(`안녕하세요, 저는 ${this.name}입니다. 제 나이는 ${this.age}입니다.`); } } const person1 = new Person("홍길..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 5.
• textsms

[Javascript] DOM 접근 및 제어

01 DOM 계층 구조 DOM에서 Node는 웹페이지를 구성하는 모든 HTML 태그와 텍스트, 그리고 속성 등을 하나의 블록으로 취급하는 것으로 서로 계층 구조로 연결되어 있으며, 각 블록은 자식 노드, 부모 노드, 형제 노드와 관계를 가지고 있다. 02 Node 객체의 속성과 메소드 getElementById("demo") : 메소드 , innerHTML : 속성 document.getElementById("demo").innerHTML = "Hello World!"; - 속성 : 값을 가지고 있음, 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는데 사용 - 메소드 : 동작을 수행함, 해당 객체가 수행하는 작업을 나타내는 함수 03 콘솔에서 자식노드/ 부모노드 접근할때 // document.get..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 5.
• textsms

[Javascript] API

API란? 다른 시스템에서 데이터나 서비스를 요청할 때, API는 해당 시스템과 사용자 간의 인터페이스 역할을 한다. 예를 들어, 날씨 앱에서 사용자가 현재 위치의 날씨를 확인하려면, 앱은 해당 기능을 제공하는 날씨 서비스의 API를 호출하여 날씨 정보를 받아오게 된다 - 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할 - 브라우저의 경우 역시, 기본적으로 DOM과 관련된 API를 제공함으로써 브라우저의 DOM 객체에 접근할 수 있도록 도와줌

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 5.
• textsms

[Javascript] DOM의 기본 개념

01 Javascript란? 브라우저에서 쓰려고 만들어진 언어로 웹 페이지를 동적으로 만들기 위해 사용되는 언어다. (즉, HTML 문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어) 02 웹 페이지가 뜨는 과정 (1) 사용자가 브라우저에 주소 입력 (ex. www.google.com) 사용자 = 브라우저 = 클라이언트 (2) 클라이언트가 서버에게 요청(request) (3) HTML 문서를 서버로부터 수신 (4) 서버는 클라이언트에게 응답(response) == HTML 문서(document) (5) 브라우저가 HTML 파일을 해석(parsing 파싱) 브라우저에 기본적으로 있는 렌더링 엔진이 서버가 클라이언트에게 준 HTML 문서 렌더링(해석) (6) Javascript가 이해할 수 있는 DO..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 3.
• textsms

[Javascript] this(정의, 활용방법, 바인딩, call, apply, bind)

다른 객체 지향 언어에서의 this는 곧 클래스로 생성한 인스턴스를 말하지만 자바스크립트에서는 this가 어디에서나 사용될수있다. 실행콘텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 1 VariableEnvironment(VE) 2 LexicalEnvironment(LE) 3 ThisBindings 1. 전역 공간에서의 this 전역 객체를 가리킴 런타임 : 코드가 돌아가는 그 시간, 환경 1. 노드 -> global 객체를 의미 2. 브라우저 -> window 객체를 의미 함수는 스스로 실행이되는 것, 메소드는 어떤 객체가 실행시켜줘여함, 실행의 주치가 있어야함 함수는 this -> 전역 객체 메소드 this -> 호출의 주체 (객체.메소드 라면 객체) 함수로서 호출할때 그 함수 내부에서..

• format_list_bulleted Programming Language/HTML\CSS\JavaScript
• · 2024. 1. 2.
• textsms