赵大超的学习周志(九)
本周是Java学习的第九周,主要是对Javascript的学习,具体学习了JS的基础语法,JS中的函数、事件,面向对象的思想,常见内置对象,DOM(文档对象模型),BOM(浏览器对象模型)等。通过对JavaScript的初步学习已经可以实现对页面的基本操作,极大地增强了页面的动态性。现将相关知识点总结如下:
JS概述
javaScript简称JS,是一门运行在客户端浏览器的脚本语言(无法独立运行的程序设计语言);是一门直译型语言(不需要编译),是一门客户端语言;
Javascript同时也是一门弱类型的程序语句,以及基于事件驱动的语言。
关于强类型和弱类型:
java:
int i = 10; String s = "java" User u = new User(); i = true; //编译错误
注意:java中任何变变量再使用前需要声明其数据类型,任何的变量一旦确定其类型,则只能赋予对应类型的值,运行期间不能修改为其他类型的数据,因此Java是一门强类型语言,即不是一门动态语言
javascript:
i = 10; i = "js" i = true; i = new Array(); //variable变量 var j = 100; var b = true; var s = 3.14; var str = "javascript";
javascript由于没有编译的过程,因此任何变量的数据类型确定是在运行期间动态绑定,并且还能再运行时修改其数据类型,因此,javascript是一门弱类型语言,即动态语言。
通过以上案例不难看出:
java是一门服务端语言(经过编译后,直接执行)
javascript是一门客户端语言(不要编译,运行期间动态绑定,效率相对较低,不适合进行服务器开发)
JS使用场景
javascript一般用于对网页特效以及表单验证等涉及到网页动态效果的功能,例如:
- 下拉菜单
- 回到顶部
- 楼层导航
- 轮播图
- 表单验证
基础语法
HelloJS
javascript一般在html页面中进行编写,通常位于一对<script>
之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// System.out.println()
console.log("hello js!");
</script>
</body>
</html>
注意:
<script>
标签可以在html的任意位置进行编写,常见的区域主要出现在以下两个位置
- head标签对之间
- body标签结尾处(推荐)
常见引入方式
在html中使用javascript包含以下三种方式:
-
直接在html页面中使用内联
<script>
标签编写<html> <head> </head> <body> <script> ..... </script> </body> </html>
-
引入外部的脚本文件(js文件)
<script src="js/js01.js"></script>
js文件(js01.js)
// System.out.println() console.log("hello js!"); i = 10; i = "helloworld"; console.log(i)
-
直接在html元素中使用内嵌的方式使用
<a href="javascript:alert('想啥呢,老铁!!')">点我看pain</a>
关于href和src区别?
<link rel="stylesheet" href="css/index.css"> <a href="http://www.baidu.com">百度一下,你就蒙蔽</a> <img src="img/logo.png"> <audio src="mp3/xiaopingguo.mp3"></audio> <script src="js/index.js"></script>
href和src都用于关联外部的资源文件,区别在于href所关联的资源一旦执行到此处,则同步加载
src所关联的资源,一旦执行到此处,则浏览器停止对页面进行渲染,先读取src关联的资源,并将资源替换到当前位置
数据类型
虽然说js是一门弱类型语言,但是不代表不区分数据类型,js中也支持很多不同类型的数据,js的主要数据类型包含以下几类:
- 数值型(包含浮点型)
- 字符串型
- 布尔型
- 数组
- 对象
- null
- undefined
数值类型(number)
javascript中对于任何的数值都是使用的number的数据类型表示,没有所谓浮点型和整型之分:
var i = 10;
console.log(typeof i);//number
var f = 3.14
console.log(typeof f);//number
typeof是一个js中的一个运算符,判断指定变量是什么类型
字符串类型(string)
javascript中对于所有的字符字符串统一使用string来表示,即没有字符和字符串之分,在js中可以使用单引号或者双引号表示字符串类型:
var s = "中";
s = '中国';
console.log(typeof s);//string
布尔类型(boolean)
javascript中也存在boolean类型,取值也只能是true和false,但是js中可以将任何的变量转换为boolean类型
var b = false;
console.log(typeof b); //boolean
var a = 0;
console.log(new Boolean(a));//false
对象类型(object)
javascript中的对象有多种存在形式,其中一种比较常见的显示方式为类Java中map结构(键值对),在js中称之为json对象
//对象(JSON对象)
//java: People p = new People()
var p = {
id:1,
name:"张麻子",
sex:"男",
age:18,
marry:false,
group:{
gid:1001,
name:"vip1"
},
fun:['java','c','php','python']
};
console.log(typeof p);
console.log(p.name);
以上javascript对象可以使用如下的Java类描述:
class People{ private int id; private String name; private String sex; private int age; private boolean marry; private String[] fun; private Group group; } class Group{ private int gid; private String name; }
数组类型(object-引用类型)
javascript中的数组是以对象的形式存在,是一种引用类型
var arr = [1,2,3,4,5,6];
arr = new Array(1,2,3,4,5);
console.log(typeof arr); // object
console.log(arr[0]);
//二维数组
arr = [[1,2],[3,4],[5,6,7,8]];
arr = new Array([1,2],[3,4],[5,6,7,8]);
console.log(arr[0][1]);
null类型(object)
表示一个空对象,在内存申请了空间,但是没有为该申请的空间赋值,通常这种对象使用null表示
var n = null;
console.log(typeof n);//object
console.log(new Boolean(n));//false
undefined
表示未申明的类型,与null类似,但是undefined并未申请任何空间。
运算符
不同的数据类型之间必然会存在运算的操作,javascript中支持大量的运算符,javascript中的运算符主要包含以下几类:
- 算术运算符
- 关系运算
- 布尔逻辑运算
- 位运算
- 三目运算
/*算术运算*/
var i = 5;
var j = 10;
console.log(i / j); // 0.5 因为js中没有整型浮点之分,因此算术运算时,直接获取的精确值
console.log(i++); // 5
console.log(i); //6
console.log(++j); //11
/*关系运算*/
i = 10;
j = '10';
//比较两个变量是否是相同,会进行类型转换
console.log(i == j);// true
//比较两个变量是否相等,不会进行类型转换(会判断类型是否相等)
console.log(i === j);// false
var p1 = {id:1,name:"jack"};
var p2 = {id:1,name:"jack"};
console.log(p1 == p2); //false
/*位运算*/
i = 8;
console.log(i << 1); // 16
/*三目运算*/
i = 5;
j = 10;
console.log( i > j ? i : j); // 10
流程控制
分支语句
if
if语句的语法与Java基本类似,唯一不同的是Java中的if条件必须是一个布尔类型的表达式,但是js中if中可以编写任意类型的表达式,甚至是一个任何类型的变量,因为js中可以将任何的变量转换为boolean类型,例如:
var i = 0;
if(i){
console.log('大爷,来玩啊!');
}else{
console.log('三年高考,五年模拟来一套!');
}
i虽然是一个number类型,但是js引擎会自动将该变量转换为Boolean;js中具体会将哪些数值转为false,哪些数值转换为true?
- 对于数值类型(number),任何的非0的值都是true
- null和undefined转换为false
- 只要是存在的对象都是true
- 空字符串转换为false
swich
var y = 2020;
var m = 2;
switch(m){
case 4:
case 6:
case 9:
case 11:
console.log(30);
break;
case 2:
if(y % 4 == 0 && y % 100 != 0 || y % 400 == 0){
console.log(29);
}else{
console.log(28);
}
break;
default:
console.log(31);
break;
}
循环语句
javascript中支持的循环语句主要包含两种
- for
- while
//普通for循环
for (var i = 0; i < 10; i++) {
document.write(i+"<br>");
}
//while循环
var i = 10;
while(i<20){
document.write(i+" ")
i++;
}
//do...while循环
do{
document.write(i+" ")
i++;
}while(i< 30);
//for...in循环
var arr = ['jack','rose','lilei','hanmeimei','lily','lucy'];
for(var n in arr){
console.log(arr[n]); // 在对数组操作时,n表示的是元素的索引,而非元素本身
}
var user = {
id:1,
name:'softeem',
age:15,
birth:'2006-03-01'
}
for(var n in user){
console.log(user[n]); // 在对对象进行操作时,n表示的是对象中的属性,如果需要去除属性值,语法为 引用变量[n]
}
console.log(user.name); //softeem
console.log(user['name']); //softeem
函数(方法)
javascript中的函数,类似java中的方法,可以通过将一些可能需要反复执行的代码封装到一个代码片段中,该代码片段就称之为函数。javascript中的函数语法与java存在较大的差异,语法结构如下:
function 函数名称(参数列表){
//执行体
}
案例:
/**
* js的函数无论何时都不需要声明返回值类型
* 申明参数时无需也不能指定参数类型,只需要设置参数名即可
* @param msg
*/
function print(msg){
console.log(msg);
}
函数定义
javascript中的函数分类与java中基本一致,也包含四种类型函数:
- 有参数有返回值
- 有参数无返回值
- 无参数无返回值
- 无参数有返回值
//有参数无返回值
function print(msg){
console.log(msg);
}
//无参有返回值函数
function msg(){
return "helloworld";
}
//有参数有返回值函数
function max(a,b){
return a > b ? a : b;
}
//无参数无返回值函数
function show(){
console.log("this is function");
}
函数调用
与java不同的是,js中的函数调用,不需要显式的通过对象调用,只需要在script
语句块中直接调用即可,或者通过html元素中相关事件属性进行调用
- 调用方式一
function show(){
console.log("this is function");
}
//调用
show();
- 调用方式二
<button onclick="show()">点我试试</button>
<a href="javascript:print('葫芦娃大战奥特曼')">点我看片</a>
arguments
javascript函数中参数可以有任意多个,并且在调用时,可以传入任意个参数,通过arguments对象可以获取实际调用函数时传入的参数个数。
function add(a,b,c,d,e){
//获取当前方法执行时实际传入的参数个数
var len = arguments.length;
if(len === 1){
console.log(a);
}else if(len === 2){
console.log(a + b);
}else if(len === 3){
console.log(a + b + c);
}else if(len === 4){
console.log(a + b + c + d);
}else if(len >= 5){
console.log(a + b + c + d + e);
}
}
add(10,20,30,40,50,60,70,80);
匿名函数&函数自调用
//将一个匿名函数存储到一个变量中,(将匿名函数改成有名字的函数)
var add = function(a,b){
console.log(a + b);
}
add(1,2);
//自调用函数
var value = (function(a,b){
var r = a > b ? a : b;
console.log('匿名函数被执行');
return r;
})(10,20);
console.log(value);
*闭包
//闭包即在一个函数内部定义的函数
//闭包提供了在函数外部对函数内部局部变量的访问能力
function counter(){
var count = 0;
//闭包
return {
increment:function(){
count++;
},
decrement:function(){
count--;
},
count:function(){
return count;
}
}
}
var c = counter();
c.increment();
c.increment();
console.log(c.count()); // 2
var c = counter();
c.increment();
console.log(c.count()); // 1
闭包使用实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="menu">
<li>菜单项01</li>
<li>菜单项02</li>
<li>菜单项03</li>
<li>菜单项04</li>
<li>菜单项05</li>
</ul>
<script>
//根据标签名获取所有的标签所表示的元素对象
var list = document.getElementsByTagName('li');
//每次点击列表项时输出的都是5(出现变量污染)
for(var i = 0;i<list.length;i++){
list[i].onclick=function(){
console.log(i);
}
}
//解决方法一:闭包
//遍历列表项
// for(var i = 0; i < list.length;i++){
// list[i].οnclick=(function(value){
// //使用闭包缓存临时变量
// return function(){
// console.log(`您点击的是第${value}项`);
// }
// })(i);
// }
//解决方法二:let关键字
//使用let能够有效的防止变量污染
for(let i = 0;i<list.length;i++){
list[i].onclick=function(){
console.log(i);
}
}
</script>
</body>
</html>
let变量(ES6)
(function a(){
//全局变量(js中变量在使用前如未做任何声明,一律称之为全局变量)
i = 10;
var n = 20;
})();
console.log(i);
// console.log(n);//局部变量无法调用 Uncaught ReferenceError: j is not defined at...
if(i >= 10){
//es6新增,用于防止变量污染存在的一个关键字(let声明任何变量只能在声明区域使用)
let j = 20;
//非函数的语句块无法形成作用域,因此该区域定义的变量,在外部可以被调用(变量污染)
var k = 20;
}
console.log(k);
console.log(j); // Uncaught ReferenceError: j is not defined at...
事件
js是一门基于事件驱动的语言,多数时候的js代码执行不是主动执行,可能是由于html页面中某些元素,或者浏览器的某些动作导致js的执行,而触发这些动作的操作称之为事件,触发动作执行的目标称之为事件源。
事件分类
js中的事件分为以下几类:
- 窗口事件
- 鼠标事件
- 键盘事件
- 文档事件
- 对象事件(音频,视频等)
-
窗口事件
-
事件名 描述 onload 当窗体内容被加载时触发 onunload 当窗体中内容卸载时触发 onbeforeunload 当窗体内容被卸载之前触发 onresize 当窗体大小被改变时触发 onscroll 当窗口内部发生滚动时触发 -
鼠标事件
事件名 描述 onclick 当鼠标单击时触发 ondblclick 当鼠标双击时触发 onmouseover 当鼠标悬停到元素上时触发 onmouseout 当输入从元素中移出时触发 onmouseenter 当鼠标进入时触发 onmouseleave 当鼠标离开时触发 onmousedown 当鼠标按下时触发 onmouseup 当鼠标抬起时触发 -
键盘事件
事件名 描述 onkeydown 当键盘按键被按下时触发 onkeyup 当键盘按键抬起触发 onkeypress 当键盘按键被按压时触发 -
表单事件
事件名 描述 onchange 当控件内容改变时触发 onselect 当控件内容被选中时触发 onblur 当控件失去焦点时触发 onfocus 当控件获得焦点时触发 onreset 表单重置时触发 onsubmit 表单提交时触发
事件绑定
javascript事件需要为指定的触发源进行绑定,js事件绑定的方式有如下几种:
-
直接在html元素中通过事件名称绑定
<button onclick="backTop()" onmouseover="enter(this)" onmouseout="out(this)">回到顶部</button>
-
在js中获取元素调用元素的事件名
document.getElementById('box').onmousemove=function(e){ console.log(e.x+"----"+e.y); } //窗口滚动事件 window.onscroll=function(e){ //获取与浏览器顶部的距离(px) var t = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条滚动'+t); }
-
获取元素对象之后使用
addEventListener()
方法绑定//为控件添加事件监听(内容选中事件) document.getElementById('uname').addEventListener('select',function(e){ console.log(this.value); }) //为控件绑定change事件 document.getElementById('city').addEventListener('change',function(e){ console.log('选择的城市是:' + this.value); }) //为表单控件绑定重置事件 document.getElementById('form1').addEventListener('reset',function(){ alert('表单已重置') })
事件解绑
js中事件既可以通过addEventListener进行绑定,同时也可以通过removeEventListener进行解绑:
//绑定事件
document.getElementById('msg').addEventListener('blur',value);
function value(){
console.log(this.value);
}
document.getElementById('btn').addEventListener('click',function(){
//移除指定对象的相关事件触发的动作
document.getElementById('msg').removeEventListener('blur',value);
})
事件流
由于网页中可触发事件的元素众多,因此可能会存在在一个元素上触发事件时同时也在另一个元素上触发,针对以上事件流有两家浏览器厂商分别制定了两套标准:
- 以IE为标准的事件冒泡(默认)
- 以网景为标准的事件捕获
事件冒泡&事件捕获
事件冒泡是一个由内向外的传播过程,当触发最内层的元素事件时,逐级向外进行传播;
事件捕获是一个由外向内的传播过程,当触发内层元素事件时,实际是先执行最外层元素事件,逐级向内传播;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
box-sizing: border-box;
}
.d1{
padding:50px;
width: 400px;
height: 400px;
background: #f00;
}
.d2{
padding:50px;
width: 300px;
height: 300px;
background: #0f0;
}
.d3{
width: 200px;
height: 200px;
background: #00f;
}
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3"></div>
</div>
</div>
<script>
//以下行为默认为事件冒泡机制,
document.getElementById("d1").addEventListener('click',function(){
console.log('box1');
})
document.getElementById("d2").addEventListener('click',function(){
console.log('box2');
})
document.getElementById("d3").addEventListener('click',function(){
console.log('box3');
})
//当为addEventListener指定第三个参数为tru时,此时采用事件捕获机制
// document.getElementById("d1").addEventListener('click',function(){
// console.log('box1');
// },true)
</script>
</body>
</html>
取消事件传播
若需要取消事件的传播,只需要通过调用事件对象的stopPropagation()
即可
document.getElementById("d1").addEventListener('click',function(e){
console.log('box1');
})
document.getElementById("d2").addEventListener('click',function(e){
console.log('box2');
})
document.getElementById("d3").addEventListener('click',function(e){
console.log('box3');
//取消事件的传播
e.stopPropagation();
})
面向对象
自定义对象
JSON(JavaScript Object Notation)对象
js中有一种固定的对象表达形式,即json对象,json对象是一种以键值对为标准的对象表达形式(类似java中的Map);并且随着互联网技术的发展,以及前后端分离技术的出现,json已经形成一种特殊的数据格式(基于javascript的json对象改变而来),用于实现前端数据传递。
//JSON对象
var hero = {
img:new Image(),
x:100,
y:200,
w:90,
h:60,
speed:10,
draw:function(){
let that = this;
that.img.src = 'hero.png';
that.img.onload=function(){
//设置图片样式
this.style.position='absolute';
this.style.left=`${that.x}px`;
this.style.top=`${that.y}px`;
//设置图片大小
this.width = that.w;
this.height = that.h;
document.getElementById('box').appendChild(this);
}
},
moveTo:function(x,y){ //移动
this.x = x;
this.y = y;
//重绘
this.draw();
}
}
//绘制飞机
hero.draw();
JSON字符串从js中的JSON对象发展而来,主要用于实现服务端和客户端之间的数据通信,语法:
{ "id":1, "name":"softeem", "groups":{ "id":1001, "gname":"vip1" } }
构造器创建对象
//构造器
function User(id,name,pwd,show){
this.id = id;
this.name = name;
this.pwd = pwd;
this.getName=function(){
return name;
}
this.setName=function(n){
this.name = n;
}
this.show=show;
}
var u1 = new User(1,"softeem","123");
console.log(u1.getName());
var u2 = new User(2,"admin","123456",function(){
console.log("hello");
})
u2.show();
全局函数
javascript提供了一些常见的全局函数,大多数用实现数据转换的功能:
- parseInt():将string类型转换为number类型(只会取整数)
- parseFloat():将string类型转换为number类型(会保留小数点)
- eval():可以将字符串作为js代码进行执行
- encodeURI():将string类型数据转码为url编码
- decodeURI():将url编码的字符串解码为原始字符串值
- Number():将任意类型转换为number
- String():将任意类型转换为string
var s = '123456';
console.log(typeof s);
//将字符串类型转换为number
s = parseInt(s);
console.log(s,typeof s);
//将字符串类型转换为number
s = parseFloat(s);
console.log(s,typeof s);
s = '3 + 2';
console.log(s);
//eval可以将字符串转换为可执行的js代码(非常危险,避免使用)
console.log(eval(s));
//
s = "http://www.softeem.top/query?str=白日依山尽,黄河入海流&id=100";
//将目标字符串转码为URL编码(对于特殊符号和中文进行转码)
//http://www.softeem.top/query?str=%E7%99%BD%E6%97%A5%E4%BE%9D%E5%B1%B1%E5%B0%BD%EF%BC%8C%E9%BB%84%E6%B2%B3%E5%85%A5%E6%B5%B7%E6%B5%81&id=100
s = encodeURI(s);
console.log(s);
//解码
//http://www.softeem.top/query?str=白日依山尽,黄河入海流&id=100
s = decodeURI(s);
console.log(s);
//将任意类型数据转换为number
s = Number(true); // 1
s = Number(null); // 0
s = Number(undefined); // NaN(not a number)
s = Number('123'); // 123
console.log(s);
//将任意类型数据转换为String
s = String(true); // "true"
s = String(undefined); // "undefined"
console.log(typeof s); // string
常见内置对象
Number
JavaScript 的 Number 对象是经过封装的能让你处理数字值的对象。Number
对象的创建方式分为两种:
-
使用Number构造器创建
var num = new Number('100');
-
使用Number的工厂方法创建
var num = Number('100')
关于工厂方法原理如下:
function User(id,name,pwd){ var u = { id:id, name:name, pwd:pwd } return u; } var u = User(1,"softeem","123");
使用示例:
//工厂模式
// var n2 = Number();
var n = new Number(undefined);
console.log(typeof n);
console.log(n instanceof Number);
console.log(Number.MAX_VALUE)
console.log(Number.isNaN(NaN))
var i = 3.1415926;
//保留指定number类型的小数点后2位
console.log(i.toFixed(2))
//最多截取小数点后三位并转换为string
console.log(typeof i.toLocaleString(i));
String
类似java中String,javascript的String类型也用于表示字符串,区别在于js中的String既可以表示字符串还可以表示字符,内部包含的一些方法与java中String类的方法基本一致,String对象的创建同number一样也包含两种创建方式:
- 构造器创建
- 工厂方法创建
var s = new String('softeem');
console.log('字符串长度:'+s.length);
//使用指定的html标签对字符串内容包裹
console.log(s.big()); // <big>softeem</big>
console.log(s.bold()); // <b>softeem</b>
console.log(s.link("http://www.softeem.top"));//<a href="http://www.softeem.top">softeem</a>
//es6特性
s = `hasdfasdfa
sdfasdfasd
fasdfas
dfaasdf`;
console.log("13267890532".match(/1[3578]\d{9}/));//使用字符串匹配对应的正则表达式,匹配结果为数组对象
console.log(/1[3578]\d{9}/.test('13567089876'));//使用指定的正则表达式判断是否匹配给定的字符串
console.log("ab,cd,ef".split(","));//使用给定正则表达式截取位数组
console.log("a.txt".endsWith(".txt"));//判断是否以指定后缀结束
console.log(" abc ".trim());//去除前后空格
Array
Array是js中的数组对象,创建方式包含以下:
//构造空数组对象
var a1 = [];
var a2 = new Array();
案例:
var arr = [6,7,4,3,5,2,1,9,8,10];
console.log(arr[0]);
//向数组中添加元素(末尾)
arr.push(8);
//获取数组长度
console.log(arr.length);// 11
//箭头函数(lammda表达式:ES6)
arr.forEach((item,index)=>{
console.log(item,index);
})
/**
* item: 当前遍历到的元素对象
* index:当前元素的索引
* array:目标数组对象
*/
arr.forEach(function(item,index,array){
console.log(item,index,array);
})
//排序:自己实现排序规则,等同java中集合排序中Comparator比较器
arr.sort((a,b)=>b-a);
console.log(arr); // [10, 9, 8, 8, 7, 6, 5, 4, 3, 2, 1]
//数组反转
arr.reverse();
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 8, 9, 10]
//弹出数组的末尾元素,并从数组中移除
console.log(arr.pop());//10
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 8, 9]
//向数组头部插入元素
arr.unshift('100');
console.log(arr); // ["100", 1, 2, 3, 4, 5, 6, 7, 8, 8, 9]
//取出数组头部的元素
console.log(arr.shift());
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 8, 9]
//获取指定元素的索引
let index = arr.indexOf(7);
console.log(index)// 6
//删除指定索引的元素 参数一:索引 参数二:删除的元素个数
arr.splice(index,1);
console.log(arr);//[1, 2, 3, 4, 5, 6, 8, 8, 9]
//使用指定的符号对数组中的元素进行拼接,转换成string
let s = arr.join(",");
console.log(s);// 1,2,3,4,5,6,8,8,9
/*
有数组 ["jackson","rose","tom","lily","adom","bob","chrise"]
要求按照英文字母顺序排序输出
*/
var names = ["jackson","rose","tom","lily","adom","bob","chrise"];
// names.sort((a,b)=>a.localeCompare(b));
names.sort();
console.log(names);
Math
Math对象类似java中Math类,js中的Math不能通过传统的方式(构造器,工厂)创建对象,内部的所有方法可以直接通过Math调用,不需要实例对象调用(类似java中静态方法)
//从传入的参数中返回最大的一个元素
console.log(Math.max(10,20,40,50,33,22,12,9));
//返回从0.0~1.0之间的随机浮点数
console.log(Math.random());
//返回5~10之间的整数?
var n = parseInt(Math.random() * 6) + 5;
console.log(n);
//四舍五入取整
console.log(Math.round(4.46))
//输出指定数的n次幂
console.log(Math.pow(3,3));
//向下取整
console.log(Math.floor(3.999));
//向下取整
console.log(Math.ceil(3.00001));
Date
let date = new Date();
console.log(typeof date);//object
//获取日期对象的毫秒数表示方式
let time = Date.now();
console.log(typeof time);//number
console.log(DateFormater(date));
//yyyy-MM-dd HH:mm:ss
//日期格式化函数
function DateFormater(date){
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m > 10 ? m : `0${m}`;
let d = date.getDate();
d = d > 10 ? d : `0${d}`;
let h = date.getHours();
h = h > 10 ? h : `0${h}`;
let min = date.getMinutes();
min = min > 10 ? min : `0${min}`;
let s = date.getSeconds();
s = s > 10 ? s : `0${s}`;
return `${y}年${m}月${d}日 ${h}:${min}:${s}`;
}
RegExp(正则表达式)
正则表达式在javascript用途主要在表单验证,正则表达式即通过一些特殊的符号标记按照一定的规则进行组织,形成字符串可以用于对指定的文本内容(string)进行匹配,查找,替换等操作。
js中正则表达式对象的创建方式主要包含以下三种:
-
使用构造器创建
var regex = new RegExp("\\d{3,5}");
-
使用正则表达式常量表示形式
var regex = /\d{3,5}/;
-
使用静态工厂创建
var regex = ("\\d{3,5}");
基本使用:
var num = "56432123123";
var regex = new RegExp("\\d{3,5}");
// regex = /\d{3,5}/;
//判断给定的字符串是否匹配给定的表达式
console.log(regex.test(num));
//执行匹配,并取出符合条件的字符串
console.log(regex.exec(num)[0]);
var phone = "1adfadsf135231123987fsdfsdf12138324234234sfsdf";
var regex = /1[3578]\d{9}/g;
var arr;
// Matcher ->group()
while((arr = regex.exec(phone)) !== null){
//取出匹配到的字符串
console.log(arr[0]);
}
var s = "HelloWorldSofteem";
regex = /world/i;
console.log(regex.test(s));
正则表达式使用实例:
验证手机号格式是否正确
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
手机号:<input type="tel" name="phone" onblur="checkPhone(this)">
<script>
function checkPhone(input){
//获取输入框的值
var tel = input.value;
//声明手机号格式正则表达式
var regex = /^1\d{10}$/;
//验证输入的值是否匹配正则表达式
if(!regex.test(tel)){
// alert('请输入正确的手机号!');
input.style.boxShadow="0 0 10px #f00";
input.value='';
}else{
input.style.boxShadow="0 0 10px #0f0";
}
}
</script>
</body>
</html>
DOM(文档对象模型)
概述
Javascript支持DOM编程,DOM即:Document Object Model;对于任何一个html网页都可以将页面中所有内容当做一颗倒置的文档树理解,可以通过js的dom操作对树中任意节点进行访问(添加,删除,修改,检索),倒置的文档树看上去,就像如下结构:
名词解释:
- 元素(Element):html中任意一个标签开始到标签结束,之间的内容(包括标签本身)都称之为元素,一个元素也称之为一个节点
- 属性(Attribute):属性是开始标签中有属性名和属性值构成的一个键值对结构
获取DOM几种方式
-
获取文档中的所有元素
var all = document.all; // 返回一个包含了文档中所有节点的数组对象
-
根据标签获取元素
//获取页面中的所有h1元素 (返回数组对象) let titles = document.getElementsByTagName("h1"); console.log(titles);
-
根据元素的class名称获取元素(存在兼容性问题,慎用)
//返回所有class名称为row的元素(返回数组对象) let rows = document.getElementsByClassName("row"); console.log(rows);
-
根据元素的name属性获取元素集合(一般只有表单元素才有name属性)
let langs = document.getElementsByName("lang"); //返回数组
-
根据元素的id获取元素(因为id在页面中具备唯一性,因此以下代码只能获取一个元素)
let selectAll = document.getElementById("selectAll");//返回单个元素对象
以上都是一些比较常规的获取dom的方式,另外javascript还提供了两种更为全面的获取dom对象的方式:
-
document.querySelector():根据css的选择器获取匹配的单个元素
-
document.querySelectAll():根据提供的css选择器获取匹配的多个元素
//根据css的选择器获取指定选择器选中的单个元素 var h2 = document.querySelector("h2"); console.log(h2); var tds = document.querySelectorAll("td"); console.log(tds); //获取所有class="row" h1 h2元素? var elements = document.querySelectorAll(".row,h1,h2"); console.log(elements);
综合练习
省市联动效果:
-
数据文件
var data = { "cityCode":[ { "省": "北京", "市": [ { "市名": "北京", "编码": "101010100" }, {...} ] }, { "省": "北京", "市": [ { "市名": "北京", "编码": "101010100" }, {...} ] } ... }
-
实现过程:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="province" id="province"></select>省 <select name="city" id="city"></select>市 <!--引入数据脚本文件--> <script src="data.js"></script> <script> //获取所有的省 let provs = data.cityCode; provs.forEach((item,index)=>{ //创建元素 var option = document.createElement("option"); option.value = index; option.innerText = item.省; //获取select节点并将创建的子节点插入进来 document.getElementById("province").appendChild(option); //加载市 loadCity(0); }) //为省列表绑定内容改变事件 document.getElementById("province").addEventListener('change',function(){ loadCity(this.value); }); function loadCity(index){ //获取当前被选中的元素的value属性值(索引) var citys = provs[index].市; //清空原节点中的子元素 document.getElementById("city").length = 0; //遍历数组重新创建节点并加入到select中 citys.forEach((e,i)=>{ let option = new Option(e.市名,e.编码); document.getElementById("city").appendChild(option); }) } </script> </body> </html>
DOM编程
插入DOM
js-dom中向指定节点插入元素的方法主要包含以下几类:
- appendChild(node):向当前节点中插入子元素(子元素必须是一个dom对象)
- insertBefore(newNode,refNode):向当前节点中的refNode之前插入newNode
- innerHTML:向当前节点插入html代码(覆盖原有的内容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box1">
<h1>dom插入演示</h1>
</div>
<button type="button" id="insert1" data-list="[1,2,3,4,5]">插入元素</button>
<button type="button" id="insert2">插入输入框</button>
<script>
//获取目标节点
var box1 = document.querySelector('#box1');
document.getElementById('insert1').addEventListener('click',function(){
//创建节点
var hr = document.createElement('hr');
//将指定节点插入到目标节点
// let e = box1.appendChild(hr);
let h1 = document.querySelector('h1')
//向指定节点中的某一个子节点之前插入元素
box1.insertBefore(hr,h1);
})
document.getElementById('insert2').addEventListener('click',function(){
//创建节点
var input = document.createElement('input');
input.type = 'text';
input.textContent = "123123123"
input.value = 'softeem';
input.className = 'input-box';
input.id = 'username';
//setAttribute用于向元素中添加属性和属性值(即便属性不存在该元素上)
//data-* data-msg data-user-name
input.setAttribute('data-msg','helloworld');
box1.appendChild(input);
})
</script>
</body>
</html>
修改DOM
- innerText:将文本内容插入到指定节点
- innerHTML:将html代码插入到指定节点
删除DOM
- removeChild(childNode):删除当前节点下指定的子节点
- remove():删除当前节点对象
DOM补充
- children: dom元素通过该属性可以获取当前节点下的所有的子节点(集合)
- parentNode:dom元素通过该属性可以获取当前节点的父节点(唯一)
BOM
概述
BOM:Brower Object Model(浏览器对象模型);即js中将有关浏览器的操作的顶层元素都是来自window对象;对外界提供了一个用于操作浏览器的访问结构,通过bom可以获取window相关信息,比如屏幕的尺寸,浏览器的详细信息(版本,内核,配置等),页面跳转,历史记录,定位,本地存储等,对于移动设备来说还可以获取与本机设备交互的硬件接口(位置信息,蓝牙,摄像头,陀螺仪)
window
window对象是BOM的顶层对象,bom中的一些核心对象都是源自于window,全局函数的this指针一般都是指向window
window的常见属性:
- innerWidth:当前窗口可用区域的宽度
- innerHeight:当前窗口可用区域的高度
- outerWidth:浏览器窗口开启的实际宽度
- outerHeight:浏览器开启的实际高度
基于window对象的弹窗组件
- alert():警告框
- confirm():确认框
- prompt():消息输入框
- open():自定义窗口