JavaScript와 HTML의 조합에 대한 자세한 설명
- 不言원래의
- 2018-05-07 15:51:182226검색
이 글은 주로 JavaScript와 HTML을 결합하는 방법을 소개합니다. JavaScript와 HTML을 결합하는 방법을 소개하기 위해 내용이 매우 자세하게 설명되어 있습니다. 관심 있는 친구들이 참고할 수 있습니다.
HTML의 JavaScript 스크립트는 <에 있어야 합니다. ;script> 태그와 2cacc6d41bbb37262a98f745aa00fbf0 태그 사이에 JavaScript 스크립트는 상황에 따라 다르며 일반적으로 ef0c2772b76bfffb9337fc47aea795ed 태그 내부.
1. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그
HTML 페이지에 JavaScript 스크립트를 삽입해야 하는 경우 3f1c4e4b6b16bbbd69b2ee476dc4f83a 3f1c4e4b6b16bbbd69b2ee476dc4f83a 및 2cacc6d41bbb37262a98f745aa00fbf0는 JavaScript에 시작 위치와 끝 위치를 알려줍니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a와 2cacc6d41bbb37262a98f745aa00fbf0 사이의 코드 줄에는 JavaScript가 포함되어 있습니다.
<span style="font-size:18px;"><script type="text/javascript">
alert("欢迎来到JavaScript世界！！！");
</script></span> 위 코드를 이해할 필요는 없습니다. 브라우저는 3f1c4e4b6b16bbbd69b2ee476dc4f83a와 2cacc6d41bbb37262a98f745aa00fbf0 사이의 JavaScript를 해석하고 실행한다는 점만 이해하세요. 이전 예에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 type="text/javascript"를 사용할 수 있습니다. 더 이상 필요하지 않습니다. JavaScript는 HTML5뿐만 아니라 모든 최신 브라우저의 기본 스크립트 언어입니다. 이제 막 JavaScript 언어를 배운 분들도 사용하실 수 있습니다!
2. 6c04bd5ca3fcae76e30b72ad730ca86d의 JavaScript
이 예에서 JavaScript는 페이지가 로드될 때 HTML의 6c04bd5ca3fcae76e30b72ad730ca86d에 텍스트를 씁니다. 예제 코드:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript脚本语言</title>
>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>작성 방법은 중요하지 않습니다. JavaScript 코드 및 실행 방법, 먼저 실행 결과를 살펴보세요.
위 예제의 JavaScript 문은 페이지가 로드될 때 실행됩니다. 사용자가 버튼을 클릭하는 경우와 같이 이벤트가 발생할 때 코드를 실행해야 하는 경우가 많습니다. JavaScript 코드를 함수 안에 넣으면 이벤트가 발생할 때 해당 함수를 호출할 수 있습니다.
의 JavaScript는 HTML 문서에 무제한의 스크립트를 넣을 수 있습니다. 스크립트는 HTML의 6c04bd5ca3fcae76e30b72ad730ca86d 또는 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 위치할 수 있습니다. 일반적인 방법은 93f0f5c25f18dab9d176bd4f6de5d30e 섹션이나 페이지 하단에 기능을 넣는 것입니다. 이러한 방식으로 페이지 내용을 방해하지 않고 동일한 위치에 배치할 수 있습니다.
5. 93f0f5c25f18dab9d176bd4f6de5d30e의 JavaScript 함수
예제 코드: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript脚本语言</title>
<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>실행 결과:
6.
예제 코드: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript脚本语言</title>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html> 연산 결과는 위 5개의 결과와 같습니다!
e388a4556c0f65e1904146cc1a846bee 요소가 생성된 후 스크립트가 실행되도록 페이지 코드 하단에 JavaScript를 배치했습니다. 7. 외부 JavaScript 스크립트를 외부 파일에 저장할 수도 있습니다. 외부 파일에는 여러 웹 페이지에서 사용되는 코드가 포함되는 경우가 많습니다. 외부 JavaScript 파일의 파일 확장자는 .js입니다. 외부 파일을 사용해야 하는 경우에는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 "src" 속성에 .js 파일을 설정하세요. JavaScript 코드의 양이 많은 경우 일반적으로 외부 JavaScript 방법을 사용하는 것이 좋습니다. 또한 별도의 방법을 사용하여 HTML 문서에 연결합니다. M 예제
Html 코드: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript脚本语言</title>
<script type="text/javascript" src="/js/myScript.js"></script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
</body>
</html>
myscript.js 코드:
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}작업 결과는 위와 일치합니다!
팁: & & l & lt 머리 또는 & lt; 실제 실행 효과는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 스크립트를 작성할 때와 완전히 동일합니다.
외부 스크립트에는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 포함될 수 없습니다.
위 내용은 JavaScript와 HTML을 결합한 방법으로 모든 분들의 학습에 도움이 되길 바랍니다. JavaScript와 html5가 캔버스 그리기 원형 패턴을 구현하는 방법 소개
관련 추천:
위 내용은 JavaScript와 HTML의 조합에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!