艺术公司网站定制,用什么软件搭建网站源码,儿童个人网站源码,建购物网站的详细步骤文章目录 1.初识JavaScript1.1.JavaScript语言简介1.2.JavaScript引入方式和注释1.3.Javascript变量声明详解1.4.JavaScript变量提升详解 2.JavaScript基础数据类型2.1.JavaScript基础数据类型简介2.2.基础类型数据-Number2.3.基础类型数据-String2.4.基础类型数据-Boolean2.5.… 文章目录 1.初识JavaScript1.1.JavaScript语言简介1.2.JavaScript引入方式和注释1.3.Javascript变量声明详解1.4.JavaScript变量提升详解 2.JavaScript基础数据类型2.1.JavaScript基础数据类型简介2.2.基础类型数据-Number2.3.基础类型数据-String2.4.基础类型数据-Boolean2.5.基础类型数据-Undefined2.6.基础类型数据-Null2.7.基础类型数据-Symbol 3.JavaScript对象数据类型1.Javascript对象的基本形式2.js对象中的常规操作**3.js中this访问自身属性**4.js中创建对象的方式 4.JavaScript数组数据结构1.js中数组的创建方式2.操作数组的基本⽅法3.数组的进阶操作⽅法 5.JavaScript中的运算符和流程控制1.常见的运算符2.比较、逻辑运算符3.if、if/else、三元表达式4.js中的switch语句5.js中的循环详解 6.JavaScript中的函数1.js中函数的简介2.js函数声明的⽅法3.js函数return知识点4.Js函数变量作⽤域5.js中类数组对象arguments6.js中⽴即执⾏函数7.js中闭包的理解 7.JavaScript的原型和原型链1.什么是js原型2.什么是js原型链3.js中的类型检测 8.JavaScript的局部刷新ajax1.理解什么是JSON数据2.ajax简介及其使⽤场景3.手写ajax案例实战 9.JavaScript文档对象DOM1.js中DOM详解2.DOM节点的常⻅操作3.js事件对DOM的操作4.js中事件的⼀些机制5.js中的定时器 10.JavaScript浏览器对象BOM1.BOM常用的内置函数2.JavaScript弹出框3.浏览器基本概念之Cookie 1.初识JavaScript
1.1.JavaScript语言简介 1简介
JavaScript 是互联网上最流行的脚本语言这门语言可用于 HTML 和 web更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是一种轻量级的编程语言是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后可由所有的现代浏览器执行。
2Javascript三大部分
ECMAScript语法标准由ECMA制定的一种脚本语言的标准化规范。DOM通过⽂档对象模型dom操作网页。BOM通过浏览器对象模型bom操作浏览器。
3JavaScript版本以及ECMAScript版本
4为什么JavaScript是单线程引擎
JavaScript是单线程指的是同一时间只能干一件事情只有前面的事情执行完才能执行后面的事情。导致遇到耗时的任务时后面的代码无法执行。
由于js是单线程一个Tab页内中无论什么时候都只有一个JS线程在运行JS程序依靠任务队列来进行js代码的执行所以js引擎会一直等待着任务队列中任务的到来然后加以处理。
假如js是多线程那么现在有两个事件同时操作dom一个事件编辑dom另一个事件删除dom那么此时会产生矛盾指令。
1.2.JavaScript引入方式和注释
1引入方式
内部引入方式
html内body标签中或者head标签中引入script标签
注意两个地方引入的执行顺序不一样。
当在body中引入时
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body我是李祥scriptdocument.write(我是JS追加的内容)/script
/body
/html当在head中引入时
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptdocument.write(我是JS追加的内容)/script
/head
body我是李祥
/body
/html原因是html文件执行从上之下顺序执行由于是单线程执行所以在页面渲染时尽量先渲染html标签然后在通过js去拿数据。防止阻塞。
外部引入方式
index.js文件
document.write(我是JS外部追加的内容)index.html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcindex.js/script
/head
body我是李祥
/body
/html注意使用w3c的标准结构、样式、行为相分离推荐外部引入。
2注释方式
单行//
多行/* */这块没什么多说的大家只要记住就可以啦。 1.3.Javascript变量声明详解
1变量声明
用var方式定义变量es6语法let、const关于es6后面会有文章介绍这里我们先知道var即可。
声明和赋值的结合
var name 李祥;
console.log(name);声明和赋值分开
var age;
age 18;
console.log(age);同时声明多个变量
var city 天津市, area 宝坻区;
console.log(city,area);测试代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescriptvar name 李祥;console.log(name);var age;age 18;console.log(age);var city 天津市,area 宝坻区;console.log(city, area);/script/headbody/body
/html运行效果 2命名规则
JS中的变量是弱类型可以保存所有类型的数据即变量没有类型而值有类型。
我们可以通过typeof来判断变量是什么类型。
var name 李祥;
console.log(typeof name);变量命名必须以字母、下划线”_”或者”$” 为开头。其他字符可以是字母、_、美元符号或数字。变量名中不允许使用空格和其他标点符号首个字不能为数字。变量名长度不能超过255个字符。变量名区分大小写。(javascript是区分大小写的语言)。变量名必须放在同一行中。不能使用脚本语言中保留的关键字、保留字、true、false 和 null 作为标识符。
1.4.JavaScript变量提升详解
1什么是变量提升
变量提升Hoisting被认为是 Javascript中执行上下文 特别是创建和执行阶段工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的JavaScript文档中找不到变量提升Hoisting这个词。
从概念的字面意义上说“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的而是在编译阶段被放入内存中。
简单来说变量提升处于js代码执行过程中js引擎把变量的声明部分和函数的声明部分提升到代码开头的行为变量提升后会给变量默认赋值为undefined。
下面通过一个例子来演示一下变量提升。
console.log(name);
var name 李祥;按照我们所想的是应该报错因为是先打印的name之后才去声明的name变量。
但是运行结果却是出乎我们意料。控制台打印的undefined。
实际执行的代码是这样的
var name;
console.log(name);
name 李祥;变量声明但未赋值所以默认值为undefined所以打印结果是undefined。
2为什么会有变量提升
变量提升存在于js代码运行阶段那么js代码和其他的语言是一样的都需要经历编译和执行阶段在编译阶段js会搜集所有的变量声明并且提前让声明生效剩下的语句要在执行阶段再进行解读。
3禁用变量提升
es6引入的let和const关键字let和const关键字会形成块级作用域并且不存在变量提升在js中被称为暂时性死区。
关于let和const后面后有文章介绍现在只需掌握let和const关键字用来解决变量提升问题。
2.JavaScript基础数据类型
2.1.JavaScript基础数据类型简介
基本数据类型说明默认值Number数字型包含整型值和浮点型值如21、0.230Boolean布尔类型如true、false等价于0或者1falseString字符串类型如张三“”Undefinedvar a声明了变量a但是没有给a赋值此时aundefinedundefinedNullvar a null 声明了变量a为空值null
基本数据类型的值存储在栈中 当申明了一个变量的时候变量会去内存空间找对应的值如果找到了对应的值就直接把该值的内存地址存到变量里如果没找到就创建一个新的空间来存储对应的值并且把新空间的内存地址存到变量里。js中变量不存储任何值而存储的是值的内存地址。基本数据类型一旦创建就是不可变的因为它占据的空间是固定的修改变量的值相当于重新创建一个内存空间变量指向内存空间的地址。
2.2.基础类型数据-Number
1声明定义
//字面量声明
var num 1;
console.log(typeof num); //数字对象方式声明
var xd new Number(2);
console.log(xd3); //52判断是否为整数
console.log(Number.isInteger(1.3)); //false3指定返回的小数位数保留几位小数点
console.log((12.345).toFixed(2)); //12.354NaN-表示非数字值用于判断是否时一个数字
isNaN() //用来判断一个值是不是数字
// 如果该值转换为number等于 NaN则此函数返回 true可以转化成数字的字符串也被认为是数字。注意null, 两个值会被判断为数字所以使用前应该屏蔽console.log(isNaN(11));console.log(isNaN(11s));5浮点精度
js语言在浮点数计算时会有精度误差问题。
var num 0.1 0.2;
console.log(num);解决精度问题可以采用小数点保留几位方式来解决。
var num 0.1 0.2;
console.log(num.toFixed(1))2.3.基础类型数据-String
1字符串声明定义
//字面量声明可以使用单引号或者双引号
var name 李祥;
console.log(name);//字符串对象方式声明
var name new String(李祥);
console.log(name);2字符串连接
//连接运算符
var name 李祥,
info 是一个软件工程师。;
console.log(name info);3获取字符串长度
var name 李祥
console.log(name.length);4大小写转换
console.log(小写转大写lixiang.toUpperCase());
console.log(大写转小写LIXIANG.toLowerCase());5移除字符串两端的空白注意字符串中间的空格不能移除
var str li xiang ;
console.log(str.length);
console.log(str.trim().length);6获取字符串中单个字符
//两种写法获取的值相同
console.log(lixiang.charAt(3))
console.log(lixiang[3])7截取字符串左闭右开
var n lixiang.slice(1,5);
console.log(n);8查找字符串
console.log(lixiang.indexOf(s)); //5
console.log(lixiang.indexOf(s, 6)); //6 从第6个字符开始搜索包含第6个9替换字符串
var name 李祥;
var changeName name.replace(祥, 二祥);
console.log(changeName); //李二祥10字符串切割和拼接
var date 2023-08-28;
console.log(date.split(-)); //[2023, 08, 28]var a date.split(-);
console.log(a.join(/)); //2023/08/282.4.基础类型数据-Boolean
1定义布尔类型
//字面量声明
var flag true;
console.log(flag);2隐式转换
几乎所有的类型都可以隐式转换为 Boolean 类型 true false
String 非空字符串 空字符串
Number 非0的数值 0/NaN
Array 数组不参与比较时 参与比较的空数组
Object ✅
undefined ✅
null ✅
NaN ✅当其他类型与Boolean类型对比时会将其他类型先转换为数值类型再对比。
3显示转换
var str ;
console.log(!!str); //falsevar num 0;
console.log(!!num); //falsevar obj null;
console.log(!!obj); //false2.5.基础类型数据-Undefined
Undefined是已经存在的变量但是没有赋值Javascript会给这个已经存在的变量一个默认的undefined值。
// 变量被声明了但没有赋值时就等于undefined
var i; // i undefined
console.log(i);// 对象没有赋值的属性该属性的值为undefined
var o new Object(); // o.p undefined
console.log(o.p);// 函数没有返回值时默认返回undefined
var x f(); //x undefined
console.log(x);
function f(){}2.6.基础类型数据-Null
null表示没有对象即该处不应该有值。用法
1 作为函数的参数表示该函数的参数不是对象
2 作为对象原型链的终点Object.getPrototypeOf(Object.prototype);2.7.基础类型数据-Symbol
Symbol是ES6引入了一种新的原始数据类型表示独一无二的值。
Symbol值通过Symbol函数生成。这就是说对象的属性名现在可以有两种类型一种是原来就有的字符串另一种就是新增的Symbol类型。凡是属性名属于Symbol类型就都是独一无二的可以保证不会与其他属性名产生冲突。
scriptvar x {a:1}var a Symbol(a);x[a] 2console.log(x);
/script3.JavaScript对象数据类型
1.Javascript对象的基本形式
创建一个对象
var car {color: red, //键值对height: 1.8,start: function () {console.log(‘启动);},stop: function () {console.log(熄火);},suv: true,luntai:[1,2,3,4]
};调用对象中的方法
car.start()获取对象的属性
car.suv2.js对象中的常规操作
1增加/修改对象中的属性
console.log(car);
car.pinpaimg7;
console.log(car);console.log(car);
car.pinpai保时捷;
console.log(car);2删除采用delete运算符
console.log(car);
delete car.pinpai;
console.log(car);3查询对象中的属性
通过.运算符可以访问对象属性[]“操作符访问”[]⾥⾯写字符串
console.log(car.color);
console.log(car[height]);3.js中this访问自身属性
通过this我们能够访问对象自身属性和方法
var person {name: lixiang,sayHello: function() {console.log(Hello, I am this.name)}
}
person.sayHello();4.js中创建对象的方式
1字面量的方式
声明⼀个对象赋值给⼀个变量
var person {name: lixiang,age: 18,sex: 1
}2自定义构造函数方式
固定参数应用场景
function Person(name, age, sex) {this.name name;this.age age;this.sex sex;
}
var person new Person(lixiang,18,1);
console.log(person);对象类型的参数
function Person(obj) {this.name obj.name;this.age obj.age;this.sex obj.sex;
}
var person new Person({name:lixiang,age:18,sex:1});
console.log(person);4.JavaScript数组数据结构
1.js中数组的创建方式
数组的定义数组是⼀种列表对象它的原型中提供了遍历和修改元素的相关操作JavaScript 数组的⻓度和元素类型都是⾮固定的。
与Java不同的是js中的数组长度是动态控制的包括元素类型也是不唯一的。
数组的声明方式
// 字面量形式
var arr1[1,2,true,lx]// 构造函数声明
var arr2new Array(1,2,true,lx)2.操作数组的基本⽅法
1数组中增加一个元素
下标方式增加
var arr [1, 2, true, lx];
console.log(arr);
arr[4]false;
console.log(arr);数组后⾯插⼊⼀条数据
var arr [1, 2, true, lx];
console.log(arr);
arr.push(0);
console.log(arr);数组的第⼀位插⼊⼀条数据
var arr [1, 2, true, lx];
console.log(arr);
arr.unshift(0);
console.log(arr);2数组中删除一个元素
删除了数组当中最后⼀个元素
var arr [1, 2, true, lx];
console.log(arr);
arr.pop();
console.log(arr);删除了数组当中第⼀个元素
var arr [1, 2, true, lx];
console.log(arr);
arr.shift();
console.log(arr);3修改数组当中的元素
下标方式修改
var arr [1, 2, true, lx];
console.log(arr);
arr[1]3;
console.log(arr);4查询数组当中的元素
下标方式查询
var arr [1, 2, true, lx];
console.log(arr[1]);3.数组的进阶操作⽅法
1splice方法
⽤于删除或替换元素函数有返回值返回的是被删除的元素这个⽅法还会改变原来的数组
list.splice(2, 2, hello,lx)// 第⼀个参数是控制从第几位包含开始删除或者替换(得看第三个参数有没有值)
// 第⼆个参数控制删除的数量
// 第三个参数将删除了的元素替换掉可⽤逗号隔开使用场景 替换数组中的元素 删除数组的⼀部分内容 清空的数组的作⽤
var arr1[1,2,3,4]
arr1.splice(2, 2, hello,lx)
console.log(arr1);2join方法
将数组类型的数据转换成字符串和toString的区别 可以⾃定义元素之间⽤自定义符号隔开
var list[1,2,3,4]
console.log(list.join(,))3concat方法
用于连接两个或多个数组不会更改现有数组而是返回一个新数组其中包含已连接数组的值
var arr1[1,2,3,4]
var arr2[5,6,7,8]
var arr3 arr1.concat(arr2);
console.log(arr3);5.JavaScript中的运算符和流程控制
1.常见的运算符
1赋值运算符
var name 李祥;
console.log(name);2算术运算符
* 剩法
var num 2 * 4;
console.log(num);/ 除法
var num 4 / 2;
console.log(num);加法
var num 4 2;
console.log(num);var name li xiang;
console.log(name);var arr1 [1,2,3,4];
console.log(1arr1);- 减法
var num 6 - 4;
console.log(num);% 余数
var num 6 % 4;
console.log(num);3自增和自减运算符
、-- 在前操作会在表达式最先执行
var x 1;
x;
console.log(x);
--x;
console.log(x);var y 2;
var f 30 y;
console.log(y);
console.log(f);、-- 在后操作会在表达式最后执行
var y 2;
var f 30 y;
console.log(y);
console.log(f);2.比较、逻辑运算符
1比较运算符
运算符说明大于小于大于或等于小于等于强制类型转换比较不强制类型转换比较
2逻辑运算符 逻辑与当运算符左边表达式为false立马返回当前值当左边表达式为true时立马返回右边值。 逻辑或||当运算符两边有一个为true时则返回为true的值否则为false。 优先级
// 的优先级高所以结果是 true
console.log(true || false false);//用 () 来提高优先级
console.log((true || false) false);3.if、if/else、三元表达式
1if当条件为真的时候执行代码块
//当条件为真时执行表达式代码块
if (){ //表达式或者变量》布尔值//条件为 true 时执行
}//如果只有一条代码块可以不用写 {}
if () console.log(xx)var x 2;
if(x2){console.log(x为2)
}2if/else当条件为真的时候执行if代码块否则执行else代码块
if (){//条件为 true 时执行
}else{//条件为 false 时执行
}//if...else if...else语句
if (){//条件1为 true 时执行
}else if(){//条件2为 true 时执行
}else{//条件都不满足时执行
}var x 3;
if(x2){console.log(x为2)
}else{console.log(x不为2)
}var x 3;
if(x2){console.log(x为2)
}else if(x3){console.log(x为3)
}else{console.log(x不为2或3)
}3三元表达式
语法
条件 ? 表达式1 : 表达式2
条件为true时执⾏表达式1否则执⾏表达式2var x 4;
x3?console.log(x is 3):console.log(x is not 3)4.js中的switch语句
switch语句评估一个表达式并执行与表达式结果相匹配的相应代码块。
switch(变量/表达式) {case 值1: // case 1的代码块break;case 值2: // case 2的代码块break;case 值N:// case N的代码块break;default:// default的代码块
}var musicType 摇滚;
switch (musicType) {case 国风:console.log(开始播放国风目录音乐);break;case 舞曲:console.log(开始播放舞曲目录音乐);break;case 摇滚:console.log(开始播放摇滚目录音乐);break;default:console.log(未找到对应类型的音乐);break;
}5.js中的循环详解
1for循环
for循环是编程语言中一种循环语句而循环语句由循环体及循环的判定条件两部分组成其表达式为
for单次表达式;条件表达式;末尾循环体{中间循环体;
}//计算1-9累加
var num 0;
for(var i 1;i10;i){numi;
}
console.log(numnum)2while循环
while循环 只有当条件成立时 才会循环执行代码块,do-while循环表示无论条件成不成立都会执行一遍代码块。
while (条件表达式或者变量) {代码块
}do {代码块
} while (条件);var a0
while (a10) {a;
}
console.log(aa);do {console.log(执行代码块);
}while (false) 6.JavaScript中的函数
1.js中函数的简介
1语法
function name(参数 1, 参数 2, 参数 3) {//要执⾏的代码
}
function name(参数 1, 参数 2, 参数 3) {//要执⾏的代码return x;
}有些函数是可以有返回值的有些则可以没有后面我们在具体说return的作用。
2什么是形参
声明函数的时候定义的参数
// a、b是形参
function sum(a,b){ // 要执行的代码return ab;
}3什么是实参
调⽤函数的时候传的⼀个参数
var num sum(1,2) // 1、2就是实参特点总结 形参和实参是⼀⼀对应的 数量可以不对应 参数的类型不确定 函数可以设置默认参数 实参可以是字⾯量也可以是变量
2.js函数声明的⽅法
1函数声明
function sum(参数) {// 执⾏语句
}// 匿名函数表达式
var sumfunction(参数){// 执⾏语句
}// 构造函数声明
var sum new Function([arg1[, arg2[, ...argN]],] functionBody)function sum1(a,b) {return ab;
}var sum2 function (a,b) {return ab;
}var sum3 new Function(a,b,return ab;);console.log(sum1(1,2));
console.log(sum2(1,2));
console.log(sum3(1,2));3.js函数return知识点
1作为返回值
function sum(a,b) {return ab;
}
var num sum(1,2);
console.log(num);上面已经验证过了。
2中断函数
function sum(a,b) {console.log(sumab)return;console.log(end)
}
sum(1,3);4.Js函数变量作⽤域
1全局变量
全局作用域贯穿整个 JavaScript 文档除函数内声明和大括号内用 let、const 声明的所有变量都在全局作用域里因此也被称为全局变量。全局变量一旦声明不管在 JavaScript 文档中的任何地方都可以使用它包括函数内部。
2局部变量
当我们在函数中定义一个变量后在函数中的任何地方都可以使用这就是函数作用域。不过需要注意的是在函数之外就无法访问函数内定义的变量因此函数内定义的变量也被称为局部变量。 5.js中类数组对象arguments
arguments它是js中函数内置的一个对象而执行函数方法的实参中值都存储在arguments中。要想获取到这些实参就需要像数组一样用下标/索引来定位到每个值上面但是又不能说它是一个数组因为它里面还有其他的属性如callee。并且不能对它使用shift、push、join等方法。而没有传递值的命名参数将会被自动赋予undefined。
function sum(){var result 0;for(var i 0;iarguments.length;i){resultarguments[i];}return result;
}
var num sum(1,2,3,4,5,6);
console.log(num);6.js中⽴即执⾏函数
立即执行函数顾名思义声明一个函数并马上调用这个函数就叫做立即执行函数。也可以说立即执行函数是一种语法让你的函数在定义以后立即执行立即执行函数又叫做自执行函数。立即执行函数它的内部可以访问全局变量。但是除了它自身内部外部是无法访问它的。语法
( function ( “ 参数 ” ) { 函数方法 ; } ) ( “ 给参数传的值 ” )//我们的函数并没有调用的地方
(function() {console.log(js⽴即执⾏函数);
})();7.js中闭包的理解
闭包就是能够读取其他函数内部变量的函数。例如在javascript中只有函数内部的子函数才能读取局部变量所以闭包可以理解成“定义在一个函数内部的函数“。在本质上闭包是将函数内部和函数外部连接起来的桥梁。
function sum () {var x 1;return function () {x;console.log(x);}
}
var num sum();
num();
num();上面这段代码就是在sum内部返回一个函数将其内部的x变量进行。 7.JavaScript的原型和原型链
1.什么是js原型
所有的函数默认都有一个“prototype”这样公有且不可枚举的属性它会指向另一个对象这个对象就是原型。每当定义一个对象函数也是对象时就会生成一个__proto__属性被称为隐式原型。这个__proto__属性指向的是这个对象的构造函数的prototype被称为显式原型。每一个对象都会从原型中“继承”属性。
function Person(name){this.name name;this.eat function (){console.log(this.name吃东西);}
}
var p new Person(李祥);
console.log(p);属性方法公共性比如现在我要通过prototype去加一个属性那么所有的实例化出来的对象都能访问。
Person.prototype.age18;
Person.prototype.eat function (name){console.log(name吃东西);}
function Person(name){this.name name;
}
var p1 new Person(李祥);
var p2 new Person(张三);
console.log(p1.age);
p1.eat(李祥);
console.log(p2.age);
p2.eat(张三);注意只有构造函数才能对原型上的属性进⾏改动。
2.什么是js原型链
函数才有prototype属性,对象有__proto__ || [[prototype]]属性
原型链
js⾥万物皆对象所以⼀直访问__proto__属性就会产⽣⼀条链条链条的尽头是null当js引擎查找对象的属性时会先判断对象本身是否存在该属性不存在的属性就会沿着原型链往上找 function Car() {}
var car new Car()什么是原型链
原型链解决的主要是继承问题。
每个对象拥有一个原型对象通过 proto 指针指向其原型对象并从中继承方法和属性同时原型对象也可能拥有原型这样一层一层最终指向 null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain)通过原型链一个对象可以拥有定义在其他对象中的属性和方法3.js中的类型检测
1typeof用于判断基础数据的类型无法区分对象与数组
var a 1;
console.log(a:typeof a);
var b 1;
console.log(b:typeof b);
var s;
console.log(s:typeof s);
function fun() {}
console.log(fun:typeof fun);
var c [1, 2, 3];
console.log(c:typeof c);
var o { name: lixiang };
console.log(o:typeof d);2instanceof用于判断复杂数据的类型可以区分对象与数组
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上可以理解为是否为某个对象的实例。
var arr [];
console.log(arr instanceof Array); var obj {};
console.log(obj instanceof Array);
console.log(obj instanceof Object); var fun new Fun();
console.log(fun instanceof Fun); 8.JavaScript的局部刷新ajax
1.理解什么是JSON数据
1JSON是什么
JSON(JavaScript Object Notation)是⼀种轻量级的数据交换格式它基于JavaScript的⼀个⼦集易于⼈的编写和阅读也易于机器解析。JSON采⽤完全独⽴于语⾔的⽂本格式但是也使⽤了类似于C语⾔家族的习惯包括C, C, C#, Java, JavaScript, Perl, Python等。这些特性使JSON成为理想的数据交换语⾔。JSON⽤于网络间的传输数据
2JSON的语法格式
属性名称必须是双引号括起来的字符串最后⼀个属性后不能有逗号 3序列化和反序列化
var obj {name: 李祥,age: 18,
};
var a JSON.stringify(obj); // 序列化、转换成JSON格式
var b JSON.parse(a); // 反序列化 、转换成对象格式
console.log(a);
console.log(b);2.ajax简介及其使⽤场景
1什么是ajax
Ajax全称“Asynchronous Javascript And XML”中文意思为“异步JavaScript和XML”是一种用于创建快速动态网页的技术是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。
2原理 通过XmlHttpRequest对象向服务器发异步请求从服务器获取数据 然后通过js来操作DOM⽽更新⻚⾯ 它是在 IE5 中⾸先引⼊的是⼀种⽀持异步请求的技术 简单的说也就是 javascript 可以及时向服务器提出请求和处理响应⽽不阻塞程序运行达到⽆刷新的效果 注意JavaScript是单线程的会阻塞代码运⾏所以引⼊XmlHttpRequest请求处理异步数据
3.手写ajax案例实战
1ajax创建步骤
创建ajax对象
var xhr;
if (window.XMLHttpRequest){xhr new XMLHttpRequest();
} else {// code for IE6, IE5 兼容xhr new ActiveXObject(Microsoft.XMLHTTP);
}设置请求地址及⽅式
//第⼀个参数是⽤于指定请求的⽅式⼀般⽤⼤写
//第二个参数代表请求的URL
//第三个参数是表示是否异步发送请求的布尔值如果不填写默认为true表示异步发送同步已经被弃用
xhr.open(GET,服务端接口url)发送请求(可选参数 null)
xhr.send()注册事件等到浏览器返回结果接受响应
//注册事件。 onreadystatechange事件状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用我们需要手动写一些判断的逻辑。
xhr.onreadystatechange function () {// 为了保证数据完整返回我们一般会判断两个值if (xhr.readyState 4 xhr.status 200) {alert(xhr.responseText);} else {alert(出错了Err: xhr.status);}
};2案例实战
这里写了一个测试的服务端接口。 var xhr;
if (window.XMLHttpRequest){xhr new XMLHttpRequest();
} else {// code for IE6, IE5 兼容xhr new ActiveXObject(Microsoft.XMLHTTP);
}
xhr.open(GET,http://localhost:8088/spring-test/query)
xhr.send();
xhr.onreadystatechange function () {// 为了保证数据完整返回我们一般会判断两个值if (xhr.readyState 4 xhr.status 200) {alert(xhr.responseText);} else {alert(出错了,Err: xhr.status);}
};9.JavaScript文档对象DOM
1.js中DOM详解
1DOM(w3c提的⼀个标准)
DOM就是⽂档对象模型是⼀个抽象的概念定义了访问和操作HTML⽂档的⽅法
2HTML和txt⽂本的区别
html是超级文本里面可以包含各种格式函数链接图像视频等等。TXT 是文本文件的扩展名它表示这种类型的文件需要使用记事本打开查看或编辑。
3什么是DOM树
浏览器将结构化的⽂档以树的结构存储在浏览器内存⾥ 。每个HTML元素被定义为节点 。这个节点有⾃⼰的属性(名称、类型、内容等) 。有⾃⼰的层级关系(parent, child, sibling)。 2.DOM节点的常⻅操作
1查找节点
⽅法描述document.getElementById(id)通过元素 id 来查找元素document.getElementsByTagName(name)通过标签名来查找元素document.getElementsByClassName(name)通过类名来查找元素document.querySelector(selector)通过css选择器或ID选择元素⽆法选择伪类 h1 idh1 classh1李祥/h1script//根据标签名var h1 document.getElementsByTagName(h1)[0];console.log(h1.outerHTML);//根据idvar h2 document.getElementById(h1);console.log(h2.outerHTML);//根据classNamevar h3 document.getElementsByClassName(h1)[0];console.log(h3.outerHTML);//根据classNamevar h4 document.querySelector(.h1);console.log(h4.outerHTML);//根据IDvar h5 document.querySelector(#h1);console.log(h5.outerHTML);/script2改变元素内容
⽅法描述element.innerHTML new html content改变元素的 inner HTMLelement.attribute new value改变 HTML 元素的属性值element.setAttribute(attribute, value)改变 HTML 元素的属性值element.style.property new style改变 HTML 元素的样式⽅法
h1 idh1 classh1李祥/h1
script//根据标签名var h1 document.getElementsByTagName(h1)[0];h1.innerHTML lixiang;h1.idh2h1.style.backgroundColorred
/script注意outerHTML会使样式丢失。
h1.outerHTML lixiang;3添加和删除元素
⽅法描述document.createElement(element)创建 HTML 元素document.removeChild(element)删除 HTML 元素document.appendChild(element)添加 HTML 元素document.replaceChild(element)替换 HTML 元素document.write(text)可写⼊ HTML⽅法
var div document.createElement(div);
div.innerHTML 我是动态创建的HTML;
document.body.append(div);3.js事件对DOM的操作
1什么是事件
事件指的是在html元素上发⽣的事情 。⽐如图⽚元素被点击触发的一系列操作。事件触发时可设置执行⼀段js代码。
2常⻅的HTML事件
描述事件html元素发生改变onchange用户点击了元素onclick鼠标移动到了元素上onmouseover鼠标离开元素onmouseout按下键盘onkeydown页面已经完成加载onload
div idd1 onclicktest()点击/div
scriptfunction test(){console.log(点击事件);}
/scriptdiv idd1点击/div
scriptdocument.getElementById(d1).addEventListener(click,function(){console.log(点击事件);})
/script注意采用addEventListener可以多加几个事件。
div idd1点击/div
scriptdocument.getElementById(d1).addEventListener(click,function(){console.log(点击事件1);})document.getElementById(d1).addEventListener(click,function(){console.log(点击事件2);})document.getElementById(d1).addEventListener(click,function(){console.log(点击事件3);})
/scriptdiv idd1鼠标移入移出事件/div
scriptdocument.getElementById(d1).addEventListener(mouseover,function(){console.log(鼠标移入事件);})document.getElementById(d1).addEventListener(mouseout,function(){console.log(鼠标移出事件);})
/script4.js中事件的⼀些机制
1事件传播的两种机制
事件冒泡事件开始时由最具体的元素接收然后逐级向上传播到较为不具体的节点。在事件冒泡阶段只有标记为非捕获的监听器才会被调用。也就是那些调用addEventListener() 时第三个参数为 false 时注册的监听器。默认值即为false。
事件捕获不太具体的DOM节点应该更早接收到事件而最具体的节点应该最后接收到事件。在这一阶段只有那些设置为捕获阶段工作的监听器才被调用。要为捕获阶段设置监听器可以在调用 addEventListener 时设置第三个参数为 true。
2图解事件捕获和事件冒泡 3什么是事件代理
事件代理就是利⽤事件冒泡只指定⼀个事件处理程序就可以管理某⼀类型的所有事件。
4取消冒泡或者捕获
点击子类显示子类点击父类显示父类。
ul idfather父类
li idson子类/li
/ul
script
document.getElementById(father).addEventListener(click, function (e) {console.log(父类);
});
document.getElementById(son).addEventListener(click, function (e) {console.log(子类);e.stopPropagation();
});5.js中的定时器
1延迟执行
setTimeout(function(){}, 毫秒)clearTimeout(timer) // 停止,参数必须是由 setTimeout() 返回的timerconsole.log(1);
console.log(2);
setTimeout(function(){console.log(5);
},5000)
console.log(3);
console.log(4);2定时执⾏
setInterval(function(){}, 毫秒)clearInterval(timer) // 参数必须是由 setInterval() 返回的timerconsole.log(1);
console.log(2);
setInterval(function(){console.log(5);
},2000)
console.log(3);
console.log(4);10.JavaScript浏览器对象BOM
1.BOM常用的内置函数
1什么是BOM
BOMBrowser Object Model即浏览器对象模型它提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是 window。
2常用的BOM对象
window对象 window对象是BOM顶层对象。window对象是JS访问浏览器窗口的一个接口window对象是一个全局对象,声明的所有的全局变量全局方法函数最终都是window对象的属性或者方法。window.open() 打开一个新的浏览器窗口接受四个参数URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值。window.close() 关闭新打开的窗口仅限open打开的窗口。window.moveTo()移动当前窗口。window.resizeTo()调整当前窗口的尺寸。 screen对象 包含显示设备的信息 screen.height、screen.width返回设备的分辨率。screen.availWidth、screen.availHeight返回屏幕可用宽高值为屏幕的实际大小减去操作系统某些功能占据的空间如系统任务栏。 location对象保存当前文档信息将URL解析为独立片段 location.href 返回当前页面完整的URL ,修改这个属性即跳转新页面location.hash 返回URL中的hash#号后跟零或多个字符location.host 返回服务器名称和端口号location.port 返回服务器端口号location.pathname 返回URL中的目录和文件名location.hostname 返回不带端口号的服务器名称location.protocol 返回页面使用的协议http://或https://)location.search 返回URL的查询字符串字符串以问号开头 navigator对象提供一系列属性用于检测浏览器 window.navigator.userAgent通过userAgent可以判断用户浏览器的类型window.navigator.platform通过platform可以判断浏览器所在的系统平台类型window.navigator.online判断是否联网 history 对象 history.back()与在浏览器点击后退按钮相同history.forward()与在浏览器中点击按钮向前相同history.go(参数)前进后退功能参数如果是1前进一个页面如果是-1后退一个页面如果是N则前进或后退N个页面history.length(): 保存历史记录的数量 localStorage localStorage.setItem设置值localStorage.removeItem删除值
2.JavaScript弹出框
1警告框
alert(hello)2确认框
var isConfirm confirm(请确认)
console.log(下⼀步, isConfirm)3提示框
var isPrompt prompt(请输⼊姓名)
console.log(isPrompt) // 是null 或者 ⽤户输⼊的值3.浏览器基本概念之Cookie
1什么是Cookie
Cookie 是计算机上存储浏览器的数据⽤的 容量⼤⼩⼤概4KB 。基本语法document.cookie
2Cookie作用
浏览器关闭后服务器会忘记⽤户的⼀切让浏览器记住⽤户信息登录信息
3cookie操作
如何创建和读取cookie
// 通过Document对象
document.cookieusernameNick; expiresThu, 18 Dec 2043 12:00:00 GMT;删除cookie
// 设置过期时间
document.cookie username; expiresThu, 01 Jan 1970 00:00:00 UTC; path/;; // nul案例
window.onload function(){checkCookie();
}
// 保存cookie
function setCookie(cname, cvalue, exdays) {var d new Date();d.setTime(d.getTime() exdays * 24 * 60 * 60 * 1000);var expires expires d.toGMTString();document.cookie cname cvalue ; expires;
}// 获取cookie
function getCookie(cname) {var name cname ;var ca document.cookie.split(;); // 将多个cookie字符串以;分割数组;for (var i 0; i ca.length; i) {if (ca[i].indexOf(name) 0) {return ca[i].split()[1]}}return ;
}function checkCookie(){var usergetCookie(username);if (user){alert(欢迎 user 再次访问);}else {user prompt(请输入你的名字:,);if (user){setCookie(username,user,30);}}
}
