반응형
1단계: JavaScript 기초 이해하기
1.1 JavaScript 소개
- JavaScript는 웹 페이지에 동적 기능을 추가하는 데 사용되는 프로그래밍 언어입니다.
- JavaScript는 HTML과 CSS와 함께 웹 개발의 핵심 요소입니다.
1.2 JavaScript 포함 방법
- 인라인 스크립트: HTML 요소에 직접 JavaScript 코드를 작성합니다.
- 내부 스크립트:
<script>태그 안에 JavaScript 코드를 작성합니다. - 외부 스크립트: 별도의 JavaScript 파일을 작성하고 HTML 문서에 링크합니다.
예시:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
</head>
<body>
<h1 id="title">Hello, JavaScript!</h1>
<script>
document.getElementById('title').innerText = 'Hello, World!';
</script>
<script src="script.js"></script>
</body>
</html>2단계: 기본 문법과 자료형
2.1 변수와 상수
- 변수 선언:
var,let,const - 상수 선언:
const
예시:
let message = 'Hello, JavaScript!';
const pi = 3.14;2.2 자료형
- 기본 자료형: 문자열(String), 숫자(Number), 불리언(Boolean), null, undefined
- 참조 자료형: 객체(Object), 배열(Array), 함수(Function)
예시:
let name = 'John'; // String
let age = 30; // Number
let isStudent = true; // Boolean
let emptyValue = null; // Null
let notDefined; // Undefined
let person = { name: 'John', age: 30 }; // Object
let numbers = [1, 2, 3, 4, 5]; // Array3단계: 제어 구조
3.1 조건문
- if 문: 조건에 따라 코드를 실행합니다.
- else 문: if 조건이 거짓일 때 실행됩니다.
- else if 문: 추가 조건을 확인합니다.
예시:
let score = 85;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B');
} else {
console.log('C');
}3.2 반복문
- for 문: 고정된 횟수만큼 반복합니다.
- while 문: 조건이 참인 동안 반복합니다.
- do...while 문: 조건이 참인 동안 반복하지만, 최소 한 번은 실행합니다.
예시:
for (let i = 0; i < 5; i++) {
console.log(i);
}
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
let num = 0;
do {
console.log(num);
num++;
} while (num < 5);4단계: 함수
4.1 함수 선언과 호출
- 함수 선언: 함수의 이름과 매개변수를 정의합니다.
- 함수 호출: 함수를 실행합니다.
예시:
function greet(name) {
return 'Hello, ' + name + '!';
}
let message = greet('John');
console.log(message);4.2 익명 함수와 화살표 함수
- 익명 함수: 이름이 없는 함수로, 주로 변수에 할당하거나 다른 함수의 인수로 사용됩니다.
- 화살표 함수: 간결한 함수 표현식입니다.
예시:
let add = function(a, b) {
return a + b;
};
let sum = add(2, 3);
console.log(sum);
let multiply = (a, b) => a * b;
let product = multiply(2, 3);
console.log(product);5단계: 객체와 배열
5.1 객체
- 객체: 키-값 쌍으로 구성된 데이터 구조입니다.
예시:
let person = {
name: 'John',
age: 30,
greet: function() {
return 'Hello, ' + this.name;
}
};
console.log(person.name);
console.log(person.greet());5.2 배열
- 배열: 순서가 있는 데이터 목록입니다.
예시:
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]);
console.log(fruits.length);6단계: DOM 조작
6.1 DOM 선택자
- 요소 선택:
getElementById,getElementsByClassName,getElementsByTagName,querySelector,querySelectorAll
예시:
let title = document.getElementById('title');
console.log(title.innerText);6.2 이벤트 처리
- 이벤트 리스너: 특정 이벤트가 발생할 때 실행되는 함수를 정의합니다.
예시:
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});7단계: 비동기 프로그래밍
7.1 콜백 함수
- 콜백 함수: 다른 함수의 인수로 전달되어 호출되는 함수입니다.
예시:
function loadScript(src, callback) {
let script = document.createElement('script');
script.src = src;
script.onload = () => callback(script);
document.head.append(script);
}
loadScript('/my/script.js', function() {
console.log('Script loaded!');
});7.2 프로미스
- 프로미스: 비동기 작업의 완료 또는 실패를 나타내는 객체입니다.
예시:
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve('Success!');
} else {
reject('Error!');
}
});
promise.then(message => {
console.log(message);
}).catch(error => {
console.error(error);
});7.3 async/await
- async/await: 프로미스를 다루기 위한 더 간단한 문법입니다.
예시:
async function fetchData() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
}
fetchData();반응형
'Frontend > Javascript' 카테고리의 다른 글
| [Javascript] Javascript 규칙 (0) | 2024.06.08 |
|---|---|
| [Javascript] Javascript 예제(심화) - 수정 (0) | 2024.06.08 |
| [Javascript] Javascript 예제(심화) (0) | 2024.06.08 |
| [Javascript] Javascript 심화 (0) | 2024.06.08 |
| [Javascript] Javascript 실습 (0) | 2024.06.08 |