本系列文章在 https://github.com/freestylefly/javaStudy 持(huan)续(ying)更(jia)新(ru)中,欢迎有兴趣的童鞋们关注。
一、概述
1、 JavaScript概述和特点
概述:是一种基于对象和事件驱动的脚本语言
特点:交互、脚本语言,解释性语言,边执行边解释
2、什么是脚本语言?
java源代码 ——> 编译成.class文件 ——-> java虚拟机中才能执行
脚本语言: 源码 ———— > 解释执行,js由我们的浏览器来解释执行
HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的
3、JS的组成:
- ECMAScript : 核心部分 ,定义js的语法规范,是一种语法标准
- DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
- BOM:Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
4、JavaScript基本结构
1 | <script type="text/javascript"> |
二、JS语法
1、语法
变量弱类型: var i = true
区分大小写
语句结束之后的分号 ,可以有,也可以没有,最好写
写在script标签
2、JS的数据类型:
基本类型
string
split::分割
join:拼接字符串
number
boolean
undefine:未定义
null
注意:undefine==null定义为是相等的
引用类型
对象, 内置对象
常用内置对象有:
Array、String、Math、Date
Date内置对象:
按照:2018年11月12日22:3:59:格式显示,注意获得年使用getFullYear()方法
1
2
3
4
5
6
7
8
9var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var day = date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
var ele=document.getElementById("datetime");
ele.innerHTML=year+"年"+month+"月"+day+"日"+hour+":"+minute+":"+second+":";
typeof操作符来检测变量的数据类型
创建数组
var arr=[“a”,”b”,”c”]
var arr = new Array(“a”,”b”,”c”)
数组sort方法:是排序
push方法是向后添加元素,返回新数组的长度,直接将原数组打印即可
类型转换
js内部自动转换
通过函数转换:parseInt()转换为整数
parseInt(“aaa123”)=NAN
parseInt(“123aaa”)=123
parseFloat()转换为浮点数
3、JS的运算符和语句
运算符和java 一样
- “===” 全等号: 值和类型都必须相等
- == 值相等就可以了
语句和java 一样
1
2
3==和===的区别
==不会严格区分数据类型
===会严格区分数据类型1
2
3“1”==true 正确
"0"==false 正确
“true”=true 错误
4、JS的输出
- alert() 直接弹框
- document.write() 向页面输出
- console.log() 向控制台输出
- innerHTML: 向页面输出
- 获取页面元素: document.getElementById(“id的名称”);
- window.location=”页面地址”,让窗口的地址跳到指定页面去
- prompt()可以是一个参数或者两个参数,弹出窗口,让用户输入值,有返回值,需要对返回值进行强制类型转换的时候需要用到部分常用的系统函数
5、JS声明变量:
var 变量的名称 = 变量的值
6、JS声明函数
var 函数的名称 = function(){
}
function 函数的名称(){
}
js常用的系统函数
- parseInt()转换为整数
- parseFloat()转换为浮点数
- isNaN():贩毒案非数字
- eval(),计算表达式的值
7、创建对象
Object
1
2
3
4var 对象名 = new Object()
属性:对象名.属性名=“”;
方法:对象名.showName=function(){}
调用方法:对象名.showName();- ECMAScript提供的一种原生引用类型
- 可以通过Object引用类型的实例创建一个对象
- 可以为对象定义属性和方法
- Object实例本身不具备多少功能,一般在应用程序中存储和传递数据
使用Object创建对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//使用object创建对象
var user = new Object();
//对象的属性
user.name="张三";
user.psd="12345566";
//对象的方法(函数)
user.showInfo=function(){
document.write(this.name+"-"+this.psd)
}
</script>
</head>
<body>
<input type="button" value="点我啊" onclick="user.showInfo()"/>
</body>
</html>对象字面量方式创建对象
对象字面量是对象定义的一种简写方式
会简化创建包含大量属性的对象的过程
在为函数传递大量可选参数时,可考虑使用对象字面量
创建代码实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<script type="text/javascript">
//使用对象字面量创建对象
var user={
name="张三";
psd="12334";
showInfo:function(){
document.write(this.name+"-"+this.psd)
}
}
//使用对象字面量创建对象的第二种方式
var user2={};
user2.name="李四";
user2.psd="123";
user2.showInfo= function () {
document.write(this.name+"-"+this.psd)
}
</script>
工厂模式创建对象
工厂模式是软件工程领域的一种设计模式
抽象了创建对象的过程
通过函数封装创建对象的细节
代码实现
1
2
3
4
5
6
7
8
9
10//使用object创建对象
var user = new Object();
//对象的属性
user.name="张三";
user.psd="12345566";
//对象的方法(函数)
user.showInfo=function(){
document.write(this.name+"-"+this.psd)
}
var user1=createUser("hhh","12312");弊端:看不出类型——解决构造函数
函数重复,浪费资源——解决:原型
构造函数
构造函数一般以大写字符开头
构造函数也是函数,只不过可以用来创建对象
与工程模式对比
- 没有显式创建对象
- 直接将属性和方法赋给了this对象
- 没有return
1 | <script type="text/javascript"> |
原型prototype
每个函数都有一个prototype(原型)属性
是一个指针,指向一个对象
这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法
instanceof判断对象的原类型
代码实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18//定义无参构造函数
function Flower(){
}
//原型属性和方法
Flower.prototype.name="长春花";
Flower.prototype.genera="夹竹桃科 长春花属";
Flower.prototype.showName=function(){
alert(this.name);
}
//构建实例对象
var f1 = new Flower();
var f2 = new Flower();
//实例对象修改属性值
f2.name="哈哈哈";
//实例对象调用原型方法
f1.showName();
f2.showName();
用混合方式构造对象
构造函数+prototype
构造函数:属性原型prototype:方法
1
2
3
4
5
6
7
8
9
10//使用构造函数t创建对象
function User(name,psd){
//定义对象属性
this.name="沾伞";
this.psd="12312";
}
//原型prototype:方法
User.prototype.showInfo=function(){
document.write(this.name+"-"+this.psd)
}
8、继承
1、 原型链
一个原型对象是另一个原型对象的实例(dog.protptype=new Animal();
相关的原型对象层层递进,就构成了实例与原型的链条,就是原型链
2、对象继承
借用构造函数
apply([thisOjb[,argArray]])
应用某一对象的一个方法,用另一个对象替换当前对象
call([thisObj[,arg1[,arg2[, [,argN]]]]])
n调用一个对象的一个方法,以另一个对象替换当前对象
Animal.call(this,cloth)
组合继承(做伪经典继承)
1 | <script> |
9、在网页中引入JavaScript的方式
1、内部:用script标签,可以放在任意位置,习惯可放置在html的最后
2、行内:直接放在HTML标签中
3、外部:调用外部用script标签,属性src=“”,type=text/JavaScript
10、JS程序调试
1、用浏览器F12调试,F10跳过函数,F11进去方法里,watch可以监控变量
2、alert进行标记是比较实用的调试方式,在需要标记的地方做标记,如果能执行到标记的位置,那么就会弹出窗口
11、事件
onload:页面加载事件
onclick:点击事件
onkeydown:键盘按下事件
12、BOM——浏览器对象
BOM是浏览器对象模型,可以移动窗口,改变状态栏中的文本,执行其他与页面内容不直接相关的操作。
BOM可实现功能:
u弹出新的浏览器窗口
u移动、关闭浏览器窗口以及调整窗口的大小
u页面的前进、后退
A、Window对象
属性
history:有关客户访问过的URL的信息
location:有关当前URL的信息,
1
window.location="http://www.baidu.com";
方法
prompt()
显示可提示用户输入的对话框,可有一个参数或者两个参数,两个参数时,第二个参数代表的是默认输入信息,有返回值,点击确定返回用户输入的值,点击取消返回null
alert()
为只含有一个确定按钮的警告框仅有一个参数,无返回值
confirm()
显示一段消息以及含有确定和取消按钮的对话框,返回值为布尔类型,常用于if -else语句
close()
关闭浏览器窗口
open()
在页面弹出一个新的浏览器敞口
1
window.open("http://www.baidu.com","_blank","width=100px,height=100px")
setTimout()
定时函数:仅会计时一次
setInterval()
定时函数:多次计时
1
setInterval(“adadas()”,1000)
B、History对象
方法
back():后退
forward():前进
go(1):同forward,负数代表后退
C、Location对象
属性:href:设置或者返回完整的URL
方法
reload:重新加载
replace:用新的文档替换当前文档,不能振兴后退操作
align:用新的文档替换当前文档,能振兴后退操作
D、Document对象
属性
referrer:返回载入当前文档的URL(谁把我加载进来的)
URL:返回当前文档的URL
方法
getElementById:通过id获取某一对象
getElementsByName:通过name获取某一对象
getElementsByTagName:通过标签名获取某一对象
write:向文档写文本
1
2
3
4
5获得对象后需要对属性进行一系列操作,如可setAtrrbute等设置属性值,扩展:tofixed(2)代表保留两位小数,常用的对象属性有:
1、value:值
2、innerHTML:改变对象的所有显示属性,会解析HTML标签
3、innerTEXT:改变对象的所有显示属性,不会解析HTML标签
4、chected:复选框的属性值,让其为true,代表已选
13、DOM—文档对象模型
DOM分类:
1、DOM core:DOM核心,包含getElement方法等
2、HTML DOM:用来操作节点
3、CSS DOM:用来操作样式
节点信息:
nodeName:节点名字
nodeValue:节点值
nodeType:节点类型
节点和节点的关系:
- 父节点:parentNode(parentElementNode父元素节点)
- 首个节点:firstChild
- 最后一个节点:lastChild
- 下一个节点:nextsibling
- 上一个节点:previousSibling
- 子节点集合childNode
操作节点:
操作节点属性:getAttribute(“属性名”) setAttribute(“属性名”,”属性值”)
创建和插入节点节点:
1 | createElement( tagName) |
清楚和替换节点:
1 | removeChild(N)、replaceChild(newN,oldN) |
操作节点样式:style属性(样式少的时候用,可读写 className属性(在css样式中已经写好,通过className操作)
页面事件:
1、onload页面加载事件
2、onscroll用于博做页面垂直和水平的滚动
制作带关闭按钮的广告
1 | //关闭按钮关闭广告 |
制作论坛发帖:
1 |
|
注意:要在成对的双引号之间加一个参数,可以用“++“,只需要把参数放在++之间即可!
14、内置对象
String(字符串)对象
Date(日期)对象
Array(数组)对象
Boolean(逻辑)对象
Math(算数)对象
RegExp对象
三、JS的开发步骤
- 确定事件
- 通常事件都会出发一个函数
- 函数里面通常都会去操作页面元素,做一些交互动作
四、用js完成表单验证
1、代码实现
1 |
|
五、JS完成自动播放轮播图
1、需求
有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换
切换图片:
每个三秒钟做一件事:
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数
- clearInterval取消定时
- clearTimeout取消定时
2、步骤分析:
- 确定事件: 文档加载完成的事件 onload
- 事件要触发 : init()
- 函数里面要做一些事情:(通常会去操作元素,提供交互)
- 开启定时器: 执行切换图片的函数 changeImg()
- changeImg()
- 获得要切换图片的那个元素
3、代码实现
1 |
|
六、完成页面定时弹出广告
1、需求分析
一般网页,当我们刚打开的时候,它会5秒之后,显示一个广告,让我们看5秒钟,然后他的广告就自动消失了!
2、技术分析
- 定时器
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数
- clearInterval
- clearTimeout
- 显示广告 img.style.display = “block”
- 隐藏广告 img.style.display = “none”
3、步骤分析
- 确定事件: 页面加载完成的事件 onload
- 事件要触发函数: init()
- init函数里面做一件事:
- 启动一个定时器 : setTimeout()
- 显示一个广告
- 再去开启一个定时5秒钟之后,关闭广告
4、代码实现
1 |
|
七、完成表单的校验
1、需求分析
之前我们做了一个简单的表单校验,每当用户输入出错的时候,我们是弹出了一个对话框,提示用户去修改。这样的用户体验效果非常不好好。现在就是需要来对他进行一个修改,当用户输入信息有问题的时候,我们就再输入框的后面给他一个友好提示。
2、技术分析
【HTML中innerHTML属性】
【JS中的常用事件】
onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件
3、 代码实现
1 |
|
八、表格隔行换色
1、需求分析
我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色
2、步骤分析
确定事件: 文档加载完成 onload
- 事件要触发函数: init()
- 函数:操作页面的元素
要操作表格中每一行动态的修改行的背景颜色
- 函数:操作页面的元素
3、代码实现
1 | <script > |
九、复选框的全选和全不选
1、需求分析
商品分类界面中,当我们点击全选框的时候,我们希望选中所有的商品,当我们取消掉的时候,我们希望不选中所有的商品
2、技术分析
事件 : onclick点击事件
3、 步骤分析
全选和全不选步骤分析:
1.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态
4、代码实现
1 | function checkAll(){ |
十、HTML中的DOM操作
一些常用的 HTML DOM 方法:
getElementById(id) - 获取带有指定 id 的节点(元素)
appendChild(node) - 插入新的子节点(元素)
removeChild(node) - 删除子节点(元素)
一些常用的 HTML DOM 属性:
innerHTML - 节点(元素)的文本值
parentNode - 节点(元素)的父节点
childNodes - 节点(元素)的子节点
attributes - 节点(元素)的属性节点
查找节点:
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
增加节点:
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。
删除节点:
removeChild() 删除子节点。
replaceChild() 替换子节点。
修改节点:
setAttribute() 修改属性
setAttributeNode() 修改属性节点
十一、省市联动效果
1、需求分析
在网站中选择省份的时候,在右边的城市选择中会跳出对应的城市信息,达到省市联动的效果
2、技术分析
利用dom操作
3、代码实现
1 |
|
十二、使用JS控制下拉列表左右选择
1、需求分析:
在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
2、 代码实现
1 |
|
十三、使用JS实现页面上动态实时时钟
代码展示:两个定时函数的调用
1 | <body onload="shoowTime()"> |