从零开始学习JavaScript --JS的引入方式

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样式