이 안내서는 JavaScript 기초에서 중간 개념에 이르기까지 내 개인 학습 경험을 바탕으로 코스를 차트로 차트입니다. 나는 주요 테이크 아웃, 실제 사례 및 학습 여정을 더 매끄럽게 만드는 유용한 힌트를 편집했습니다. 다이빙하자!

목차

1. 변수
2. 배열
3. 조건부 진술
4. 함수
5. 사물
6. dom (문서 개체 모델)
7. 이벤트
8. HTML 및 JavaScript 통합

---

1. 변수

변수는 프로그램에 사용되는 데이터 용 컨테이너입니다. JavaScript는 다음을 선언하는 두 가지 주요 방법을 제공합니다.

• : 값이 바뀔 수있는 변수의 경우.
• const : 일정하게 유지되어야하는 값에 대해.

예:

let age = 25;
const name = "Mario";

변수는 숫자, 텍스트 (문자열), 참/거짓 값 (부울) 또는 정의되지 않은 값을 보유 할 수 있습니다. JavaScript는 표준 산술 연산자 (, -,*, /, %)와 지수 연산자 (**)를 제공합니다.

console.log(2 ** 3); // Output: 8

---

2. 배열

배열은 단일 변수 내에 여러 값을 저장합니다. 사각형 브래킷을 사용하여 배열을 정의하십시오.

let fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]); // Output: apple

console.log (과일 [0]); // 출력 : Apple

요소 추가 및 제거 :

배열은 역동적입니다. 당신은 그들을 수정할 수 있습니다 :
. push ()
• : 끝에 요소를 추가합니다.
. UNSHIFT ()
• : 시작에 요소를 추가합니다.
. pop ()
• : 마지막 요소를 제거합니다.
. shift ()

: 첫 번째 요소를 제거합니다.

예:

fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]

fruits.push ( "오렌지"); Console.log (과일); // 출력 :

검색 어레이 :

. indexof ()
• : 값의 인덱스를 찾습니다.
. contaction ()

: 값이 존재하는지 확인합니다.

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

console.log (fruits.indexof ( "Banana")); // 출력 : 1 console.log (fruits.includes ( "포도")); // output : false

---

3. 조건부 진술

조건부 진술을 통해 코드는 결정을 내릴 수 있습니다. 및

else

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

if (grade> 60) { console.log ( "당신은 통과했습니다!"); } 또 다른 { console.log ( "당신은 실패했습니다!"); }

비교 연산자 :

이 연산자는 조건을 평가하는 데 필수적입니다.
===
• (엄격한 평등)
! ==
• (엄격한 불평등)
>
• (보다 큽니다)
(보다 작음) > =
• (보다 크거나 동일)
(이상 또는 동일)

---

4. 함수

함수는 재사용 가능한 코드 블록입니다.

함수

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!

함수 greet (이름) { ``hello, $ {name}!`; } Console.log (greet ( "Alice")); // 출력 : 안녕하세요, 앨리스!

매개 변수 및 인수 :

함수는 입력 ( 매개 변수 )를 받아들이고

인수와 함께 호출 할 때 사용할 수 있습니다

function add(a, b) {
  return a   b;
}
console.log(add(2, 3)); // Output: 5

---

함수 추가 (a, b) { A B를 반환합니다. } Console.log (Add (2, 3)); // 출력 : 5

5. 사물

const car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2020
};
console.log(car.brand); // Output: Tesla

const car = { 브랜드 : "테슬라", 모델 : "모델 3", 연도 : 2020 }; console.log (car.brand); // 출력 : Tesla

객체의 메소드 :

객체는 함수를 포함 할 수 있습니다 (

const phone = {
  brand: "Apple",
  ring() {
    console.log("Ring, ring! ?");
  }
};
phone.ring();

---

const 전화 = { 브랜드 : "Apple", 반지() { Console.log ( "링, 링!?"); } }; 폰 ();

6. dom (문서 개체 모델)

DOM은 JavaScript가 HTML 요소와 상호 작용하도록합니다.

요소 선택 :

const heading = document.querySelector("h1");
console.log(heading.innerText); // Logs the text within the 
 tag

const Heading = Document.querySelector ( "H1"); console.log (heading.innertext); //

태그 내에 텍스트를 기록합니다.

요소 업데이트 :

heading.innerText = "Welcome to JavaScript!";

---

heading.innerText = "JavaScript에 오신 것을 환영합니다!";

7. 이벤트

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

예 : 카운터 증가 :

let count = 0;
button.addEventListener("click", () => {
  count  ;
  console.log(`Clicked ${count} times`);
});

---

8. HTML 및 JavaScript 통합

태그를 사용하여 html에 직접 JavaScript를 추가하십시오 :

더 큰 스크립트의 경우 외부 . js

파일을 연결하십시오 :

---

이것은 초보자에서 중간 수준으로의 JavaScript 학습 여정을 마무리합니다! 이 가이드가 도움이되기를 바랍니다. 의견에 자신의 학습 팁을 공유하거나 질문을하십시오! 행복한 코딩! ✨