JavaScript
JavaScript是一种运行在客户端（浏览器本身）的脚本语言（不同于java，java是运行在服务器端的编程语言）
JavaScript现在的意义（应用场景）
最初是为了处理表单的验证操作
现在：
1.网页特效 2.服务端开发（Node.js） 3.命令行工具（Node.js）
4.桌面程序(Electron) 5.APP(Cordova) 6.控制硬件-物联网（Ruff）
7.游戏开发（cocos2d-js）
JavaScript的组成
1.ECMAScript 2.DOM 3.BOM
ECMAScript： 变量 注释 数据类型 类型转换 操作符 流程控制语句（判断和循环） 数组 对象 构造函数 内置对象
JavaScript初体验
CSS:行内样式、嵌入样式、外部样式
JavaScript的书写位置
1.写在行内
<input type="button" value="按钮" onclick="alert('Hello world')"/>
2.写在script标签中
<head>
<script>
alert('Hello World!');
</script>
</head>
3.写在外部js表中
新建js表，之后用路径打开它
<head>
<meta charset="UTF-8">
<script src="index.js"></script>
</head>
JavaScript中的变量使用
变量声明和使用：
<script>
var num1=5;
var num2=6;
alert(num1);// 这是第一种使用方式
console.log(num1); // 这是第二种使用方式
var msg = 'hello world';//在JavaScript里面始终推荐使用单引号对字符进行包裹
//变量声明
var num;
//变量赋值
num = 15;
console.log(num);
//声明多个变量
var n1,n2,n3;
n1 = 1;
n2 = 2;
n3 = 3;
console.log(n1,n2,n3);
</script>
变量的命名规则和规范
1.规则-必须遵守的，不遵守会报错
由字母、数字、下划线、$符号组成，不能以数字开头
不能是关键字和保留字，例如： for、while。
区分大小写
2.规范-建议遵守的，不遵守不会报错
变量名必须有意义
遵守驼峰命名法。首字母小写，后面单词的首字母需要大小写。例如：userName、userPassword
数据类型
简单数据类型
Number、String、Boolean、Undefined、Null
Number类型
1.数值字面量：数值的固定值表示法
110 1024 60.5
2.进制
十进制： var num = 10;
十六进制： var num = 0xA;(11)
八进制: var num = 010;(8)
3.浮点数
浮点数的精度问题
var result = 0.1 + 0.2; //结果不是 0.3，而是： 0.3000000000000004
！ 不要判断两个浮点数是否相等
数值范围
最小值： Number.MIN_VALUE,这个值为： 5e-324
最大值： Number.MAX_VALUE,这个值为： 1.7976931348623157e+308
无穷大： Infinity
无穷小： -Infinity
数值判断
- NAN ：not a number
- ！NAN与任何值都不相等，包括它本身
- isNAN：is not a number
String类型
转义符
| 字面量 | 含义 |
|---|---|
| \n | 换行 |
| \t | 制表 |
| \b | 空格 |
| \r | 回车 |
| \f | 进纸 |
| \ | 斜杠 |
| \ ’ | 单引号 |
| \ " | 双引号 |
| \xnn | 以十六进制代码nn表示的一个字符（其中n为0~F）。 |
| \unnnn | 以十六进制代码nnnn表示的一个Unicode字符（其中n为0~F）。 |
字符串长度
var str = '黑马程序猿 Hello World'；
console.log(str.length);
字符串拼接
字符串拼接使用+连接
console.log(11 + 11);
console.log('hello' + 'world');
console.log('100' + '100');
console.log('11' + '11');
console.log('male:' + 'true');
1.两边只要有一个是字符串，那么+就是字符串拼接功能
2.两边如果都是数字，那么就是算数功能。
字符串的不可变性
var s = 'abc';
s = 'xxxxx';
//当拼接大量字符串的时候，会有性能问题
Boolean类型
Boolean字面量： true和false，区分大小写
计算机内部存储： true为1，false为0
Undefined和Null
1.undefined表示一个声明了没有赋值的变量，变量只声明的时候默认是undefined
2.null表示一个空，变量的值如果想为null，必须手动设置
获取变量的类型
typeof
var age = 18;
console.log(typeof age); //'number'
字面量
在源代码中一个固定值的表示法
数值字面量： 8,9,10
字符串字面量： ‘黑马程序猿’，‘大前端’
布尔字面量：true、false
数据类型转换
转换为字符串类型
1.toString（）方法
!错误的方式——null和undefined没有toString（）方法
2.String（）方法
var a = null;
console.log(String(a));
3.字符串拼接
var num = 18;
var isRight = true;
console.log(typeof(num+''));
console.log(typeof(isRight+''));
转换为数值类型
1.Number()
Number()可以吧任意值转换为数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
2.parseInt()
var num1 = parseInt("12.3abc"); //返回12，如果第一个字符是数字会解析直到遇到非数字结束
var num2 = parseInt("abc123"); //返回NaN，如果第一个字符不是数字或者符号就返回NaN
3.parseFloat()
parseFloat()把字符串转换成浮点数
parseFloat和parseInt非常相似，不同之处在于：
parseFloat会解析第一个。遇到第二个。或者非数字结束
如果解析的内容里只有整数，解析成整数
4.取正或者取负
var num = -5;
console.log(num);
var num = '123';
console.log(-str); //返回值-123
var str = '123abc';
console.log(+str); //返回值NaN
var isOk = true;
console.log(+isOk); //返回值1(false则为0)
var str = '123abc';
//-如果一边是数值类型，一边是字符串，会先把字符串转换成数值类型再进行数值的减法运算
//如果字符串转换成数值类型失败，返回NaN
console.log(str - 0); //返回值NaN
//+如果有一边是数值类型，一边是字符串，会先把数值类型转换成字符串 再进行字符串的拼接
console.log(str + 0); //返回值123abc0
转换为布尔类型
Boolean()
0 ‘(空字符串)’ null undefined NaN 会转换成false 其他都会转换成true
操作符
又称为运算符 operator
5+6
表达式 组成 操作数和操作符。会有一节结果
算术运算符
1 + - * / % 3%2
一元运算符
只有一个操作数的运算符
++、–
++ 自身加1
– 自身减1
前置++ –
var num1 = 5;
++ num1; //输出6
var num2 = 6;
console.log(num1+ ++num2); //输出13（num1为6，num2经过++变为7）
var num = 7;
console.log(--num); //输出6
后置++ –
var num = 5;
console.log(num++); //输出5
console.log(num); //输出6
var num1 = 7;
console.log(num1--); // 输出7
console.log(num1); //输出6
逻辑运算符（布尔运算符）
&& 与 两个操作数同时为true，结果为true，否则为false
|| 或 两个操作数有一个为true，结果为true，否则为false
！ 非 取反
关系运算符（比较预算符）
< > >= <= == != === !==
==与===的区别：==只进行值的比较，===类型和值同时相等，则相等
var result = '55' == 55; //true
var result = '55' ===55; //false 值相等，类型不相等
var result = 55 ===55; //true
赋值预算符
= += -= *= /= %=
例如：
var num = 0;
num += 5; //相当于 num = num + 5;
运算符的优先级
优先级从高到低
1.（）优先级最高
2.一元运算符 ++ -- ！
3.算术运算符 先* / % 后 + -
4.关系运算符 > >= <= <
5.相等运算符 == ！= === ！==
6.逻辑运算符 先&& 后||
表达式和语句
表达式
一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。
语句
语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下用；分割一个一个的语句
流程控制
程序的三种基本结构
顺序结构
由上到下执行的语句结构
分支结构
根据不同的情况，执行对应代码
if语句
三元运算符
表达式1？表达式2：表达式3
表达式1 布尔类型的表达式 --》 返回一个布尔类型
当表达式1 成立 返回表达式2的值
当表达式1 不成立 返回表达式3的值
是对if.....else语句的一种简化写法
获取两个数的最大值
var num1 = 3;
var num2 = 6;
console.log( num1 > num2 ? num1 : num2);//返回6
switch语句
switch语句中的判断使用的是 ===
循环结构
重复做一件事情
在JavaScript中，循环语句有三种： while do…while for循环。
while语句
基本语法：
//当循环条件为true时，执行循环体。
//当循环条件为false时，结束循环。
while (循环条件) {
//循环体
}
!当循环的条件永远是true的时候，我们叫做死循环
do…while语句
do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。
基础语法：
do {
//循环体
} while (循环条件)
for语句
while 和 do…while一般用来解决无法确认次数的循环。for循环一般在循环次数确定的时候比较方便
for循环语法
//for循环的表达式之间用的是；号分隔的，千万不要写成，
for (初始化表达式1；条件表达式2；自增表达式3) {
//循环体4
}
continue 和 break
break : 立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
continue：立即跳出当前循环，继续下一次循环（跳到i++的地方）
数组
数组 可以存储很多项，有顺序，很多项形成一个集合，这个集合就是数组 Array
数组的字面量【】
如何获取数组中的数据——索引/下标 数组中的第一项的索引是从0开始
var names = ['zs','ls','ww','zl'];
console.log(names[0]); //输出'zs'
//获取数组长度
console.log(names.length); //输出4
//获取数组中最后一个元素
console.log(names[names.length-1]) //数组长度减一为最后一个元素位置
//遍历数组
for (var i = 0;i < names.length;i++) {
console.log(names[i]);
}
//补充 清空数组
names.length = 0; //此时names数组内为空
数组中存储的数据类型可以不一致(不推荐)
函数
函数 可以封装一段特定功能的代码，然后通过函数名可以重复调用此段代码
//定义了一个函数 -- 函数不会自己运行
1.函数声明
function getSum {
var sum = 0;
for (var i = 200; i <= 300; i++) {
sum += i;
}
console.log(sum);
}
2.函数表达式
var getSum = function() {
console.log('Hello World');
}
//调用函数
getSum();
函数的参数
//写一个函数，可以求n-m之间所有数的和——n,m是参数
//在函数声明的时候，参数叫形参 形式参数（占位） 没有值
function getSum(n,m) {
var sum = 0;
for (var i = n; i <= m; i++) {
sum += i;
}
console.log(sum);
}
//求1-100之和
//在函数调用的时候 我们需要给形参传递值 实参（实际参数） 把具体的值传递给形参
getSum(1,100);
函数的返回值
当函数执行完的时候，并不是所有时候都要把结果打印。我们期望函数给我一些反馈（比如计算的结果返回进行后续的运算），这个时候可以让函数返回一些东西。也就是返回值。函数通过return返回一个返回值
返回值语法：
//声明一个带返回值的函数
function 函数名(形参1，形参2) {
//函数体
return 返回值；
}
//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1，实参2)；
//！如果一个函数不需要返回值，可以不写return
//！当函数中不写return的时候，返回的是undefined
//！return后面可以什么都不跟，返回undefined
//！函数使用return语句后，这个函数会在执行完return语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行.
匿名函数
匿名函数：没有名字的函数
匿名函数如何使用：
1.将匿名函数赋值给一个变量，这样就可以通过变量进行调用
2.匿名函数自调用
自调用函数
当函数书写完成之后立即调用
(function () {
console.log('我是自调用函数');
})() //前面的（）是将函数包裹，后面（）将函数调用
函数也是一种数据类型
function(函数)也是一种数据类型
！ 因为函数是一种数据类型，所以函数可以作为另一个函数的参数
！因为函数是一种数据类型，所以函数可以作为另一个函数的返回值
function test(fun) {
console.log(fun); //此时fun的值为undefined
fun(); //报错，此时的fun不是function类型
}
代码规范
1.命名规范
变量、函数 的命名 必须要有意义
变量 的名称一般用名词
函数 的名称一般用动词
2.变量规范
在操作符的前后要加上 空格
3.注释规范
// 这里是注释
4.空格规范
if (true) {
}
for (var i = 0; i <= 100; i++) {
}
小括号（）的前后都需要 空格
分号后面要有一个 空格
作用域
作用域：变量或者函数可以起作用的访问
全局作用域：
在Script或者一个独立的js文件中，在全局作用域中定义的变量
全局变量：在任何位置都可以访问
var num = 15;
function fn() {
str = 'abc';
console.log(num);
console.log(str);
}
fn();
console.log(str); // 此时str的值在该代码块中均可使用
// ! 但不建议这样，这样是不规范的
局部作用域：
任何一个函数的内部都有一个局部作用域，在局部作用域中定义的变量
局部变量：只有在定义该变量的函数中可以访问
function fn() {
//局部变量
var num = 5;
}
console.log(num);
块级作用域：
在ECMAScript中没有块级作用域
代码块：{ }里面就是一个代码块
作用域链：
var num = 5;
function f1() {
//f1 局部作用域 --1级作用域链
function f2() {
//f2 局部作用域 --2级作用域链
console.log(num);
}
f2();
}
f1();
预解析
1.变量提升：把变量的声明提升到当前作用域的最上面，不包括变量的赋值
2.函数提升：把函数声明提升到当前作用域的最上面，不包括函数的调用
console.log(num);
var num = 5;
//预解析
var num;
console.log(num);
num = 5;
//!在预解析的过程中如果函数和变量的名字相同，此时函数优先
对象
JavaScript中的对象
自定义对象 内置对象 浏览器对象（不属于ECMAScript中的对象）
1. JavaScript中的对象其实就是生活中对象的一个抽象
2. JavaScript的对象是无序属性的集合。
3. 其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值，我们可以想象成键值对，其中值可以使数据和函数。
对象与函数的区别
函数：封装一段代码
对象：封装一组属性和方法
使用方法
//创建dog对象
var dog = {
name: 'puppy',
type: '中华田园犬',
age： 2,
color： 'yellow',
bark:fuction() {
//在方法中如何使用属性的值
//this在方法中代表的是当前对象dog
console.log(this.name + '汪汪汪')；
}
}
//如何访问属性 对象.属性名
console.log(dog.name);
console.log(dog.type);
//如何访问方法 对象.方法名
dog.bark();
//属性的另一种访问方式(灵活)
console.log(dog['name']);
工厂方法
function creatHero(name,weapon,equipment,blood) {
var hero = new Object(); //返回一个空的对象
//属性
hero.name = name;
hero.weapon = weapon;
hero.equipment = equipment;
hero.blood = blood;
//方法
hero.attack = function() {
console.log(this.name + '攻击')；
}
hero.run = function() {
console.log(this.name + '加速跑');
}
return hero;
}
var hero1 = createHero('黄忠','弓箭',['头盔','靴子'],100);
var hero2 = createHero('刘备','剑',['头盔','盔甲'],100);
自定义构造函数
帕斯卡命名：第一个单词的第一个字母大写，后续的每一个单词的第一个字母都大写
function Hero(name,weapon,equipment,blood) {
//this 动态的给对象增加成员
//this 指向了当前对象
this.name = name;
this.weapon = weapon;
this.equipment = equipment;
this.blood = blood;
}
//使用
var hero1 = new Hero('黄忠','弓箭',['头盔','靴子'],100)
new的执行过程
1.在内存中创建了一个空的对象
2.让构造函数中的this指向刚刚创建的对象
3.执行构造函数，在构造函数中设置属性和方法（当然也可以做其他事情）
4.返回了当前对象
This
this出现在以下位置中，分别代表什么
1.在函数中 --this 指向 窗口（window）
function fn() {
console.log(this);
}
fn();
2.在方法中 --this 指向 这个方法所属的对象
var obj = {
name: 'zs',
fn: function() {
console.log(this);
}
}
obj.fn();
3.在构造函数中 --this 就是构造函数创建的对象
function Fn() {
this.name = 'zs';
this.age = 18;
console.log(this);
}
var o = new Fn();
内置对象
Math/Array/Date…
查文档：MDN
MDN （https://developer.mozilla.org/zh-CN/）
Mozilla 开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括HTML、CSS和万维网及HTML5应用的API。
Math对象
Math对象不是构造函数，它具有数学方面的一些属性和方法，以静态成员的方式提供跟数学相关的运算来找Math中的成员（求绝对值，取整）
1.Math.PI //圆周率
2.Math.random() //生成随机数
3.Math.floor()/Math.ceil() //向下取整/向上取整
4.Math.round() //取整，四舍五入
5.Math.abs() //绝对值
6.Math.max()/Math.min() //求最大值和最小值
7.Math.sin()/Math.cos() //正弦/余弦
8.Math.power()/Math.sqrt() //求指数次幂/求平方根
Date对象
Date是一个构造函数，首先要通过new Date() 来创建日期实例（对象）。实例成员
getTime() //返回毫秒数和valueOf()结果一样
getMilliseconds()
getSeconds() //返回0-59
getMinutes() //返回0-59
getHours() //返回0-23
getDay() //返回星期几 0周日 6周六
getDate() //返回当前月的第几天
getMonth() //返回月份，从0开始
getFullYear() //返回4位的年份 如2016
Array对象
//判断arr是否数组
//方法一
if (!(arr instanceof Array)) {
console.error('参数arr 不是数组对象')
return;
}
//方法二(浏览器兼容性问题 HTML5)
if (!Array.isArray(arr)) {
console.error('参数err 不是数组对象');
return;
}
toString()/valueOf()
toString() 把数组转换成字符串，逗号分隔每一项
valueOf() 返回数组对象本身
数组常用方法
push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()
//1.栈操作（先进后出）
push()
pop() //取出数组中的最后一项，修改length属性
//2.队列操作（先进先出）
push()
shift() //取出数组中的第一个元素，修改length属性
unshift() //在数组最前面插入项，返回数组的长度
//3.排序方法
reverse() //翻转数组
sort() //即使是数组sort也是根据字符，从小到大排序
//带参数的sort是如何实现的
//4.操作方法
concat() //把参数拼接到当前数组
slice() //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始，end从1开始
splice() //删除或替换当前数组的某些项目，参数start,deleteCount,option()
//5.位置方法
indexOf()、lastIndexOf() //如果没找到返回-1
//6.迭代方法 不会修改原数组（可选） html5
every()、filter()、forEach()、map()、some()
//7.方法将数组的所有元素连接到一个字符串中。
join()
sort()方法
//数字排序
arr.sort(function(a, b){
return a - b;
})
//字符排序
var arr = ['abc', 'ab', 'a', 'abcdef', 'xy'];
arr.sort(function(a, b){
return a.length - b.length;
});
清空数组
var arr = [1, 2, 3];
//方式一
arr = [];
//方式二
arr.length = 0;
//方式三(第一个参数 从什么位置开始删除 索引)
//第二个参数 删除多少个元素
arr.splice(0, arr.length)
filter()方法
filter()方法创建一个新数组，其包含通过所提供函数提供函数实现的测试的所有元素.
function isBigEnough(value) {
return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
//filtered is [12, 130, 44]
字符串方法
//1. 字符方法
charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码
str[0] //HTML5,IE8+支持 和 charAt()等效
//2. 字符串操作方法
concat() //拼接字符串，等效于+，+更常用
slice() //从start位置开始，截取到end位置，end取不到
substring() //从start位置开始，截取到end位置，end取不到
substr() //从start位置开始，截取length个字符
//3. 位置方法
indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找，只找第一个匹配的
//4. 去除空白
trim() //只能去除字符串前后的空白
//5. 大小写转换方法
to(Locale)UpperCase()//转换大写
to(Locale)LowerCase()//转换小写
//6. 其他
search() //比indexOf()强大很多
replace() //只会替换第一个找到的字符
split() //配合数组中的join方法使用进行切割
//split()方法
var s = ' abc xyz a 123 ';
var arr = s.split(' '); //以空字符串进行切割
console.log(arr.join(''));
静态成员和动态成员
var MyMath = {
PI:3.1415926,
max:function() {
},
min:function() {
},
}
静态成员 直接使用对象来调用的
MyMath.PI; MyMath.max();
实例成员 实例 ——对象的一种说法
基本包装类型
也就是基本类型包装成复杂类型
String Number Boolean (PrimitiveValue) 原始值
！一般情况下基本不会使用Number和Boolean基本包装类型，但会使用String基本包装类型
扫一扫
3850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
