js的引入方式有三种,分别是:行内样式,内联样式 ,外联样式
行内样式:行内样式 写在元素后
<input type="button" value="你好" onclick= "alert('世界')" >
<button onclick="JavaScript:alert('弹窗')">按钮</button>
<a href="JavaScript:alert('弹窗')">a标签</a>
行内样式特点:
1.需要对某一个元素进行操作,可以将代码写在HTML标签的事件属性中,例如:onclick(点击事件)
2.在一行代码中,可能存在多个需要引号包裹的代码,这时候需要用不同的引号,可用的引号有:双引号 " " ,单引号 ' ' , 反引号 ` `
3.因为引号的问题,多层嵌套时,非常容易弄混,导致代码报错
4. 可读性差,在htmI中编写JS大量代码时,不方便程序员阅读导致后期难以维护
内联样式:script标签中
<script>
// alert弹窗会阻塞代码执行 显示在最上层 点击确定框消失,才能有其它操作 用于BOM中
alert("弹框");
// console.log 浏览器右键检查 控制台中打印 常用于代码调试(ES常用代码)
console.log("打印");
</script>
内联样式特点:
1.js代码与html代码脱离,常用于教学时使用。
2.可放在head标签 也可放在body标签中,但是建议放在body末尾,代码的运行从上到下,如果js代码放在上方,js代码量太大,会阻塞html和css代码运行。
外联样式:script src属性中引入外部js script标签中不允许写其它代码
<script src="./.外联.js"></script>
外联js:创建文件夹以 .js结尾,并直接写入需要的js代码
console.log('外联样式');
外联特点:
1.利于HTML页面代码结构化,JS代码独立到HTML页面之外,方便文件级别的复用,适用于JS代码量比较大的情况
2.引用外部JS文件的script标签中间不可以写代码
3.src的关联外部文件 如果在页面内用src不给值,js代码不会执行
4. script 可在同一个页面引入多个js样式