一. 了解JavaScript，
- js就是嵌入在浏览器内核中的js解释器。
- 一个网页中可以分三部分，HTML表示结构，CSS表示样式，js就表示行为。简单来说就是html是一个人，然后css就是给这个人穿上衣服（加样式），那么JS就是给这个人加上技能，加上行为。
二. Js的发展史
1. 1992年Nombas公司为自己开发了一款脚本语言SciptEase
2. 1995年Netscape(网景)开发了一款脚本语言LiveScrpt,后来更名javascript
3. 1996年Microsoft在IE3.0版本中克隆javascript，JScript
4. 1997年，javascript提交给ECMA(欧洲计算机制造商联合会)。定义ECMAScript,简称ES5，ES6。
三．JS的三大核心
1.ECMAScript（js的标准和语法）
2.BOM （Browser Object Model）就是一整套操作浏览器的属性和方法
3.DOM （Document Object Model）就是一整套操作文档流的属性和方法
四．JS的书写方式
1.行内式
2.内嵌式
3.外链式
五．JS的输出语句
1.alert（‘你好’） //浏览器会弹出你好
2.console.log(‘hello word’) //会在控制台打印
3.document.write(‘你好’) //会直接在页面中输出
六．变量的命名
1.只能用数字，字母，下划线，$。
2.不能使用数字开头
3.区分大小写
4.不能用关键字
5.驼峰命名法
七. js中的数据类型
1.基本数据类型
1.1 Number 数值型
1.2 String 字符串型
1.3 Boolean 布尔型
1.4 Undefined 未定义
1.5 Null 空
2.复杂数据类型
2.1 Object 对象
2.2 Function 函数
3.用typeof判断数据类型
var n1 = 100;
// 使用typeof关键字去检测n1的变量
console.log(typeof n1); //number
// typeof 的返回值
// typeof只能够检测基本数据类型
// 检测数值 返回number
// 检测字符串 返回string
// 检测布尔 返回boolean
// 检测undefined 返回undefined
// 检测null 返回object
4.数据类型的转换
4.1 其他类型转数字型
//方法一 parseInt(变量) 可以把其他的数据类型转换成数字型数据，得到的是整数
console.log(parseInt('3.1415')); //取整数 3 没有四舍五入
console.log(parseInt('4.98')); //4
//方法二 parseFloat(变量) 可以把字符串的数据类型转换成数字型数据，得到的是浮点小数
console.log(parseFloat('3.1415926')); //3.1415926
console.log(parseFloat('3.98')); //3.98
console.log(parseFloat('120pxrem')); //120
console.log(parseFloat('rem120px')); //NaN
//总结 parseInt()和parseFloat（）单词注意大小写
//他们都可以把字符串转换为数字型，只不过一个是整数，一个有小数，4.2 其他类型转字符串
//1.利用String（变量） 这个函数强制转换
// 语法：String(你要转换的数据)
// 返回值：转换好的数据
// 特点：
// 任何数据类型都能够转换
// var num = 1000;
// var b1 = true;
// var u;
// var nu = null;
// console.log(String(num));
// console.log(String(b1));
// console.log(String(u));
// console.log(String(nu));
//2.把数字型转换成字符串数据类型 方法二 变量.toString()
// 语法： 你要转换的数据.toString()
// 返回值： 转换好的数据
// 特点：
// undefined 和 null 不能够转换
var num = 1000;
var b1 = true;
var u;
var nu = null;
console.log(num.toString());
console.log(b1.toString());
// console.log(u.toString());
// console.log(nu.toString());
// 3.利用加号拼接字符串的方法实现转换效果
// 在JS里面，加号(+) 有两个意义
// 1.进行字符串的拼接
// 只要符号任意一边是字符串的时候，就是字符串拼接
// 2.进行数学运算
// 只有两边都是数字或者布尔的时候，会进行数学运算
var num3 = 200;
console.log(num3);
console.log(typeof(num3 + '')); //这样写亦可以 最好多写一个变量承载一些
// console.log(100 + 200);
// console.log(100 + true);
// console.log(100 + false);4.3 其他类型转布尔
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));八. 运算符
1.数学运算符：+ ，-，*，/，%，**
2.赋值运算符：=，+=，*=，/=，%=，-=
3.比较运算符：> , < , >= , <= , == , === , != , !==
4.逻辑运算符：逻辑与 && 逻辑或 || 逻辑非 ！
5.前置递增运算符和后置递增运算符：++num，num++
6.运算符的优先级
// 优先级 运算符 顺序
// 1 小括号 ()
// 2 一元运算符 ++ -- !
// 3 算术运算符 先* / % 再+ -
// 4 关系运算符 > >= < <=
// 5 相等运算符 == ！= === ！==
// 6 逻辑运算符 先逻辑与&& 再逻辑或 ||
// 7 赋值运算符 =
// 8 逗号运算符 ， 声明多个变量用逗号隔开九.流程控制
1.if语句
if
if..else
if..else if..2.switch多分支语句
switch(要判断的变量){
// case 情况1:
// 情况1执行语句1;
// break;
// case 情况2:
// 情况1执行语句2;
// break;
// case 情况3:
// 情况3执行语句3;
// break;
// default:
// 所有的条件都不满足的时候执行最后的语句;
// }十.循环
1.while循环
// while 循环
// 1. 初始化
var n = 1;
// 只要n<=3 得到的结果是true 那么后面的代码就会执行
// 2.条件判断
while (n <= 3) {
// 重复执行的代码
console.log('Hello Word');
// 改变初始值
n = n + 1;
}2.do while循环
// do while
// 也是我们循环语句的一种
// 语法
// do{
// 要重复执行的代码
// }while(条件)
// do while 和 while语句的区别
// 不管条件是不是成立 do while 都会先执行一遍
// 他们两个只在第一次条件不成立的时候会有区别3.for 循环
//for (初始化变量; 条件表达式; 操作表达式) {
//循环体
//}
//代码体验
// for (var i = 0; i <= 5; i++) { //i index索引号
// console.log('你好');
// }4.continue结束当前循环继续下一次循环
//for (var i = 1; i <= 5; i++) {
// if (i == 3) {
// console.log('第' + i + '个包子掉地上了');
// continue;
// }
// console.log('我正在吃第' + i + '个包子');
// }
// console.log('没吃饱');
//continue退出本次吃包子循环，继续执行下一次循环5.break结束整个循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('我正在吃第' + i + '个包子');
}
console.log('没吃饱');十一.数组
1.定义数组
//1.数组（Array）：就是一组数据的集合，存储在单个变量下的优雅方式
//2.利用new创建数组
// var arr = new Array(); //创建了一个空数组
// console.log(arr);
//3.利用数组字面量创建数组 []
// var arr = []; //创建一个空数组
// console.log(arr);
// var arr = [1, 2, 3, true];
// var arr = [2, 2, 5, 6, null];
// console.log(arr[3]);2.遍历数组
//数组是一个有序的集合 索引 从0开始
//for
//for..in
//for each 迭代方法3.数组的常用方法
//1.concat 合并数组
// var arrx=arr.concat(arr1,arr1,arr1)
var arrx=arr.concat() //复制
console.log(arrx);
//2.push 数组末尾添加元素
//3.splice 删除、添加、替换
// arr.splice(1,1) //删除
// arr.splice(1,3)
// arr.splice(1,0,'hello',"word") //添加
arr.splice(1,1,'hello') //替换
//4.slice 截取数组
var arrx=arr.slice(1,2) //[start,end) 取不到end
//5.pop 删除数组末尾元素
//6.shift 删除数组头部元素
//7.unshift 头部添加元素
//8.indexOf 获取元素在数组中的索引
//9.lastIndexOf
//10.sort 排序
作用：排序，默认情况下按照数组元素们的Unicode码进行升序排序。
语法：数组名.sort();
特殊：
允许自定义排序函数，从而实现对数字的升序或降序的排序
ex:
var arr=[12,6,4,115,78];
//排序函数（升序）
function sortAsc(a,b){
return a-b;
}
arr.sort(sortAsc);
原理：
1.指定排序行数sortAsc，定义两个参数a和b，表示数组中相邻的两个数字
2.将排序函数指定给数组sort()函数，数组会自动传递数据到sortAsc()中，
如果sortAsc()的返回值>0，则交互两个数字的位置，否则不变。
使用函数完成升序排序：
arr.sort(
function(a,b){ //匿名函数
return a-b;
}
)
//11.reverse
作用：将一个数组反转
语法：数组名.reverse();
注意：该函数会改变当前数组的内容
//12.join 数组转换为字符串
//...十二.函数
1.了解函数
// 在JS里面
// 函数就相当于一个盒子
// 用来承载一段代码 当你需要执行这一段代码的时候
// 只需要呼唤这个盒子就可以了
// 实际上就是对一段代码的封装
// 那这个过程总共分为两步
// 1.把代码装到盒子里面
// 第一步我们称为定义函数 声明函数
// 2.使用盒子里面的代码
// 第二步我们称为调用函数2.函数的使用
//1.声明函数
// function 函数名() {
// //函数体
// }
//函数体验
function sayHi() { //驼峰命名法
console.log('Hi~~~');
}
//2.调用函数
sayHi();
//注意事项：调用函数的时候千万不要忘记加小括号
//3.函数的封装
//函数的封装简单理解为打包
//函数的封装是把一个或者多个功能通过函数的方法封装起来，对外只提供一个简单的函数接口3.函数的参数
// 1.定义一个函数
function fn(a, b) {
// 定义了两个变量 一个叫做a 一个叫做b
// 只不过这两个变量不是直接赋值的，而是有实参决定的
// 但是这两个变量只能够在函数里面使用 出了函数就不在使用了
console.log(a);
console.log(b);
}
// 2.调用函数
// 本次调用fn函数的时候 传递了两个参数
// 其中100赋值给了a 200赋值给了b
fn(100, 200)
// 函数的参数
// 在JS里面
// 函数的参数分为两种
// 1.形参
// => 写在函数定义阶段的小括号里面
// => 就相当于一个只能够在函数内部使用的变量
// => 起名遵循变量命名规则和规范
// => 值由函数的实参来决定
// 2.实参
// => 写在函数调用阶段的小括号里面
// => 就是一个准确的值 是为了给函数的形参进行赋值的
// ->形参和实参 都可以写多个
// => 多个的时候，中间使用逗号(,) 分割
// => 多个的时候, 是按照从左到右的顺序一一对应的 顺序不能够乱
// +函数每一次的调用
// 形参的值都有本次调用的时候传递的实参决定
4.函数的返回值
// return
// 他是函数的返回值 我们也叫做结果
// 在函数内部使用return关键字
// =>return关键字后面的内容
// =>就是这个函数的返回值
// =>也就是你执行函数后得到的结果
// 下面我们写一个函数来实验一下
function fn() {
return 123;
}
// 当你调用的fn函数的时候
fn();
注：return 不仅可以退出循环，还能够针对函数，结束当前函数，并且返回return语句后面的值5.arguments的使用
//arguments参数的使用 只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
function fn() {
console.log(arguments); //里面存储了所有传递过来的实参 arguments=[1,2,3]
console.log(arguments.length);
console.log(arguments[3]);
//我们可以按照数组的方式遍历arguments
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//fn(1, 2, 3);
fn(1, 2, 3, 4, 5, 6);十三.对象
1.创建对象
1.字面量创建
var obj = {
uname: '小明',
age: 18,
sex: '男',
sayHi: function() {
console.log('方法');
}
};
//(1)里面的属性或者方法我们采取键值对的形式 键 属性名 : 值 属性值
//(2)多个属性或者方法中间使用逗号隔开
//(3)方法冒号后面跟着的是一个匿名函数
//2.使用对象
//(1)调用对象的属性 我们采取 对象名.属性名 .我们理解为的
console.log(obj.uname);
//(2).调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//(3)调用对象的方法 sayHi 对象名.方法名() 千万别忘记了添加小括号
obj.sayHi();
2.内置构造函数创建
var obj = new Object(); //这里创建一个空对象
obj.uname = '张三丰'; //等分
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('我的子弹已经准备好了，臭哥哥');
};
//注意 (1)我们是利用等号赋值的方法 追加对象的属性和方法
// (2)每个属性和方法之间用分号结束
//在调用对象的时候是一样的方法
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();
3.用构造函数创建对象
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang) {
return sang;
}
}
var ldh = new Star('刘德华', 18, '男'); //调用构造函数返回的是一个对象
console.log(ldh);2.遍历对象
语法：
// for(var 变量 in 对象){
// 重复执行的代码
// }十四.内置对象
1.Math对象常用方法
Math对象常用方法
Math.max(任意个数值) ：返回传入的数值中的最大值
Math.min(任意个数值) ：返回传入的数值中的最小值
Math.ceil(number) ： 返回大于等于number的最小整数(向上取整)
Math.floor(number) ： 返回小于等于number的最大整数(向下取整)
Math.round(number): 四舍五入
Math.random() : 返回 0-1之间的随机小数
2.Date日期对象
var time = new Date();
console.log(time);
//2.使用Date() 参数常用的写法 数字型 2020,4,5
// 或者是字符串型 '2020-4-5 8:8:8'
// var date1 = new Date(2020, 4, 5);
// console.log(date1); //这种数字型写法有问题
//输入5月5 打印出6月5 April May Jun July
var date2 = new Date('2020-04-06 15:48:08');
console.log(date2); //这种字符串型写法最为常用
var date3 = new Date('2020-04-06 16:13:00');
console.log(date3);
//格式化日期年月日和星期 2020年4月6号 周一 15点40分52秒
// console.log(date.getFullYear());
// console.log(date.getMonth() + 1); //月份 返回的月份比实际月份小1 这里记得月份+1哦
// console.log(date.getDate()); //返回的是几号
// console.log(date.getDay()); // 周几 周一到周六分别返回1 2 3 4 5 6 但是周日返回的是0
// console.log(date.getHours()); // 得到小时
// console.log(date.getMinutes()); //得到分钟
// console.log(date.getSeconds()); //得到秒数十五.DOM
1.找元素
- getElementById
- getElementsByClassName
- getElementsByTagName
- getElementsByName
- querySelector
- querySelectorAll2.找节点
- childNodes 子节点(文本节点和元素节点)
- children 子节点 元素节点
- firstChild
- lastChild
- parentNode
- previousSibling
- nextSibling3.页面节点操作
- 创建节点：
- createElement 创建元素节点
- createTextNode 创建文本节点
- 增
- appendChild 末尾追加子元素
- insertBefore 指定位置插入元素
var o = document.querySelector("#box")
var op = document.createElement('p')
op.innerHTML = 'hello world';
o.appendChild(op)
var op1 = document.createElement('p')
op1.innerHTML = '你好，';
o.appendChild(op1)
var myLink=document.createElement("a")
myLink.href='#'
myLink.innerHTML='我是超链接'
// o.appendChild(myLink)
o.insertBefore(myLink,op1)
- 删
- removeChild
- remove
- 改
- replaceChild() 替换3.DOM事件流
// DOM 事件流分为3个阶段：
// 捕获阶段 从外到里 从document-->html-->body-->div
// 当前目标阶段 div 执行绑定在它身上的事件 function
// 冒泡阶段 从里到外 从div-->body-->html-->document4.阻止默认行为
e.preventDefault();5.阻止冒泡
e.stopPropagation();6.鼠标事件
document.addEventListener('click', function(e) {
// console.log(e);
// clientX clientY 可视区域 坐标总是以可视区域为主
console.log(e.clientX);
console.log(e.clientY);
console.log('=====================');
// e.pageX e.pageY page 页面 得到是相对于我们这个文档页面的x坐标和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('======================');
// e.screenX e.screenY screen屏幕 得到相对于我这个电脑屏幕的x坐标和y坐标
console.log(e.screenX);
console.log(e.screenY);
})7.键盘事件
// 常用的键盘事件
// onkeyup 当某个键盘按键被松开（抬起）时候触发 key键 up上 起 区别识别功能键
// onkeydown 当某个键盘按键被按下时候触发 down下 区别识别功能键
// onkeypress 当某个键盘按键被按下时候触发 press 将什么按下 区别不识别功能键
// 执行顺序 keydown-->keypress-->keyup KeyboardEvent键盘事件对象
// e.keyCode 得到ASCLL值判断用户按下哪个键
// keyup 和keydown 不识别大小写 keypress识别大小写十六.BOM
1.setTimeout定时器
// 1.setTimeout定时器
// 指定多长时间之后执行调用函数里面的事情 执行一次
// 语法规则：window.setTimeout(调用函数,[延时时间]);
// 1.这个window在调用的时候可以省略
// 2.这个延时时间单位是毫秒 但是可以省略 如果省略默认的是0
// 3.这个调用函数可以直接写函数 还可以写函数名 不推荐写法 '函数名()'
// 4.页面中可能有很多的定时器，我们经常给定时器加标识符（就是起名字）
// 5.调用函数也叫回调函数
var time1 = setTimeout(function() {
console.log('你好');
}, 2000);
2.清除定时器
清除定时器clearTimeout3.setInterval定时器
// 1.setInterval()
// 语法规范： window.setInterval(调用函数，[延时时间]);
// 指定多长时间之后执行调用函数里面的代码 一直执行
// var time1 = setInterval(function() {
// console.log('你好');
// }, 1000);4.清除定时器
清除定时器clearInterval
扫一扫
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
