C语言基础学习PYTHON——基础学习D16

20180927内容纲要：

　　1、JavaScript介绍

　　2、JavaScript功能介绍

　　3、JavaScript变量

　　4、Dom操作

　　　　a、获取标签

　　　　b、标签操作

　　　　c、创建标签

　　　　d、提交表单

　　　　e、事件操作

　　　　f、事件的捕捉与冒泡

　　5、js语法分析

　　6、小结

　　7、练习

1 JavaScript介绍

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。

很多人看到 Java 和 JavaScript 都有“Java”四个字，就以为它们是同一样东西，连我自己当初也是这样。事实上，JAVA语言和JavaScript语言是相关的，但是它们的联系并非你想像的那样紧密。首先Java语言是SUN Microsystems公司的产品，而JavaScript是Netscape公司的产品。

其次它们在功能上也有些差异：

Java在客户端的运行的应用程序叫做 Java Applet，是嵌在网页中，而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的，一个 Applet 文件（.class）用 Notepad 打开阅读，根本不能理解。Java Applet 的功能很强大，可以访问 http、ftp等协议，甚至可以在电脑上种病毒（已有先例了）。

相比之下，JavaScript 的能力就比较小了。JavaScript 是一种“脚本”（“Script”），它直接把代码写到 HTML 文档中，浏览器读取它们的时候才进行编译、执行，所以能查看 HTML 源文件就能查看JavaScript 源代码。JavaScript 没有独立的运行窗口，浏览器当前窗口就是它的运行窗口。它们的相同点，我想只有同是以 Java 作编程语言一点了。

2 JavaScript功能介绍

JavaScript是一门面向对象的动态语言，他一般用来处理以下任务：

  1. 修饰网页

    • 生成HTML和CSS
    • 生成动态HTML内容
    • 生成一些特效
  2. 提供用户交互接口
    • 生成用户交互组件
    • 验证用户输入
    • 自动填充表单
  3. 能够读取本地或者远程数据的前端应用程序，例如http://web-engineering.info/JsFrontendApp-Book
  4. 通过Nodejs实现像JAVA,C#,C++一样的服务端程序
  5. 实现分布式WEB程序，包括前端和服务端

3 JavaScrip变量

变量值可能为：

  1. 数据，如string,number,boolean
  2. 对象的引用：如普通对象，数组，函数，日期，正则表达式
  3. 特殊值null，其通常用作用于初始化的对象变量的默认值
  4. 特殊值undefined，已经声明但没有初始化的初始值

数组，函数，日期和正则表达式是特殊类型的对象，但在概念上，日期和正则表达式是值类型，被包装成对象形式体现。

变量，数组，函数的参数和返回值都可以不声明，它们通常不会被JavaScript引擎检查，会被自动进行类型转换。

关于变量的作用域参考：https://www.cnblogs.com/wupeiqi/p/5649402.html

  1.  function func(){
  2.      if(1==1){
  3.          var name = 'Kanghui';
  4.      }
  5.      console.log(name)
  6.  }
  7.  
  8.  function func(){
  9.      if(1==1){
  10.          var name = 'Kanghui';
  11.      }
  12.  console.log(name)
  13.  }
  14.  
  15.  xo = 'xiaoming';
  16.  function func(){
  17.      var xo = 'lili';
  18.      function inner(){
  19.          console.log(xo);
  20.      }
  21.      return inner;
  22.  }
  23.  var ret = func()
  24.  ret()
  25.  
  26.  xo = 'xiaoming';
  27.  function func(){
  28.      var xo = 'lili';
  29.      function inner(){
  30.          console.log(xo);
  31.      }
  32.      var xo = 'tony'
  33.      return inner;
  34.  }
  35.  var ret = func()
  36.  ret()

作用域实例

4 Dom操作

1、获取标签

  1. 获取单个元素        document.getElementById('i1')
  2.         获取多个元素（列表）document.getElementsByTagName('div')
  3.         获取多个元素（列表）document.getElementsByClassName('c1')
  4.         a. 直接找
  5.             document.getElementById             根据ID获取一个标签
  6.             document.getElementsByName          根据name属性获取标签集合
  7.             document.getElementsByClassName     根据class属性获取标签集合
  8.             document.getElementsByTagName       根据标签名获取标签集合
  9.         b. 间接
  10.             tag = document.getElementById('i1')
  11.             parentElement           // 父节点标签元素
  12.             children                // 所有子标签
  13.             firstElementChild       // 第一个子标签元素
  14.             lastElementChild        // 最后一个子标签元素
  15.             nextElementtSibling     // 下一个兄弟标签元素
  16.             previousElementSibling  // 上一个兄弟标签元素

