홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

자바스크립트 스페셜

저자：Eve Cole 업데이트 시간：2025-01-07 17:39:30

이 장에서는 미묘한 순간에 특별한 주의를 기울여 지금까지 배운 JavaScript의 기능을 간략하게 요약합니다.

코드 구조

명령문은 세미콜론으로 구분됩니다.

 경보('안녕하세요'); 경고('세계');

일반적으로 줄 바꿈도 구분 기호로 처리되므로 다음과 같이 작동합니다.

 경고('안녕하세요')
경고('세계')

이를 "자동 세미콜론 삽입"이라고 합니다. 때로는 작동하지 않는 경우도 있습니다. 예를 들면 다음과 같습니다.

 Alert("이 메시지 이후에는 오류가 발생합니다.")

[1, 2].forEach(경고)

대부분의 코드 스타일 가이드는 각 문 뒤에 세미콜론을 넣어야 한다는 데 동의합니다.

코드 블록 {...} 뒤에는 세미콜론이 필요하지 않으며 구문은 루프처럼 이를 사용하여 구성됩니다.

 함수 f() {
  // 함수 선언 후에는 세미콜론이 필요하지 않습니다.
}

을 위한(;;) {
  // 루프 뒤에는 세미콜론이 필요하지 않습니다.
}

...하지만 어딘가에 "추가" 세미콜론을 넣을 수 있다고 해도 이는 오류가 아닙니다. 무시됩니다.

추가 정보: 코드 구조.

엄격 모드

최신 JavaScript의 모든 기능을 완전히 활성화하려면 "use strict" 로 스크립트를 시작해야 합니다.

 '엄격하게 사용하세요';

...

지시어는 스크립트 상단이나 함수 본문 시작 부분에 있어야 합니다.

"use strict" 사용하지 않으면 모든 것이 여전히 작동하지만 일부 기능은 구식 "호환" 방식으로 작동합니다. 우리는 일반적으로 현대적인 동작을 선호합니다.

언어의 일부 최신 기능(나중에 공부할 클래스 등)은 암시적으로 엄격 모드를 활성화합니다.

추가 정보: 최신 모드인 "use strict".

변수

다음을 사용하여 선언할 수 있습니다.

  • let

  • const (상수, 변경할 수 없음)

  • var (이전 스타일, 나중에 살펴보겠습니다)

변수 이름에는 다음이 포함될 수 있습니다.

  • 문자 및 숫자. 단, 첫 번째 문자는 숫자가 될 수 없습니다.

  • $ 및 _ 문자는 문자와 마찬가지로 정상입니다.

  • 비라틴어 알파벳과 상형문자도 허용되지만 일반적으로 사용되지는 않습니다.

변수는 동적으로 유형이 지정됩니다. 어떤 값이든 저장할 수 있습니다.

 x = 5라고 하자;
x = "존";

8가지 데이터 유형이 있습니다.

  • 부동 소수점 및 정수 모두에 대한 number ,

  • 임의 길이의 정수에 대한 bigint ,

  • 문자열을 위한 string ,

  • 논리값에 대한 boolean : true/false ,

  • null – "비어 있음" 또는 "존재하지 않음"을 의미하는 단일 값 null 갖는 유형입니다.

  • undefined - 단일 값을 갖는 유형 undefined , 즉 "할당되지 않음"을 의미

  • object 와 symbol – 복잡한 데이터 구조와 고유 식별자의 경우 아직 학습하지 않았습니다.

typeof 연산자는 두 가지 예외를 제외하고 값의 유형을 반환합니다.

 typeof null == "object" // 언어 오류
typeof function(){} == "function" // 함수는 특별하게 취급됩니다.

추가 정보: 변수 및 데이터 유형.

상호 작용

우리는 작업 환경으로 브라우저를 사용하고 있으므로 기본 UI 기능은 다음과 같습니다.

  • prompt(question, [default])

  • question 을 하고 방문자가 입력한 내용을 반환하거나 "취소"를 클릭한 경우 null 반환합니다.

  • confirm(question)

  • question 하고 확인과 취소 중에서 선택하라고 제안합니다. 선택 사항은 true/false 로 반환됩니다.

  • alert(message)

  • message 출력합니다.

이러한 모든 기능은 모달 이며, 코드 실행을 일시 중지하고 방문자가 응답할 때까지 페이지와 상호 작용하지 못하도록 합니다.

예를 들어:

 let userName = 프롬프트("당신의 이름은 무엇입니까?", "앨리스");
let isTeaWanted = verify("차 좀 드실래요?");

Alert( "방문자: " + 사용자 이름 ); // 앨리스
Alert( "차 원함: " + isTeaWanted ); // 진실

추가 정보: 상호 작용: 경고, 프롬프트, 확인.

연산자

JavaScript는 다음 연산자를 지원합니다.

  • 산술

  • 일반: * + - / , 나머지는 % , 숫자의 거듭제곱은 ** .

    이진 더하기 + 문자열을 연결합니다. 피연산자 중 하나라도 문자열이면 다른 피연산자도 문자열로 변환됩니다.

     경고( '1' + 2 ); // '12', 문자열
