如何将JavaScript放在HTML文档中？

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

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：

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：

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 >

单击之前的输出：