- 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用于在网页上添加动态效果。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script type="text/javascript">
/*定义一个函数(方法)*/
function fun1(){
/*d窗提示一点信息 */
alert("你好")
}
script>
head>
<body>
<input type="button" value="点我呀" onclick="fun1()" />
body>
html>
- 缺点:
（1）我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低
（2）JS代码和HTML代码混合在一个文件中,可阅读性差
将JS代码放入外部JS文件中,通过script标签引入
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/myjs.js">script>
<script type="text/javascript" src="js/myjs2.js">script>
alert("总能见到你")
}
script>
body>
html>
- 优点:
代码复用度高,更易于维护代码 - 注意事项:
（1）在一个页面上可以同时引入多个JS文件
（2）每个JS文件的引入都要使用一个独立的script标签
（3）内嵌式和链接式的引入不能使用同一标签
（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>
JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号
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>
先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为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>
数据类型不同 直接返回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>
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>
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>
- 类似于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>
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>
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>
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>
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>
- JS基于对象的脚本语言 ,有类和对象,但是没有封装,继承,多态，Java script 中有一些浏览器直接识别并使用的对象,常见的对象有Array，String，Math，Number，Date对象等等.
- 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>
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>
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>
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>
- JS除了一些常用方法和类以外,允许我们自己定义对象,在JS中自定义对象有三种可用的语法格式,分别为:
（1）调用系统的构造函数创建对象
（2）自定义构造函数创建对象
（3）字面量的方式创建对象
<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>
<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>
<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>
- 当我们用构造方法创建一个类时,在内存会预先调用构造方法创建一个对象,这对象我们称之为原型对象,构造方法对象中有一个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>
- 一个类的原型是一个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>
- 什么是事件？
事件式可以被浏览器侦测到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么事,JS可以根据不同行为。绑定一些不同的响应代码处理,让浏览器和人的行为之间有一个交互 - 事件的绑定和触发：给页面上的元素先绑定事件 然后通过行为去触发
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>
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>
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>
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>
（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 是其根对象。
- 什么是window对象
Window 对象简单理解就是把浏览器抽象成一个对象,它表示一个浏览器窗口或一个框架。在客户端 JavaScript中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写alert()，而不必写 Window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。 - Window 对象属性
- Window 对象方法
- Window 三种d窗方式
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>
- 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">pageAa>
<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>
- 简单来说，DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
- document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
- document对象是window对象的一个成员属性，通过
window.document来访问，当然也可以直接使用document,根据HTML代码结构特点，document对象本身是一种树形结构的文档对象。
-
DOM节点分类node
结点对象Node：document对象中的每一个分支点都是一个node对象,它有三个子类
（1）元素节点Element： 如:我的链接
（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>hellospan>
2b
<span>thank youspan>
3c
<span>thank you very muchspan>
4d
div>
y
body>
html>
上面HTML页面代码的树形结构图如下
- Node节点常用的属性和方法
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">这是第一个divdiv>
<div id='d2' class="a">这是第二个divdiv>
<div id='d3' class="a">这是第三个divdiv>
<input id='i1' class="a" name='name1'/>
<div id='d4' class="b" name='name1'>这是第四个divdiv>
<div id='d5' class="b">这是第五个divdiv>
爱好:
<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>
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>
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>
（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="一刻也不能分割"
element1.innerHTML="一刻也不能分割"
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>
创建元素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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）