Web前端开发简明教程
首页 > Web前端开发简明教程 > 12.1 JavaScript使用

12.1 JavaScript使用

入门君 2020-10-12 17:36:01 114 0

编辑 收藏

12.1 JavaScript使用

在网页上插入JavaScript脚本时,脚本必须放在<script>标签中。<script>标签可以位于<body>标签和<head>标签中,一般在<head>标签中的脚本是JavaScript函数。下面的代码通过在<body>标签中嵌入JavaScript代码实现向网页输出字符串:

<body>          <p>JavaScript能够直接写入HTML输出流中:</p>          <script>              document.write("<h1>This is a heading</h1>");              document.write("<p>This is a paragraph.</p>");          </script>          <p>您只能在HTML输出流中使用 <strong>document.write</strong>。如果您在文  档已加载后使用它(比如在函数中),会覆盖整个文档。</p>      </body>

此代码段在浏览器中的显示效果如图12-1所示。

epub_22651130_185.jpg  

图12-1 在<body>标签中嵌入JavaScript代码效果

也可以在<head>标签中定义函数,然后调用定义的函数:

<! DOCTYPE html>      <html>      <head>      <script>        function myFunction()        {            document.getElementById("demo").innerHTML="My  First  JavaScript  Function";        }      </script>      </head>      <body>        <h1>My Web Page</h1>        <p id="demo">A Paragraph.</p>        <button  type="button"  onclick="myFunction()">单击这里</button>      </body>      </html>

上面的代码在<head>标签中定义了函数“myFunction”,在网页中插入一个按钮,单击按钮时调用函数“myFunction”。代码段在浏览器中的显示效果如图12-2所示,其中图12-2(a)为单击按钮前的显示效果,图12-2(b)为单击按钮后的显示效果。

epub_22651130_186.jpg  

图12-2 调用<head>标签中定义函数的浏览效果

也可以把脚本保存到外部文件中,外部JavaScript文件的扩展名是“.js”。在网页中要使用外部js文件,只需在<head>标签中设置<script>标签的“src”属性,设有外部js文件“myScript.js”,文件中的内容为:

function myFunction()      {                document.getElementById("demo").innerHTML="我的第一个JavaScript函数";       }

“myScript.js”位于“js”文件夹。

下面的代码演示了网页怎样引用外部js文件并调用其中的函数:

<! DOCTYPE html>      <html>      <head>      <script src="js/myScript.js"></script>      </head>      <body>        <h1>My Web Page</h1>        <p id="demo">A Paragraph.</p>        <button type="button" onclick="myFunction()">单击这里</button>      </body>      </html>

单击按钮时,将调用外部js文件的“myFunction”函数,在网页上的显示效果如图12-2所示。

TAGS:前端教程

取消回复欢迎 发表评论: