자바스크립트를 외부에서 호출하는 방법
- 王林원래의
- 2023-05-09 09:01:36960검색
현대 웹 디자인에서 JavaScript는 없어서는 안 될 부분이 되었습니다. JavaScript는 웹페이지의 기능을 쉽게 확장하는 동시에 사용자 경험을 향상시킬 수 있습니다. JavaScript는 HTML에 직접 내장될 수 있지만 여러 웹 페이지에서 동일한 JavaScript 코드를 재사용해야 하는 경우 JavaScript를 별도의 외부 파일로 캡슐화하여 외부에서 호출하는 것이 매우 유용합니다.
이 글에서는 JavaScript 코드를 HTML 문서에 포함하고 문서에 연결하는 것을 포함하여 외부에서 JavaScript 코드를 호출하는 방법에 대해 설명합니다.
- HTML 문서에 JavaScript 삽입
JavaScript 코드를 HTML 문서에 직접 삽입하는 것이 가장 쉬운 방법입니다. HTML의 헤드 영역이나 본문 영역에 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 작성하고 그 안에 자바스크립트 코드를 직접 삽입하기만 하면 됩니다.
예를 들어 다음은 JavaScript 코드가 포함된 간단한 HTML 문서입니다.
<!DOCTYPE html>
<html>
<head>
<title>嵌入JavaScript代码</title>
<script>
function sayHello() {
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">点击我</button>
</body>
</html>이 예에서는 sayHello()라는 간단한 함수를 정의합니다. 경고 작업으로 사용자를 맞이합니다. HTML 버튼 태그에 정의된 onclick 이벤트를 사용하여 이 함수를 호출합니다.
이 접근 방식은 소규모 프로젝트에는 괜찮을 수 있지만 대규모 프로젝트에서는 모든 JavaScript 코드를 HTML 문서에 포함하면 코드가 복잡해지고 유지 관리가 어려워질 수 있습니다.
- JavaScript 코드를 별도의 외부 파일로 저장
이 문제를 해결하기 위해 JavaScript 코드를 별도의 외부 파일로 저장할 수 있습니다. 이 접근 방식을 사용하면 코드가 더 명확하고 읽기 쉬워지며 다른 HTML 문서에서 동일한 코드를 쉽게 재사용할 수 있습니다. 동시에 브라우저는 외부 파일을 캐시하므로 로딩 속도도 빨라집니다.
다음은 간단한 예입니다. JavaScript 코드를 myscript.js라는 파일에 저장합니다.
function sayHello() {
alert("Hello World!");
}위 코드를 myscript.js로 저장한 다음 HTML 문서에 연결합니다.
<!DOCTYPE html> <html> <head> <title>调用外部JavaScript文件</title> <script src="myscript.js"></script> </head> <body> <button onclick="sayHello()">点击我</button> </body> </html>
3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그와 src 속성을 사용하면 myscript.js 파일을 HTML 문서에 연결할 수 있습니다. 이런 방식으로 JavaScript 파일에 정의된 모든 함수와 변수를 HTML 문서에서 호출할 수 있습니다.
외부 JavaScript 파일을 사용할 때 JavaScript 파일이 올바르게 로드될 수 있는지 확인해야 한다는 점에 유의할 가치가 있습니다. 파일 경로가 올바르지 않으면 브라우저가 파일을 찾을 수 없으며 JavaScript 파일의 코드가 실행되지 않습니다.
HTML 문서에 외부 JavaScript 파일을 포함하면 웹사이트를 더 쉽게 관리하고 유지할 수 있다는 또 다른 이점이 있습니다. JavaScript 코드를 업데이트해야 하는 경우 JavaScript 파일의 코드만 변경하면 해당 파일을 사용하는 모든 HTML 문서가 자동으로 업데이트될 수 있습니다.
- JavaScript 파일에서 여러 함수 및 변수 정의
일반적으로 JavaScript 파일에는 논리적으로 관련된 함수 및 변수 집합이 포함될 수 있습니다. 이렇게 하면 코드를 더 잘 구성하고 더 많은 애플리케이션 시나리오에서 사용할 수 있게 됩니다.
예를 들어 다음은 여러 함수가 포함된 myfunctions.js라는 파일입니다.
function addNumber(a, b) {
return a + b;
}
function subtractNumber(a, b) {
return a - b;
}
function divideNumber(a, b) {
return a / b;
}이 JavaScript 파일을 HTML 문서에 소개합니다.
<!DOCTYPE html> <html> <head> <title>在JavaScript文件中定义多个函数和变量</title> <script src="myfunctions.js"></script> </head> <body> <p>10 + 5 = <script>document.write(addNumber(10, 5));</script></p> <p>10 - 5 = <script>document.write(subtractNumber(10, 5));</script></p> <p>10 / 5 = <script>document.write(divideNumber(10, 5));</script></p> </body> </html>
이 예에서는 여러 HTML 문서에서 여러 함수를 사용하는 방법을 보여줍니다. 정의된 여러 함수 사용 myfunctions.js에서. 스크립트 블록에서 함수를 호출하여 이러한 함수를 호출할 수 있습니다.
- JavaScript의 비동기 로드 사용
HTML 문서에 JavaScript 파일을 포함하면 브라우저는 즉시 파일 로드를 시작하고 파일이 완전히 로드될 때까지 페이지 렌더링을 차단합니다. 이로 인해 페이지 로드 속도가 느려질 수 있습니다.
이 문제를 피하기 위해 JavaScript의 비동기 로딩을 사용할 수 있습니다. 특히 HTML 페이지 하단에 JavaScript 다운로드를 배치하고 스크립트 태그의 async 속성을 true로 설정할 수 있습니다. 이렇게 하면 페이지 로드가 완료되고 코드 다운로드가 시작될 때까지 브라우저가 JavaScript 파일 다운로드를 무시하게 됩니다.
예를 들어, 아래는 JavaScript 파일을 비동기적으로 로드하는 HTML 문서입니다.
<!DOCTYPE html> <html> <head> <title>异步加载JavaScript</title> </head> <body> <h1>使用异步加载JavaScript进行页面优化</h1> <p>这里是页面的正文内容。</p> <script async src="myscript.js"></script> </body> </html>
JavaScript 파일 myscript.js를 HTML 문서에 로드합니다. async 속성을 true로 설정하면 브라우저는 스크립트 코드를 비동기적으로 로드하고 페이지 렌더링을 방해하지 않습니다.
요약
이 기사에서는 HTML 문서에 JavaScript 코드를 포함하고 JavaScript 코드를 외부에서 호출하는 방법에 대해 논의했습니다. 또한 JavaScript 코드를 별도의 외부 파일로 저장하고, JavaScript 파일에서 여러 함수와 변수를 정의하고, 페이지 최적화를 위해 JavaScript 코드의 비동기 로딩을 사용하는 방법에 대해서도 논의했습니다.
초보자이든 전문가이든 이 지식을 이해하면 JavaScript 코드를 더 잘 구성 및 관리하고 웹 사이트의 성능과 유지 관리 가능성을 향상시키는 데 도움이 됩니다.
위 내용은 자바스크립트를 외부에서 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!