[웹 개발/기초] JavaScript, JQuery

0. 🔖 목차

---

1. JavaScript
2. JQuery

1. JavaScript

---

1-1. 개념

JavaScript는 웹 페이지에 동적인 요소를 추가하기 위해 사용되는 프로그래밍 언어다. 웹 브라우저 내에서 직접 실행될 수 있으며, HTML과 CSS와 함께 웹 개발의 핵심 기술 중 하나.

사용자의 입력 처리, 웹 페이지의 실시간 업데이트, 애니메이션 효과 추가 등이 가능하다.

1-2. 기본 명령어와 문법

변수 선언

let name = "John";
const age = 30;

조건문

if (age > 18) {
    console.log("Adult");
}
############################
switch (age) {
    case 18:
        console.log("Eighteen");
        break;
    default:
        console.log("Age is not 18");
}

반복문

for (let i = 0; i < 5; i++) {
    console.log(i);
}
############################
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

함수

function greet(name) {
    return "Hello " + name;
}
console.log(greet("John"));
############################
const add = (a, b) => a + b;
console.log(add(2, 3));

2. JQuery

---

2-1. 개념

jQuery는 JavaScript 라이브러리 중 하나로, JavaScript 코드를 더 쉽게 작성할 수 있게 도와준다. 문서 객체 모델(DOM) 조작, 이벤트 처리, 애니메이션 및 Ajax(ref) 호출을 간단하게 할 수 있는 기능을 제공한다.

jQuery를 사용하기 위해서는 라이브러리 파일을 웹 페이지에 포함시켜야 합니다. 이는 CDN을 통해 링크하거나 파일을 다운로드하여 직접 호스팅하는 방식으로 할 수 있습니다.

2-2. 기본 명령어와 문법

선택자

$('.class'); // 클래스로 선택
$('#id'); // ID로 선택
$('p'); // 태그로 선택

이벤트 처리

$('#btn').click(function() {
    alert("Button clicked");
});

요소 조작

$('#paragraph').text("New text");
$('#paragraph').css('color', 'red');

애니메이션

$('#div').hide();
$('#div').fadeIn(2000);

DOM(ref)조작

$('#list').append('<li>New Item</li>');