프로그래머스 데브코스 TIL 6일차

프로그래머스 데브코스 TIL 6일차 이다.

 

이 글 역시 밀린 글을 작성하는 거라.. 조금 빠진 부분이 있을 수 있다.

 

차근차근 꾸준히 작성해나가자

---

---

자바스크립트 객체와 jQuery의 기초 정리

1. 객체 리터럴

자바스크립트에서 원시 타입을 제외한 모든 값은 객체이다. 그 중 객체 리터럴(Object Literal)은 가장 기본적이고 직관적인 객체 생성 방법이다.

객체 리터럴은 중괄호 {}를 사용하여 객체를 생성하며, 속성(property)과 메소드(method)를 정의할 수 있다.

var object = {};  // 빈 객체 생성
object.name = "Kim Kyung Ah";
object.job = "Developer";

console.log(object.name);  // Kim Kyung Ah
console.log(object.job);   // Developer

메소드를 포함한 객체 리터럴

var person = {
    name: "Kim Kyung Ah",
    job: "Developer",
    hello: function() {
        alert("안녕하세요.");
    }
};
person.hello();

---

2. 생성자 함수

객체 리터럴은 한 번에 하나의 객체만 생성할 수 있지만, **생성자 함수(Constructor)**를 사용하면 동일한 구조를 가진 객체 여러 개를 효율적으로 생성할 수 있다. 생성자 함수는 일반적으로 대문자로 시작하며, new 키워드를 통해 호출한다.

function Car() {
    this.carBrand = "Hyundai";
    this.carName = "i40";
}

var car = new Car();
console.log(car.carBrand);  // Hyundai
console.log(car.carName);   // i40

매개변수를 받는 생성자 함수

function Car(carBrand, carName) {
    this.carBrand = carBrand;
    this.carName = carName;
}

var car = new Car("KIA", "K7");
console.log(car.carBrand);  // KIA

메소드를 포함하는 생성자 함수

function Car(carBrand, carName) {
    this.carBrand = carBrand;
    this.carName = carName;
    this.showMyCar = function() {
        console.log(this.carBrand);
        console.log(this.carName);
    };
}

var car = new Car("KIA", "K7");
car.showMyCar();  // KIA / K7

---

3. jQuery 기초

jQuery는 자바스크립트를 간결하게 사용할 수 있도록 돕는 라이브러리로, DOM 요소 제어, 이벤트 처리, 애니메이션, AJAX 요청 등을 간단하게 구현할 수 있다.

jQuery 사용 준비

기본 사용 문법

$(document).ready(function(){
    $("h1").text("jQuery로 텍스트 변경됨");
});

---

4. jQuery 선택자

jQuery의 선택자는 CSS 선택자와 동일한 방식으로 요소를 선택할 수 있다.

유형 예시 설명

태그 선택자	$("p")	모든 <p> 요소 선택
ID 선택자	$("#title")	id가 title인 요소 선택
클래스 선택자	$(".promo")	class가 promo인 요소 선택
자식 선택자	$("#box > li")	바로 아래 자식만 선택
하위 선택자	$("#box li")	모든 하위 자손 요소 선택
다중 선택자	$("h1, p, li")	여러 요소를 동시에 선택

---

5. DOM 탐색 (Traversing)

DOM 탐색을 통해 선택된 요소의 자식, 형제, 부모 요소를 쉽게 찾을 수 있다.

주요 메소드

메소드 설명

.children()	직속 자식 요소 선택
.parent()	부모 요소 선택
.siblings()	형제 요소 선택
.find()	하위 요소 중 특정 조건의 요소 탐색
.eq(index)	선택된 요소 중 특정 인덱스 요소 선택

---

6. DOM 요소 조작

jQuery를 이용하면 DOM 요소를 추가, 삭제, 변경하는 작업을 간편하게 수행할 수 있다.

요소 추가 메소드

메소드 설명

.append()	요소 내부 맨 뒤에 추가
.prepend()	요소 내부 맨 앞에 추가
.before()	요소 이전에 추가
.after()	요소 이후에 추가
.remove()	요소 삭제

$(".vacation").append("<p>From $399.99</p>");
$("button").remove();

---

7. 이벤트 처리

jQuery에서는 이벤트를 매우 간단하게 등록할 수 있으며, 대표적으로 .click(), .hover(), .change() 등의 메소드가 있다.

$(document).ready(function(){
    $("button").click(function(){
        $(this).after("<p>From $399.99</p>");
        $(this).remove();
    });
});

---

8. data- 속성과 jQuery

HTML5에서 도입된 data-속성을 통해 요소마다 고유 데이터를 저장하고, jQuery로 해당 데이터를 불러올 수 있다.

<button data-price="399.99">GET PRICE</button>

$("button").click(function(){
    var price = $(this).data("price");
    $(this).after("<p>From $" + price + "</p>");
    $(this).remove();
});

---

 

JQuery에 관해서는 프론트를 배운다면 매우 자세히 알아야 할 내용이라 생각한다.

 

꾸준히 공부해야지