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

JavaScript의 기본 구문을 요약하고 정리합니다.

저자：Eve Cole 업데이트 시간：2022-08-08 08:55:00
이 글은 JavaScript에 대한 관련 지식을 제공하며, 주로 기본 구문과 관련된 문제를 소개합니다. JavaScript는 인터넷에서 가장 널리 사용되는 스크립트 언어입니다. 모두에게 도움이 되기를 바랍니다.

소개

JavaScript는 인터넷에서 가장 널리 사용되는 스크립트 언어입니다. 이 언어는 HTML 및 웹에 사용할 수 있으며 서버, PC, 노트북, 태블릿, 스마트폰 및 기타 장치에서 널리 사용될 수 있습니다.

JavaScript의 특징

  • JavaScript는 스크립팅 언어입니다.
  • JavaScript는 가벼운 프로그래밍 언어입니다.
  • JavaScript는 HTML 페이지에 삽입할 수 있는 프로그래밍 코드입니다.
  • JavaScript가 HTML 페이지에 삽입되면 모든 최신 브라우저에서 실행할 수 있습니다.
  • 자바스크립트는 배우기 쉽습니다.

JavaScript는 ECMA(유럽 컴퓨터 제조업체 협회)에서 ECMAScript를 통해 언어로 표준화되었습니다.

연도 이름 설명
1997 ECMAScript 1 첫 번째 버전
1998 ECMAScript 2 버전 변경
1999 ECMAScript 3 정규식 추가 try/catch 추가
ECMAScript 4 는
출시 되지 않았습니다.
2009 ECMAScript 5에는 "엄격 모드"가 추가되었으며, 엄격 모드에는 JSON 지원이 추가되었습니다.
2015 ECMAScript 6
에는 지수 연산자(**)가 추가되었습니다.
Array.prototype.includes

사용법을 추가합니다.

HTML의 스크립트는 <script> 및 </script> 태그 사이에 있어야 합니다. 스크립트는 HTML 페이지의 <body> 및 <head> 섹션에 배치할 수 있습니다.

사용자가 버튼을 클릭하는 등 이벤트가 발생할 때 코드를 실행해야 하는 경우가 많습니다. JavaScript 코드를 함수에 넣으면 이벤트가 발생할 때 함수를 호출할 수 있습니다.

예 1: 헤드

<!DOCTYPE html>
의 스크립트 함수
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>head 태그의 스크립트</title>
    <스크립트>
        함수 myFunction() {
            document.getElementById("demo").innerHTML = "이것은 내 기능입니다";
        }
    </script>
</head>
<본문>
<h1>내 기능</h1>
<p id="demo">단락</p>
<button type="button" onclick="myFunction()">이것은 함수입니다</button>
</body>
</html>

예 2: 본문

<!DOCTYPE html>
의 스크립트 함수
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>본문의 스크립트</title>
</head>
<본문>
<h1>내 기능</h1>
<p id="demo">내 기능</p>
<button type="button" onclick="myFunction()">클릭</button>
<스크립트>
    함수 myFunction() {
        document.getElementById("demo").innerHTML = "이것은 내 기능입니다."
    }
</script>
</body>
</html>

호출을 위해 JavaScript를 외부에 배치할 수도 있습니다. 외부 확장자는 .js입니다.

예시 3: 외부 호출 JavaScriptExternal

call.js

function myFunction() {
    document.getElementById('demo').innerHTML = "이것은 내 기능입니다."
}

외부 스크립트 호출

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>외부 스크립트 호출</title>
</head>
<본문>
<p id="demo">텍스트 단락</p>
<button type="button" onclick="myFunction()">사용해 보세요</button>
<script src="external script.js"></script>
</body>
</html>
JavaScript

출력

데이터는 다양한 방법으로 출력될 수 있습니다.

  • window.alert()를 사용하여 경고 상자를 표시합니다.
  • document.write() 메서드를 사용하여 HTML 문서에 내용을 씁니다.
  • HTML 요소에 쓰려면 innerHTML을 사용하세요.
  • 브라우저 콘솔에 쓰려면 console.log()를 사용하세요.

예제 1: aler() 팝업 창 출력

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>경고 출력</title>
</head>
<본문>
<h1>경고 출력</h1>
<스크립트>
    window.alert(5 + 6)
</script>
</body>
</html>

예제 2: document.write() 출력

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>document.write 출력</title>
</head>
<본문>
<h1>document.write 출력</h1>
<스크립트>
    document.write(날짜());
    document.write("안녕하세요, 웹!");
</script>
</body>
</html>

예 3: HTML 문서

<!DOCTYPE html>
에 쓰기
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>HTML 문서에 쓰기</title>
</head>
<본문>
<h1>HTML 문서에 쓰기</h1>
<스크립트>
    함수 myFunction() {
        document.write("함수 출력");
    }
</script>
<button onclick="myFunction()">여기를 클릭하세요</button>
</body>
</html>

예제 4: console.log()를 사용하여 브라우저 콘솔에 쓰기

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>console.log()를 사용하여 브라우저 콘솔에 기록</title>
</head>
<본문>
<h1>console.log()는 브라우저의 콘솔에 기록합니다</h1>
<스크립트>
    a = 5;
    b = 6;
    c = a + b;
    콘솔.로그(c)
</script>
</body>
</html>

구문 소개

JavaScript는 가볍지만 강력한 프로그래밍 언어입니다.

리터럴

프로그래밍 언어에서는 일반적으로 고정된 값을 리터럴이라고 합니다.

  • 숫자 리터럴: 정수, 십진수 또는 과학적 표기법(e)이 될 수 있습니다. 3.14, 5.88 등과 같은
  • 문자열 리터럴: " 작은따옴표나 큰따옴표를 사용할 수 있습니다. 예: "Hello", "Web" 등
  • 표현식 리터럴: 계산을 위한 고정 값. 3 + 2.2, 3.14 * 2 등
  • 배열(Array ) : 리터럴: 정의 배열. 예: [1,2,3,4,5,6]
  • 개체: 리터럴: {firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"와 같은 개체를 정의합니다. "}.
  • 함수 리터럴: 함수를 정의합니다. 예를 들어 function myFunction(a, b) { return a * b;}

