JavaScript & jQuery 기본 개념 정리

1. JavaScript 기초 개념

1-1. JavaScript 변수 선언 방식

JavaScript에서 변수를 선언하는 방식은 var, let, const가 있습니다.

1. var

• 함수 스코프(function scope)를 가짐
• 재선언 및 재할당 가능
• Hoisting(호이스팅) 발생 (변수 선언이 코드의 최상단으로 끌어올려짐)

var name = "Alice";
console.log(name);

2. let

• 블록 스코프(block scope)를 가짐
• 재선언 불가능하지만 재할당 가능

let age = 25;
age = 26;  // 가능
console.log(age);

3. const

• 블록 스코프(block scope)를 가짐
• 재선언 및 재할당 불가능

const pi = 3.14;
// pi = 3.1415; // 오류 발생
console.log(pi);

1-2. JavaScript 주요 DOM 조작 메서드

웹 페이지의 요소(DOM)를 선택하고 조작하는 주요 메서드들입니다.

1. document.getElementById()

• 특정 ID를 가진 요소 선택

let title = document.getElementById("title");
title.innerHTML = "Hello, JavaScript!";

2. document.querySelector() & document.querySelectorAll()

• CSS 선택자를 사용하여 요소 선택 가능

let firstParagraph = document.querySelector("p"); // 첫 번째 `<p>` 태그 선택
let allParagraphs = document.querySelectorAll("p"); // 모든 `<p>` 태그 선택

3. .classList (클래스 조작)

document.getElementById("box").classList.add("highlight"); // 클래스 추가
document.getElementById("box").classList.remove("highlight"); // 클래스 제거
document.getElementById("box").classList.toggle("highlight"); // 클래스 토글

2. jQuery 기본 개념

jQuery는 JavaScript를 더 쉽게 사용할 수 있도록 돕는 라이브러리입니다.

2-1. jQuery 기본 문법

1. jQuery의 $()

$(document).ready(function() {
    console.log("페이지가 로드되었습니다.");
});

2. 요소 선택 ($() 사용)

$("#myElement").text("Hello, jQuery!"); // ID가 myElement인 요소의 텍스트 변경
$(".myClass").css("color", "red"); // 클래스가 myClass인 요소의 글자 색 변경
$("p").hide(); // 모든 <p> 태그 숨기기

2-2. jQuery 주요 메서드 정리

1. .hasClass()

• 특정 클래스가 있는지 확인

if($("#box").hasClass("active")) {
    console.log("active 클래스가 있습니다.");
}

2. .addClass() & .removeClass()

$("#box").addClass("highlight");
$("#box").removeClass("highlight");

3. .toggleClass()

• 클래스 추가/제거를 번갈아 수행

$("#box").toggleClass("highlight");

4. .val() (입력값 가져오기/설정하기)

let inputVal = $("#myInput").val(); // 값 가져오기
$("#myInput").val("New Value"); // 값 설정하기

5. .focus() & .blur()

• focus(): 입력 필드에 포커스를 설정
• blur(): 입력 필드에서 포커스를 제거

$("#myInput").focus(function() {
    console.log("입력 필드에 포커스가 설정됨");
});

$("#myInput").blur(function() {
    console.log("입력 필드에서 포커스가 사라짐");
});

6. .show() & .hide() & .toggle()

$("#box").hide(); // 숨기기
$("#box").show(); // 보이기
$("#box").toggle(); // 보였다 숨겼다 토글

7. .fadeIn() & .fadeOut()

$("#box").fadeIn();  // 점점 나타남
$("#box").fadeOut(); // 점점 사라짐

8. .slideDown() & .slideUp()

$("#box").slideDown();  // 아래로 펼쳐짐
$("#box").slideUp();    // 위로 접힘

9. .click() (클릭 이벤트)

$("#btn").click(function() {
    alert("버튼이 클릭되었습니다!");
});

10. .on() (이벤트 바인딩)

$("#btn").on("click", function() {
    console.log("버튼 클릭 이벤트!");
});