今天主要是学习如何使用JS，第一个就是先是使用JS输出"Hello world"
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta http-equiv = "content-type" content = "text/html; charset=UTF-8">
5 <title>Document</title>
6 <script type = "text/javascript">
7 document.write("Hello wlord");/*输出Hello wrold*/
8 document.body.bgColor = "red";/*body背景颜色*/
9 </script>
10 </head>
11 <body>
12
13 </body>
14 </html>
效果图如下：
===============================================================================
第二个课堂练习就是使用JS输出一个表格，源码如下：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta http-equiv = "content-type" content = "text/html; charset=UTF-8">
5 <title>Document</title>
6 <title>Document</title>
7 <script type = "text/javascript">
8 window.alert(1+1);/*使用弹窗输出*/
9 document.write("<h2>个人信息</h2>");
10 document.write("<ol>");
11 document.write("<li>姓名：叭叭叭</li>");
12 document.write("<li>性别：男</li>");
13 document.write("<li>年龄：38</li>");
14 document.write("<li>职业：演员</li>");
15 document.write("<li>经纪人：隔壁老宋</li>");
16 document.write("</ol>");
17 </script>
18 </head>
19 <body>
20 </body>
21 </html>
效果如下：
先有个弹窗：
当弹窗关闭后：
==========================================================================
第三个课堂练习就是在上个练习的基础上进行更详细的书写：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="Generator" content="EditPlus?">
6 <meta name="Author" content="">
7 <meta name="Keywords" content="">
8 <meta name="Description" content="">
9 <title>Document</title>
10 <script type = "text/javascript">
11 var user_name = "Ld";
12 var age = 38;
13 var job = "演员";
14 var jjr = "隔壁老宋";
15
16 document.write("<ol>");
17 document.write("<h2>");
18 document.write(user_name);
19 document.write("的个人信息</h2>");
20 document.write("<li>姓名：");
21 document.write(user_name);
22 document.write("</li>");
23 document.write("<li>年龄：");
24 document.write(age);
25 document.write("</li>");
26 document.write("<li>职业：");
27 document.write(job);
28 document.write("</li>");
29 document.write("<li>经纪人：");
30 document.write(jjr);
31 document.write("</li>");
32 document.write("</ol>");
33 </script>
34 </head>
35 <body>
36
37 </body>
38 </html>
效果如图：
=====================================================================
再下个练习就是对代码进行优化，使用+号将字符串链接起来：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="Generator" content="EditPlus?">
6 <meta name="Author" content="">
7 <meta name="Keywords" content="">
8 <meta name="Description" content="">
9 <title>Document</title>
10 <script type = "text/javascript">
11 var user_name = "LD";
12 var age = 38;
13 var job_= "演员";
14
15 document.write("<h2>"+user_name+"的个人信息</h2>");
16 document.write("<ol>");
17 document.write("<li>姓名"+user_name+"</li>");
18 document.write("<li>年龄"+age+"</li>");
19 document.write("<li>工作"+job+"</li>");
20 document.write("</ol>");
21 </script>
22 </head>
23 <body>
24
25 </body>
26 </html>
效果如图：
=======================================================
下一个练习是关于事件的
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="Generator" content="EditPlus?">
6 <meta name="Author" content="">
7 <meta name="Keywords" content="">
8 <meta name="Description" content="">
9 <title>Document</title>
10 </head>
11 <body>
12 <img src = "Images/jd1.png" id = "Images_01"> <!--显示图片-->
13 <script type = "text/javascript">
14 var imgObj = document.getElementById("Images_01"); /*获取图片*/
15 imgObj.onmouseover = function(){ /*调用鼠标经过时的事件方法*/
16 imgObj.src = "Images/jd2.png";
17 }
18 imgObj.onmouseout = function(){ /*调用鼠标离开时的事件方法*/
19 imgObj.src = "Images/jd1.png";
20 }
21 </script>
22 </body>
23 </html>
鼠标未经过时：
鼠标经过后：
时间： 2024-10-29 19:05:47