입니다. JavaScript에서는 명령문이 ";"으로 종료되어야 합니다. JavaScrip

변수

프로그래밍 언어에서는 변수는 데이터 값을 저장하는 데 사용됩니다. JavaScript는 var 키워드를 사용하여 변수를 정의하고 등호를 사용하여 변수에 값을 할당할 수 있습니다.

var y = false // 부울 값 var length = 16; // 숫자 var points = x * 10; // 숫자 계산 var lastName = "Johnson"; // 문자열 var cars = ["Saab", "Volvo", "BMW"] // 배열 var person = "John", lastName:"Doe"}; // 객체 사전

JavaScript function

동일한 함수를 반복적으로 참조하고 코드 작성 및 유지 관리의 편의성을 줄이기 위해 JavaScript는 function 키워드에 따라 함수 함수를 제공합니다:

function myFunc (a , 비) {
    return a + b; // a+b의 결과를 반환합니다.

자바스크립트 기능

다른 언어와 비교하여 자바스크립트에는 다음과 같은 특징이 있습니다.

  • 자바스크립트는 대소문자를 구분합니다.
  • JavaScript는 유니코드 문자 집합을 사용합니다.
  • JavaScript에서는 변수를 정의하고 이름 지정 시 키워드를 사용하지 않기 위해 카멜 표기법 이름 사용을 권장합니다.
  • JavaScript는 약한 유형의 언어이며 변수는 var 키워드를 사용하여 정의됩니다.
JavaScript 키워드(알파벳순)
abstract else 인스턴스of super
boolean enum int 스위치
중단 내보내기 인터페이스 동기화된
바이트 확장 이 경우
false 긴 던지기 잡기
최종 기본 던지기 char
최종적 으로 새로운 임시
클래스 float null true
const for 패키지 시도
계속 함수 비공개 유형의
디버거 goto protected var
default if public void
delete 구현 return 휘발성
do import short while
double in static with

JavaScript comment(Java와 동일)

// 코드는 다음과 같습니다: 단일 문장 주석, 일반적으로 편집기에서 Ctrl + L 키.

/* 코드입니다*/: 여러 줄 주석, 일반적으로 편집기의 Ctrl + Shift + L 키입니다.

명령문

JavaScript 명령문은 브라우저에 수행할 작업을 알려주는 명령입니다.

다음 JavaScript 문은 id="demo"인 HTML 요소에 "Hello World!"

라는

텍스트를 출력합니다.

document.getElementById("demo").innerHTML = "Hello World!";

중괄호는 Java와 매우 유사합니다.

Java 식별자

문 블록이 실행됩니다. function은 . (생성)합니다.
일반 JavaScript 식별자
문 설명
break는 루프를 중단하는 데 사용됩니다.
try 문 블록을 실행하는 동안 오류가 발생하면 catch
continue는 루프에서 반복을 건너뜁니다.
do ... while은 명령문 블록을 실행하고 조건문이 true일 때 명령문 블록을 계속 실행합니다.
for는 조건문이 참일 때 지정된 횟수만큼 코드 블록을 실행할 수 있습니다.
for ... in은 배열이나 객체의 속성을 순회하는 데 사용됩니다(배열이나 객체의 속성을 통해 반복).
다양한 조건에 따라 다양한 작업을 수행하는 if...else
함수 를 정의합니다
복귀 종료 기능
스위치 는 다양한 조건에 따라 다양한 작업을 수행하는 데 사용됩니다.
throw는 오류를 발생
try는 오류 처리를 구현하고 catch와 함께 사용됩니다.
var는 변수를 선언합니다.
while 조건문이 참일 때 해당 문장 블록을 실행합니다.

대부분의 언어는 공백을 자동으로 완성할 수 있습니다. 명확하고 아름답게 만들기 위해 연산자 양쪽에 공백을 추가하는 것이 좋습니다. 그러나 HTML에서는 공백 사용에 주의하고 어지럽히지 않아야 합니다. JavaScript에서는 다음 두 문장이 동일합니다.

var a = 10;
var b=10;

Python과 유사하게 JavaScript도 스크립팅 언어이며 해석됩니다.

객체

정의 객체

모든 것은 객체, 즉 동일한 특성을 가진 사물 간의 추상적인 특성 인스턴스입니다. 인간 사이의 Xiao Ming처럼.

JavaScript에서 객체는 객체의 속성을 정의하는 Python의 사전이나 Java의 해시 맵과 유사한 속성 변수의 컨테이너입니다.

var 사람들 = {
    이름: "마이크",
    성: "스미스",
    나이: "18",
    주소: "베이징",
    직업: "학생"
};

위의 내용은 객체 정의입니다. 물론 한 줄로 작성해도 되지만, 앞으로는 이렇게 작성해 주시길 바랍니다.

개체 속성에 액세스하려면

"JavaScript 개체는 변수의 컨테이너입니다"라고 말할 수 있습니다. 그러나 우리는 일반적으로 "JavaScript 객체를 키-값 쌍의 컨테이너"로 생각합니다. 키-값 쌍은 일반적으로 key : value로 작성됩니다(키와 값은 콜론으로 구분됨). 키-값 쌍은 일반적으로 JavaScript 개체에서 개체 속성이라고 합니다. 또한 범용 "."을 통해 속성에 액세스합니다(대부분의 언어에서 이를 사용함).

<!DOCTYPE HTML>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>이 사이트입니다</title>
</head>
<본문>
<h1>액세스 클래스 속성</h1>
<!--다음 명령문은 스크립트 앞에 와야 합니다-->
<p id="데모"></p>
<스크립트>
    var 사람들 = {
        이름: "마이크",
        성: "스미스",
        나이: "18",
        주소: "베이징",
        직업: "학생"
    };
    document.getElementById("demo").innerHTML =
        people["firstName"] + "." + people.lastName;
</script>
</body>
</html>

두 가지 액세스 방법, 개체 이름.속성 또는 개체 이름.["속성"]을 사용할 수 있습니다.

함수

함수는 호출 시 실행되는 이벤트 기반 또는 재사용 가능한 코드 블록입니다. 이 함수가 호출되면 함수 내의 코드가 실행됩니다. 함수는 이벤트가 발생할 때(예: 사용자가 버튼을 클릭할 때) 직접 호출할 수 있으며 JavaScript를 통해 어디서나 호출할 수 있습니다.

매개변수 및 반환 값

함수를 호출할 때 매개변수라고 하는 값을 함수에 전달할 수 있으며 매개변수 수에는 제한이 없습니다.

함수 myFunction( var1 , var2 )
{
암호
}

매개변수를 호출할 때 아래와 같이 순서에 따라 매개변수를 전달해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>자바스크립트 웹사이트입니다</title>
</head>
<본문>
<h1>함수 매개변수 전달 문제</h1>
<p>아래 버튼을 클릭하시면 전화연결됩니다</p>
<button onclick="myFunc('Mike','18','Beijing')">여기를 클릭하세요</button>
<스크립트>
    function myFunc(이름, 나이, 주소) {
        Alert("내 이름은 " + 이름 + ", 나이는 " + age + ", 내 집은 " + 주소에 있습니다);
    }
</script>
</body>
</html>

JavaScript 함수는 반환 값을 가질 수 있으며 반환 키워드는 return입니다. 함수가 값을 반환하면 함수 실행이 중지되고 return 이후의 문은 실행되지 않습니다.

예: 두 숫자의 곱을 계산하고 결과를 반환합니다

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>자바스크립트 웹사이트</title>
</head>
<본문>
<h1>두 숫자의 값을 계산하고 반환</h1>
<p id="데모"></p>
<스크립트>
    함수 myFunc(a, b) {
        a * b를 반환;
    }

    document.getElementById("demo").innerHTML = myFunc(3, 4);
</script>
</body>
</html>

변수

JavaScript 변수는 두 가지 유형으로 구분됩니다.

  • 전역 변수: 함수 외부에서 선언된 변수는 전역 변수이며 웹 페이지의 모든 스크립트와 함수가 이에 접근할 수 있습니다.
  • 지역 변수: JavaScript 함수 내에서(var를 사용하여) 선언된 변수는 지역 변수이므로 함수 내에서만 액세스할 수 있습니다.

선언되지 않은 JavaScript 변수에 값을 할당하면 해당 변수는 자동으로 창의 속성으로 처리됩니다. 예를 들어 다음 문은

name = "Mike"

라는 속성 이름을 선언합니다. Non-Strict 모드에서 선언되지 않은 변수에 값을 할당하여 생성된 전역 변수는 전역 개체의 구성 가능한 속성이며 삭제가 가능합니다. 예:

var var1 = 1; // 전역 속성은 구성할 수 없습니다. var2 = 2; // var 선언이 없으면 전역 속성을 구성할 수 있습니다. console.log(this.var1);
console.log(window.var1); // 1

delete var1; // false는 console.log(var1)을 삭제할 수 없습니다. //1

var2 삭제; 
console.log(var2 삭제); // 참
console.log(var2); // 오류 변수가 삭제되었습니다. 정의되지 않은

이벤트

설명:

HTML 이벤트는 HTML 요소에서 발생하는 것입니다. HTML 페이지에서 JavaScript를 사용하면 JavaScript가 이러한 이벤트를 트리거할 수 있습니다.

HTML 이벤트는 브라우저 작업일 수도 있고 사용자 작업일 수도 있습니다. 다음은 HTM 이벤트의 예입니다.

  • HTML 페이지 로드가 완료됩니다.
  • HTML 입력 필드가 변경됩니다
  • .

일반적으로 이벤트가 발생하면 작업을 수행할 수 있습니다. JavaScript는 이벤트가 트리거될 때 일부 코드를 실행할 수 있습니다. 이벤트 속성을 HTML 요소에 추가할 수 있으며 JavaScript 코드를 사용하여 HTML 요소를 추가할 수 있습니다.

  • 작은따옴표: < some-HTML-element some-event = ' JavaScript code ' >
  • 큰따옴표: < some-HTML-element some-event = " JavaScript code " >
<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>자바스크립트 이벤트</title>
</head>
<본문>
<h1>JavaScript 이벤트를 처리하는 두 가지 방법</h1>
<p id="demoOne"></p>
<button onclick="getElementById('demoOne').innerHTML=Date()">시간을 보려면 클릭하세요 1</button>
<p id="demoTwo"></p>
<button onclick="this.innerHTML=Date()">시간을 보려면 클릭하세요 2</button>
</body>
</html>

JavaScript는 일반적으로 여러 줄로 구성된 코드이며 덜 일반적인 코드는 이벤트 속성을 통해 호출됩니다.

<!DOCTYPE HTML>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <title>자바스크립트 이벤트</title>
</head>
<본문>
<h1>자바스크립트 이벤트 속성 호출</h1>
<p><em>myFunc()</em> 함수를 실행하려면 클릭하세요.</p>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="1"></p>
<스크립트>
    함수 myFunc() {
        document.getElementById("one").innerHTML = 날짜();
    }
</script>
</body>
</html>
.
일반적인 HTML 이벤트
이벤트 설명
onchange HTML 요소 변경
onclick 사용자가 HTML 요소를 클릭합니다
onmouseover 사용자가 HTML 요소 위에서 마우스를 이동합니다.
onmouseout 사용자가 HTML 요소에서 마우스를 멀리 이동합니다.
onkeydown 사용자가 키보드 키를 누릅니다
. onload 브라우저가 페이지를 완료했습니다. 로딩

후에도 더 많은 이벤트가 계속 학습됩니다

.

이벤트 역할

이벤트는 양식 유효성 검사, 사용자 입력, 사용자 행동 및 브라우저 작업을 처리하는 데 사용될 수 있습니다.

  • 페이지가 로드될 때 이벤트가 트리거되고,
  • 페이지가 닫힐 때 이벤트가 트리거되고,
    • 사용자가 작업을 수행
  • 하고 확인하기 위해
  • 버튼을 클릭합니다
    • .
  • 사용자 입력 콘텐츠의 적법성을 고려하여

여러 가지 방법을 사용하여 JavaScript를 실행할 수 있습니다. 이벤트 코드:

  • HTML 이벤트 속성은
  • HTML
  • 요소에 대해 자체 이벤트 핸들러를 지정할 수 있습니다.
  • 이벤트 발생을 방지할 수 있습니다.
:

문자

모음입니다.

var a = "abc";
var b = "Hello";

Python과 마찬가지로 인덱스를 사용하여 문자열의 각 문자에 액세스할 수 있습니다.

var c = b[1]; // e

length

이 속성은 문자열의 길이를 계산할 수 있습니다.

<!DOCTYPE HTML>
<html>
<머리>
    <meta charset="utf-8">
    <title>문자열 길이</title>
</head>
<본문>
<스크립트>
    var txtOne = "안녕하세요!";
    document.write("<p>" + txtOne.length + "</p>");
    var txtTwo = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    document.write("<p>" + txtTwo.length + "</p>");
</script>
</body>
</html>

JavaScript에는 몇 가지 특수 문자도 있습니다. 예를 들어 따옴표를 인쇄하려면 ""를 추가하여 이스케이프해야 합니다. 그렇지 않으면 컴파일러가 이를 구문 분석할 수 없습니다.

문자열
JavaScript 일반 특수 문자
코드 출력
' 작은따옴표
" 큰따옴표
\ 백슬래시
n 라인 피드
r캐리지 리턴
ttab (탭 문자)
b백스페이스 문자
fformfeed

을 개체로 사용하며

일반적으로 JavaScript 문자열은 기본 값이며 문자를 사용하여 생성할 수 있습니다: var firstName = "Mike". 하지만 new 키워드를 사용하여 문자열을 객체로 정의할 수도 있습니다. var firstName = new String("Mike"). 이는 Java

문자열 공통 속성
과 유사합니다.
속성 설명
생성자는 문자열을 생성하는 함수를 반환합니다. 속성
길이는 문자열의 길이를 반환합니다.
프로토타입은 개체 문자열에 속성과 메서드를 추가할 수 있도록 합니다.
. match . 가 있습니다. to 대문자 소문자
일반 메서드
메서드 설명
charAt() 는 지정된 인덱스 위치에 있는 문자를 반환합니다
charCodeAt()는 지정을 반환합니다.
concat()은 두 개 이상의 문자열을 연결하여 연결된 문자열을 반환합니다.
fromCharCode (
)는 유니코드를 문자열로 변환합니다
.
문자열
lastIndexOf()는 문자열에서 지정된 문자가 마지막으로 나타나는 위치를 반환합니다.
localeCompare()는 로컬 특정 순서를 사용하여 두 문자열을 비교합니다.
( )
는 하나 이상의 정규 표현식과 일치하는 항목을 찾습니다
정규식 일치하는 하위 문자열
search() 정규식과 일치하는 값을 검색합니다.
Slice()는 문자열의 일부를 추출하고 추출된 부분을 새 문자열로 반환합니다.
Split() 은 문자열을 하위 문자열 배열로 분할합니다.
substr() 지정된 문자열을 추출합니다. 시작 인덱스 번호 부분 문자열부터 문자열의 문자 수
() 문자열에서 지정된 두 인덱스 번호 사이의 문자를 추출합니다.
toLocaleLowerCase () 호스트의 로케일에 따라 문자열을 소문자로 변환합니다. 언어는 몇 가지뿐입니다. (예: 터키어)에는 호스트의 로케일에 따라 문자열을 대문자로 변환하기 위한 toLocaleUpperCase() 지역별 대소문자 매핑이 있습니다
. 소수의 언어(예: 터키어)에만 문자열을 변환하기 위한 지역별 대소문자 매핑
toLowerCase ()
로 변환
toString() 문자열 객체 값을 반환합니다.
toUpperCase() 문자열을 대문자로 변환합니다.
Trim() 문자열의 앞뒤 공백을 제거합니다.
valueOf() 문자열 객체의 원래 값을 반환합니다.

== 및 === 차이점

1. 문자열, 숫자 등 기본형의 경우

  • ==와 ===의 차이가 있습니다. a) 서로 다른 유형 간의 비교 ==는 "동일한 유형으로 변환한 후의 값"을 비교하여 "값이 같은지 확인합니다." "는 같습니다. === 유형이 다른 경우 결과는 동일하지 않습니다.
  • b) 동일한 유형의 비교의 경우 직접 "값"비교는 동일한 결과를 가져옵니다.
