JavaScript와 HTML_javascript 기술의 조합에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:30 PM

htmljavascript

HTML의 JavaScript 스크립트는 <script> 태그와 </script> 태그 사이에 배치되어야 합니다. 상황에 따라 다르며 일반적으로

태그 내에 배치됩니다.
1. 태그
HTML 페이지에 JavaScript 스크립트를 삽입해야 하는 경우 & lt; 스크립트 & gt; <script> 및 </script>는 JavaScript를 시작할 위치를 알려줍니다.
그리고 끝. <script>와 </script> 사이에 JavaScript가 포함되어 있습니다.

<span style="font-size:18px;"><script type="text/javascript"> 
alert("欢迎来到JavaScript世界！！！"); 
</script></span>

위 코드를 이해하실 필요는 없습니다. 브라우저는 <script>와 </script> 사이의 JavaScript를 해석하고 실행한다는 점만 이해하세요. 그 오래된
이전 인스턴스에서는 <script> 태그에 type="text/javascript"를 사용할 수 있습니다. 더 이상 필요하지 않습니다. JavaScript는 모든 최신 브라우저에 존재합니다 <br /> 그리고 HTML5의 기본 스크립팅 언어입니다. 이제 막 JavaScript 언어를 배운 분들도 사용하실 수 있습니다! <br /> <strong>2. <body><br />의 JavaScript 이 예에서 JavaScript는 페이지가 로드될 때 HTML의 <body>에 텍스트를 씁니다. <br /> 예제 코드: <br /> </script>

<!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 id="This-is-a-heading">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. 또는
의 JavaScript HTML 문서에 스크립트를 무제한으로 넣을 수 있습니다. 스크립트는 HTML의

또는 섹션에 있을 수 있습니다. 두 부분으로. 일반적인 방법은 섹션이나 페이지 하단에 기능을 넣는 것입니다. 이렇게 하면 같은 위치에 배치할 수 있습니다.
페이지 내용을 방해하지 않습니다.

의 JavaScript 함수 이 예에서는 HTML 페이지의 섹션에 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 id="My-Web-Page">My Web Page</h1>  
 
<p id="demo">A Paragraph.</p>  
 
<button type="button" onclick="myFunction()">点击这里</button>  
</body> 
</html>

실행 결과는 다음과 같습니다.

버튼을 클릭한 후의 효과는 다음과 같습니다.

의 JavaScript 함수 이 예에서는 HTML 페이지의 섹션에 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 id="My-First-Web-Page">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가지의 결과와 동일합니다!

팁:

요소가 생성된 후 스크립트가 실행되도록 페이지 코드 하단에 JavaScript를 배치했습니다.

7. 외부 자바스크립트 스크립트를 외부 파일에 저장할 수도 있습니다. 외부 파일에는 여러 웹 페이지에서 사용되는 코드가 포함되는 경우가 많습니다. 외부 JavaScript 파일의 파일 확장자
전시명은 .js 입니다. 외부 파일을 사용해야 하는 경우에는 <script> 태그의 "src" 속성에 .js 파일을 설정하세요. 우리는 외부 JavaScript 방법의 사용을 옹호하며 일반적으로 HTML 문서에 연결하기 위해 별도의 방법도 사용합니다. <br /> 예시<br /> HTML 코드: <br /> <br /> <br /> </script>

<!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 id="My-Web-Page">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 코드:

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

성명

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

관련 기사