html javascript总结 html写javascript

转载

编程梦想编织者 2023-07-12 14:32:39

文章标签 html javascript总结 javascript 脚本语言 HTML html 文章分类 JavaScript 前端开发

2.在HTML中使用JavaScript

JavaScript是一种专为网页交互而设计的脚本语言，也就是说，JavaScript是作用于Web的，所以在此不得不提到Web的核心语言——HTML。在最初开发JavaScript时，其中一个重要问题就是如何在不破坏原有HTML的基础上实现JavaScript，经过前人的不断努力和尝试，最终的决定就是为Web添加统一的脚本支持。

2.1 <script元素>

在HTML页面中插入JavaScript的主要方法，就是使用<script>元素。HTML4.01为<script>定义了下列6个属性：

属性	定义	备注
async	表示立即下载该脚本	使用该属性的目的是不让页面等待脚本文件的下载和执行，页面在下载该脚本的同时也可以下载资源或等待加载其他脚本。只对外部脚本文件有效。可选
charset	表示通过src属性指定的代码的字符集	由于大多数浏览器会忽略charset的值，因此很少有人会用charset属性。可选
defer	表示脚本可以延迟到文档完全被解析和显示后再执行	即定义该属性的脚本文件会在HTML页面完全加载完后再执行。只对外部脚本文件有效，嵌入的JavaScript代码会忽略该属性，延迟的脚本不一定按顺序执行，因此最好只包含一个延迟脚本。可选
language	表示编写代码所使用的脚本语言	由于大多数浏览器会忽略其值，已废弃
src	表示包含执行代码的脚本文件的路径（含文件名）	可选
type	表示编写代码使用的脚本语言的内容类型（也称MIME类型）	人们使用JavaScript设置的type值一直都是text/JavaScript，但实际上服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript，而在type中设置这个值却可能导致该脚本文件被忽略，目前type值默认是text/JavaScript。可选

2.1.1 元素的位置

按照惯例，所有的<script>元素都应该放在页面的<head>元素中，例如：

<!DOCTYPE HTML>
<html>
    <head>
        <title>This is title</title>
        <script src="js1.js"></script>
        <script src="js2.js"></script>
    </head>
    <body>
        <!--HTML code-->
    </body>
</html>

这种做法的目的是把所有外部文件（包括CSS文件和JavaScript文件）的引用都放在相同的地方。但是在<head>元素中包含所有JavaScript文件意味着该网页需要在所有JavaScript文件都下载、解析、执行完毕才能显示原有的HTML页面，如果某个网页需要引用许多个JavaScript文件，那无疑会延长页面内容呈现的时间，而在延迟期间，页面会是一片空白。

为解决这个问题，一般选择将所有JavaScript引用放到<body>内主要内容之后及</body>之前，如：

<!DOCTYPE HTML>
<html>
    <head>
        <title>This is title</title>
    </head>
    <body>
        <!--HTML code-->
        <script src="js1.js"></script>
        <script src="js2.js"></script>
    </body>
</html>

这样，在下载、解析、执行JavaScript文件前，HTML页面就已经呈现了，用户也会明显感觉到“网页打开得很快”。

2.2 嵌入代码和外部文件

使用<script>元素有两种方式：

1.页面嵌入js代码：在<script>和</script>中插入JavaScript代码：

<script>
    alert("hello world.");
</script>

2.引用js外部文件：使用src属性指定外部js文件链接，将外部文件加载进页面：

<script src="js1.js"></script>

无论是哪种方式，在解析JavaScript的过程中，页面的处理都处于暂时停止状态。虽然两种方式都是合法的，但建议将JavaScript代码写到外部js文件中。不过，没有硬性规定一定要这么做，一般选择引用外部文件的原因有：

可维护性
可缓存
适应未来

2.3 <noscript>元素

早期浏览器都面临一个特殊的问题，那就是当浏览器不支持JavaScript时页面该如何友好地反馈给用户。这个问题的解决方法是：创造一个<noscript>元素，在浏览器不支持JavaScript时显示替代的内容：

<!DOCTYPE HTML>
<html>
    <head>
        <title>This is title</title>
    </head>
    <body>
        <noscript>This page requires browser support  JavaScript or turn it enabled </noscript>
        <!--HTML code-->
        <script src="js1.js"></script>
        <script src="js2.js"></script>
    </body>
</html>

当浏览器不支持脚本或脚本被禁用时，<noscript>元素代码将执行。