2. Array 및 Object와 같은 고급 유형의 경우

"포인터 주소" 비교에서 ==와 === 사이에는 차이가 없습니다.

  • 3.

기본

유형과 고급 유형 간에는 차이가 있습니다.

  • 고급 유형을 기본 유형으로 변경하고 "값" 비교 수행
  • b) 유형이 다르기 때문에 === 결과는 false입니다.

4. !=는 ==의 비연산, !==는 =의 비연산입니다. ==

var 숫자=1;

var str="1";

var 테스트=1;

test == num //true 같은 타입, 같은 값 test === num //true 같은 타입, 같은 값 test !== num //false test는 num과 같은 타입이고, 그 값도 같습니다. 비연산은 거짓이어야 합니다 

num == str //true str을 숫자로 변환하고 같은지 확인합니다. 

num != str //false == 비연산 num === str //false 타입이 다르므로 false를 직접 반환 

num !== str //true num과 str의 유형이 다르다는 것은 비연산이 당연히 true임을 의미합니다.

연산자

x
JavaScript 공통 연산자(y=5)
연산자 설명 예 x 연산 결과 y 연산 결과
+ 덧셈 x =y+2 7 5
-뺄셈 x =y-2 3 5
* 곱셈 x=y*2 10 5
/ 나눗셈 x=y/2 2.5 5
% 모듈로(나머지) x=y%2 1 5
++ 증분 x =++y 6 6
x=y++ 5 6
--decrement= --y 4 4
x=y-- 5 4
연산
JavaScript 공통 할당 연산자(x=10, y=5)
연산자 예는과 동일합니다 . Result
= x =y x=5
+= x+=y x=x+y x=15
-= x-=y x=xy x=5
*= x*=y x=x*y x=50
/= x/=y x= x/y x=2
%= x%=y x=x%y x=0
x true
JavaScript 일반 비교 연산자(x=5)
연산자 설명 비교 반환 값
== 같음 x==8 false
x==5 true
= = = 완전히 같음(값과 유형이 모두 같음) x==="5" false
x===5 true
!= x!=8 과 같지 않음 true
!== 절대적으로 같지 않음(값과 유형 중 하나가 같지 않음) 같음, 또는 둘 다 같지 않음) x!=="5" true
x!==5 false
>보다 큼 >8 false
< x< 8 보다
작음>= x>=8 false
<= x<= 8 보다 작거나 같음 true
<= x<=8 보다 작거나 같음 true
JavaScript 일반 논리 연산자 (x=6, y=3)
연산자 설명 예
&& 및 (x < 10 && y > 1)는 다음과 같습니다. true
|| 또는 (x== 5 || y==5)는 false
! (x==y)는 true입니다 .