경고( 1 + '2' ); // '12', 문자열

  • 과제

  • 간단한 할당이 있습니다: a = b 와 a *= 2 처럼 결합된 할당입니다.

  • 비트별

  • 비트 연산자는 가장 낮은 비트 수준에서 32비트 정수로 작동합니다. 필요할 때 문서를 참조하세요.

  • 가정 어구

  • 세 개의 매개변수를 갖는 유일한 연산자: cond ? resultA : resultB . cond 진실이면 resultA 반환하고, 그렇지 않으면 resultB 반환합니다.

  • 논리 연산자

  • 논리 AND && 및 OR || 단락 평가를 수행한 다음 중지된 값을 반환합니다( true / false 필요 없음). 논리적이지 않습니다 ! 피연산자를 부울 유형으로 변환하고 역수 값을 반환합니다.

  • Nullish 병합 연산자

  • ?? 연산자는 변수 목록에서 정의된 값을 선택하는 방법을 제공합니다. a ?? b 의 결과 a ?? b null/undefined 이 아닌 한 a 이고 b 입니다.

  • 비교

  • 서로 다른 유형의 값에 대한 동일성 검사 == 해당 값을 숫자로 변환하므로(서로 동일하고 다른 것은 없는 null 및 undefined 제외) 다음은 동일합니다.

     경고( 0 == false ); // 진실
경고( 0 == '' ); // 진실

    다른 비교도 숫자로 변환됩니다.

    엄격한 항등 연산자 === 변환을 수행하지 않습니다. 다른 유형은 항상 다른 값을 의미합니다.

    null 값과 undefined 값은 특별합니다. 즉, 둘은 서로 == 같고 다른 어떤 것과도 같지 않습니다.

    크거나 작은 비교는 문자열을 문자별로 비교하고 다른 유형은 숫자로 변환됩니다.

  • 기타 운영자

  • 쉼표 연산자와 같은 다른 연산자는 거의 없습니다.

추가 정보: 기본 연산자, 수학, 비교, 논리 연산자, Nullish 병합 연산자 '??'.

루프

  • 우리는 3가지 유형의 루프를 다루었습니다.

     // 1
동안(조건) {
  ...
}

// 2
하다 {
  ...
} while(조건);

// 3
for(let i = 0; i < 10; i++) {
  ...
}

  • for(let...) 루프에 선언된 변수는 루프 내부에서만 볼 수 있습니다. 하지만 let 생략하고 기존 변수를 재사용할 수도 있습니다.

  • break/continue 지시문을 사용하면 전체 루프/현재 반복을 종료할 수 있습니다. 레이블을 사용하여 중첩 루프를 끊습니다.

자세한 내용: 루프: while 및 for.

나중에 우리는 객체를 다루는 더 많은 유형의 루프를 연구할 것입니다.

"스위치" 구조

"스위치" 구조는 여러 if 검사를 대체할 수 있습니다. 비교를 위해 === (엄격한 동등성)을 사용합니다.

예를 들어:

 let age = 프롬프트('당신의 나이는 무엇입니까?', 18);

스위치 (나이) {
  사례 18:
    Alert("작동하지 않습니다."); // 프롬프트 결과는 숫자가 아닌 문자열입니다.
    부서지다;

  사례 "18":
    Alert("작동합니다!");
    부서지다;

  기본:
    Alert("위의 값과 같지 않은 값입니다.");
}

자세한 내용: "switch" 문.

기능

JavaScript에서 함수를 생성하는 세 가지 방법을 다루었습니다.

  1. 함수 선언: 기본 코드 흐름의 함수

     함수 합계(a, b) {
  결과 = a + b로 둡니다.

  결과 반환;
}

  2. 함수 표현식: 표현식의 맥락에서의 함수

     합계 = 함수(a, b) {
  결과 = a + b로 둡니다.

  결과 반환;
};

  3. 화살표 기능:

     //오른쪽 표현식
합계 = (a, b) => a + b라고 가정합니다.

// 또는 { ... }가 포함된 여러 줄 구문, 여기로 반환해야 합니다.
합계 = (a, b) => {
  // ...
  a + b를 반환합니다.
}

// 인수 없이
let sayHi = () => Alert("안녕하세요");

// 단일 인수로
double = n => n * 2로 두십시오.

  • 함수에는 지역 변수가 있을 수 있습니다. 즉, 본문이나 매개변수 목록 내부에 선언된 변수입니다. 이러한 변수는 함수 내부에서만 표시됩니다.

  • 매개변수는 기본값을 가질 수 있습니다: function sum(a = 1, b = 2) {...} .

  • 함수는 항상 무언가를 반환합니다. return 문이 없으면 결과는 undefined 입니다.

세부 사항: 함수, 화살표 함수, 기본 사항을 참조하세요.

앞으로 더 많이

이상은 JavaScript 기능의 간략한 목록이었습니다. 지금까지 우리는 기본적인 것만 공부했습니다. 튜토리얼에서 더 많은 JavaScript의 특수 기능과 고급 기능을 찾을 수 있습니다.

관련 기사