JavaScript 소개 (요약 + 실습)

1) 출력

• console.log(): 개발자도구 Console에 출력
• alert(): 알림 팝업(확인 전까지 다음 코드가 멈춤)

const console1 = () => {
    console.log("console1 이벤트 핸들러 실행");
};
      

2) 배열(Array)

• []로 생성, 다른 타입도 섞어서 담을 수 있음
• push, pop: 뒤에 추가, 삭제
• unshift, shift: 앞에 추가, 삭제
• forEach: 각 요소 순회

const console2 = () => {
  let arr = ["a", 10];
  console.log("arr ===", arr);

  for (let i = 0; i < 5; i++) arr[i] = i;

  arr.push("hello");
  console.log("arr(push 후) ===", arr);

  arr.forEach(v => console.log("forEach ===", v));
}
      

3) 배열 누적합(반복문)

const console3 = () => {
  const arr = [10, 20, 30, 40];
  let total = 0;

  for (let i = 0; i < arr.length; i++) {
    total += arr[i];
  }

  alert(`배열: ${arr.join(", ")} / 누적합 === ${total}`);
}
      

4) 배열에 함수 넣기

const arrFunction = () => {
  const test = () => console.log("test 함수 실행");

  const arr = [10, "20", test];
  const arr2 = [10, "20", () => console.log("리터럴 세팅 함수 실행")];

  arr[2]();   // test 실행
  arr2[2]();  // 리터럴 함수 실행
}
      

5) var / let / const

// var: 함수 스코프(재선언 가능) → 요즘은 지양하는 편
const varExample = () => {
  var a = 10;
  var a = 20; // 재선언 가능
  console.log("var a ===", a);
}

// let: 블록 스코프, 재할당 가능(재선언 불가)
const letExample = () => {
  let a = 10;
  a = 20;
  console.log("let a ===", a);
}

// const: 블록 스코프, 재할당 불가
const constExample = () => {
  const a = 10;
  // a = 20; // 재할당 불가(에러)
  console.log("const a ===", a);
}
      

6) DOM 요소 변경

// getElementById: id로 1개 선택
const changeText1 = () => {
  const elem = document.getElementById("change1");
  elem.innerHTML = "hello java";
}

// getElementsByClassName: class로 여러 개 선택(HTMLCollection)
const changeText2 = () => {
  const elems = document.getElementsByClassName("change2");
  for (let i = 0; i < elems.length; i++) {
    elems[i].innerHTML = `${i}번 인덱스 === hello python`;
  }
}

// getElementsByTagName: 태그로 여러 개 선택
const changeText3 = () => {
  const elems = document.getElementsByTagName("li");
  for (let i = 0; i < elems.length; i++) {
    elems[i].innerHTML = `${i}번 인덱스 === hello C++`;
  }
}
      

hello world

hello world

hello world

hello world

hello world

• hello world
• hello world
• hello world