JavaScript에는 특정 조건에 따라 변수에 값을 할당하는 조건 연산자도 포함되어 있습니다. 예:

Variablename=(condition)?value1:value2

조건 판단

JavaScript에서는 다음과 같은 조건문을 사용할 수 있습니다.

  • if 문 - 지정된 조건이 true인 경우에만 이 문을 사용하여 코드를 실행합니다.
  • if...else 문 - 조건이 true일 때 코드를 실행하고 조건이 false일 때 다른 코드를 실행합니다.
  • if...else if....else 문 - 이 문을 사용하여 여러 코드 블록 중 하나를 선택하여
  • switch 문을 실행합니다. - 이 문을 사용하여 여러 개를 선택합니다.

if 문을

  • 실행하는 코드 블록 중

조건이 true인 경우에만 코드가 실행됩니다. 예:

<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>자바스크립트 웹사이트</title>
</head>
<본문>
<h1>if 문입니다</h1>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="1"></p>
<스크립트>
    함수 myFunc() {
        var x = "";
        var time = new Date().getHours();
        만약 (시간 < 20) {
            x = "안녕하세요, 20시 이전";
        }
        document.getElementById("one").innerHTML = x;
    }
</script>
</body>
</html>

if...else 문

if...else 문을 사용하여 조건이 true인 경우 코드를 실행하고 조건이 false인 경우 다른 코드를 실행합니다.