2、标签操作

  1.   a. innerText
  2.  
  3.             获取标签中的文本内容
  4.             标签.innerText
  5.             对标签内部文本进行重新复制
  6.             标签.innerText = ""
  7.   b. className
  8.             tag.className =》 直接整体做操作
  9.             tag.classList.add('样式名')   添加指定样式
  10.             tag.classList.remove('样式名')   删除指定样式
  11.             PS：
  12.                 <div onclick='func();'>点我</div>
  13.                 <script>
  14.                     function func(){
  15.                     }
  16.                 </script>
  17.   c. checkbox
  18.                 获取值
  19.                 checkbox对象.checked
  20.                 设置值
  21.                 checkbox对象.checked = true

3、Dom创建标签

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <input type="button" onclick="AddEle1();" value="添加" />
  9.      <input type="button" onclick="AddEle2();" value="添加" />
  10.      <div id="i1">
  11.          <p><input type="text"  /></p>
  12.      </div>
  13.      <script>
  14.          function AddEle1(){
  15.              // 创建一个标签
  16.              //把标签添加到HTML中
  17.              var tag = "<p><input type='text' /></p>"
  18.              document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)
  19.          }
  20.          function AddEle2(){
  21.              // 创建一个标签
  22.              //把标签添加到HTML中
  23.              var tag = document.createElement('input');
  24.              tag.setAttribute('type','text');
  25.              tag.style.fontsize = '16px';
  26.              tag.style.color = 'red';
  27.  
  28.              var p = document.createElement('p');
  29.              p.appendChild(tag);
  30.  
  31.              document.getElementById('i1').appendChild(p);
  32.  
  33.          }
  34.      </script>
  35.  </body>
  36.  </html>

两种创建方式

4、提交表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <form id="f1" action="http://www.baidu.com">
  9.         <input type="text" />
  10.         <input type="submit" value="提交" />
  11.         <a onclick="submitForm();">提交</a>
  12.     </form>
  13.  
  14.     <script>
  15.     function submitForm() {
  16.         document.getElementById('f1').submit()
  17.         alert(123);
  18.         var v = confirm("真的要删除吗？")；
  19.         console.log(v);
  20.     }
  21.     //定时器，一直执行
  22.     var obj = setInterval(function () {
  23.         console.log(1);
  24.         clearInterval(obj);
  25.     },1000);
  26.     //定时器，只执行一次
  27.     setTimeout(function () {
  28.         console.log('timeout');
  29.     },5000);
  30.     </script>
  31. </body>
  32. </html>

提交表单

打开qq邮箱，删除垃圾邮件后会弹出一个已删除的框，然后再几秒钟后消失，这是怎么做到的呢？

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <div id="status"></div>
  9.      <input type="button" value="删除" onclick="DeleteEle();" />
  10.  
  11.      <script>
  12.          function DeleteEle() {
  13.              document.getElementById('status').innerText = "已删除";
  14.              setTimeout(function () {
  15.                  document.getElementById('status').innerText = "";
  16.              },5000)
  17.          }
  18.      </script>
  19.  </body>
  20.  </html>

定时器的应用

5、事件操作

现在要实现这么一个功能：一个表格，如果把鼠标放在哪一行，哪一行就能高亮显示。

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <table border="1" width="300px">
  9.          <tr onmouseover="t1(0);" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
  10.          <tr onmouseover="t1(1);" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
  11.          <tr onmouseover="t1(2);" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
  12.      </table>
  13.      <script>
  14.          function t1(n) {
  15.              var mythrs = document.getElementsByTagName('tr')[n];
  16.  //            console.log(mythrs);
  17.              mythrs.style.backgroundColor = "red";
  18.          }
  19.            function t2(n) {
  20.              var mythrs = document.getElementsByTagName('tr')[n];
  21.              mythrs.style.backgroundColor = "";
  22.          }
  23.      </script>
  24.  </body>
  25.  </html>

高亮显示（初级）

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <table border="1" width="300px">
  9.          <tr><td>1</td><td>2</td><td>3</td></tr>
  10.          <tr><td>1</td><td>2</td><td>3</td></tr>
  11.          <tr><td>1</td><td>2</td><td>3</td></tr>
  12.      </table>
  13.      <script>
  14.          var mythrs = document.getElementsByTagName("tr");
  15.          var len = mythrs.length;
  16.          for(var i=0; i<len; i++){
  17.              mythrs[i].onmouseover = function () {
  18.                  this.style.backgroundColor = "red";
  19.              }
  20.               mythrs[i].onmouseout = function () {
  21.                  this.style.backgroundColor = "";
  22.              }
  23.          }
  24.      </script>
  25.  </body>
  26.  </html>

