asp执行js脚本_JS学习笔记1-CSDN博客

本文链接：https://blog.csdn.net/weixin_42401178/article/details/112078975

1.在HTML中使用JavaScript

1.1<script>元素

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

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

language：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript、JavaScript1.2或VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。

src：可选。表示包含要执行代码的外部文件。

type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。虽然text/javascript和text/ecmascript都已经不被推荐使用，但人们一直以来使用的都还是text/javascript。实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x–javascript，但在type中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值：application/javascript和application/ecmascript考虑到约定俗成和最大限度的浏览器兼容性，目前type属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript

使用<script>的两种方法：直接在网页嵌入js代码，包含外部文件。

使用第一种方法时只需要为<script>指定type属性

<script type = "text/javascript">
    function sayHi(){
        alert("Hi!");
    }
</script>

JS代码从上到下解析，在解析完之前页面元素不会被加载或显示。

使用这种方法不要在代码中出现</script>不然浏览器会认为是结束标志。如：

<script type = "text/javascript">
    function sayScript(){
        alert("</script>");
    }
</script>

可以通过转义字符解决这个问题

 <script type = "text/javascript">    
     function sayScript(){        
         alert("</script>");    
    }
</script>

如果是要包含外部js文件，那么src属性就是必须的，其指向包含的js文件。例如

<script type = "text/javascript" src = "sample.js"></scripts>

使用带有scr属性的<script>标签会忽略标签内嵌入的代码块。

src可以指向外部域的url但要保证其安全性再这么做。

<script type = "text/javascript" src = "http://www.somewhere.com/afile.js"></script>

只要不存在defer和async属性，js文件总是从上到下解析，第一个解析完才是第二个，第三个...

2.1.1标签的位置

按照传统所有的<script>元素应该包含在<head>元素中，例如：

<!DOCTYPE html> 
<html>   
    <head>     
        <title>Example HTML Page</title>     
        <script type="text/javascript" src="example1.js"></script>     
        <script type="text/javascript" src="example2.js"></script>   
    </head>   
    <body>     
        <!-- 这里放内容 -->   
    </body> 
</html

这种做法的目的是是把所有的外部文件都放在一个位置。可是只有所有的js文件都解析完才会解析页面，如果页面的js比较多就会出现明显的延迟，页面是会出现一片空白的情况。为了避免这个问题，现代的web程序一般把js文件的引入放在<body>标签内页面内容之后。

<!DOCTYPE html> 
<html>   
    <head>     
        <title>Example HTML Page</title>     
    </head>   
    <body>     
        <!-- 这里放内容 -->   
        <script type="text/javascript" src="example1.js"></script>     
        <script type="text/javascript" src="example2.js"></script>   
    </body> 
</html>

1.1.2延迟脚本

HTML 4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。所有延迟脚本按顺序执行。

1.1.3异步脚本

async只适用于外部文件。async用于告诉浏览器立即下载文件，但与defer不同的是，前者不能保证所有的以这个标记的文件按先后顺序执行，所以保证他们互不包含很重要。

1.2嵌入代码与包含文件

在HTML中认为尽可能使用外部文件来包含js代码。易于维护，可以缓存，并且在XHTML中语法相同。