<!DOCTYPE HTML>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>자바스크립트 웹사이트</title>
</head>
<본문>
<h1>if...else 문입니다</h1>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="1"></p>
<스크립트>
    함수 myFunc() {
        var x = "";
        var time = new Date().getHours();
        만약 (시간 < 20) {
            x = "안녕하세요, 20시 이전";
        }또 다른 {
            x = "안녕하세요, 20시 이후";
        }
        document.getElementById("one").innerHTML = x;
    }
</script>
</body>
</html>

여러 if..else 문

<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>자바스크립트 웹사이트</title>
</head>
<본문>
<h1>여러 개의 if...else 문</h1>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="1"></p>
<스크립트>
    함수 myFunc() {
        var x = "";
        var time = new Date().getHours();
        만약 (시간 < 12) {
            x = "좋은 아침입니다";
        } else if (시간 < 14) {
            x = "안녕하세요";
        }
        또 다른 {
            x = "안녕하세요";
        }
        document.getElementById("one").innerHTML = x;
    }
</script>
</body>
</html>

switch 문

switch 문을 사용하여 실행할 여러 코드 블록 중 하나를 선택합니다. 예:

<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>자바스크립트 웹사이트</title>
</head>
<본문>
<h1>스위치 문</h1>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="1"></p>
<스크립트>
    함수 myFunc() {
        var x = "";
        var time = new Date().getMonth();
        스위치 (시간) {
            사례 0:
                x = "1월";
                부서지다;
            사례 1:
                x = "2월";
                부서지다;
            사례 2:
                x = "3월";
                부서지다;
            사례 3:
                x = "4월";
                부서지다;
            사례 4:
                x = "5월";
                부서지다;
            사례 5:
                x = "제인";
                부서지다;
            사례 6:
                x = "7월";
                부서지다;
            사례 7:
                x = "8월";
                부서지다;
            사례 8:
                x = "9월";
                부서지다;
            사례 9:
                x = "10월";
                부서지다;
            사례 10:
                x = "11월";
                부서지다;
            사례 11:
                x = "12월";
                부서지다;
            기본:
                x = "오류";
        }
        document.getElementById("one").innerHTML = x;
    }
</script>
</body>
</html>

루프

JavaScript는 다양한 유형의 루프를 지원합니다.

  • for - 특정 횟수만큼 코드 블록을 반복합니다.
  • for/in - 객체의 속성을 반복합니다.
  • while - 지정된 조건이 참일 때 지정된 코드 블록을 반복합니다.
  • do/while
- 지정된 경우에도 조건이 true인 경우 루프 
<!DOCTYPE html>

에 대해

  • 지정된 코드 블록을 반복합니다.
<html>
<머리>
    <meta charset="utf-8">
    <title>자바스크립트 루프</title>
</head>
<본문>
<h1>코드를 5번 반복하려면 버튼을 클릭하세요. </h1>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="데모"></p>
<스크립트>
    함수 myFunc() {
        var x = "";
        for (var i = 0; i < 5; i++) {
            x = x + "숫자는" + i + "<br>";
        }
        document.getElementById("demo").innerHTML = x;
    }
</script>
</body>
</html>

fo /in 루프

