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.案例
用脚本来实现响应式布局:
代码好难,再等一等。。。。
另外,对于跨域的知识点还是不太明白,后边要仔细看。