2024.04.05(금) 슈퍼코딩 신입연수원 1주차 Day 5 후기 - JavaScript

• 단어 게임
  •  wordle
    https://www.nytimes.com/games/wordle/index.html
• 자바스크립트
  • 동적인 요소
  • 백엔드와 소통할 때 사용
  • console.log("메세지"); : 웹 브라우저의 console에 메세지 출력
  • 변수
    
    • var : 재선언 시 에러 발생 X
    • const : 재선언 시 에러 발생, 값 변경 X(고정값)
    • let : 재선언 시 에러 발생, 값 변경 O(가변값)
  • 배열
    • 선언 : const 변수명 = ["값1", "값2"]; → const의 값 변경 가능
    • push() : 값 넣기
    • 객체
  • boolean값
    • true : 참
    • false : 거짓
    • undefined : 정의도지 않음
    • null : 없는값
  • === : 동일한 값인지 확인
  • 함수
    • 선언 : function 함수명() {};
    • 호출 : 함수명();
  • 화살표 함수
    • 선언 : const 함수명 = (변수1, 변수2) => { a+b; }
    • 선언 : 아래의 예시 참고
  • 조건문
    • if, else if, else
  • 반복문
    • 선언 : for(let i=0; i<10; i++)
• 화살표 함수 코드 예시

const 계산기 = {
  더하기1: function (a, b) {
    console.log("가격은 ", a + b, "원입니다.");
  },
  빼기: (a, b) => {
    console.log("가격은 ", a - b, "원입니다.");
  },
  곱하기: (a, b) => {
    return a * b;
  },
};
계산기.더하기1(20, 30); // 가격은 50원입니다.
계산기.빼기(50, 20); // 가격은 30원니다.
console.log(계산기.곱하기(50, 20)); // 1000

 

• DOM
  • Document Object Model
  • 요소 선택 및 변경
  • 스타일 수정
  • 이벤트 처리

// 태그를 가져오는 방법 1
const timeElement = document.getElementById("time"); // id의 값 가져오기

// 태그를 가져오는 방법 2
const timeElement2 = document.querySelector("h1"); // 쿼리셀릭터를 통해서 값 가져오기
// 클래스 . || 아이디 # || 태그
const timeElement3 = document.querySelector("#time"); // 쿼리셀릭터를 통해서 값 가져오기
const timeElement4 = document.querySelector(".time2"); // 쿼리셀릭터를 통해서 값 가져오기

timeElement.style.color = "tomato"; // 글자색상 변경
timeElement.style.background = "gray"; // 배경색 변경
timeElement.innerText = "블라블라"; // text값 변경

timeElement2.style.color = "orange"; // 글자색상 변경

timeElement3.style.color = "yellow"; // 글자색상 변경

// 이벤트 발생
function 클릭시_실행될_함수() {
  timeElement4.style.color = "red"; // 글자색상 변경
}
// () 사용 X, 함수명만 적기
// 함수명() : 함수 바로 실행
timeElement4.addEventListener("click", 클릭시_실행될_함수); // 클릭시
timeElement4.addEventListener("mouseover", 클릭시_실행될_함수); // 호버시
timeElement4.addEventListener("copy", 클릭시_실행될_함수); // 복사
timeElement4.addEventListener("resize", 클릭시_실행될_함수); // 창크기 변경시

// 제목 변경
document.title = "❤❤❤❤❤❤❤";