<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>
<p>개체의 개인 속성을 탐색하려면 아래 버튼을 클릭하세요.</p>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="1"></p>
<스크립트>
    함수 myFunc() {
        x를 보자;
        텍스트 = "";
        const 사람 = {
            이름: "빌",
            성: "게이트",
            나이: 56
        };
        (x 직접) {
            텍스트 = 텍스트 + " " + 사람[x];
        }
        document.getElementById("one").innerHTML = 텍스트;
    }
</script>
</body>
</html>

while 루프

<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>
<p>버튼을 클릭하면 i가 5보다 작으면 출력이 인쇄됩니다</p>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="one">여기에 표시</p>
<스크립트>
    함수 myFunc() {
        x = "", i = 0이라고 가정합니다.
        동안 (i < 5) {
            x = x + "이 숫자는" + i + "<br>";
            나++;
        }
        document.getElementById("one").innerHTML = x
    }
</script>
</body>
</html>

do/while 루프

<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>
<p>5보다 작은 숫자를 인쇄하려면 버튼을 클릭하세요</p>
<button onclick="myFunc()">여기를 클릭하세요</button>
<p id="1"></p>
<스크립트>
    함수 myFunc() {
        x = ""로 놔두세요;
        내가 = 0이라고 하자;
        하다 {
            x = x + "숫자는" + i + "<br>";
            나++;
        }
        동안(i < 5);
        document.getElementById("one").innerHTML=x;
    }
</script>
</body>
</html>

for 루프와 while 루프 비교

<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>

<p>펑크원입니다</p>
<button onclick="funcOne()">funcOne 클릭</button>
<p id="one">funcOne이 왔습니다</p>

<p>이것은 funcTwo입니다</p>
<button onclick="funcTwo()">funcTwo 클릭</button>
<p id="two">funcTwo가 왔습니다</p>

<스크립트>
    함수 funcOne() {
        숫자 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        내가 = 0이라고 하자;
        addRes = 0으로 놔두세요;
        동안 (숫자[i]) {
            addRes += 숫자[i];
            나++;
        }
        document.getElementById("one").innerHTML = addRes + "<br>";

    }

    함수 funcTwo() {
        숫자 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        내가 = 0이라고 하자;
        mulRes = 1로 설정합니다.
        for (; 숫자[i];) {
            mulRes *= 숫자[i];
            나++;
        }
        document.getElementById("two").innerHTML = mulRes + "<br>";
    }
</script>

</body>
</html>

Break 및 Continue

break 문은 루프를 중단하는 데 사용됩니다. continue는 루프에서 반복을 건너뛰는 데 사용됩니다.

<!DOCTYPE HTML>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>
<p>continue 및 break 문입니다</p>
<button onclick="funcOne()">funcOne 클릭</button>
<p id="one">funcOne입니다</p>
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="funcTwo()">funcTwo 클릭</button>
<p id="two">이것은 funcTwo입니다</p>
<스크립트>
    함수 funcOne() {
        x = ""로 놔두세요;
        내가 = 0이라고 하자;
        for (i = 0; i < 10; i++) {
            만약 (i < 5) {
                부서지다;
            }
            x = x + "숫자는" + i + "<br>";
        }
        document.getElementById("one").innerHTML = x;
    }

    함수 funcTwo() {
        x = ""로 놔두세요;
        내가 = 0이라고 하자;
        for (i = 0; i < 10; i++) {
            if (i === 8) {
                계속하다;
            }
            x = x + "숫자는" + i + "<br>";
        }
        document.getElementById("two").innerHTML = x;
    }
</script>

</body>
</html>

typeof, null 및 undefed는

typeof 연산자를 사용하여 변수의 데이터 유형을 감지합니다.

<!DOCTYPE HTML>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>
<p id="1"></p>
<스크립트>
    document.getElementById("one").innerHTML =
        "John" + "<br>" + 유형
        3.14 유형 + "<br>" +
        false 유형 + "<br>" +
        유형[1, 2, 3, 4] + "<br>" +
        typeof {이름: '존', 나이: 34};

</script>

</body>
</html>

JavaScript에서 배열은 특별한 객체 유형입니다. 따라서 typeof [1,2,3,4]는 객체를 반환합니다.

null은 비어 있음, 즉 "아무것도 없음"을 의미합니다. typeof 감지를 사용하면 객체가 반환됩니다. 정의되지 않은 객체를 사용하여 객체를 지울 수 있습니다.

<!DOCTYPE HTML>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>
<p>하나:</p>
<p id="1"></p>
<p>둘:</p>
<p id="두"></p>

<스크립트>
    var person = {firstName: "Bill", lastName: "Gates", age: 50};
    var 사람 = null;
    document.getElementById("one").innerHTML = 사람 유형;
    사람 = 정의되지 않음
    document.getElementById("two").innerHTML = 사람 유형;
</script>

</body>
</html>

생성자 속성

생성자 속성은 모든 JavaScript 변수의 생성자를 반환합니다. 생성자 속성을 사용하여 객체가 배열인지 또는 날짜(문자열 "Date" 포함)인지 등을 확인할 수 있습니다.

<!DOCTYPE HTML>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>

<p>생성자 속성은 변수나 생성자를 반환합니다.</p>
<p id="one">HRER</p>
<스크립트>
    document.getElementById("one").innerHTML =
        "안녕하세요".constructor + "<br>" +
        3.14.생성자 + "<br>" +
        false.constructor + "<br>" +
        [1, 2, 3].constructor + "<br>" +
        {이름: "안녕하세요", 나이: 18}.constructor + "<br>" +
        new Date().constructor + "<br>" +
        기능 () {
        }.건설자;
</script>

</body>
</html>

유형 변환

JavaScript 변수는 새로운 변수나 다른 데이터 유형으로 변환될 수 있습니다.

  • JavaScript 함수를 사용하여
  • JavaScript 자체에 의해 자동으로 변환됩니다.
<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>

