实现一些交互效果, 数据交互的效果
大致插入的方式有三种:
第一种: 行内脚本
最常见的是方式是使用事件的方式触发,
1. 事件触发, 例如:<input type="button" onclick="window.alert("hello word!")">;
2.javascript 伪协议, 例如:<a href="javascript:alert('hello world!');return false">hello</a>
第二种: 内嵌脚本
这种主要通过 script 方式内嵌, 例如
- <script>
- var text="hello world!"
- document.write('<p>'+text+'</p>');
- </script>
内嵌注意:
- <script>
- var text="hello world!"
- document.write('<p>'+text+'</p>');
- document.write('<script src='as.js'></script>'); // 这种写法是错误的, 因为这一行包含了一个 </script > 标签, 浏览器会默认认为这是一个闭合标签, 正确写法应该是 document.write('<script src='as.js'></scr'+'ipt>'); 使用字符串的方式拼接, 或者: document.write('<script src='as.js'></script>');, 将 < 号使用实体字符转义
- </script>
第三种: 外联脚本
<script > 元素实现, 需要将 js 代码放在 js 文件中, 通过 src 这个属性引用进来, type 的值默认 text/javascript, 实际应用中不建议写
在 ES6 中加入了一个重要的特性叫做, module(模块化), 载入其他模块的方式 (es6 为例)
- <script type="module">
- inport{test,greet} from "../js/as.js"
- </script>
- export function test(){
- }
- export function greet(){
- }
我们把 type 类型为 javascript 的称为 classic scripts, 把 type 类型为 module 成为 module scripts
脚本类型 (通常不写) 跨域文本处理 执行脚本方式
<script src="as.js" type="text/javascript" charst="UTF-8" crossorigin="anonymous" async defer></script>
脚本引用地址 编码方式 (可以不写)
脚本类型 跨域文本处理 执行脚本方式
<script src="as.js" type="module" crossorigin="anonymous" async></script>
脚本引用地址
async/defer 执行方式
这两个属性都是布尔属性, 要么 true, 要么 false,
async: 立即执行
defer:html 文件解析完才可以执行
假如同时存在, 优先 async 规则
课后练习
使用 JS 的方式, 实现响应式
提示: window.onresize,window.clientWidth,element.className
方法一:
- <script>
- window.onresize=function () {
- //alert(width());
- if (width()>=700){
- document.getElementById("p1").className="p1";
- document.getElementById("p2").className="p2";
- }
- else if(width()<700){
- document.getElementById("p1").className="p3";
- document.getElementById("p2").className="p4";
- }
- };
- function width() {
- var widthMax=document.body.clientWidth;
- return widthMax;
- }
- </script>
解释: 通过 window.onresize 方法实时判断窗口是否有改变, 然后通过 document.body.clientWidth 方法获得窗口的宽度, 根据不同的宽度调整样式;
但是这里遇到几个问题:(1)onresize 多次触发的问题, 当改变窗口大小时, onresize 被触发了多次;(2) 这个调整比较麻烦, 假如元素过多时, 调整很麻烦;
因此, 修改一下要求, 改成: 还是响应式, 但是根据窗口的大小, 动态创建 CSS 文件引入, 已达到响应的效果
来源: https://www.2cto.com/kf/201806/753929.html