如何将JavaScript放在HTML文档中?

2021年3月20日14:06:54 发表评论 783 次浏览

body或头部的JavaScript:脚本可以放在HTML页面的正文或头部部分中, 也可以放在正文中。

头中的JavaScript:JavaScript函数放置在HTML页面的顶部, 单击按钮时将调用该函数。

例子:

<!DOCTYPE html>
< html >
    < head >
       < script >
          function gfg() {
            document.getElementById("demo").innerHTML = "Geeks For Geeks";
          }
       </ script >
    </ head >
    < body >
       < h2 >JavaScript in Head</ h2 >
       < p id = "demo" style = "color:green;" >lsbin.</ p >
       < button type = "button" onclick = "gfg()" >click it</ button >
    </ body >
</ html >

输出如下:

在点击按钮之前

将JavaScript放在HTML文档中的何处?1

单击按钮后

将JavaScript放在HTML文档中的何处?2

正文中的JavaScript:

JavaScript函数放置在HTML页面的主体部分内, 并且在单击按钮时调用该函数。

例子:

<!DOCTYPE html>
< html >
    < center >
       < body >
          < h2 >JavaScript in Body</ h2 >
          < p id = "demo" >lsbin.</ p >
          < button type = "button" onclick = "gfg()" >Try it</ button >
          < script >
             function gfg() {
               document.getElementById("demo").innerHTML = "Geeks For Geeks";
             }
          </ script >
       </ body >
    </ center >
</ html >

输出如下:

在点击按钮之前

将JavaScript放在HTML文档中的何处?3

点击按钮后

将JavaScript放在HTML文档中的何处?4

外部JavaScript:

JavaScript也可以用作外部文件。 JavaScript文件的文件扩展名为.js。要使用外部脚本, 请将脚本文件的名称放在脚本标记的src属性中。外部脚本不能包含脚本标签。

例子:

<!DOCTYPE html>
< html >
    < center >
    < body >
       < h2 >External JavaScript</ h2 >
       < p id = "demo" >Geeks For Geeks.</ p >
       < button type = "button" onclick = "myFunction()" >Try it</ button >
       < script src = "myScript.js" ></ script >
    </ body >
    < center >
</ html >

单击之前的输出:

将JavaScript放在HTML文档中的何处?5

单击后输出:

将JavaScript放在HTML文档中的何处?6

外部JavaScript的优势:

  • 缓存的JavaScript文件可以加快页面加载速度
  • 它使JavaScript和HTML更易于阅读和维护
  • 它将HTML和JavaScript代码分开

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: