D16——C语言基础学PYTHON

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是一门面向对象的动态语言，他一般用来处理以下任务：

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

3 JavaScrip变量

变量值可能为：

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

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

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

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

 function func(){

     if(1==1){

         var name = 'Kanghui';

     }

     console.log(name)

 }

 function func(){

     if(1==1){

         var name = 'Kanghui';

     }

 console.log(name)

 }

 xo = 'xiaoming';

 function func(){

     var xo = 'lili';

     function inner(){

         console.log(xo);

     }

     return inner;

 }

 var ret = func()

 ret()

 xo = 'xiaoming';

 function func(){

     var xo = 'lili';

     function inner(){

         console.log(xo);

     }

     var xo = 'tony'

     return inner;

 }

 var ret = func()

 ret()

作用域实例

4 Dom操作

1、获取标签

获取单个元素        document.getElementById('i1')

        获取多个元素（列表）document.getElementsByTagName('div')

        获取多个元素（列表）document.getElementsByClassName('c1')

        a. 直接找

            document.getElementById             根据ID获取一个标签

            document.getElementsByName          根据name属性获取标签集合

            document.getElementsByClassName     根据class属性获取标签集合

            document.getElementsByTagName       根据标签名获取标签集合

        b. 间接

            tag = document.getElementById('i1')

            parentElement           // 父节点标签元素

            children                // 所有子标签

            firstElementChild       // 第一个子标签元素

            lastElementChild        // 最后一个子标签元素

            nextElementtSibling     // 下一个兄弟标签元素

            previousElementSibling  // 上一个兄弟标签元素

2、标签操作

  a. innerText

            获取标签中的文本内容

            标签.innerText

            对标签内部文本进行重新复制

            标签.innerText = ""

  b. className

            tag.className =》 直接整体做操作

            tag.classList.add('样式名')   添加指定样式

            tag.classList.remove('样式名')   删除指定样式

            PS：

                <div onclick='func();'>点我</div>

                <script>

                    function func(){

                    }

                </script>

  c. checkbox

                获取值

                checkbox对象.checked

                设置值

                checkbox对象.checked = true

3、Dom创建标签

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" onclick="AddEle1();" value="添加" />

     <input type="button" onclick="AddEle2();" value="添加" />

     <div id="i1">

         <p><input type="text"  /></p>

     </div>

     <script>

         function AddEle1(){

             // 创建一个标签

             //把标签添加到HTML中

             var tag = "<p><input type='text' /></p>"

             document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)

         }

         function AddEle2(){

             // 创建一个标签

             //把标签添加到HTML中

             var tag = document.createElement('input');

             tag.setAttribute('type','text');

             tag.style.fontsize = '16px';

             tag.style.color = 'red';

             var p = document.createElement('p');

             p.appendChild(tag);

             document.getElementById('i1').appendChild(p);

         }

     </script>

 </body>

 </html>

两种创建方式

4、提交表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form id="f1" action="http://www.baidu.com">

        <input type="text" />

        <input type="submit" value="提交" />

        <a onclick="submitForm();">提交</a>

    </form>

    <script>

    function submitForm() {

        document.getElementById('f1').submit()

        alert(123);

        var v = confirm("真的要删除吗？")；

        console.log(v);

    }

    //定时器，一直执行

    var obj = setInterval(function () {

        console.log(1);

        clearInterval(obj);

    },1000);

    //定时器，只执行一次

    setTimeout(function () {

        console.log('timeout');

    },5000);

    </script>

</body>

</html>

提交表单

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id="status"></div>

     <input type="button" value="删除" onclick="DeleteEle();" />

     <script>

         function DeleteEle() {

             document.getElementById('status').innerText = "已删除";

             setTimeout(function () {

                 document.getElementById('status').innerText = "";

             },5000)

         }

     </script>

 </body>

 </html>

定时器的应用