<p>String() 메소드는 숫자를 문자열로 변환할 수 있습니다</p>
<p id="one">여기</p>
<p>toString() 메소드는 숫자를 문자열로 변환할 수 있습니다</p>
<p id="two">여기</p>
<스크립트>
    x = 123이라고 하자;
    document.getElementById("one").innerHTML =
        문자열(x) + "<br>" +
        문자열(123) + "<br>" +
        문자열(100 + 23);
    document.getElementById("two").innerHTML =
        x.toString() + "<br>" +
        (123).toString() + "<br>" +
        (100 + 123.2).toString();
</script>

</body>
</html>

단항 연산자+

연산자+를 사용하여 변수를 숫자로 변환할 수 있습니다:

<!DOCTYPE html>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>

<P>typeof 연산자는 변수 또는 표현식 유형을 반환합니다.</P>
<button onclick="myFuncOne()">여기를 클릭하세요</button>
<p id="one">여기</p>
<button onclick="myFuncTwo()">여기 두 개를 클릭하세요</button>
<p id="two">여기</p>
<스크립트>
    함수 myFuncOne() {
        y = "5"로 설정;
        x = +y라고 하자;
        document.getElementById("one").innerHTML =
            y 유형 + "<br>" + x + "<br>" + x 유형;
    }

    함수 myFuncTwo() {
        a = "안녕하세요";
        b = +a라고 하자;
        document.getElementById("two").innerHTML =
            typeof a + "<br>" + b + "<br>" + typeof b;
    }

</script>
</body>
</html>
JavaScript 유형 변환
기본 값 변환 숫자로 변환 문자열로 변환 부울 값으로 변환
false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0 " true
"000" 0 "000" true
"1" 1 "1" true
NaN NaN "NaN" false
Infinity Infinity " Infinity" true
-Infinity -Infinity "-Infinity" true
"" 0 "" false
"20" 20 " 20 " true
"Runoob" NaN "Runoob" true
[ ] 0 "" true
[20] 20 "20" true
[10,20] NaN "10,20" true
["Runoob"] NaN "Runoob" true
["Runoob " ,"Google"] NaN "Runoob,Google" true
function(){} NaN "function(){}" true
{ } NaN "[객체 개체]" true
null 0 "null" false
정의되지 않음 NaN "정의되지 않음" false

정규식

정규식(영어: 정규식, 종종 코드에서 regex, regexp 또는 RE로 축약됨)은 단일 문자열을 사용하여 특정 구문 규칙을 준수하는 일련의 문자열 검색 패턴을 설명하고 일치시킵니다.

search()

는 문자열에서 지정된 하위 문자열을 검색하거나 정규식과 일치하는 하위 문자열을 검색하고 하위 문자열의 시작 위치를 반환하는 데 사용됩니다.

<!DOCTYPE HTML>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>

<p>문자열 검색, 위치 일치</p>

<button onclick="myFuncOne()">여기를 클릭하세요</button>
<p id="one">여기</p>

<button onclick="myFuncTwo()">여기 두 개를 클릭하세요</button>
<p id="two">여기</p>

<스크립트>
    함수 myFuncOne() {
        let str = "안녕하세요, 월드!";
        document.getElementById("one").innerHTML = str.search(/World/i);
    }

    함수 myFuncTwo() {
        let str = "중국에 오신 것을 환영합니다!";
        document.getElementById("two").innerHTML = str.search("중국");
    }
</script>

</body>
</html>

replacement()

는 문자열의 일부 문자를 다른 문자로 바꾸거나 정규식과 일치하는 하위 문자열을 바꾸는 데 사용됩니다.

<!DOCTYPE HTML>
<html lang="zh-CN">
<머리>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-호환" content="IE=edge">
    <title>제목</title>
</head>
<본문>

<p>정규 표현식 교체() 교체</p>

<button onclick="myFuncOne()">한 번 클릭</button>
<p id="one">안녕하세요, 자바</p>

<button onclick="myFuncTwo()">두 번 클릭</button>
<p id = "two"> 안녕하세요, Java </p>

<스크립트>
    함수 myfuncone () {
        str = document.getElementById ( "One"). innerHtml;
        document.getElementById ( "One"). innerHtml = str.replace (/java/i, "python");
    }

    함수 myfunctwo () {
        str = document.getElementById ( "Two"). innerHtml;
        document.getElementById ( "2"). innerHtml = str.replace ( "java", "javascipt");
    }
</script>

</body>
</html>

정규 표현 패턴

정규식 수정
자 수정 자 설명
I를 수행합니다.
G는 글로벌 경기를 수행합니다 (첫 경기가 발견 된 후 중지 대신 모든 경기를 찾습니다).
M은 멀티 라인 매칭을 수행합니다.
정규 표현식 특수 문자
표현 설명
[ABC]은 사각형 괄호 사이에서 문자를 찾습니다.
[0-9]는 0에서 9까지의 숫자를 찾습니다.
(x | y) |.
정규식 정량 자
정량 자 설명
N+는 하나 이상의 n을 포함하는 모든 문자열과 일치합니다.
N*는 0 이상의 N을 포함하는 모든 문자열과 일치합니다.
n은 0 또는 1 개의 문자열을 일치시킵니다.

test ()는

문자열에 일치하는 텍스트가 포함 된 경우 문자열이 일치하는지 여부를 감지하는 데 사용됩니다. 그렇지 않으면 False를 반환합니다.

<!DOCTYPE HTML>
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<스크립트>
    OBJ = New Regexp ( "e");
    부울 론 = obj.test를하자 ( "안녕하세요, javaScript입니다");
    BOOLTWO = OBJ.TEST ( "this is javaScript");
    document.write (boolone + "<br>" + booltwo);
</script>

</body>
</html>

exec ()

는 문자열에서 일반 표현식의 일치를 검색하는 데 사용됩니다. 일치하지 않으면 반환 값이 NULL입니다.

<!DOCTYPE HTML>
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<스크립트>
    OBJ = 새로운 regexp (/e/)를하자;
    Resone = obj.exec ( "안녕하세요, JavaScript입니다");
    restwo = obj.exec ( "이것은 JavaScript입니다");
    /*아니요는 null을 의미합니다*/
    document.write (Resone + "<br>" + restwo);
