1.脚本作用
实现交互效果
2.插入脚本的三种方式
行内脚本（Inline Script）:最常用的是使用事件触发on[EventName]
<input type="button" onclick="window.alert("hello,world!")">
<span onmouseover="this.style.backgroundColor='magenta'" onmouseout="this.style.backgroundColor='#00f'" onclick="this.style.visibility='hidden'">Hello world!</span>
或者是javascript伪协议
<a href="javascript:alert('hello world!');return false" >hello</a>
<iframe src="javascript:document.write('<p>Hello world！</p>');"></iframe>
缺点：html中会加入大量的代码，不利于以后的维护
内嵌脚本（Internal Script）:script元素
<script>
var text="Hello World!";
document.write('<p>'+text+'</p>');
</script>
外联脚本（External Script）:也是script元素，但是先把脚本放在一个js文件中，再通过src属性链接进来
<script src="/path/to/demo.js" ></script>
3.内嵌脚本
包含内容类型和内容块
内嵌脚本
Classic Script：
type属性默认值是：text/javascript
必须填写合法的Javascript脚本类型（此处省略）
建议不写type
内嵌的时候要特别注意，内容块不要包含script的闭合标签，可以通过修改代码的方式来避免浏览器解析错误：
<script>
document.write('<script src="app.js"></script>');
document.write('<script src="app.js"></sc'+'ript>');
document.write('<script src="app.js"></script>');
</script>
type类型还可以设置成数据块， 这样浏览器不做脚本解析
<script type="text/plain">
hello world!!
</script>
Module Script：
ES6中加入了特别重要的特性：模块化，module，可以动态的载入模块依赖的其他模块文件
比如api.js中定义了test和greet函数
然后在脚本中依赖api.js文件，这样浏览器解析到这一句的时候就会自动加载api.js中的内容
<script>
import { test, greet } from "./api.js"
</script>
4.外联脚本
外联脚本的方式最为常用：
<script src="app.js" type="text/javascript" charset="UTF-8" crossorign="anoymous" async defer></script>
传统脚本
模块化脚本
其中比较重要的属性是：async、defer（控制脚本的执行方式）
这是布尔属性，设置之后都可以并行加载脚本，区别是
async是立即执行，defer是HTML解析完之后执行，如果两个属性同时设置，优先async规则
常规方式
<script defer>:
defer方式
<script async>:
async方式
crossorigin:控制脚本跨域的时候的加载特性，传统脚本和模块脚本会有比较大的区别。
Class Script：
-是否走CORS流程
-是否暴露异常的详细信息
-控制脚本请求时是否携带用户授信信息，如cookie等
暴露异常的对比
Module Script：
-控制脚本请求时是否携带用户授信信息，如cookie等
（模块化脚本如果遇到跨域，是必须走CORS流程的）
设置anonymous值，可以不带cookie，建议书写：crossorigin="anonymous"
设置use-credentials，带cookie，书写：
crossorigin="use-credentials"
5.案例
用脚本来实现响应式布局：
代码好难，再等一等。。。。
另外，对于跨域的知识点还是不太明白，后边要仔细看。
网友评论