Home >
Web Front-end >
HTML Tutorial >
Detailed explanation of
As long as we mention putting JavaScript into a web page, we have to involve the core language of the Web - HTML. When JavaScript was originally developed, an important problem that Netscape had to solve was how to make JavaScript coexist with HTML pages without affecting the rendering of those pages in other browsers. After trial, error, and debate, the final decision was to add unified script support to the Web. Many practices from the early days of the Web have been retained and have been officially incorporated into the HTML specification.
<script> Element</h3>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"> The main way to insert JavaScript into an HTML page is to use the <script> element. This element was created by Netscape and was first implemented in Netscape Navigator2. Later, this element was added to the official HTML specification. HTML4.01 defines the following 6 <a href="http://www.php.cn/wiki/169.html" target="_blank"> attributes</a> for <scripth>. <br></p>
<ul class=" list-paddingleft-2" style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px">
<li><p style="margin-top:0px; margin-bottom:10px">async: Optional. Indicates that the script should be downloaded immediately, but should not prevent other operations on the page, such as downloading other resources or waiting for other scripts to be loaded. Only valid for external scripts. </p></li>
<li><p style="margin-top:0px; margin-bottom:10px">charset: optional. The <a href="http://www.php.cn/code/225.html" target="_blank">character set</a> representing the code specified via the src attribute. This attribute is rarely used because most browsers ignore its value. </p></li>
<li><p style="margin-top:0px; margin-bottom:10px">defer: Optional. Indicates that script execution can be delayed until the document is fully parsed and displayed. Only valid for external scripts. </p></li>
<li><p style="margin-top:0px; margin-bottom:10px">language: Deprecated. </p></li>
<li><p style="margin-top:0px; margin-bottom:10px">src: Optional. Represents an external file containing code to be executed. </p></li>
<li><p style="margin-top:0px; margin-bottom:10px">type: optional. Can be thought of as an alternative attribute to language; indicating the content type (also called a MIME type) of the scripting language used to write the code. </p></li>
</ul>
<p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"><br></p>## There are two ways to use the <script> element: embedding JavaScript code directly in the page and including external JavaScript files. <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"></p> When using the <script> element to embed JavaScript code, you only need to specify the type attribute for <script>. Then, just place the JavaScript code directly inside the element as follows: <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"><br><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false" style="overflow:auto; font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:9.5px; margin-top:0px; margin-bottom:10px; line-height:1.42857; color:rgb(51,51,51); word-break:break-all; word-wrap:break-word; border:1px solid rgb(204,204,204); background-color:rgb(245,245,245)"><script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script></pre><div class="contentsignin">Copy after login</div></div></p> The JavaScript code contained inside the <script> element will be interpreted from top to bottom. Take the previous example, the interpreter will interpret the definition of a <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px">function<a href="http://www.php.cn/wiki/145.html" target="_blank">, and then save the definition in its own environment. Once the interpreter has evaluated all the code inside the <script> element, the rest of the page will not be loaded or displayed by the browser. </a></p> If you want to include external JavaScript files through the <script> element, the src attribute is required. The value of this attribute is a link to an external javascript file, for example: <p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px"><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false" style="overflow:auto; font-family:Menlo,Monaco,Consolas,'Courier New',monospace; font-size:13px; padding:9.5px; margin-top:0px; margin-bottom:10px; line-height:1.42857; color:rgb(51,51,51); word-break:break-all; word-wrap:break-word; border:1px solid rgb(204,204,204); background-color:rgb(245,245,245)"><script type="text/javascript" src="example.js"></script></pre><div class="contentsignin">Copy after login</div></div><p style="margin-top:0px; margin-bottom:10px; color:rgb(51,51,51); font-family:Tahoma,Arial,'Microsoft Yahei'; font-size:15.4px; line-height:27.72px">在这个例子中，外部文件example.js将被加载到当前页面中。外部文件只须包含通常要放在开始的<script>和结束的</script>中间的那些javascript代码即可。与解析嵌入式javascript代码一样，在解析外部javascript文件（包括下载该文件）时，页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略前面示例代码中结束的标签，例如：
<script type="text/javascript" src="example.js" />
Copy after login
按照惯例，外部javascript文件带有.js扩展名。但这个扩展名不是必需的，因为浏览器不会检查包含javascript的文件的扩展名。这样一来，使用JSP、PHP或其他服务器端语言动态生成javascript代码也就成为了可能。但是，服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不适用.js扩展名，请确保服务器能反应会正确的MIME类型。
The above is the detailed content of Detailed explanation of
Latest Articles by Author
-
2023-03-15 16:54:01
-
2023-03-15 12:26:02
-
2023-03-14 18:58:01
-
2023-03-14 11:30:01
-
1970-01-01 08:00:00
-
2023-03-16 15:20:01
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
