HTML第七天学习笔记
今天主要是学习如何使用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>
鼠标未经过时：
鼠标经过后：
知行合一
