html脚本如插入,08 【案例】HTML :插入脚本

1.脚本作用

实现交互效果

2.插入脚本的三种方式

行内脚本(Inline Script):最常用的是使用事件触发on[EventName]

Hello world!

或者是javascript伪协议

hello

缺点：html中会加入大量的代码，不利于以后的维护

内嵌脚本(Internal Script):script元素

var text="Hello World!";

document.write('

'+text+'

');

外联脚本(External Script):也是script元素，但是先把脚本放在一个js文件中，再通过src属性链接进来

3.内嵌脚本

包含内容类型和内容块

内嵌脚本

Classic Script：

type属性默认值是：text/javascript

必须填写合法的Javascript脚本类型(此处省略)

建议不写type

内嵌的时候要特别注意，内容块不要包含script的闭合标签，可以通过修改代码的方式来避免浏览器解析错误：

document.write('');

document.write('

document.write('');

type类型还可以设置成数据块， 这样浏览器不做脚本解析

hello world!!

Module Script：

ES6中加入了特别重要的特性：模块化，module，可以动态的载入模块依赖的其他模块文件

比如api.js中定义了test和greet函数

然后在脚本中依赖api.js文件，这样浏览器解析到这一句的时候就会自动加载api.js中的内容

import { test, greet } from "./api.js"

4.外联脚本

外联脚本的方式最为常用：

传统脚本

模块化脚本

其中比较重要的属性是：async、defer(控制脚本的执行方式)

这是布尔属性，设置之后都可以并行加载脚本，区别是

async是立即执行，defer是HTML解析完之后执行，如果两个属性同时设置，优先async规则

常规方式

defer方式

async方式

crossorigin:控制脚本跨域的时候的加载特性，传统脚本和模块脚本会有比较大的区别。

Class Script：

-是否走CORS流程

-是否暴露异常的详细信息

-控制脚本请求时是否携带用户授信信息，如cookie等

暴露异常的对比

Module Script：

-控制脚本请求时是否携带用户授信信息，如cookie等

(模块化脚本如果遇到跨域，是必须走CORS流程的)

设置anonymous值，可以不带cookie，建议书写：crossorigin="anonymous"

设置use-credentials，带cookie，书写：

crossorigin="use-credentials"

5.案例

用脚本来实现响应式布局：

代码好难，再等一等。。。。

另外，对于跨域的知识点还是不太明白，后边要仔细看。