JavaScript入门学习笔记

JavaScript代码写在标签<script></script>之间。

Html文档中可以放入不限数量的脚本；脚本可位于<body>或<head>部分中（可同时存在），通常做法是把函数放入<head>部分或者页面底部。

<body>中的JavaScript：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         
 9     <script>
10         document.write("<h1>这是一级标题</h1>");
11         document.write("<p>This is a message!</p>");
12     </script>
13     
14     
15     </body>
16 </html>

demo

本例是在页面加载时向Html的<body>写文本。

<head>中的JavaScript函数：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         
 7         <script>
 8             <!--函数体放在head部分-->
 9         function myFunction()
10         {
11             document.getElementById("demo").innerHtml = "我的第一个JavaScript函数";
12         }
13         </script>
14     </head>
15     <body>
16         <h1>my web page</h1>
17         <p id="demo">This is a paragraph!</p>
18         <!--在body中使用button的onclick实事件调用函数-->
19         <button type="button" onclick="myFunction()">Try it!</button>
20     </body>
21 </html>

demo

<body>中的JavaScript函数：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <h1>my web page</h1>
 9         <p id="demo">This is a paragraph!</p>
10         <!--在body中使用button的onclick实事件调用函数-->
11         <button type="button" onclick="myFunction()">Try it!</button>
12         
13         <script>
14             /*
15             *函数体放在body部分
16             *将JavaScript代码放在页面底部，确保元素<p>创建完成后再执行脚本
17             */
18             
19         function myFunction()
20         {
21             document.getElementById("demo").innerHtml = "我的第一个JavaScript函数";
22         }
23         </script>
24         
25     </body>
26 </html>

demo

外部的JavaScript：

外部文件通常包含被多个网页使用的代码；外部文件拓展名为.js；如需使用外部文件，html文件中的<script>标签的src属性中设置该.js文件。

JavaScript入门学习笔记

猜你喜欢