1 JavaScript介绍
- Javascript是一种面向对象，动态类型，区分大小的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
- 以前的服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
- JavaScript 的正式名称是 “ECMAScript”。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 1996 年开始，已经出现在所有的 Netscape 和 Microsoft 浏览器中。ECMA-262 的开发始于 1996 年，在 1997 年 7 月，ECMA 会员大会采纳了它的首个版本。
- JavaScript的组成包含ECMAScript、DOM、BOM。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等。
（1）ECMAScript：是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序语言。
简单点说，ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象。
（2）DOM：把整个页面规划成由节点层构成的文档，它不与浏览器、平台、语言相关，为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM编程可以实现网页内容校验和动态变化的效果。
（3）BOM：是浏览器的一种特性，它可以对浏览器窗口进行访问和操作，例如移动、关闭窗口，调整窗口的大小，支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果。
注意：简单归纳:
ECMAScript可以理解为JS的基础语法部分
DOM可以简单理解为,使用document对象操作文档内容的编程
BOM可以理解为,使用window对象操作浏览器行为的编程
- JavaScript的特点：
JS是运行在浏览器上的一种脚本语言
1.脚本语言
脚本语言是一种简单的程序，规模小,不需要编译,运行快,是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。
2.基于对象的语言
面向对象有三大特点（封装，继承，多态）缺一不可。通常"基于对象"是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。没有了继承的概念也就无从谈论"多态"
3.事件驱动：
在网页中执行了某种操作的动作，被称为"事件"(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
4.简单性
变量类型是采用弱类型，并未使用严格的数据类型。var a,b,c; a=123; b=“abc”; a=b;
5.安全性
JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
6.跨平台性
JavaScript依赖于浏览器本身，与操作平台无关， 只要计算机安装了支持JavaScript的浏览器（装有JavaScript解释器），JavaScript程序就可以正确执行。
缺点：
各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。
7.JS 和java的区别
区别1：公司不同，前身不同
JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script；Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发； Java的前身是Oak语言。
区别2：基于对象和面向对象
JavaScript是脚本语言，是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用，但不支持继承和多态。Java是面向对象的，是一种真正的面向对象的语言，支持封装、继承和多态。
区别3：变量类型强弱不同
Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。
区别4: 运行的位置不同
Java是运行在服务器端的大型编程语言, JS是运行于客户端(浏览器)一种小规模脚本语言
8.HTML和CSS和JS这之间的关系
HTML和CSS和JS都是前端的主要技术,三者各有分工.HTML可以用于制作网页的主体结构,CSS用于给网页做美化,JS用于在网页上添加动态效果。
2 JS的引入方式
2.1 内嵌式引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--内嵌式引入方式
1在head标签中,用一对script标签,嵌入JS代码
2type属性可以省略不写
-->
<script type="text/javascript">
/*定义一个函数(方法)*/
function fun1(){
/*弹窗提示一点信息 */
alert("你好")
}
</script>
</head>
<body>
<input type="button" value="点我呀" onclick="fun1()" />
</body>
</html>
- 缺点:
（1）我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低
（2）JS代码和HTML代码混合在一个文件中,可阅读性差
2.2 链接式引入
将JS代码放入外部JS文件中,通过script标签引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--链接式 引入外部JS文件
提高的代码复用度
降低了代码维护的难度
1 一个页面可以同时引入多个不同的JS文件
2 script标签一点用于引入外部JS文件,就不能在中间定义内嵌式代码
3 一个页面上可以用多个script标签 位置也不是非得放到head标签中不可
4src属性可以指向一个网络路径,就是第三种引入方式
-->
<script type="text/javascript" src="js/myjs.js"></script>
<script type="text/javascript" src="js/myjs2.js"></script>
<!--<script type="text/javascript" src="URL网络路径"></script>
</head>
<body>
<input type="button" value="点我呀" onclick="fun1()" />
<input type="button" value="点我呀2" onclick="fun2()" />
<input type="button" value="点我呀3" onclick="fun3()" />
<script >
function fun3(){
alert("总能见到你")
}
</script>
</body>
</html>
- 优点:
代码复用度高,更易于维护代码 - 注意事项:
（1）在一个页面上可以同时引入多个JS文件
（2）每个JS文件的引入都要使用一个独立的script标签
（3）内嵌式和链接式的引入不能使用同一标签
3 JS数据类型和运算符
3.1 数据类型
（1）数值型：
number整数和浮点数统称为数值。例如85或3.1415926等。
（2）字符串型：
String由0个,1个或多个字符组成的序列。在JavaScript中，用双引号或单引号括起来表示，如"您好"、‘学习JavaScript’ 等。
（3）逻辑（布尔）型：
boolean用true或false来表示。
（4）空（null）值：
表示没有值，用于定义空的或不存在的引用。要注意，空值不等同于空字符串""或0。
（5）未定义（undefined）值：
它也是一个保留字。表示变量虽然已经声明，但却没有赋值。
（6）除了以上五种基本的数据类型之外，JavaScript还支持复合数据类型Object，复合数据类型包括对象和数组两种。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 1 JS是弱类型的脚本语言,所有的变量 对象 的数据类型的声明统统是var
* 2 变量声明时没有确定具体的数据类型,在变量赋值时确定变量具体的数据类型
* 3 JS中数据类型有哪些 ? number string
* 4 JS中的变量可以反复声明,后声明的会覆盖之前声明的同名变量
* 5 JS中的得代码可以不用以;作为结尾 每一行代码都是一个独立的语句(建议写)
* 6 JS中字符串一般不区分 "" '' 只要不混用即可
* 6 可以用不同的类型的数据给变量赋值,变量会自动改变自身的数据类型
* 7 当给一个变量赋值为null时,变量的类型为 object
* 8 变量只声明不赋值的情况下,数据和数据类型都显示 undefined
* 9 对象 数组其他类型可以叫做复合数据类型 object
* 10 JS中的标识符命名规则和JAVA中的保持一致即可 尽量避免 使用$ 会和jQuery冲突
* */
/*var i=10;
alert(i);*/
/*var i;
i=10;*/
/*var i =10;
i=20;
var i=30;
alert(i);*/
/*var i= 10;
alert(typeof i);*/
/*var i =3.14;
alert(i)*/
/*var j="你好";
var z ='hello js';
alert(j)
alert(z)
alert(typeof j)*/
/*var i=10;
alert(i);
alert(typeof i);
i="你好";
alert(i);
alert(typeof i);*/
/*var b=2>1;
alert(b);
alert(typeof b)*/
/*var i= null;
alert(i);
alert(typeof i);*/
/*var i;
alert(i)
alert(typeof i);*/
/*var i=[1,2,3];
alert(i)
alert(typeof i)*/
/*var i=new Date();
alert(typeof i)*/
</script>
</head>
<body>
</body>
</html>
3.2 运算符号
JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号
3.2.1 /%符号
JS中,数字类型都是number,除法的结果中如果没有小数位,直接就是一个整数,如有小数位,才是浮点数
JS中如果出现除零,那么结果是 infinity,而不是报错
<script>
/*
* 能除尽,则默认结果就是一个整数,不能除尽,结果默认就是浮点数
* 除零不会出现异常,而是出现 Infinity
* 和0取余数,出现NaN not a number 不是一个数字
* */
alert(10/3);
alert(10/0);
alert(10%3);
alert(10%0);
</script>
JS取余数运算对于浮点数仍然有效,如果和0取余数,结果是NaN(not a number)
3.2.2 +符号
- 同时也是连接运算符,看两端的变量类型,如果都是number那么就是算数中的加法 如果有字符串,那么就是连接符号,如果是布尔类型和number相加,那么会将true转化为1 将false 转化为0
<script>
/*
* +号中 如果一段是字符串,就变成了文字拼接
* 数字和 boolean类型相加 true会转变成1 false会转变成0 再做数学运算
* */
var i=1;
alert(i+1);
alert(1+"1");
alert(1+true);
</script>
3.2.3 == 等值符
先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为number再比较内容
<script>
/*
* == 等值符
* 先比较类型,如果类型一致,则比较值是否相同
* 如果类型不一致,会将数据尝试转换number 再比较内容
* */
var a =1;
var b="1";
var c=true;
var d="true";
alert(a==b)// t
alert(a==c)// t
alert(a==d)// f
alert(b==c)// t
alert(b==d)// f
alert(c==d)// f
</script>
3.2.4 ===等同符
数据类型不同 直接返回false如果类型相同 才会比较内容
<script>
/*
* === 等同符
* 如果数据类型不同,直接返回false 如果类型相同,才会继续比较内容
*
* */
var a =1;
var b="1";
var c=true;
var d="true";
alert(a===b)//f
alert(a===c)//f
alert(a===d)//f
alert(b===c)//f
alert(b===d)//f
alert(c===d)//f
alert("asdf"==="asdf")//t
</script>
3.3 流程控制
3.3.1 分支结构 if switch
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 定义变量表示月份
* 根据月份输出该月的季节和应季活动
* */
var i=10;
if(i ==12 || i ==1 || i==2){
alert("大约在冬季: 冬天吃火锅");
}else if(i >= 3 && i<=5 ){
alert("春天来了: 春天吃青菜");
}else if(i >= 6 && i <= 8){
alert("夏天到了: 吃烧烤喝啤酒");
}else if(i >= 9 && i <=11){
alert("秋天到了: 贴秋膘");
}else{
alert("月份有误")
}
switch(i){
case 3:
case 4:
case 5:
alert("春眠不觉晓");
break;
case 6:
case 7:
case 8:
alert("夏天蚊子咬");
break;
case 9:
case 10:
case 11:
alert("秋天一身包");
break;
case 1:
case 2:
case 12:
alert("冬天蚊子死翘翘");
break;
default:
alert("月份有误")
}
</script>
</head>
<body>
</body>
</html>
3.3.2 循环结构 while do_while for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var i=1;
while(i<=10){
alert(i)
i++;
}
/*
* 考试,直到分数过线为止
* 求1-10整数和 1+10*(10/2) */
var sum=0;
var j=1;
do{
sum+=j;
j++;
}while(j<=10);
alert(sum)
var sum2=0;
for(var z=1;z<=10;z++){
sum2+=z;
}
alert(sum2)
</script>
</head>
<body>
</body>
</html>
3.4 函数
- 类似于java中的方法,JS中也可以定义一些函数,java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,但是JS中定义函数的语法相对简单很多。
- 主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表
- 函数定义的三种语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 第一种语法格式 常见
* function 函数名(参数列表){js代码}
*
*
* 第二种语法
* var 函数名=function(参数列表){JS代码}
*
* 第三种语法 不常用 了解
* var 函数名=new Function('js代码')
*
* */
function fun1(){
alert("你好");
}
var fun2=function(){
alert("你很好")
}
var fun3=new Function('alert("你非常好");');
// 调用方法
fun1();
fun2();
fun3();
</script>
</head>
<body>
</body>
</html>
- 函数参数和返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 1传入的实参可以和形参个数不一致
* 2如果函数中有返回值,那么直接用return关键字返回即可
* */
function fun1(a,b,c){
alert("a:"+a);
alert("b:"+b);
alert("c:"+c);
}
//fun1(10,"hello js",false);
// 少传参数 OK
//fun1(1,2);
// 多传参数 OK 多出来的参数相当于没传
//fun1(10,"hello js",false,new Date());
function fun2(a,b){
var c=a*b;
return c;
}
//var x =fun2(10,20);
//alert(x)
// 方法本身作为参数(了解)
function funa( i ,j){
return i+j;
}
function funb(a){
return a(10,20);
}
var sum =funb(funa)
alert(sum)
</script>
</head>
<body>
</body>
</html>
4 JS中数组的使用
4.1 创建方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*第一种
*创建了一个空数组 new Array();
* 会自动根据索引生成最大索引长度的数组
* */
var arr=new Array();
arr[0]=1;
arr[5]=2
console.log(arr);
/*
*第二种
* 创建定长数组 new Array(5);
* */
var arr2=new Array(5);
arr2[0]="x";
arr2[4]=true;
console.log(arr2)
/*
* 第三种创建语法
* 创建时,直接指定元素值
* */
var arr3=new Array("asdf",10,20.3,true);
console.log(arr3)
/*
*第四种语法
* 相当于第三种语法的简写
* */
var arr4=["asdf",10,20.3,true];
console.log(arr4)
</script>
</head>
<body>
</body>
</html>
4.2 元素和长度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr=[11,22,33];
console.log(arr)
console.log(arr[0]);
console.log(arr.length)
/*
* JS中的数组是可以通过修改length属性来改变数组长度的
* */
arr.length=5;
console.log(arr)
/*
* JS的数组可以通过索引改变数组的长度
* */
arr[9]=99;
console.log(arr);
</script>
</head>
<body>
</body>
</html>
4.3 遍历方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr=[5,7,3,1,6,2,4,9,8];
/*
* 普通for循环遍历数组
* */
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
/*
*foreach循环遍历数组
* JS 中foreach写法为 for( var i in 数组)
* i 不是元素 是索引
* */
for (var i in arr){
console.log(arr[i])
}
</script>
</head>
<body>
</body>
</html>
4.4 常用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var arr=[1,2,3,4,5,6,7,8,9];
var index =arr.indexOf(7);//查询元素索引的方法
console.log(index)
// 合并两个数组
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);
console.log(children)
// 合并三个数组
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
console.log(family)
// 合并字符串
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var fs =fruits.join();
console.log(fs)
// 移除最后一个元素
var fruit=fruits.pop();
console.log(fruits)
console.log(fruit)
// 想结尾增加元素
fruits.push("Grape");
console.log(fruits)
//反转数组
fruits.reverse();
console.log(fruits)
//删除数组第一个元素
var ss =fruits.shift();
console.log(fruits);
console.log(ss)
//向第一个位置添加元素
fruits.unshift("火龙果");
console.log(fruits);
// 截取子数组 从哪个索引开始,到哪个索引结束 包头不包尾
var citrus = fruits.slice(1,3);
console.log(citrus)
var numbers =[1,2,3,4,5,6,7,8,9]
/*
* 删除数组中的某些元素
* 2 从哪个索引开始删除
* 3 删除多个少个元素
* */
/*numbers.splice(2,3);
console.log(numbers)*/
/*
* 如果第二个参数是0 那么就变成了在指定索引位置增加元素
* */
numbers.splice(2,0,100);
console.log(numbers)
</script>
</head>
<body>
</body>
</html>
5 JS中的对象
5.1 常用对象
- JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态，Java script 中有一些浏览器直接识别并使用的对象,常见的对象有Array，String，Math，Number，Date对象等等.
5.1.1 String
- String和java中的String很类似.
- String的常用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 根据索引获取字符
/*var str ="hello js";
var c =str.charAt(6);
console.log(c)*/
// 拼接字符串
var a="hi";
var b="good";
var c ="China";
var d=c.concat(a,b);
console.log(d)
var e ="adsf";
var f=e.repeat(3);
console.log(f)
// 截取字符串
var g="helloJhon";
var h=g.substr(1,5);// 从哪里开始,连续截取多少个字符
console.log(h)
// 包头不包尾
var i=g.substring(1,7);// 从哪里开始,到哪里结束
console.log(i)
// 获取长度
console.log(g.length)// length属性
// JS中非常特殊的一个函数,可以将一段字符串当做JS代码来执行
// 将字符串内容解析称JS代码并运行
var testStr=" var x =10 ";
eval(testStr);
console.log(x)
</script>
</head>
<body>
</body>
</html>
5.1.2 Number的常用属性和方法(包装类)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
console.log(Number.MAX_VALUE)
console.log(Number.MIN_VALUE)
console.log(Number.MAX_SAFE_INTEGER)
console.log(Number.MIN_SAFE_INTEGER)
console.log(Number.parseFloat("10.123")+20);
console.log(Number.parseInt("30")+20);
var i = 10%0;
var j = 10/0;
console.log(i)
console.log(j)
console.log(Number.isNaN(i)) // is not a number 是不是NAN
console.log(Number.isFinite(j))
console.log(Number.isSafeInteger(Number.MAX_VALUE))
console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER))
</script>
</head>
<body>
</body>
</html>
5.1.3 Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
console.log(Math.round(3.64))
console.log(Math.floor(3.14))// 地板数
console.log(Math.ceil(3.01))// 天花板数
console.log(Math.max(1,2,3,5.6))
console.log(Math.min(1,2,3,5.6))
console.log(Math.random())
console.log(Math.sqrt(16))
// 属性
console.log(Math.PI)
// 生成给定范围内的随机数
var start =10;
var end =16;
var result =Math.floor(Math.random()*(end-start+1)+start);
console.log(result)
</script>
</head>
<body>
</body>
</html>
5.1.4 Date对象
Date 对象用于处理日期与时间。
创建 Date 对象语法： new Date()
以下四种方法同样可以创建 Date 对象：
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 在程序中 西方的月份编号从0开始
* 1 2 3 4 5 6
* 0 1 2 3 4 5
* */
var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)
console.log(d1);
console.log(d2);
console.log(d3);
var d4 = new Date(2048,0,13,16,51,20,123)
console.log(d4)
// set*** 略自己尝试一下
console.log(d4.getYear());// 和1900年的年份差
console.log(d4.getFullYear());// 完整的年份
console.log(d4.getMonth());
console.log(d4.getDate());
console.log(d4.getHours());
console.log(d4.getMinutes());
console.log(d4.getSeconds());
console.log(d4.getMilliseconds());
var d5 = new Date(2048,0,13,16,51,20,456)
console.log(d4<d5)
// 关于日期对象格式化处理
/*date对象的格式化方法*/
/*修改Date原型,添加一个format格式化的方法*/
Date.prototype.format = function(fmt){
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(
RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
var fmt=d4.format("yyyy-MM-dd hh:mm:ss");
console.log(fmt)
</script>
</head>
<body>
</body>
</html>
5.2 自定义对象
- JS除了一些常用方法和类以外,允许我们自己定义对象,在JS中自定义对象有三种可用的语法格式,分别为:
（1）调用系统的构造函数创建对象
（2）自定义构造函数创建对象
（3）字面量的方式创建对象
5.2.1 调用系统的构造函数创建对象(Object)
<script>
// 实例化对象
var obj =new Object();
// 给对象添加属性
obj.name="张思锐";
obj.age=35;
obj.gender="男";
// 给对象添加方法
obj.eat=function(food){
console.log(this.name+"正在吃"+food)
}
// 查看对象属性
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);
// 调用对象方法
obj.eat("蛋糕");
</script>
5.2.2 自定义构造函数创建对象(function)
<script>
// 准备一个构造方法
function Person(pname,page){
this.pname=pname;
this.page=page;
this.eat=function(food){
console.log(this.page+"岁的"+this.pname+"正在吃"+food);
}
}
var p1=new Person("张思锐",10);
// 查看对象属性
console.log(p1.pname);
console.log(p1.page);
// 调用对象方法
p1.eat("油条");
</script>
5.2.3 字面量的方式创建对象(JSON)
<script>
/* JSON
var 对象名 ={属性名:属性值,属性名:属性值, ... ... ,方法名:方法声明,方法名:方法声明}
*/
var person ={
name:"晓明",
gender:"男",
age:10,
eat:function(food){
console.log(this.age+"岁的"+this.gender+"孩儿"+this.name+"正在吃"+food)
}
};
// 查看对象属性
// 调用对象方法
console.log(person.name)
console.log(person.gender)
console.log(person.age)
person.eat("馒头")
</script>
5.3 原型
- 当我们用构造方法创建一个类时,在内存会预先调用构造方法创建一个对象,这对象我们称之为原型对象,构造方法对象中有一个prototype属性指向该对象,原型对象中有一个constructor属性指向构造方法.获得一个类的原型对象可以通过类名.prototype的方式获得.
- 构造方法和原型的关系
// 准备一个构造方法
function Person(pname,page){
this.pname=pname;
this.page=page;
this.eat=function(food){
console.log(this.page+"岁的"+this.pname+"正在吃"+food);
}
}
console.log(Person)// Constructor对象 构造方法对象
console.log(Person.prototype)
- 当前类对象和原型的关系
当前类的每一个对象内部有一个 _proto_的一个属性,指向他们的原型, 当我们用对象获取属性和调用方法时,如果当前对象中没有,那么会去他们所对应的原型对象中去找,也就是说,我们通过对原型的操作可以实现为一个类所有的对象添加属性和方法.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 准备一个构造方法
function Person(pname,page){
this.pname=pname;
this.page=page;
this.eat=function(food){
console.log(this.page+"岁的"+this.pname+"正在吃"+food);
}
}
console.log(Person)// Constructor对象 构造方法对象
console.log(Person.prototype)
// 给Person所有的对象增加属性和方法
//给Person的原型增加属性
Person.prototype.gender="男";
//给Person的原型增加一个方法
Person.prototype.sleep=function(){
console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");
}
var p1=new Person("张三",10);
p1.eat("蛋挞")
p1.sleep();
var p2=new Person("李四",8);
p2.eat("牛角面包")
p2.sleep()
console.log(p1);
console.log(p2);
</script>
</head>
<body>
</body>
</html>
5.4 原型链
- 一个类的原型是一个Object类的对象,也就是说,原型也有一个_proto_属性,指向Object的原型对象,那么也就是说 Person prototype中没有的属性和方法会继续向Object prototype去找,也就是说,我们在Object原型中添加的属性和方法,我们在person1和person2中也可以使用.那么这种连续的 _proto_属性指向就形成了原型链。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 准备一个构造方法
function Person(pname,page){
this.pname=pname;
this.page=page;
this.eat=function(food){
console.log(this.page+"岁的"+this.pname+"正在吃"+food);
}
}
// 给所有的对象增加属性和方法
//给最终原型增加属性
Object.prototype.gender="男";
//给Person的原型增加一个方法
Object.prototype.sleep=function(){
console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");
}
var p1=new Person("张三",10);
p1.eat("蛋挞")
p1.sleep();
var p2=new Person("李四",8);
p2.eat("牛角面包")
p2.sleep()
console.log(p1);
console.log(p2);
</script>
</head>
<body>
</body>
</html>
6 JS中的事件
- 什么是事件？
事件式可以被浏览器侦测到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么事,JS可以根据不同行为。绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互 - 事件的绑定和触发：给页面上的元素先绑定事件 然后通过行为去触发
6.1 鼠标事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1{
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
<script>
function fun1(){
console.log("双击666")
}
function fun2(){
console.log("鼠标按下")
}
function fun3(){
console.log("鼠标抬起")
}
function fun4(){
console.log("鼠标进入")
}
function fun5(){
console.log("鼠标离开")
}
function fun6(){
console.log("鼠标移动")
}
</script>
</head>
<body>
<div class="d1"
ondblclick="fun1()"
onmousedown="fun2()"
onmouseup="fun3()"
onmouseenter="fun4()"
onmouseleave="fun5()"
onmousemove="fun6()">
</div>
</body>
</html>
6.2 键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
console.info("按钮按下")
}
function fun2(){
console.info("按钮抬起")
}
function fun3(){
console.info("按钮按下并抬起")
}
</script>
</head>
<body>
<input type="text" onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" />
</body>
</html>
6.3 表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){console.log("获得焦点");}
function fun2(){console.log("失去焦点");}
function fun3(){console.log("正在输入");}// 只要输入了,就会触发
function fun4(){console.log("内容改变");}// 内部信息发生变化的同时,要失去焦点
function fun5(sel){console.log("内容发生改变了"+sel.value)}
function fun6(){
alert("发生了提交事件");
// 做了一些运算之后 动态决定表单能否提交
return false ;
}
function fun7(){
console.log("发生了重置事件");
return true;
}
</script>
</head>
<body>
<form method="get" action="https://www.baidu.com" onsubmit="return fun6()" onreset="return fun7()">
<input name="" value="" type="text" onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
<select name="city" onchange="fun5(this)">
<option selected>-请选择城市-</option>
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">上海</option>
<option value="4">重庆</option>
</select>
<br />
<input type="submit" value="提交数据" />
<input type="reset" value="重置数据" />
</form>
</body>
</html>
6.4 页面加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function testFun(){
var in1=document.getElementById("i1");
var v1=in1.value;
console.log(v1)
}
</script>
</head>
<body onload="testFun()">
<input type="text" value="测试文字" id="i1" />
</body>
</html>
7 BOM编程学习
7.1 BOM和DOM
（1）什么是BOM
BOM是Browser Object Model的简写，即浏览器对象模型。
BOM有一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM的顶层是window对象
（2）什么是DOM
DOM是Document Object Model的简写，即文档对象模型。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。
DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。
DOM的顶层是document对象
（3）DOM和BOM的关系
红色框内是归DOM，绿色框内归BOM；也可以说DOM也是归BOM管的。
BOM编程就是把整个浏览器抽象成一个对象(window),这个对象中有很多的属性和方法,访问这些属性或者调用这些方法就可以控制浏览器作出…行为。
DOM编程就是把浏览器当前页面对应的文档抽象成一个对象(document),这个对象中有很多关于操作文档的一些属性和方法,访问这些属性和方法的时候,我们就可以通过代码动态控制页面上显示的内容。
BOM 是为了操作浏览器出现的 API，window 是其根对象。
DOM 是为了操作文档出现的 API，document 是其根对象。
7.2 window对象及常用方法
- 什么是window对象
Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写 Window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。 - Window 对象属性
- Window 对象方法
- Window 三种弹窗方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
/*
* 如果是使用window对象调用的方法和访问的属性 那么window对象都可以省略不写
*
* */
window.alert("你好呀");//普通信息提示框
var con =window.confirm("确定要删除***女友吗?");// 确认框
console.log(con);
var message =window.prompt("请输入3号女友的名字","例如:小刚");// 信息输入框
console.log(message)
}
</script>
</head>
<body>
<input type="button" value="测试按钮" onclick="fun1()"/>
</body>
</html>
- 定时器的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var intervalIDS =new Array(); // [1,2,3 ]
// 循环执行的定时器任务
function startInterval(){
// 2
var intervalID = window.setInterval(
function(){
var today =new Date();
var hours=today.getHours();
var minutes=today.getMinutes();
var seconds =today.getSeconds();
var str = hours+"点"+minutes+"分"+seconds+"秒";
var ta =document.getElementById("timeArea");
ta.value =str;
},
1000
);
intervalIDS.push(intervalID);
}
function stopInterval(){
while(intervalIDS.length >0){
window.clearInterval(intervalIDS.shift());
}
}
var timeoutIDS =new Array();
// 执行一次的定时器任务
function startTimeout(){
var timeoutID =window.setTimeout(
function(){
var today =new Date();
var hours=today.getHours();
var minutes=today.getMinutes();
var seconds =today.getSeconds();
var str = hours+"点"+minutes+"分"+seconds+"秒";
console.log(str)
},
5000
);
timeoutIDS.push(timeoutID);
}
function stopTimeout(){
while(timeoutIDS.length >0){
window.clearTimeout(timeoutIDS.shift());
}
}
</script>
</head>
<body>
<input type="text" id="timeArea" /> <br />
<input type="button" value="开始Interval" onclick="startInterval()" />
<input type="button" value="结束Interval" onclick="stopInterval()" />
<input type="button" value="开始timeout" onclick="startTimeout()" />
<input type="button" value="结束timeout" onclick="stopTimeout()" />
</body>
</html>
- open和close方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
window.open("https://www.baidu.com")
}
function fun2(){
window.close();
}
</script>
</head>
<body>
<input type="button" value="打开百度" onclick="fun1()" />
<input type="button" value="关闭页面" onclick="fun2()" />
</body>
</html>
7.3 BOM中其他常见对象
- location对象
location对象,是window对象的一个属性,代表浏览器上URL地址栏,使用location对象可以操作地址栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
console.log(location.host);// 服务器的IP+端口号
console.log(location.hostname);// IP
console.log(location.port);// 端口号
console.log(location.href);// 地址栏中具体的文字
location.href="https://www.baidu.com"
}
</script>
</head>
<body>
<input type="button" value="测试location" onclick="fun1()" />
</body>
</html>
- history对象
history对象是window对象的一个属性,代表浏览器访问历史记录,通过history的操作我们可以实现翻阅浏览器历史网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
window.history.forward();
}
function fun2(){
history.back();
}
function fun3(){
history.go(2); // 正整数 向前跳转 * 页 负整数 向后跳转*页
}
</script>
</head>
<body>
<a href="a.html" target="_self">pageA</a>
<input type="button" value="向前" onclick="fun1()"/>
<input type="button" value="向后" onclick="fun2()"/>
<input type="button" value="go" onclick="fun3()"/>
</body>
</html>
- screen和navigator
screen代表屏幕,navigator代表浏览器软件本身,通过这两个对象可以获得屏幕和浏览器软件的一些信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
console.info(window.screen.width)
console.info(window.screen.height)
console.info(navigator.userAgent)
console.info(navigator.appName)
}
</script>
</head>
<body onload="fun1()">
</body>
</html>
8 DOM编程学习
8.1 DOM介绍
- 简单来说，DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
- document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
- document对象是window对象的一个成员属性，通过
window.document来访问，当然也可以直接使用document,根据HTML代码结构特点，document对象本身是一种树形结构的文档对象。
-
DOM节点分类node
结点对象Node：document对象中的每一个分支点都是一个node对象,它有三个子类
（1）元素节点Element： 如:<a href="链接地址">我的链接</a>
（2）属性节点Attribute： 如:href="链接地址"
（3）文本节点Text： 如:我的链接 -
DOM操作的内容
（1）查询元素（获取元素,进而操作元素,或者元素的属性,文本）
（2）操作文本
（3）操作属性
（4）操作元素
（5）操作CSS样式（一个特殊的属性style） -
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面分析</title>
</head>
<body>
x
<div id="d1" style="width: 100px;height: 100px; border: 1px solid red;">
1a
<span>hello</span>
2b
<span>thank you</span>
3c
<span>thank you very much</span>
4d
</div>
y
</body>
</html>
上面HTML页面代码的树形结构图如下
- Node节点常用的属性和方法
8.2 节点操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
// 获得document对象
var element1 =document.getElementById("d1");
console.log(element1);
element1.innerText="这是我的div";
}
function fun2(className){
var elements =document.getElementsByClassName(className);
console.log(elements)
for(var i =0;i<elements.length;i++){
console.log(elements[i])
}
}
function fun3(){
var elements =document.getElementsByTagName("input");
console.log(elements);
for(var i =0;i<elements.length;i++){
console.log(elements[i])
}
}
function fun4(){
var elements=document.getElementsByName("hobby");
console.log(elements);
for(var i =0;i<elements.length;i++){
console.log(elements[i])
}
}
</script>
</head>
<body>
<div id='d1' class="a">这是第一个div</div>
<div id='d2' class="a">这是第二个div</div>
<div id='d3' class="a">这是第三个div</div>
<input id='i1' class="a" name='name1'/>
<div id='d4' class="b" name='name1'>这是第四个div</div>
<div id='d5' class="b">这是第五个div</div>
爱好:
<input type="checkbox" name="hobby" value="1" />篮球
<input type="checkbox" name="hobby" value="2" />足球
<input type="checkbox" name="hobby" value="3" />羽毛球
<hr />
<input type="button" value="id值获取" onclick='fun1()' />
<input type="button" value="class属性值获取" onclick='fun2("b")' />
<input type="button" value="标签名获取" onclick='fun3()' />
<input type="button" value="name属性值获取" onclick='fun4()' />
</body>
</html>
8.3 节点属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
//获得属性值
var node =document.getElementById("in1");
// 语法1 获得 节点.属性名 修改 节点.属性名 =属性值
console.log(node.type);
console.log(node.value);
//改变属性值
node.type="button";
node.value="你好我也好";
// 语法2 getAttribute setAttribute
console.log(node.getAttribute("type"));
console.log(node.getAttribute("value"));
node.setAttribute("type","button");
node.setAttribute("value","大家好");
}
</script>
</head>
<body>
<input type="text" value="你好呀" id="in1" />
<hr />
<input type="button" value="变" onclick="fun1()" />
</body>
</html>
8.4 节点样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
border: 1px solid red;
}
.a{
background-color: lightblue;
color: blue;
font-size: 40px;
}
</style>
<script>
function fun1(){
// 节点.style.样式名=样式值
var element =document.getElementById("div1");
element.style.width="200px";
element.style.height="200px";
element.style.border="10px solid green";
// css样式在更多的时候是以class选择器的形式作用到元素上
// 可以通过修改class属性,影响div的样式
element.setAttribute("class","a")
}
</script>
</head>
<body>
<div id="div1" >
你好呀
</div>
<hr/>
<input type="button" value="测试" onclick="fun1()" />
</body>
</html>
8.5 节点标签文本操作
（1）innerHtml 操作双标签中间的HTML
（2）innerText 操作双标签中间的 Text
（3）value 操作表单标签值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script>
function fun1(){
var element1=document.getElementById("d1");
/*
* innerText 不包含HTML结构
* innerHTML 包含HTML结构
* */
console.log("innerText>>>"+element1.innerText);
console.log("innerHTML>>>"+element1.innerHTML);
var element2=document.getElementById("i1");
console.log(element2.value)
}
function fun2(){
var element1=document.getElementById("d1");
//element1.innerText="<h1>一刻也不能分割</h1>"
element1.innerHTML="<h1>一刻也不能分割</h1>"
var element2=document.getElementById("i1");
element2.value="无论我走到哪里";
}
</script>
</head>
<body>
<div id='d1'>
a
<span>文字</span>
b
</div>
<input type="text" value="我和我的祖国" id='i1' />
<input type="button" value="获取内容" onclick="fun1()"/>
<input type="button" value="修改内容" onclick="fun2()"/>
</body>
</html>
8.6 增加和删除节点
创建元素createElement()
增加元素appendChild()
删除元素removeChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
border: 1px solid red;
width: 80%;
height: 200px;
}
</style>
<script>
function fun1(){
var div1=document.getElementById("d1");
// 通过JS创建标签
var in1=document.createElement("input");
in1.setAttribute("type","text");
in1.setAttribute("value","请输入内容");
var in2=document.createElement("input");
in2.setAttribute("type","password");
in2.setAttribute("value","123456789");
var in3=document.createElement("input");
in3.setAttribute("type","button");
in3.setAttribute("value","删除");
var br=document.createElement("br");
in3.onclick=function (){
div1.removeChild(in1)
div1.removeChild(in2)
div1.removeChild(in3)
div1.removeChild(br)
}
div1.appendChild(in1);
div1.appendChild(in2);
div1.appendChild(in3);
div1.appendChild(br);
}
</script>
</head>
<body>
<div id="d1">
</div>
<input type="button" value="增加" onclick="fun1()" />
</body>
</html>
1570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
