今天主要是学习如何使用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>

鼠标未经过时：

鼠标经过后：

HTML第七天学习笔记的更多相关文章

  1. 《Linux内核分析》第七周学习笔记

    <Linux内核分析>第七周学习笔记 可执行程序的装载 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/co ...

  2. 20165326 java第七周学习笔记

    第七周学习笔记 MySQL(数据管理系统)学习 知识点总结: 不能通过关闭MySQL数据库服务器所占用的命令行窗口来关闭MySQL数据库. 如果MySQL服务器和MySQL管理工具驻留在同一台计算机上 ...

  3. Linux内核分析第七周学习笔记——Linux内核如何装载和启动一个可执行程序

    Linux内核分析第七周学习笔记--Linux内核如何装载和启动一个可执行程序 zl + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study. ...

  4. Go语言核心36讲（Go语言实战与应用七）--学习笔记

    29 | 原子操作(上) 我们在前两篇文章中讨论了互斥锁.读写锁以及基于它们的条件变量,先来总结一下. 互斥锁是一个很有用的同步工具,它可以保证每一时刻进入临界区的 goroutine 只有一个.读写 ...

  5. Linux内核分析——第七周学习笔记20135308

    第七周 可执行程序的装载 一.预处理.编译.链接和目标文件的格式 1.可执行程序是怎么来的 C代码—>预处理—>汇编代码—>目标代码—>可执行文件 .asm汇编代码 .o目标码 ...

  6. 20135320赵瀚青LINUX第七周学习笔记

    赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 概述 本周学习的内容主要是讨 ...

  7. 20179223《Linux内核原理与分析》第七周学习笔记

    视频知识学习 1.fork()函数被调用一次,但返回两次: 2.Linux通过复制父进程来创建一个子进程,通过调用fork来实现: 3.Linux会为每个子进程动态的分配一个task_struct结构 ...

  8. c#高级编程第七版 学习笔记 第一章 .NET体系结构

    第一章      .NET体系结构 本章内容: 编译和运行面向.NET的代码 Microsoft中间语言(Microsoft Intermediate Language,MSIL或简称IL)的优点 值 ...

  9. 《Metasploit魔鬼训练营》第七章学习笔记

    P314 木马程序的制作 msfpayload和msfencoder已被msfvenom取代.使用msfvenom -h查看具体用法.以下网址也有相关教程: https://github.com/ra ...

随机推荐

  1. Karel运行环境配置

    1.下载 见http://wenku.baidu.com/view/24762ced998fcc22bcd10d5e.html 2.界面空白问题 问题:运行Karel后,发现整个界面空白一片,没有任何 ...

  2. propertyGrid控件 z

    1.如果属性是enum类型,那么自然就是下拉的. 2.如果是你自定义的下拉数据,那么需要用到转换属性标签TypeConverter 参见: http://blog.csdn.net/luyifeini ...

  3. linux中ls命令详解 (转)

    -a -- 全部(all).列举目录中的全部文件,包括隐藏文件(.filename).位于这个列表的起首处的 .. 和 . 依次是指父目录和你的当前目录.      -l -- 长(long).列举目 ...

  4. mac 版本的 Google 网盘 走代理

    开启surge Mac版 设置系统代理 127.0.0.1,192.168.0.0/16,10.0.0.0/8,172.16.0.0/12,localhost,*.local 理论上可以使用cow来代 ...

  5. 大数据处理-bitmap是个神马东西

    1. Bit Map算法简介 所谓的Bit-map就是用一个bit位来标记某个元素对应的Value, 而Key即是该元素.由于采用了Bit为单位来存储数据,因此在存储空间方面,可以大大节省. 2. B ...

  6. 三年程序学习之二：（对web初认识）

    接着上一篇讲,之后第二天我就来公司上班了,主要是前端,CSS+DIV,table,网站维护之类的,这样的日子过了将近3个星期,一直没什么进展,自己也学不到什么技术,不过我觉得CSS+DIV我算是基础的 ...

  7. 网易实习笔试真题C/C++

    刚做的时候根本就没有想到解题思路,刚好看到了别人的思路,自己写了一下.里面对unordered_map及vector二维数组的建立很灵活,另外区别了一下map,unordered_map,hash_m ...

  8. PHP中mysql_affected_rows()和mysql_num_rows()区别

    mysql_affected_rows -- 取得前一次 MySQL 操作所影响的记录行数mysql_num_rows -- 函数返回结果集中行的数目. config.php <?php hea ...

  9. Eclipse使用技巧总结

    Eclipse设置工作空间的字符编码: 打开eclipse开发界面,依次点击Window->Preferences->General->Workspace 修改Text file e ...

  10. 25个完美的Opencart模板，让顾客无法抗拒！

    在线开展业务是当前的流行趋势.OpenCart(点击这里下载),作为一个流行的开源PHP电子商务系统,获取OpenCart模板不在像以前那么困难了.OpenCart容易安装,模板支持良好,扩展功能包十 ...