JavaScript 시작하기: 이벤트, 쿠키, 타이밍 등

"JavaScript 언어 소개"에 대한 기사에서는 스크립트 태그 생성부터 주석 사용(JavaScript 파일을 HTML 문서에 포함), 변수 정의, 연산자 사용, 배열 정의 및 조건문 사용에 이르기까지 JavaScript 언어의 가장 기본적인 측면을 많이 다룹니다. , 함수 정의, 루프 사용 등 이 기사는 이전 기사가 끝난 부분부터 시작하여 몇 가지 기본 JavaScript 언어 개념을 설명하고 계속해서 초보자에게 언어에 대한 기본 이해를 제공합니다. 이 기사에서 다루는 기본 사항은 사용하는 라이브러리에 대한 더 나은 이해를 제공하고, 라이브러리 사용 여부를 결정하는 방법을 알려주며, 직접 작성할 수 있는 용기를 줄 수도 있습니다. 기사 전반에 걸쳐 언어가 다양한 측면을 구현하는 방법을 설명하는 예제가 제공됩니다.

이벤트

이벤트는 JavaScript 언어를 사용하여 웹 페이지에 모든 유형의 상호 작용을 추가하는 촉매제입니다. 각 HTML 요소에는 이벤트를 실행하는 데 사용할 수 있는 것이 있습니다. JavaScript 코드와 관련된 이벤트입니다. 예를 들어 입력 필드에는 가능한 이벤트가 많이 있습니다. 누군가가 입력 필드를 클릭하거나 이동할 때 JavaScript 코드를 트리거하는 포커스 이벤트를 연결하거나 흐림 이벤트를 연결할 수 있습니다. JavaScript 코드는 누군가가 입력 필드 외부를 클릭하면 트리거됩니다. 집중된 입력 필드 또는 필드 밖으로 점프합니다. 사건을 연관시키면 끝없는 가능성이 나타납니다. 예를 들어, 흐림 이벤트는 입력 필드의 데이터가 유효한지 확인하는 JavaScript 코드를 트리거합니다. 유효하지 않은 경우 인라인 메시지가 자동 피드백으로 표시됩니다. 다음 코드는 포커스 및 흐림 이벤트를 사용하여 입력 필드에 기본 텍스트를 표시하는 방법에 대한 예를 제공합니다.

onfocus="this.value = '';" onblur="if(this.value = = '')
this.value = '이메일 주소를 입력하세요';"/>
여기 입력 필드에는 기본값이 있으므로 웹 브라우저에서 이 필드를 볼 때 이 입력 필드에는 텍스트가 표시됩니다. "이메일 주소를 입력하세요". 누군가가 필드를 클릭하거나 점프할 때 기본값이 사라지도록 하기 위해 포커스 이벤트를 사용하여 필드 값을 빈 문자열로 설정합니다. 누군가가 입력 필드 외부를 클릭하거나 점프하면 흐림 이벤트가 기본 텍스트를 다시 표시하는 데 사용됩니다. 그렇지 않으면 입력한 텍스트가 남습니다.

각 HTML 요소에는 해당 요소와 관련된 이벤트가 있습니다. 표 1에는 가장 일반적인 HTML 요소와 관련 이벤트가 나열되어 있습니다.

표 1. 공통 요소 및 관련 이벤트

요소 이벤트

body onload, onunload

input onfocus, onblur, onchange, onkeydown, onkeypress, onkeyup

form onsubmit

img onmouseover, onmouseout, onclick

try...catch and throw

try... catch 문은 오류를 브라우저로 보내거나 사용자 지정 오류를 제공하지 않고 코드에서 오류를 감지하는 방법을 제공합니다. try...catch 문에 JavaScript 오류가 포함되어 있지 않으면 후속 JavaScript 코드를 실행할 수 없으며 브라우저는 자체 방식을 사용하여 오류를 처리하고 표시해야 합니다. 이 문의 try 부분은 JavaScript 코드를 실행하는 데 사용되며, catch 부분은 try 부분에서 발생할 수 있는 오류를 처리하는 데 사용됩니다. 일부 브라우저에서는 제대로 작동하지 않을 수 있는 코드를 실행할 때 이 구성을 사용할 수 있습니다. 이런 종류의 코드가 try...catch 문 안에 배치되면 오류가 반환될 때 무시되고 실행되지 않으며 catch 부분이 오류를 처리합니다. 이 오류는 사용자가 오류 발생 사실을 알아야 하는지 여부에 따라 실제로 오류 메시지를 표시할 수도 있고 아무 작업도 수행하지 않을 수도 있습니다.

try...catch를 사용하여 오류 처리

문의 catch 부분에는 try 부분에 나타나는 것과 동일한 오류 개체를 반환하는 기본 오류 개체 매개변수도 포함될 수 있습니다. 문 오류 관련 정보입니다. 오류 개체에는 메시지와 줄이라는 두 가지 속성이 있습니다. 메시지에서 제공되는 텍스트는 발생한 정확한 오류를 설명합니다. 줄은 오류가 발생한 정확한 코드 줄을 제공합니다. 목록 1에는 오류 개체를 사용하여 오류 메시지와 행 번호를 알리는 try...catch 문의 예가 나와 있습니다. 물론 이런 종류의 정보는 디버깅 모드에서만 유용하지만 브라우저 처리에 의존하지 않고 발생한 오류에 대해 사용자에게 피드백을 제공하려는 경우 이러한 속성이 매우 중요해졌습니다.

목록 1. try...catch 문에서 오류 개체를 사용하여 오류 디버깅

코드 복사 코드 형식 다음:

try
{
// 여기에서 오류 코드를 실행하려고 합니다.
}
catch(err)
{
var txt = err .message 'n';
txt = err.line
경고(txt)

throw 문을 사용하여 오류 예외 생성

try...catch 구문은 뛰어난 오류 처리 기능을 제공하지만 한 단계 더 나아가 throw 문을 사용할 수도 있습니다. throw 문을 사용하면 특정 조건에 따라 오류 예외를 생성할 수 있습니다. 이 접근 방식은 정확하고 일반 언어로 설명되는 보다 사용자 친화적인 오류 메시지를 생성할 수 있는 최고의 기회를 제공합니다. 목록 2에서는 throw 문을 사용하여 try...catch 문의 try 부분에서 조건 기반 오류 예외를 생성하는 방법에 대한 간단한 예를 제공합니다.

목록 2. throw 문을 사용하여 오류 예외 생성

코드 복사 코드는 다음과 같습니다.

저자별 최신 기사