</script>

</body>
</html>

오류 예외

오류 유형

  • JavaScript 엔진이 JavaScript 코드를 실행하면 다양한 오류가 발생합니다.
  • 구문 오류, 일반적으로 프로그래머가 만든 코딩 오류 또는 오타가 될 수 있습니다.
  • 철자 실수 또는 언어의 누락 된 기능 (브라우저 차이로 인해) 일 수 있습니다.
  • 오류는 서버 또는 사용자의 출력이 잘못 되었기 때문일 수 있습니다.
  • 물론, 그것은 다른 많은 예측할 수없는 요인 때문일 수도 있습니다.

CATCH

THE TRY 문을 사용하면 실행 중 오류에 대해 테스트 된 코드 블록을 정의 할 수 있으며 Catch 문을 통해 Try Code 블록에서 오류가 발생할 때 실행되는 코드 블록을 정의 할 수 있습니다.

<!DOCTYPE HTML>
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<input type = "button"value = "view"onclick = "myfunc ()">
<스크립트>
    txt = ""를하자;

    함수 myfunc () {
        노력하다 {
            Alert111 ( "안녕하세요, 세계!")
        }
        캐치 (err) {
            txt = "여기에 오류가 있습니다  n  n";
            txt + = "오류 설명 :" + err.message + " n  n";
            txt += "확인을 클릭하여 계속  n  n";
            경고 (txt)
        }
    }
</script>

</body>
</html>

던지기

진술을 통해 사용자 지정 오류를 만들 수 있습니다. 올바른 기술 용어는 다음과 같습니다. 예외 생성 또는 던지기. 시도 앤 캐치와 함께 Throw를 사용하는 경우 프로그램 흐름을 제어하고 사용자 정의 오류 메시지를 생성 할 수 있습니다.

<!DOCTYPE HTML>
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<p> 5-10 </p> 사이의 숫자를 입력하십시오
<label for = "one"> </label> <input id = "one"type = "text">
<버튼 유형 = "버튼"onclick = "myfunc ()"> 클릭 </button>
<p id = "message"> here </p>

<스크립트>
    함수 myfunc () {
        메시지를 보내십시오.
        X를하자;
        message = document.getElementById ( "메시지");
        message.innerhtml = "";
        x = document.getElementById ( "One"). 값;
        노력하다 {
            if (x === "")
                던지기 "값은 비어 있습니다";
            if (isnan (x))
                "숫자가 아님"을 던지십시오.
            x = 숫자 (x);
            if (x <5)
                "너무 작게"던지십시오.
            if (x> 10)
                "너무 큰"던지십시오.
        } 잡기(오류) {
            message.innerhtml = "error" + error;
        }
    }
</script>

</body>
</html>

기능 호출

JavaScript 함수를 호출하는 4 가지 방법이 있습니다. 일반적으로 JavaScript에서는 기능이 실행될 때 현재 객체를 가리 킵니다.

호출 1 : 함수로 호출

한

기능 myfunc (a, b) {
    a * b를 반환합니다.
}

myfunc

(1 
,
2);
    a * b를 반환합니다.
}
Window.myfunc (1,

2

)
;
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<p> 메소드라고 불리는 기능 </p>
<p id = "one"> here </p>

<스크립트>
    myObject = {
        FirstName : "Bill",
        마지막 이름 : "게이츠",
        fullName : function () {
            이 this.firstname + "" + this.lastname;
        }
    };
    document.getElementById ( "one"). innerHtml = myObject.fullName ();
</script>

</body>
</html>

전화 3 : 생성자를 사용하여 함수를 호출하십시오

<! doctype html>
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<p>이 예에서 MyFunc ()는 함수의 생성자입니다 </p>
<p id = "one"> </p>
<스크립트>
    함수 myfunc (argone, argtwo) {
        this.name = argone;
        this.number = argtwo;
    }

    x = new myfunc ( "Hello", 123);
    document.getElementById ( "One"). innerHtml = x.name;
</script>

</body>
</html>

호출 4 : 함수를 함수로 호출

<! doctype html>
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<p> 함수는 함수로서 함수 </p>
<p id = "one"> here </p>

<스크립트>
    Obj, 배열을하자;

    함수 myfunc (a, b) {
        a * b를 반환합니다.
    }

    배열 = [5, 6];
    obj = myfunc.apply (obj, array);
    document.getElementById ( "One"). innerHtml = obj;
</script>

</body>
</html>

폐쇄

내장 함수

실제로 JavaScript에서 모든 함수는 상위 레벨의 범위에 액세스 할 수 있습니다. JavaScript는 중첩 된 기능을 지원하며 중첩 함수는 상위 레벨의 함수 변수에 액세스 할 수 있습니다. 인라인 함수 plus ()는 부모 함수의 카운터 변수에 액세스 할 수 있습니다 :

<! doctype html>
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<p> 인라인 함수 </p>
<p id = "one"> here </p>

<스크립트>
    document.getElementById ( "one"). innerHtml = add ();

    함수 추가() {
        카운터 = 0을하자;

        함수 plus () {
            카운터 += 1;
        }

        을 더한();
        반환 카운터;
    }
</script>

</body>
</html>

클로저

기능의 자체 발전을 Bibao 
<! doctype html>

이라고합니다

.
<html lang = "zh-cn">
<머리>
    <meta http-equiv = "content-type"charset = "utf-8">
    <meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
    <title>제목</title>
</head>
<본문>

<p> 지역 카운터 </p>
<버튼 유형 = "버튼"onclick = "myfunc ()"> 카운터 </button>
<p id = "one"> here </p>

<스크립트>
    add = (function () {
        카운터 = 0을하자;
        return function () {
            반환 카운터 += 1;
        }
    })();

    함수 myfunc () {
        document.getElementById ( "one"). innerHtml = add ();
    }
</script>
</body>
</html>
관련 기사