HTML 페이지에 자바스크립트를 추가하는 방법

웹 애플리케이션이 계속 발전함에 따라 JavaScript는 웹 페이지와 웹 애플리케이션에 동적 상호 작용과 더 복잡한 기능을 제공하면서 점점 더 대중화되고 있습니다. 이 문서는 HTML 페이지에 JavaScript를 추가하는 방법을 배우는 데 도움이 될 것입니다.

1. 내부 JavaScript

내부 JavaScript는 HTML 문서에 직접 JavaScript 코드를 배치하는 것을 의미합니다. 이 코드는 태그로 묶어서 또는 내에 배치해야 합니다.

예:

Example function welcome() { alert("Hello World!"); } Click me! 사용자가 버튼을 클릭하면 "Hello World!"라는 메시지 상자가 나타납니다.

2. 외부 JavaScript

JavaScript 코드가 많을 때에는 HTML 문서에 넣는 것보다 별도의 외부 파일에 넣는 것이 더 적합합니다. 이렇게 하면 여러 페이지에서 코드를 더 쉽게 유지 관리, 수정 및 재사용할 수 있습니다.

HTML 문서에 외부 JavaScript 코드를 추가하려면 태그를 사용하여 src 속성을 JavaScript 파일의 URL로 설정하세요.

예:

Example Click me! 여기에서는 에 태그를 추가하고 src 속성을 JavaScript 파일 "example.js"로 지정했습니다. JavaScript 코드가 필요한 경우 함수를 직접 참조할 수 있습니다.

3. 외부 라이브러리

JavaScript 라이브러리는 웹 개발 속도를 높이는 데 사용할 수 있는 재사용 가능한 함수 및 코드 조각 모음입니다. 이러한 라이브러리를 사용하면 개발자가 jQuery, React 및 Vue.js와 같은 일반적인 작업을 더 쉽게 구현할 수 있습니다.

HTML 문서에 외부 라이브러리를 추가하려면 외부 JavaScript 스크립트와 동일한 방법을 사용하세요.

예:

Example Click me! Hello World!

여기서 에 태그를 추가하고 src 속성을 jQuery의 CDN 링크로 지정했습니다. jQuery를 사용해야 하는 경우 해당 기능을 직접 사용할 수 있습니다.

요약:

위는 HTML 페이지에 JavaScript를 추가하는 방법에 대한 세 가지 방법(내부 JavaScript, 외부 JavaScript 및 외부 라이브러리)입니다. 프로젝트의 필요에 따라 JavaScript 코드를 작성하는 다양한 방법을 유연하게 선택할 수 있습니다.

어떤 방법을 사용하든 항상 코드를 명확하고 읽기 쉽고 유지 관리 가능하게 유지하는 것이 중요합니다.