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.外键 ...
随机推荐
- 前端之javascript的数据类型1和BOM对象
一 js对象 BOM对象:browser object model浏览器模型对象 window对象:定时器 DOM对象:文档对象模型 js对象:字符串对象,数组对象,日期对象,math对象 new关键 ...
- Java HttpURLConnection 下载图片 图片全是“加密图片”文字,怎么解决？
package com.qzf.util; import java.io.FileOutputStream;import java.io.IOException;import java.io.Inpu ...
- js正则 - 正则判断是否为数字与字母的混合
function istrue(str){ var reg=/^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i; return reg.test(str); ...
- java常用设计模式九：桥接模式
一.概述 将抽象部分与它的实现部分分离,使它们都可以独立地变化.它是一种对象结构型模式.比如存在2个维度,第一个维度有一个抽象类A和对应的子类A1和A2:第二个维度有另一个接口B和对应的子类B1和B2 ...
- 【转载】Impala和Hive的区别
Impala和Hive的关系 Impala是基于Hive的大数据实时分析查询引擎,直接使用Hive的元数据库Metadata,意味着impala元数据都存储在Hive的metastore中.并且im ...
- adb 相关命令 以及无法adb识别设备的解决方法
[自己解决方法] 在-/.android/文件夹下面新建adb_usb.ini文件.里面写入设备的idVendor号(0x加上四位数字),然后输入 adb kill-server, 然后adb dev ...
- s4-4 以太网概述
以太网所处的位置 以太网的发展史 1973 Robert Metcalfe及其同事设计了以太网雏形(施乐公司) 1980 DIX发布最早的以太网标准,开放标准 1985 IEEE802.3对以太网作了 ...
- JAVA技术路线2
https://www.zhihu.com/question/56110328 1.JavaSE学习视频 http://pan.baidu.com/s/1bp3g6rd2.javaweb的学习视频 h ...
- Java利用MethodHandle实现反射时调用super的method
一:实现 1.Base类的实现 package me.silentdoer.reflecsuper; /** * @author silentdoer * @version 1.0 * @descri ...
- Raft协议学习笔记
目录 目录 1 1. 前言 1 2. 名词 1 3. 什么是分布式一致性? 3 4. Raft选举 3 4.1. 什么是Leader选举? 3 4.2. 选举的实现 4 4.3. Term和Lease ...