简介
javaScript属于高级语言 解释型语言 计算机语言： 机器语言 汇编语言 高级语言 诞生1995年 ECMA-Script是js的一个标准 js:由ECMA-Script DOM BOM
变量与函数命名方式
在js中所有的自主命名的都可以称为标识符
例如：变量名，属性名，函数名都属于标识符
1.标识符中可以含有字母，数字，_,$等
不能以数字开头
标识符不能是es中的关键字与保留字
标识符规范使用驼峰命名法
js保存底层保存标识符采用的是Unicode编码，uft-8
所以理论上中文可以作为变量名
数据类型
a.innerHTML="可以识别html标签";
a.innerText="识别不出标签";
<script>
var a =123;
var c= "123";
console.log(b);
// 数据类型指的是字面量的类型
// 前五种叫基本数据类型
// 最后一种叫引用数据类型
// 在js中一共有六种数据类型5+1说法
// String 字符串
// Number 数值
// Boolean false/true 布尔值
// Null 空值
// Underfined 未定义 定义了，为赋值
// Object 对象
// string:字符串类型,凡是用引号包裹起来的都是字符串
// 字符串只能双引号包单引号或者单引号包双引号
// 字符串中引号不能嵌套
// 字符串使用\转义
// \"表示"
// \'
// \n表示换行
// \t 表示空格
// \\表示一个\
// 有下标的，从0开始，有长度的
var str = "我是：\"周周\"";
console.log(str,str.length);
alert("\\");
</script>
运算
算术运算
<script>
// 运算符也叫操作符
// 通过运算符可以对一个或多个进行运算
//结果属于string类型
// 任何值加上NaN都得NaN
// 当对于非number类型进行运算时，会将这些值转化为number类型
// 如果对两个字符串进行相加;会进行拼串
// 任何值和字符串做加法运算，都会转换成字符串，然后在和字符串做拼接
//加一个空串，可以间接转换成字符串
// + - * / 加减乘除
var a = 123;
var b = 456;
var result = a + b;
result = true + 1;
//2
result = true + false;
//1
result = 2 + null;
// 2
// result = 2+ NaN;
// result = "123" +"456";
// result = "123" + 1;
// 1231
// result = "false" + true;
//"falsetrue"
console.log(result,typeof result);
result = 100 -"16";
//84
result = 100 -true;
// 99
result = 2 * "8";
// 16
result = 2 * undefined;
// NaN
result = 2 * null;
//0
result = 4 / 2;
result = 3 / 2;
//任何值- + * / 运算时都会自动转换成number
var d = "123";
d = d * 1;
d = d - 0;
// %取余
result = 9 % 3;0
result = 9 % 4;1
console.log(result);
</script>
一元运算
<script>
//只需要一个操作数，一元运算符
var a =123;
a = -a ;-123
a = true;
a = -a;-1
a = "18";
a = +a;18
var result = 1 + "2"+ 3;123
result = 1+ +"2" +3;6
console.log("result ="+ result);
</script>
自增与自减
<script>
//自增可以使变量在自身的基础上增加1
// 自减使自身的基础上减1
// 后减减a--;--a;会立即使原变量减1
var a = 1;
a++;
a++;
console.log(a++);3
var result = a++ + ++a +a;
console.log("result ="+ result,a++,++a,a);
// a++是原值，++a加一
var c= 11;
// c--;
++c;
console.log(c) ;
</script>
逻辑运算符
<script>
/*js:中有三种逻辑运算符
!非
!可以用来对一个值进行非运算
所谓非运算就是值对一个布尔值进行取反操作
如果对一个值进行两次取反，所得的值还是原来的值。
如果对于一个非布尔值取反，先把值改成boolean值，在进行计算。
为任意的数据类型做两次非运算，既可将其转换为布尔值
&&与
&&可以对符号两侧的值进行与运算并返回结果
js中的与属于短路的与，如果第一个值为false,或者其中有false，结果都为false.
运算规则
||或
可以对符号两侧的值进行或运算并返回结果
两个值只要满足一个就返回true
js
*/
// 非
var a = true;
// a = !a;
a = !!a;
var b = 10;
b = !b;
b = !b;
var c ="holle";
c = !!c;
// 与
var d = true && false;
var f = 10 && 8;
//或运算
var result = true || false;
console.log("result = " + result);
console.log("d = " + d);
console.log("b = " + b);
console.log("a = " + a);
</script>
布尔值
<script>
/*
对非布尔值进行或与运算时；也叫做短路
会将其转换为布尔值，然后再运算
与运算：如果两个值中lfalse,责会返回靠前的false
如果第一个值为true，则必然返回第二个值
如果第一个值为false，则直接返回第一个值
*/
//true && true;
var result = 1 && 0;//0
result = Nan && 0;//NaN
// 或运算:如果第一个值为true，则直接返回第一个值
// 如果第一个为false，则直接返回第二个值
result = 11 || 22;
console.log(result);
</script>
赋值运算
<script>
/*
=
可以将符号右侧的值赋值给左侧的变量
=读作等于，但属于赋值
+=先加后赋值，-=先减在赋值，*=先乘后赋值,/=先除后赋值，%=先取余在赋值
*/
var a = 123;
a = a + 5;
a += 5;
a -= 5;
a *= 5;
a %= 5;
console.log(a);
</script>
关系运算符
<script>
// >,<,>=,<=,==,!=,===(全等),!==(全不等)
// 比较运算符的运算结果是布尔值false与true
// >,<,>=,<=,==,!=,只比较值,不比较类型
// {===(全等),!==(全不等),只比较值,也比较类型}
字符串的比较:
字符串可以比较
字符串会转换成ascii码值,再比较
字母越靠后越大,小写字母永远比大写字母大
从左到右比较,直到比出结果
</script>
三元运算符
<script>
// 三元运算符也叫条件运算符：
// 关系运算符？真：执行语句：假执行语句
var a = 115;
var b = 15;
a == b ? consolelog(a) : console.log(b);
var x = 22;
var y = 54;
var z = 15;
// 不方便阅读
var max = x>y ? (x > z ? x : z) : ( y > z ? y : z);
console.log(max);
</script>
运算符优先级
<script>
/*
运算符优先级
使用，可以分割多个语句一般在声明多个变量时使用，
运算符优先级与数学中的一样，
(先算括号)
|
.叫字段访问
|
一元运算
|
++，--(自增，自减)
|
再算乘除，后算加减(算术运算符)
|
关系运算符
|
>,<,>=,<=
|
==，===，！=，！==
|
与>或>非>=(逻辑运算)
|
三元运算符(? :)
|
赋值运算 (=,+=,-=,*=,/=,%=)
*/
var a,b,c;
var a=1, b=2 ,c=3;
</script>
前自增后自增
<script>
自增分为前自增与后自增
// 前自增：原值加一，返回值==原值；
// 后自增：返回值等于原始值，原值加一。
var n1=10, n2=20;
var n =n1++;//10
console.log("n="+n);//10
console.log("n1="+n1);//11
n= ++n1;//12
console.log("n="+n);//12
console.log("n1="+n1);//12
n=n2--;20
console.log("n="+n);//20
console.log("n2="+n2);//19
n= --n2;18
console.log("n="+n);//18
console.log("n2="+n2);//18
</script>
条件语句与循环
<script>
/*
我们的程序是由一条语句构成
语句按照自上向下的顺序一条一条执行的
在js中可以使用{}来为语句进行分组
同一个{}中的语句我们称为一组语句
他们要么都执行，要么都不执行
一个{}中的语句我们也称为一个代码块
在代码块的后边就不用在编写;了
js中的代码块，只有分组的作用，没有其他的作用
代码块的内容，在外面完全可见
*/
{
alert("123");
console.log(1533);
document.write("wwww");
}
for(var i =1;i<=10;i++){
if(i==6)continue
if(i==8)break
console.log(i);
}
</script>
<script>
/*
流程控制语句
-js中的程序是从上到下一行一行执行的
通过流程语句可以控制程序执行流程
使程序可以根据一定的条件来选择执行
-语句分类
1条件语句
2条件分支语句
3循环语句
条件判断语句：
-使用条件判断语句可以在执行某个语句之前进行判断，
如果条件成立才会执行语句，条件不成立则语句不执行
if语句：
-语法一单分支：
if(条件表达式)+语句...
if语句在执行时，会先对条件表达式进行求值判断
如果条件表达式的值为true，则执行if后的语句
如果条件表达式的值为false,则不会执行if后的语句。
if语句只能管紧随其后的那个语句
如果希望if语句控制多条语句，
可以将这些语句放到代码块中
if 语句后的代码块不是必须的，但是在开发中尽量写上
*/
var a = 10;
if(false)
alert("hello");
if (a == 10){
alert("hello");
alert("谁也管不了");
}
a = 15;
if(a>10 && a<=20){
alert("a大于10，并且a小于等于20")
}
</script>
<script>
/*
if语句
从上往下执行，第一个条件满足，就不在往下执行
—语法二双分支：
if(条件表达式){
语句...
}else{
语句...
}
if...else...
当该语句执行时，会先对if后的条件表达式进行求值判断，
如果该值为true，则执行if后的语句
如果该值为false，则执行else后的语句
—语法三(可以无限套娃)：
if(条件表达式){
语句...
}esle if(条件表达式){
语句...
}esle if(条件表达式){
语句...
}else{
语句...
}
if...else...if...else...
当该语句执行时，会从上到下依次对条件表达式进行求值判断
如果求值为true，则执行当前语句，
如果值为false,则继续向下判断
*/
var age = 50;
if(age >= 60){
alert("你已经退休~~");
}else{
alert("你还没有退休~~");
};
if(age > 100){
alert("活着没意思~~");
}else if(age>80){
alert("你也老大不小了");
}else if(age>60){
alert("你也该退休了");
}else if(age > 30){
alert("你已经到中年了");
};
</script>
<script>
/*
条件分支语句也叫Switch语句
-语法
执行流程：
在执行时会一次将case后的表达式的值和Switch后的条件表达式进行全等比较
case后面的值属于全等，后面跟着一个固定的值
如果比较结果为true，则从当前case处开始执行代码,我们可以在case
后面跟着break关键字，可以确保代码只执行到这，不在往下执行
如果比较结果为false,则继续向下比较
如果一直不满足条件，则执行default后的代码
switch(变量){
case 固定值：
语句...
break;
case 固定值：
语句...
break;
default：
语句...
break;
}
*/
var num = i3;
if(num == 1){
console.log("壹");
}else if(num == 2){
console.log("贰");
}else if(num == 3){
console.log("叁");
}
switch(num){
case 1:
console.log("壹")
break;
case 2:
console.log("贰")
break;
default :
console.log("叁");
}
</script>
<script>
/*
while循环
-语法
while(条件表达式){
语句...
}
while语句在执行时，
先对条件表达式进行求值，
如果值为true，则执行循环体
循环体执行完毕以后，继续对表达式进行判断
如果值为false，则终止循环体
创建一个循环往往需要三个步骤
1.创建一个初始化的变量
在循环体中设置一个条件表达式
定义一个更新表达式，每次更新表达式
do...while循环
-语法
条件不成立do...while也会执行一次
do{
语句...
}while(条件表达式)；
执行顺序会先执行循环体
在对while条件表达式进行判断
结果为true，则继续执行循环体，执行完毕继续以此类推
如果结果为false，则终止循环体
do...while...先执行在判断
while 先判断，在执行
*/
var n = 101;
do{
document.write(n++ +"<br>");
}while(n<100);
var a=0;
while(a<10){
document.write(a+"<br>");
a++;
}
</script>
<script>
/*
for语句，也是一个循环语句，也成为了for循环
在for循环中，语法原理，与while写法相等
var i=0;定义变量只执行一次
var<10;每次执行n
i++;执行了n-1
for循环执行流程
1执行初始化表达式，初始化变量
2执行条件表达式，判断是否执行循环
如果true，则执行循环3
如果为false，终止循环
4执行更新表达式，更新表达式执行完毕继续重复2
for循环的三个部分都可以省略，也可以写在外部
如果在for循环中，不写任何的表达式，只写两个；
此时循环是一个死循环，慎用
*/
for(let i=0;i<10;i++){
console.log(i);
}
var c = 0;
for(;c<10;){
// alert(c++);
c+=c;
c++;
}
document.write(c);
var b = 0;
while(b<10){
console.log(b);
b++;
}
document.write(b);
// 死循环
// for(;;){
// alert("123");
// }
// for break直接终止循环 break后面的代码不会输出
for(var i=0;i<100;i++){
if(i==10)
break
}
</script>
数组
<script>
/*
对象分为：
内建对象
宿主对象
自定义对象
数组(Array)
数组也是对象
一维有序数据的集合，每个数据都有对应的编号，可以通过快速检索数据
它和普通对象功能类似，也是用存储一些值的
不同于普通对象，是使用字符串作为属性名的，
而数组时使用数字来作为索引操作元素
-索引index
从0开始的整数
数组的存储性能比普通对象更好，所以在开发中我们经常使用数组来存储一些数据
*/
//创建一个数组对象
var arr=new Array();
/*
向数组中添加元素(增)
语法：数组[索引]=值
向数组最后添加数据
arr[arr.length]=...
读取数组中的元素(查，改)
语法：数组[索引]
索引比长度小1
如果读取不存在的索引，他不会报错而是undefined
获取数组长度
可以使用length属性来获取连续数组的长度(元素的个数)
对于非连续的数组，使用length会获取到数组的最大索引加1
尽量不要创造非连续的数组
修改length
如果修改的length大于原长度，则多出的部分会空出来
如果修改的length小于原长度，则多出的元素会被删除
删除
arr=[];
arr.length=0;
arr=null;
*/
arr[0]=10;
arr[1]=12;
// arr[5]=2;
// 向最后一个元素添加元素
arr[arr.length]=45;
// arr=null;
console.log(arr);
// console.log(arr.length);
// console.log(arr[0]);
// console.log(arr[2]);
var a= [1,2,2,2,3,4,5,2];
var b=[];
for(index in a){
if(a[index]!=2){
b[b.length]=a[index];
}
}
console.log(b);
</script>
<script>
// 使用构造函数创建数组
//也可以同时添加元素，将要添加的元素作为构造函数的参数传递
var arr= new Array(1,1,2,36,45);
// 使用字面量来创建数组
var arr =[1,2,3,4,5,6,7];
//使用字面量创建组数是，可以在创建时就指定数组中的元素
console.log(arr,arr.length);
//数组中的元素可以是任意数据类型,可以是函数，对象，数组
var arr1=["aaa",true,false,{a:123,},null,[1,2,4,],{s:"arr"}];
// 二维数组，三维数组，四维数组
arr1 =[[1,2,3],[,4,5,6],[,7,8,9,10],[12,11]];
console.log(arr1,arr1.length);
</script>
<script>
//字面量创建一个数组
var arr=["猪八戒","孙悟空","沙和尚"];
// push() 方法向数组末尾添加一个或者多个长度，并返回新长度，改变原来的数组
// 可以将要添加的元素作为方法的参数，可以传递多个，可以传递为一个数组
// 这样这些元素将会自动添加到数组的末尾
//该方法会将新的数组长度作为返回值返回
var result=arr.push("唐僧","张三","李四");
console.log(arr,result);
// unshift() 方法将新项添加到数组的开头，并返回新的长度，改变原来的数组
var a =arr.unshift("112233",44556);
console.log(a);
// pop() 方法移除数组的最后一个元素，并返回该元素,会改变原来的数组
var b=arr.pop();
console.log(b);
// shift() 方法移除数组的第一项。
// 注释：shift() 方法会改变数组的长度。
// 注释：shift 方法的返回值是被移除的项目。
// 注释：shift() 方法会改变原始数组。
var c=arr.shift();
console.log(c,arr);
// splice(开始的下标，删除个数，要替换的值)替换/删除/添加
// 返回的值:新的数组，数组里包括删除的
// 会改变原来的值
console.log(arr);
item=arr.splice(0,1,"000");
console.log(item,arr);
// reverse() 方法反转数组中元素的顺序。
// 返回值与原来的纸一样
// 注释：reverse() 方法将改变原始数组。
console.log(arr.reverse());
// join() 方法将数组作为字符串返回。
// 返回字符串，原来的值不变
// 元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。
// 注释：join() 方法不会改变原始数组。
console.log(arr.join("-"));
// indexOf()寻找相应元素的下标，返回第一个对应的值的下标，判断为全等,找不到为-1
arr=[123,456,23,13];
arr.indexOf(13);
arr.lastIndexOf(13);
console.log(arr.indexOf(13));
console.log(arr.lastIndexOf(13));
</script>
<script>
var arr=[11,22,33,44];
// 所谓的遍历数组，就是将数组中所有的元素都取出来
// for循环遍历
// for(i=0;i<arr.length;i++){
// console.log(arr[i]);
// }
// 不允许break，continue跳出，返回值为undefined
// arr.forEach(function(currentValue,index,arr){
// console.log(index,currentValue);
// });
// for in 循环
// 字符串也可以使用for in 循环
// 改了增加数组长度，不会改变循环的次数
// 其他遍历增加数组长度，会改变循环的次数
// var arr="123456789";
for (index in arr){
console.log(index);
// index类型属于字符串
}
// for of 循环,不能获取下标
for(item of arr){
console.log(item);
}
// for-of 无法遍历 不可迭代对象
// 可迭代对象包括: Array，Map，Set，String，TypedArray，arguments等等
// for…in 遍历键名，for…of 遍历键值
// 相对于数组自带的 forEach 方法，for…of 可以与 break、continue 和 return 配合使用。
// for-of 遍历的是值，for-in遍历的是index
</script>
对象
<script>
// 使用new关键字调用的函数，是构造函数constructor
// 构造函数是专门创建对象的函数
var obj=new Object();
// var 变量={key:value};
// 键值对
// 在对象中保存的值称为属性
// 向对象中添加属性
// 语法：对象.属性名=属性值
obj.name="孙悟空";
obj.gender="男";
obj.age=20;
console.log(obj);
// 读取对象属性
// 语法：对象.属性名
//如果读取对象中没有的属性，不会报错而时会返回undefined
console.log(obj.name);
// 修改对象的属性名
// 语法：对象.属性名=新值
obj.name="tom";
console.log(obj);
// 删除对象属性
// 语法delete 对象.属性名
// obj={};删除所有的
delete obj.age;
console.log(obj);
var obj2={
name:"张三",
age:28,
nicknane:"tom"
}
// 对象的遍历
for(let key in obj2){
console.log("age" in obj2);
console.log(key);
console.log(delete obj2.nicknane);
}
</script>
<script>
// 对象属性名不强制要求遵循标识符的规范
// 但是尽量使用标识符的规范去做
// 另一种添加属性的方法
// 语法：对象["属性名"]=属性值；
// 使用[]这种形式操作属性，更加灵活，可以传变量
var obj=new Object();
obj.name ="孙悟空";
obj["age"]=24;
var n="name";
console.log(obj[n]);
// 属性值
// js对象的属性值，可以是任意数据类型
obj.test=false;
console.log(obj.test);
// in 运算符
// 通过该运算可以检查一个对象中是否含有指定的属性
// 有返回true，没有返回false
// 语法："属性名" in 对象
console.log("a" in obj);
</script>
<script>
//基本数据类型(不异变)
//String null undfined number Boolean
// 基本数据类型的值是在栈内存中储存
// 值与值之间是独立存在，修改一个变量不会影响其他的变量
var a =123;
var b= a;
a++;
console.log(a,b);//124 123
//引用数据类型(容易异变)
// 对象是保存在堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的空间
// 而变量保存的是内存地址(对象的引用)
var obj=new Object();
var obj2=obj;
obj.name="孙悟空";
obj.name="猪八戒";
console.log(obj.name)//"猪八戒"
console.log(obj2.name)//"猪八戒"
</script>
<script>
// 使用工厂方式创建的对象，使用构造函数都是object
// 所以创建的对象都是object类型
// 所以导致我们无法区分他们的类别
// 构造函数习惯首字母大写
// 构造函数与普通函数的区别就是调用方法的不同
// 普通函数是直接调用，而构造函数需要使用new关键字调用
// 构造函数的执行流程：
// 1立即创建一个新的对象
// 2.将新建的对象设置为函数中的this,在构造函数中可以使用this引用新建的对象
// 3.逐行执行函数的代码
// 4.将新建的对象作为函数返回值返回
// 使用构造函数创建的对象是同一类对象，也将一个构造函数称为一个类
// 我们将通过一个构造函数创建的对象，称为该类的实例
// 使用instanceof可以检查一个对象是否一个类的实例
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
this.sayName=function(){
alert(this.name)
}
};
var per =new Person("孙悟空",24,"男");
var per1 =new Person("嫦娥",18,"男");
var per2 =new Person("猪八戒",1024,"男");
console.log(per);
console.log(per1);
console.log(per2 instanceof Person);
// 所有的对象都是object实例，用instanceof检查都是true
console.log(per2 instanceof Object);
// this当以函数形式调用时，this就是window
// 当以方法的形式调用时，this就是就是调用的这个对象
// 当以构造函数调用时，this就是新创建的对象
</script>
<script>
// 原型prototype
// 我们所创建的每一个函数，解析器都会想函数中添加一个属性prototype
// 这个属性对应的对象，这个对象就是所谓的原型对象
// 当以构造函数形式调用时，它所创建对象中都会有一个隐含的属性
// 指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
// 原型对象就相当于一个公共区域，所有的同一个类的实例都可以访问到这个原型对象
// 当我们访问对象的一个属性或者方法时，它会先在自身中寻找，如果有则直接用，
// 没有则去原型对象中寻找，如果找到则直接使用
// 以后我们创建构造函数时，可以将这些对象共有的属性与方法，统一添加到构造函数的原型对象中
// 这样就不用分别为每一个对象添加，也不会影响到作用域，就可以使每一个对象都具有这些属性与方法
function Person(name){
this.name=name;
Person.prototype.sayName=function(){
alert(this.name);
}
}
console.log(Person.prototype)
console.log(Person.prototype.__proto__.__proto__)
var per=new Person("123");
per.sayName();
console.log(per.__proto__);
</script>