高亮显示（高级）

6、事件的捕捉与冒泡

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          #main{
  8.              background-color: red;
  9.              width: 300px;
  10.              height: 400px;
  11.          }
  12.           #content{
  13.              background-color: green;
  14.              width: 150px;
  15.              height: 200px;
  16.          }
  17.      </style>
  18.  </head>
  19.  <body>
  20.      <div id="main">
  21.          <div id="content"></div>
  22.      </div>
  23.      <script>
  24.          var mymain = document.getElementById("main");
  25.          var myconent = document.getElementById("content");
  26.          //事件捕捉和冒泡的不同    false&ture
  27.          //mymain.addEventListener("click",function(){console.log('aaa')},false);
  28.          //myconent.addEventListener("click",function(){console.log('bbb')},false);
  29.          mymain.addEventListener("click",function(){console.log('aaa')},true);
  30.          myconent.addEventListener("click",function(){console.log('bbb')},true);
  31.      </script>
  32.  </body>
  33.  </html>

addEventListener

5 js语法分析

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <script>
  9.          function t1(age) {
  10.              console.log(age);
  11.              var age = 27;
  12.              console.log(age);
  13.              function age() {
  14.                  console.log(age);
  15.              }
  16.              t1(3)
  17.          }
  18.      </script>
  19.  </body>
  20.  </html>

js语法分析

这个语法分析的过程后续补上吧。

6 小结

真是各行如隔山，东西太多有时候会造成舍本逐末，随便找一个方向就扎进去了。其实我只是来学python的，却不小心看了前端的东西，觉得还挺好玩的。就趟了这滩浑水。

现在真的是一个海量信息的时代，必须具备一定的信息筛选和总结能力，不然就真的是事倍功半！

太多的信息，太多的想法，太少的时间，真的是觉得时间越来越不够用，但仍在挥霍。

7 练习

练习1：搜索框

　　我们经常会见到在搜索框中出现请输入字样，当鼠标点进去之后就不见了。如何实现？

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <input id="i1" onfocus="Focus();"  onblur="Blur();" type="text" value="请输入关键字"/>
  9.      <input type="text" placeholder="请输入关键字"/>
  10.      <script>
  11.          function Focus(){
  12.              var tag = document.getElementById('i1');
  13.              var val = tag.value;
  14.              if(val == "请输入关键字"){
  15.                  tag.value = "";
  16.              }
  17.          }
  18.          function Blur(){
  19.              var tag = document.getElementById('i1');
  20.              var val = tag.value;
  21.              if(val.length == 0 ){
  22.                  tag.value = "请输入关键字";
  23.              }
  24.          }
  25.      </script>
  26.  </body>
  27.  </html>

搜索框

练习2：跑马灯

　　通过js让文字动起来

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.  </head>
  7.  <body>
  8.      <div id="i1">听说你要好好学习</div>
  9.  
  10.      <script>
  11.          function func(){
  12.              //根据ID获取指定标签的内容，定义局部变量
  13.              var tag = document.getElementById('i1');
  14.              //获取标签内部的内容
  15.              var content = tag.innerText;
  16.  
  17.              var f = content.charAt(0);
  18.              var l = content.substring(1,content.length);
  19.  
  20.              var new_content = l + f;
  21.  
  22.              tag.innerText = new_content;
  23.          }
  24.          setInterval('func()',500);
  25.      </script>
  26.  </body>
  27.  </html>

跑马灯

练习3：关于编辑器的一些快捷操作

　　命令的输入之后table键试一下

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport"
  6.            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.  </head>
  10.  <body>
  11.  <table>
  12.      <tr>
  13.          <td></td>
  14.          <td></td>
  15.          <td></td>
  16.      </tr>
  17.      <tr>
  18.          <td></td>
  19.          <td></td>
  20.          <td></td>
  21.      </tr>
  22.      <tr>
  23.          <td></td>
  24.          <td></td>
  25.          <td></td>
  26.      </tr>
  27.      table.test#i1>td*2>td*3>{zhangsan$}
  28.      c
  29.      !
  30.      html:5
  31.      html:4s
  32.  </table>
  33.  </body>
  34.  </html>

快捷操作

其实，这些都是一些最基础的操作。想要深入的学习还需要不断地积累和练习。

我是尾巴~

这次推荐的：javascript教程十分详细相对比较基础　　http://www.w3school.com.cn/js/index.asp

可以说是很良心了~

虽不才，才要坚持~

