JavaScript-HTML中的JavaScript

每天内卷一点点

已于 2022-03-22 23:42:22 修改

阅读量1.4k

点赞数 8

分类专栏： JavaScript基础文章标签： javascript

于 2022-03-15 23:45:32 首次发布

本文链接：https://blog.csdn.net/weixin_41071974/article/details/123513686

版权

JavaScript基础专栏收录该内容

35 篇文章 3 订阅

订阅专栏

一、`<script>` 元素

1.1 `<script>`元素下有8个属性：

async ：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或者等待其他脚本加载。异步脚本不应该在加载期间修改DOM（只对外部脚本文件生效），但不能保证其在页面中出现的顺序执行
charset ：可选。使用src属性指定的代码字符集，大多数浏览器不在乎它的值
crossorigin ：可选。配置相关请求的CORS（跨域资源共享）设置。默认不使用CORS。corossorigin="anonymous"配置文件请求不必设置凭据标志。corossorigin="use-crednetials"设置凭据标志
defer：可选。延迟脚本，脚本可延迟到文档完全解析和显示后执行。

<head>
    ...
    <script defer src="./demo_1.js"></script>
    <script defer src="./demo_2.js"></script>
</head>

第一个推迟的脚本会在第二个推迟的脚本之前执行

integrity ：可选。允许对接收到的资源的签名与指定的加密签名验证资源完整性
language：废弃。
src：可选。表示包含要执行的代码的外部文件(文件路径url)
type：可选。可代替language，表示代码块中脚本语言的内容类型（也称MIME类型），按照惯例，这个值始终是“text/javascript"。

1.2 其他

在此情况下进行控制台打印，必须使用转义字符 “ \ ”

<script>
    function say() {
       console.log('<\/script>');
    }
    say()
</script>

在XHTML文档中，可以忽略结束标签

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

在使用src属性后，就不能在标签内部再包含其他JavaScript代码。否则，浏览器只会加载外部脚本，从而忽略行内代码。
在没有使用defer,saync属性时，浏览器会按<script>在页面中的先后顺序依次解析，第一个解析完后，第二个才会被解析。
对不推迟执行的脚本，必须解释完位于js标签内的的全部代码，才能继续渲染页面
在解释外部js文件时，页面会被阻塞（阻塞时间包含文件下载时间）
当放在head中时，必须等JavaScript都被下载、解析，执行完后才渲染页面，为解决这个问题，应该把脚本放在<body>元素中的页面内容后面。

<body>
	<!-- 以上是内容 -->
	<script src="./demo_1.js"></script>
</body>

可跨域取得相应资源，不受同源策略限制(只支持get，不支持post)。

二、动态加载脚本

let script =document.createElemnet('script'）;
script.src='demo_1.js';
script.async = false;
document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载器是不可见的，严重影响性能。
要想让预加载器知道动态请求文件的存在，可以在文档头部显示声明他们：
<link rel="preload" href="demo_1.js">

三、在XHTML中的用法

必须指定Type值为 text/javascript
XHTML模式会在页面的MIME类型被指定为"application/xhtml+xml"时触发,并不是所有浏览器都支持这种方式。
a < b 中的 “ < ” 在XHTML中被当作新标签解析，但作为标签，< 后不能跟空格，所以要使用&lt 替换 <
用CData片段包含JavaScript,包含不需要解析的任意个数的文本内容

<script type="text/javascript">
<![CDATA[

]]></script>

在不支持CDATA的浏览器中的写法

<script type="text/javascript">
//<![CDATA[

//]]></script>

四、文档模式

通过文档类型 doctype切换实现，主要体现在css渲染方面，但对js也会有一些副作用

混杂模式：省略doctype声明未发现文档类型声明，默认开启混杂模式
标准模式

<!DOCTYPE html>

五、`<noscript>`元素

<noscript>元素可以包含任何可以出现在<body>中的HTML元素，<script>除外。在以下两种情况下，浏览器将显示包含在<noscript>中的内容：

浏览器不支持脚本
浏览器对脚本的支持关闭

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script defer src="./demo_1.js"></script>
</head>
<body>
	<noscript>
    	<p>感谢阅读</p>
	</noscript>
</body>
</html>

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本，那用户就不会看到它

六、JavaScript 代码的书写位置

JavaScript有3种书写位置，分别为行内、内嵌和外部

6.1 行内式

<input type="button" value="点击" onclick="alert('Hello World')" />

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

6.2 内嵌式

<script>
    alert('Hello  World!');
</script>

可以将多行JS代码写到 <script> 标签中

6.3 外部JS文件

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

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况

七、JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器