当前位置:   article > 正文

javaEE002.03 js的三种嵌入方式_js 方法嵌入方法

js 方法嵌入方法

系列文章目录

前言

前面我们讲了,css的三种嵌入方式,可以看前面的文章
https://blog.csdn.net/qq_41753340/article/details/110159132

css嵌入方式
* 行内:style属性中
* 内部:style标签中
* 外部:xxx.css文件中(建议使用)
那么js的嵌入方式是不是一样的呢?

一、 js的三种嵌入方式

js与css的三种嵌入方式差不多,也分行内、内部和外部

1、行内:书写在事件属性中,eg:

行内js,写在标签事件的属性中,结构和行为相耦合,不建议使用
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2、 内部: 书写在

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

为什么获取不到btnId呢?
跟之前写的有什么不一样的地方
没有window.onload,等待页面加载完毕
怎么解决?
想办法让脚本代码html代码先执行,js代码后执行

解决办法1:把js代码放到最后面执行

在这里插入图片描述

在这里插入图片描述
这种就叫做内部的就是代码
解决办法2:使用window.onload 完美解决这个问题
js代码写在最后面能够解决这个问题,但是不是那么符合操作习惯,如果要完还是要使用window.onload(当然想少写一行代码,用第一种方式也是可以的)
在这里插入图片描述
window.onload 意思是 当前文档完全加载后执行,完全指的是包含音频、视频等

window.onload 在实际应用中不常见,因为如果有一部电影,2个小时,也要等它播放完毕之后才会执行
在这里插入图片描述
在这里插入图片描述

3、外部:书写在xxx.js文件中

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
剪切粘贴到.js文件中
在这里插入图片描述

也要使用src
在这里插入图片描述
如上图,需要注意,不能再写JavaScript代码,就算你写了,也不会执行,所以一定要注意
因为此时这个表情已经不是让你写JavaScript代码的了,它的功能以及变成了让你引入外部文件了
如果你非要写,有什么办法呢,很简单,再写一个script标签

在这里插入图片描述
需要注意的是一个页面中 window.onload 只能写一次
在这里插入图片描述
在这里插入图片描述
如上,demo.js里面的效果就没有了

优先级:就近原则

总结

1、
js的三种嵌入方式:

  • 行内:书写在事件属性中,eg: < input οnclick=“alert()”>
  • 内部: 书写在 < script > 标签中
  • 外部:书写在xxx.js文件中
    优先级:就近原则

2、一个页面中 window.onload 只能写一次

3、如果script标签里面使用了 src属性,就不能继续再这个标签里面写js代码了

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/537141
推荐阅读
相关标签
  

闽ICP备14008679号