5、事件操作

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <table border="1" width="300px">

         <tr onmouseover="t1(0);" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>

         <tr onmouseover="t1(1);" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>

         <tr onmouseover="t1(2);" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>

     </table>

     <script>

         function t1(n) {

             var mythrs = document.getElementsByTagName('tr')[n];

 //            console.log(mythrs);

             mythrs.style.backgroundColor = "red";

         }

           function t2(n) {

             var mythrs = document.getElementsByTagName('tr')[n];

             mythrs.style.backgroundColor = "";

         }

     </script>

 </body>

 </html>

高亮显示（初级）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <table border="1" width="300px">

         <tr><td>1</td><td>2</td><td>3</td></tr>

         <tr><td>1</td><td>2</td><td>3</td></tr>

         <tr><td>1</td><td>2</td><td>3</td></tr>

     </table>

     <script>

         var mythrs = document.getElementsByTagName("tr");

         var len = mythrs.length;

         for(var i=0; i<len; i++){

             mythrs[i].onmouseover = function () {

                 this.style.backgroundColor = "red";

             }

              mythrs[i].onmouseout = function () {

                 this.style.backgroundColor = "";

             }

         }

     </script>

 </body>

 </html>

高亮显示（高级）

6、事件的捕捉与冒泡

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #main{

             background-color: red;

             width: 300px;

             height: 400px;

         }

          #content{

             background-color: green;

             width: 150px;

             height: 200px;

         }

     </style>

 </head>

 <body>

     <div id="main">

         <div id="content"></div>

     </div>

     <script>

         var mymain = document.getElementById("main");

         var myconent = document.getElementById("content");

         //事件捕捉和冒泡的不同    false&ture

         //mymain.addEventListener("click",function(){console.log('aaa')},false);

         //myconent.addEventListener("click",function(){console.log('bbb')},false);

         mymain.addEventListener("click",function(){console.log('aaa')},true);

         myconent.addEventListener("click",function(){console.log('bbb')},true);

     </script>

 </body>

 </html>

addEventListener

5 js语法分析

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <script>

         function t1(age) {

             console.log(age);

             var age = 27;

             console.log(age);

             function age() {

                 console.log(age);

             }

             t1(3)

         }

     </script>

 </body>

 </html>

js语法分析

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

6 小结

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

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

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

7 练习

练习1：搜索框

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input id="i1" onfocus="Focus();"  onblur="Blur();" type="text" value="请输入关键字"/>

     <input type="text" placeholder="请输入关键字"/>

     <script>

         function Focus(){

             var tag = document.getElementById('i1');

             var val = tag.value;

             if(val == "请输入关键字"){

                 tag.value = "";

             }

         }

         function Blur(){

             var tag = document.getElementById('i1');

             var val = tag.value;

             if(val.length == 0 ){

                 tag.value = "请输入关键字";

             }

         }

     </script>

 </body>

 </html>

搜索框

练习2：跑马灯

　　通过js让文字动起来

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id="i1">听说你要好好学习</div>

     <script>

         function func(){

             //根据ID获取指定标签的内容，定义局部变量

             var tag = document.getElementById('i1');

             //获取标签内部的内容

             var content = tag.innerText;

             var f = content.charAt(0);

             var l = content.substring(1,content.length);

             var new_content = l + f;

             tag.innerText = new_content;

         }

         setInterval('func()',500);

     </script>

 </body>

 </html>

跑马灯

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

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

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport"

           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

 <table>

     <tr>

         <td></td>

         <td></td>

         <td></td>

     </tr>

     <tr>

         <td></td>

         <td></td>

         <td></td>

     </tr>

     <tr>

         <td></td>

         <td></td>

         <td></td>

     </tr>

     table.test#i1>td*2>td*3>{zhangsan$}

     c

     !

     html:5

     html:4s

 </table>

 </body>

 </html>

快捷操作

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

我是尾巴~

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

可以说是很良心了~

虽不才，才要坚持~

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