D16——C语言基础学PYTHON的更多相关文章

  1. D10——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D10 20180906内容纲要: 1.协程 (1)yield (2)greenlet (3)gevent (4)gevent实现单线程下socket多并发 2. ...

  2. D15——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D15 20180926内容纲要: 1.CSS介绍 2.CSS的四种引入方式 3.CSS选择器 4.CSS常用属性 5.小结 6.练习 1 CSS介绍 层叠样式表 ...

  3. D07——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D07 20180826内容纲要: 面向对象进阶学习 1 静态方法 2 类方法 3 属性方法 4 类的特殊成员方法(本节重点) 5 反射(本节重点) 6 异常(本 ...

  4. D06——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D06 20180821内容纲要: 面向对象初级学习 1 面向对象 2 类 (1)封装 (2)继承 (3)多态 3 小结 4 练习:选课系统 5 课外拓展:答题系 ...

  5. D05——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D05 20180815内容纲要: 1 模块 2 包 3 import的本质 4 内置模块详解 (1)time&datetime (2)datetime ...

  6. D17——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D17 20181014内容纲要: 1.jQuery介绍 2.jQuery功能介绍 (1)jQuery的引入方式 (2)选择器 (3)筛选 (4)文本操作 (5) ...

  7. D14——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D14 20180919内容纲要: 1.html认识 2.常用标签 3.京东html 4.小结 5.练习(简易淘宝html) 1.html初识(HyperText ...

  8. D13——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D13 20180918内容纲要: 堡垒机运维开发 1.堡垒机的介绍 2.堡垒机的架构 3.小结 4.堡垒机的功能实现需求 1 堡垒机的介绍 百度百科 随着信息安 ...

  9. D12——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D12 20180912内容纲要: 1.数据库介绍 2.RDMS术语 3.MySQL数据库介绍和基本使用 4.MySQL数据类型 5.MySQL常用命令 6.外键 ...

随机推荐

  1. AOP 和 前置通知，后置通知

    Spring 1.AOP:中文名称面向切面编程 2.英文名称:(Aspect Oriented Programming) 3.正常程序执行流程都是纵向执行流程 3.1 又叫面向切面编程,在原有纵向执行 ...

  2. centos7 hdfs yarn spark 搭建笔记

    1.搭建3台虚拟机 2.建立账户及信任关系 3.安装java wget jdk-xxx rpm -i jdk-xxx 4.添加环境变量(全部) export JAVA_HOME=/usr/java/j ...

  3. 2018.10.27 洛谷P2915奶牛混合起来Mixed Up Cows（状压dp）

    传送门 状压dp入门题. 按照题意建一个图. 要求的就是合法的链的总数. 直接f[i][j]f[i][j]f[i][j]表示当前状态为jjj,下一位要跟iii连起来的方案数. 然后从没被选并且跟iii ...

  4. 2018.10.26 bzoj2721: [Violet 5]樱花（数论）

    传送门 推一波式子: 1x+1y=1n!\frac 1 x+\frac 1 y=\frac 1 {n!}x1​+y1​=n!1​ =>xy−x∗n!−y∗n!xy-x*n!-y*n!xy−x∗n ...

  5. Tomcat架构解析(一)-----Tomcat总体架构

    Tomcat是非常常用的应用服务器,了解Tomcat的总体架构以及实现细节,对于理解整个java web也是有非常大的帮助. 一.Server   1.最简单的服务器结构 最简单的服务器结构如图所示: ...

  6. MYSQL 事务测试

    mysql 事务测试 创建张表 lock1 增加字段 id,name . 增加两条记录 1,a 2,b 启动第一个会话 BEGIN; update lock1 set name='c' where i ...

  7. java Concurrent包学习笔记（三）：ReentrantLock

    一.可重入性的理解 从名字上理解,ReenTrantLock的字面意思就是再进入的锁,其实synchronized关键字所使用的锁也是可重入的,两者关于这个的区别不大.两者都是同一个线程每进入一次,锁 ...

  8. CentOS7 安装可视化脚本安装包Webmin

    一.简介 Webmin是一个基于Web的Linux系统管理界面.你就可以通过图形化的方式设置用户账号.Apache.DNS.文件共享等服务. 二.安装 1.下载安装包到本地Windows系统 http ...

  9. 学以致用十-----centos7.2+python3.6+vim8.1+YouCompleteMe

    趟过了之前的坑后,再来安装YouCompleteMe 一.安装依赖包 yum install libXt-devel gtk2-devel yum -y install python-devel ru ...

  10. Tensorflow RNN_LSTM实例

    RNN的一种类型模型被称为长短期记忆网络(LSTM).我觉得这是一个有趣的名字.它听起来也意味着:短期模式长期不会被遗忘. LSTM的精确实现细节不在本文的范围之内.相信我,如果只学习LSTM模型会分 ...