HTML+CSS+자바스크립트 8-11장

cse 23·2024년 4월 3일
0

8장. 자바스크립트 시작하기

8.1 코드 작성법

  • 내부 스크립트

    <script>
      document.write("내부 스크립트 방법");
    </script>
  • 외부 스크립트

    <script src="script.js"></script>
    • script 태그는 </body> 바로 위에 작성

8.2 코드 실행

  • 브라우저 콘솔창: F12 → Console 탭

    • console.clear() : 콘솔 내용 지우기
  • Code Runner 확장 프로그램: VS Code에서 바로 실행 가능

  • document.write() : 브라우저에 텍스트 출력

  • console.log() : 콘솔에 출력


9장. 자바스크립트 기본 문법

9.1 변수와 상수

  • 변수 선언: let, var
  • 상수 선언: const
  • 호이스팅: var는 호이스팅됨 / let, const는 안됨

명명 규칙

  • 키워드 사용 불가, 공백 금지

  • 시작 문자: 영문자, _, $

  • 표기법

    • camelCase: 일반 변수
    • snake_case: 상수
    • PascalCase: 생성자 함수

9.2 자료형

  • 기본형: 문자열, 숫자, 불리언, undefined, null, Symbol
  • 참조형: 객체, 배열

문자열

const str = "Hello, world";
const str2 = 'He said "Hi"';
const template = `값은 ${str}`;

숫자형

  • 정수, 실수 구분 없이 하나의 타입

불리언

  • true, false

null vs undefined

  • undefined: 할당되지 않은 변수
  • null: 의도적으로 비워둠

연산자

  • 산술연산자: +, -, *, /, %
  • 복합 대입연산자: +=, -=, ...
  • 비교연산자: ==, ===, !=, !==, <, >
  • 논리연산자: &&, ||, !
  • 삼항연산자: 조건 ? 참일 때 : 거짓일 때

9.4 조건문

if (조건) {
  // 실행
} else if (조건) {
  // 실행
} else {
  // 실행
}

switch () {
  case 조건1:
    break;
  default:
    break;
}

9.5 반복문

while (조건) {}

do {
  // 실행
} while (조건);

for (let i = 0; i < 5; i++) {}

for (let key in 객체) {}

break;      // 반복문 종료
continue;   // 현재 반복 스킵

10장. 함수 다루기

// 선언식
function sayHello() {}

// 표현식
const sayHi = function () {}

// 화살표 함수
const sum = (a, b) => a + b;
  • 매개변수 / 인수

  • return: 값을 반환

  • 스코프

    • 함수 스코프 (function)
    • 블록 스코프 ({})
  • 즉시 실행 함수

    (function () {
      console.log("즉시 실행");
    })();

11장. 객체 다루기

속성 접근

const person = { name: "홍길동", age: 30 };

person.name       // 마침표 방식
person["age"]     // 대괄호 방식

속성 수정, 추가, 삭제

person.name = "김철수";        // 수정
person.job = "개발자";         // 추가
delete person.age;             // 삭제

표준 내장 객체

  • String: 문자열 메서드 제공

  • Array: 배열 관련 메서드

  • Date

    const today = new Date();
  • Math

    Math.floor(3.7)  // 3
    Math.ceil(3.1)   // 4
    Math.round(3.5)  // 4
    Math.random()    // 0 ~ 1 사이 난수

브라우저 객체 모델 (BOM)

  • window: 웹 브라우저 전체 제어 (창 관련 메서드 등)

0개의 댓글