D10——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D10 20180906内容纲要: 1.协程 (1)yield (2)greenlet (3)gevent (4)gevent实现单线程下socket多并发 2. ...
D15——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D15 20180926内容纲要: 1.CSS介绍 2.CSS的四种引入方式 3.CSS选择器 4.CSS常用属性 5.小结 6.练习 1 CSS介绍层叠样式表 ...
D07——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D07 20180826内容纲要: 面向对象进阶学习 1 静态方法 2 类方法 3 属性方法 4 类的特殊成员方法(本节重点) 5 反射(本节重点) 6 异常(本 ...
D06——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D06 20180821内容纲要: 面向对象初级学习 1 面向对象 2 类 (1)封装 (2)继承 (3)多态 3 小结 4 练习:选课系统 5 课外拓展:答题系 ...
D05——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D05 20180815内容纲要: 1 模块 2 包 3 import的本质 4 内置模块详解 (1)time&datetime (2)datetime ...
D17——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D17 20181014内容纲要: 1.jQuery介绍 2.jQuery功能介绍 (1)jQuery的引入方式 (2)选择器 (3)筛选 (4)文本操作 (5) ...
D14——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D14 20180919内容纲要: 1.html认识 2.常用标签 3.京东html 4.小结 5.练习(简易淘宝html) 1.html初识(HyperText ...
D13——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D13 20180918内容纲要: 堡垒机运维开发 1.堡垒机的介绍 2.堡垒机的架构 3.小结 4.堡垒机的功能实现需求 1 堡垒机的介绍百度百科随着信息安 ...
D12——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D12 20180912内容纲要: 1.数据库介绍 2.RDMS术语 3.MySQL数据库介绍和基本使用 4.MySQL数据类型 5.MySQL常用命令 6.外键 ...

随机推荐

2019.01.23 hdu3377 Plan（轮廓线dp）
传送门题意简述:给一个n*m的带权矩阵,求从左上角走到右下角的最大分数,每个格子只能经过最多一次,n,m≤9n,m\le9n,m≤9. 思路: 考虑轮廓线dpdpdp,但这道题并没有出现回路的限制因 ...
学习fortran77基础语法
Program ParamaterDefine Implicit None C FORTRAN变量名和关键字不区分大小写.但调用外部函数的话,需要在编译选项里指定 c 大小写等选项因为链接器是区分大 ...
c#中委托与事件
参考:http://www.tracefact.net/tech/009.html 张子阳:http://www.cnblogs.com/JimmyZhang/archive/2007/09/23/9 ...
UVa 11762 Race to 1 (数学期望 + 记忆化搜索)
题意:给定一个整数 n ,然后你要把它变成 1,变换操作就是随机从小于等于 n 的素数中选一个p,如果这个数是 n 的约数,那么就可以变成 n/p,否则还是本身,问你把它变成 1 的数学期望是多少. ...
CodeForces 916A Jamie and Alarm Snooze (水题)
题意:给定一个数字n,和一个时间,问你每次可以把当前时间往回调n分钟,然后调多少次后时间中包含数字7. 析:直接模拟就好,从当前分钟向后调,注意调成负数的情况就好.很简单. 代码如下: #pragma ...
5.Vue临时上传文件夹
1.在项目目录中,通过npm install multiparty进行安装必要组件npm install multiparty --save-dev 2.app.js中添加app.use(bodyPa ...
FastDFS分布文件系统Java客户端集成
参考博客:http://blog.csdn.net/xyang81/article/details/52847311 官网Java客户端源代码: https://github.com/happyfis ...
linux上搭建redis
环境centos7及redis-4.0.2.tar.gz 第一步首先在/usr/local/mypackage下mkdir redis 通过工具上传redis安装包解压安装包 tar -zxvf r ...
自己写一个chrome扩展程序 - 右键菜单扩展
最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...
linux 配置阿里云yum库
备份当前yum库 mv /etc/yum.repos.d /etc/yum.repos.d.backup4comex 新建yum源配置目录 mkdir /etc/yum.repos.d 设置阿里yum ...

D16——C语言基础学PYTHON

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

随机推荐

热门专题