>웹 프론트엔드 >JS 튜토리얼 >JavaScript와 HTML_javascript 기술의 조합에 대한 자세한 설명

JavaScript와 HTML_javascript 기술의 조합에 대한 자세한 설명

WBOY
WBOY원래의
2016-05-16 15:30:291403검색

HTML의 JavaScript 스크립트는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그와 2cacc6d41bbb37262a98f745aa00fbf0 태그 사이에 배치되어야 합니다. 상황에 따라 다르며 일반적으로 93f0f5c25f18dab9d176bd4f6de5d30e 태그 내에 배치됩니다.
1. 6919634607f14bdbe1a4299125db9861 태그
HTML 페이지에 JavaScript 스크립트를 삽입해야 하는 경우 & lt; 스크립트 & gt; 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 코드를 작성하고 실행하는 방법은 중요하지 않습니다. 먼저 결과를 살펴보겠습니다.

3. 자바스크립트 함수 및 이벤트
위 예제의 JavaScript 문은 페이지가 로드될 때 실행됩니다. 일반적으로 사용자가
버튼을 클릭할 때. JavaScript 코드를 함수 안에 넣으면 이벤트가 발생할 때 해당 함수를 호출할 수 있습니다.

4. 93f0f5c25f18dab9d176bd4f6de5d30e 또는 6c04bd5ca3fcae76e30b72ad730ca86d
의 JavaScript HTML 문서에 스크립트를 무제한으로 넣을 수 있습니다. 스크립트는 HTML의 6c04bd5ca3fcae76e30b72ad730ca86d 또는 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 있을 수 있습니다. 두 부분으로. 일반적인 방법은 93f0f5c25f18dab9d176bd4f6de5d30e 섹션이나 페이지 하단에 기능을 넣는 것입니다. 이렇게 하면 같은 위치에 배치할 수 있습니다.
페이지 내용을 방해하지 않습니다.

5. 93f0f5c25f18dab9d176bd4f6de5d30e의 JavaScript 함수 이 예에서는 HTML 페이지의 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. 6c04bd5ca3fcae76e30b72ad730ca86d의 JavaScript 함수 이 예에서는 HTML 페이지의 6c04bd5ca3fcae76e30b72ad730ca86d 섹션에 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>  
</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 파일의 파일 확장자
전시명은 .js 입니다. 외부 파일을 사용해야 하는 경우에는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 "src" 속성에 .js 파일을 설정하세요. 우리는 외부 JavaScript 방법의 사용을 옹호하며 일반적으로 HTML 문서에 연결하기 위해 별도의 방법도 사용합니다.
예시
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 코드:


실행 결과는 위와 일치합니다!
                                                                                                          ~                                                  ​ 실제 실행 효과는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 스크립트를 작성할 때와 완전히 동일합니다. 외부 스크립트에는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 포함될 수 없습니다. 위 내용은 JavaScript와 HTML을 결합한 방법으로 모든 분들의 학습에 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.