js基础笔记
1js的三种输出语句
<script type="text/javascript">
//1.控制浏览器发出一个警告
//alert("这是第一个js程序");
//2.让计算机在页面中输出内容
//document.write("这是第一个js程序");
//3.向控制台输出内容
console.log("这是第一个js程序");
</script>
2.js编写程序语句的位置：
<head>
<meta charset = "utf-8">
<title>helloJs</title>
<!--
2.方式二：可以将js代码编写在script标签中
-->
<!--
<script type = "text/javascript">
alert("这是第二种编写js程序的第二种方式");
</script>
-->
<!--
3.方式三：将js语句编写在外部以后缀名为.js的文件中
然后通过script标签的属性src将外部文件引入
-->
<script src = "js/ex.js" type = "text/javascript">
</script>
</head>
<body>
<!--
1.方式一：可以将js代码编写在标签的属性中，比如说button的onclick
属性中
这种方式不推荐使用，因为结构和行为耦合不利于维护
<button onclick="alert('这是js编写代码的位置的方式之一')">我是一个按钮</button>
-->
<a href = "javascript:alert('这是js编写代码的位置的方式之一')">我是一个链接</a>
<!--
点完链接后没有反应
-->
<a href = "javascript:;">我是一个链接</a>
</body>
3.js中的常量和变量
<script type = "text/javascript">
//js中常量变量的使用
//1.使用var关键字声明变量
var age = 20;
var height = 175;
//hello为常量
console.log("HelloWorld");
console.log(age);
console.log(height);
</script>
4.js中的数据类型
1.js中的数据类型：
1.基础数据类型：
1.Number
2.String
3.Null
4.Boolean
5.Undefined
注意：js中的所有数值都是number类型，比如说小鼠和整数
2.引用数据类型
1.Object
2.转义字符\的使用：对特定的字符进行转义
//转义字符\的使用
var str = "\\"; //打印一个字符\
console.log(str);
console.log("Hello\nWorld");
5.js中的typeof关键字
typeof关键字：检查变量的数据类型
var str = "123";
var num = 123;
console.log(str); //字符串类型
console.log("\n");
console.log(num); //number类型
6.Number数据类型的最大值和最小值
Number：Number数据类型能表示的值是有范围的，如果超过所能表示的范围则为Infinity
//number类型能够表示的最大数值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
var a = Infinity;
var b = -Infinity; //表示负无穷
console.log(typeof(a)); //Number类型
console.log("\n");
console.log(typeof(b)); //Number类型
7.Object与Null数据类型
Null类型的值只有一个，就是null。它表示一个空对象。
当只给一个变量声明却不初始化时，它的值即为undefined
var c = null;
console.log(typeof(c)); //object
var d = undefined;
console.log(typeof(d)); //undefined
8.js中数据类型的转化方法：
1.其他数据类型转化为String类型
//数据类型转换
//方式一:调用tostring方法
var e = 123;
e = e.toString(); //将Number类型转化位String类型
console.log(typeof(e));
//方式二:使用String()函数
var f = 123;
f = String(f); ////将Number类型转化位String类型
console.log("\n");
console.log(typeof(f));
//方式三：任何NUmber类型和String类型相加，都会转化为字符串然后做拼接操作。
2.其他数据类型转化为Number类型
1.将字符串类型转化为Number类型：
1.如果是纯数字的字符串，则直接将其转化为数字
2.如果字符串中包含有非数字的内容，则转化为ＮＡＮ
3.如果字符串是一个空串或者是一个全是空格的字符串，则转化为0
2.将boolean类型转化为Number类型
1.true值转化为1
2.false值转化为0
3.null类型转化为Number类型，值为0
4.undefined类型转化为Number类型，值为NAN
//将其他数据类型转化为Number
var a = "123";
console.log(typeof(a));
console.log(a);
//方式一:使用Number函数
a = Number(a); //将String类型转化为Number类型
console.log(typeof(a));
console.log(a);
var b = "123Hello";
b = Number(b);
console.log(typeof(b)); //Number
console.log(b); //值为NAN:not a number
var c = "";
c = Number(c);
console.log(typeof(c));//number
console.log(c); //0
var d = " ";
d = Number(d);
console.log(typeof(d));//number
console.log(d);//值为0
var e = null;
e = Number(e);
console.log(typeof(e));//number
console.log(e);//0
var f = undefined;
f = Number(f);
console.log(typeof(f));//number
console.log(f); //值为NAN
3.注意:将字符串类型转化为Number类型的第二种方法：使用parseInt方法可以将字符串类型转化为整数类型；使用parseFloat方法可以将字符串转化为浮点数类型。
//注意:对于字符串类型转化为Number类型的第二种方式
//使用parseInt或者parseFloat方法
var a = "123Hello";
a = parseInt(a);
console.log(a); //值为123
console.log(typeof(a));//number类型
3.将其他数据类型转化为Boolean类型
将其他数据类型转化为Boolean类型使用Boolean函数，：
1.将Number类型转化为Boolean类型：除了0和ＮＡＮ，其余的都是true
2.将字符串转化为Boolean类型：除了空串其余的都是true
3.null和undefined都会转化为false
4.对象也会转化为true。
9.js中的算数运算符
1.对于加法运算，一个Number类型和String类型相加，Number类型将会转化为String类型然后进行加法运算。
2.除了加法运算，一个Number类型和String类型进行运算，String类型将会转化为Number类型再进行运算。
var a = 12;
a = a * "12"; //将字符串"12"转化为Number12再进行乘法运算
console.log(a); //144
console.log(typeof(a)); //number
var b = 12;
b = b + "12"; //将Number类型b转化为String类型再进行运算
console.log(b); //1212
console.log(typeof(b)); //string
10.js中的一元运算符
1.一元运算符
1.+：正好不会对数字产生影响
2.-：负号可以对数字进行取反
var a = 12;
a = -a;
console.log(a); //-12
//使用一元运算符可以将字符串类型转化为Number类型
//因为使用一元运算符可以将任意数据类型转化为Number类型
var b = "123";
b = +b;
console.log(b); //123
console.log(typeof(b));//number
var c = "123";
c = -c;
console.log(c); //-123
console.log(typeof(c));//number
3.前置加加与后置加加
4.前置减减与后置减减
11.js中的逻辑运算符
js中的逻辑运算符分为：
1.逻辑与：&&
2.逻辑或：||
3.逻辑非：！
注意：对于逻辑与运算，如果两个值都为true，则返回后边的。如果两个值都为false，则返回靠前的false;对于逻辑非运算符则相反。
比如说：
var results = 12 && 24; //24
console.log("results = "+ results);
var results0 = 24 && 12; //12
console.log("results0 = "+ results0);
var results1 = NaN && 0; //NaN
console.log("results1 = "+ results1);
var results2 = 0 && NaN //0
console.log("results2 = "+ results2);
12.js中的赋值运算符
13.js中的关系运算符
注意：1.对于非数值进行比较时，会将非数值转化为数值后进行比较
2.任何值和NaN比较都为false
3.对于比较的都是字符串，不会将其转化为数值后进行比较，而是比较字符串中的字符的Unicode编码。
//非数值比较,会将字符串"125"转化为125
console.log(123 < "125"); //true
//比较的都是字符串,则从第一个字符开始比较Unicode
console.log("abc" < "abcd");//true
//任何值和NaN比较值都为false
console.log(123 > NaN); //false
14.unicode编码的使用
1.再字符串中使用Unicode：格式\u四位Unicode编码（十六进制的）
2.再网页中使用Unicode：格式&#编码（这里的编码使用十进制的）
//再字符串中使用转义字符输出Unicode编码
//使用方式:\u四位编码
console.log("\u0031"); //输出1,因为1的Unicode编码为0031
<!--
再网页中输出Unicode编码
-->
<h1>☠</h1>
image.png
15.全等运算符与不全等运算符
1.全等运算符：===.用来判断两个值是否相等，它和相等运算符类似，不同的是她不会做自动的类型转换。如果两个值的类型不同，直接返回false。
2.不全等运算符：！==.用来判断两个值是否不全等，和不等运算符类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，直接返回true。
//全等运算符与不全等运算符
console.log(1 === "1"); //false
console.log(1 == "1"); //true,因为相等运算符比较时,将字符串类型转化为number
console.log(1 != "1"); //false
console.log(1 !== "1"); //true
注意：1.NaN不和任何值相等，包括它自身。所以判断一个值是否为NaN使用isNaN函数。
var a = NaN;
console.log(a == NaN);//false,因为NaN不和任何值相等,包括他本省
console.log(NaN == NaN);//false
//a的值为NaN,可以通过isNaN函数来判断
console.log(isNaN(a));//true
js中的对象
1.js中的对象分类：
1.内建对象：由ES标准定义的对象，在任何的ES的实现中都可以使用。比如说：Math，String，Number，Boolean，Function，Object
2.宿主对象：由js运行环境提供的对象，目前来讲主要是指由浏览器提供的对象：比如说：BOM，DOM.
3.用户自定义对象
自定义一个对象举例：
<script type = "text/javascript">
//new一个对象,对象名叫做student
var student = new Object();
//给对象添加属性
student.name = "李华";
student.age = 20;
student.gender = "男";
console.log("name:"+student.name);
console.log("age:"+student.age);
console.log("gender:"+student.gender);
console.log(typeof(student.name));
console.log(typeof(student.age));
console.log(typeof(student.gender));
//删除对象的属性
delete student.gender;
console.log("gender:"+student.gender); //值为undefined
</script>
2.如果使用特殊的属性名，则不能采用 对象名.属性名的方式来获取.而是需要对象名["属性名"]
比如说：
var student = new Object();
student["name"] = "李华";
console.log(student["name"]); //李华
student.name = "李华";
console.log(student.name); //李华
3.in运算符
in运算符：通过该属性可以检查一个对象是否含有指定的属性，如果返回true则表示存在，返回false表示不存在。
in运算符使用举例：
var student = new Object();
student.name = "李华";
console.log("gender" in student);//false
console.log("name" in student);//true
console.log(name in student);//false
4.使用对象字面量创建对象
//这样再创建对象的同时添加属性并且设置值
var student = {name:"李华",gender:"男",age:20};
console.log("name:"+student.name);
console.log("age:"+student.age);
console.log("gender:"+student.gender);
js中的函数
1.函数：函数也是一个对象，函数中可以封装一些代码，需要时可以调用函数执行这些代码。
2.创建函数对象的几种方式：
1.使用构造函数创建函数对象。语法:
var objName = new Function("函数体中的可执行语句");//这样调用函数的时候使用objName();.
2.使用函数声明来创建一个函数。语法：
function funcName([形参1，形参2，...,形参N]){函数体中的可执行语句}
3.创建匿名函数对象，语法：
var obj = function([形参1，形参2，...,形参N]){函数体中的可执行语句};//创建匿名函数对象将其赋值给一个变量
//调用可以通过obj();
示例：
//方式一:通过构造函数创建函数对象
var printHello = new Function("console.log('Hello');");
printHello();
//方式二:通过函数声明来创建函数对象
function printWorld() {
console.log("World");
}
printWorld();
//创建函数匿名对象
var printHelloWorld = function() {
console.log("HelloWorld");
}
printHelloWorld();
3.函数中的参数:可以在函数的()中指定一个或者多个或者0个形参,在多个形参之间使用逗号隔开。调用函数时可以在()中指定实参。
注意:1.调用函数时解析器不会检查实参的类型，所以要注意，是否可能接受到非法的参数，如果有可能则需要对参数进行类型的检查。2.调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值；如果实参的数量少于形参的数量，则没有对应实参的形参的值将为undefined.
示例：
function sum(a,b){
console.log("b="+b);
console.log(a + b);
}
//实参的个数多于形参的个数,第三个实参则忽略
sum(100,200,300); //300
//实参的个数少于形参的个数,则形参b的值为undefined
sum(100); //100和undefined相加值为NaN
4.函数返回值：使用return关键字;函数返回值可以是任意的数据类型包括对象或者函数
比如说：
function printHello(){
console.log("HelloWorld");
}
//函数内部返回一个函数
function example(){
return printHello;
}
//var funObj = example();
//funObj(); //HelloWorld
example()();//HelloWorld
5.调用函数的实参：实参可以是任意数据类型包括对象和函数。
比如说：
//计算圆的面积函数
function calcu(object){
return object.r * object.r * 3.14;
}
//定义一个对象
var obj = {
r:10
};
//对象作为参数
var results = calcu(obj);
console.log("results:"+results); //314
function printMess(funcName){
console.log("results:"+funcName(obj));//314
}
//函数对象作为参数
printMess(calcu);
6.匿名函数（立即执行函数）
//匿名函数的使用
(function(){
alert("我是一个匿名函数");
})();
var obj = {
name:"李华",
age:20
};
(function(obj){
console.log("name:"+obj.name+"age:"+obj.age);//name:李华age:20
})(obj);
js中的方法
方法：当函数作为对象的属性值时，我们称这个函数为这个对象的方法。
var student = {
//属性
name:"李华",
age:20,
gender:"男",
//方法
printMess:function(){
console.log("name:"+student.name+"age:"+student.age+"gender:"+student.gender);//name:李华age:20
}
};
//调用student对象中的方法
student.printMess();
for....in语句
1.for...in语句：for...in语句，对象中有几个属性，循环体就会执行几次；每次执行时，会将对象中的属性的名字赋值给变量。语法如下：
for(var 变量 in 对象){
}
比如说：
var student = {
//属性
name:"李华",
age:20,
gender:"男",
//方法
printMess:function(){
console.log("name:"+student.name+"age:"+student.age+"gender:"+student.gender);//name:李华age:20
}
};
for(var pros in student){
console.log("属性名："+pros);
console.log("属性值："+student[pros]);
}
运行如下：
image.png
js中的作用域
1.全局作用域:编写在script标签中的js代码都在全局作用域。全局作用域再页面打开时创建，再页面关闭时销毁。再全局作用域中有一个全局对象window,他代表的是一个浏览器窗口，它由浏览器创建我们可以直接使用。再全局作用域中，创建的变量都会作为window对象的属性保存；创建的函数作为window的方法保存。
比如说：
var a = 100;
console.log(window.a);//100
function printHello(){
console.log("HelloWorld");
}
window.printHello();//HelloWorld
2.函数作用域（局部作用域）
js中的this关键字
this关键字：解析器在调用函数或者对象的方法时会向其内部传递一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象的引用。根据调用的方式不同，this会指向不同的对象：
1.以函数的形式调用时，this指向的是window对象的引用。
2.以方法的形式调用时，this指向调用方法的那个对象的引用。
比如说：
function printHello(){
console.log("this:"+this);
}
window.printHello();
console.log("\n");
var obj = {
name:"李华",
age:20,
gender:"男",
//对象的方法
printWorld:function(){
console.log("this:"+this);
}
};
obj.printWorld();
运行结果如下：
image.png
js中使用工厂方法创建对象
1.工厂方法可以创建大量对象，比如说：
function createObject(name,age,gender){
var object = new Object();
object.name = name;
object.age = age;
object.gender = gender;
object.printMess = function(){
console.log("name:"+this.name+"age:"+this.age+"gender:"+this.gender);
}
return object;
}
//创建学生对象
var student = createObject("李华",20,"男");
student.printMess();//name:李华age:20gender:男
//创建老师对象
var teacher = createObject("刘老师",32,"女");
teacher.printMess();//name:刘老师age:32gender:女
js中的构造函数
1.构造函数与普通函数的区别：调用的方式不同。普通函数直接通过函数名调用，而构造函数通过new关键字调用.
2.构造函数的执行过程：
1.立刻创建一个新的对象
2.将新创建的对象初始化this，在构造函数体中可以使用this来引用新创建的对象
3.执行函数体中的代码
4.将新创建的对象返回
举例：
//定义一个构造函数
function Student(name,age,gender) {
this.name = name;
this.age = age;
this.gender = gender;
console.log(this); //this即为调用此构造函数返回的新建对象的引用
this.printMess = function() {
console.log("name:"+this.name+"age:"+this.age+"gender:"+this.gender);
}
}
//通过构造函数创建Student类对象
var student1 = new Student("李华",20,"男");
student1.printMess();//name:李华age:20gender:男
var student2 = new Student("张三",18,"男");
student2.printMess();//name:张三age:18gender:男
2instanceof关键字的应用：可以检验一个引用对象是否属于某个类
比如说：
console.log(student1 instanceof Student);//true
console.log(student2 instanceof Student);//true
console.log(window instanceof Student); //false
js中的原型对象
1.原型对象的概念：我们创建的每一个函数或者对象，解析器都会向其添加一个属性prototype，这个属性对应着一个实例对象，这个实例对象就是原型对象。
function fun1() {
}
function fun2() {
}
console.log(fun1.prototype);
console.log(fun2.prototype);
console.log(fun1.prototype == fun2.prototype);//false
2.当函数以构造函数的形式调用时，它所创建的对象中都有一个隐含的属性指向该构造函数的原型对象，我们可以通过__proto__来访问这个属性
function Student(name,age,gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
var student1 = new Student("李华",20,"男");
var student2 = new Student("张三",18,"男");
console.log(student1.__proto__ == student2.__proto__);//true
3.原型对象的应用：原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问这个原型对象，我们创建构造函数时，可以将对象中共有的属性或者方法添加到原型对象中。这个应用类似于C++中的类中的静态方法或者静态成员变量。添加静态成员变量或者静态方法就可以为同一个类中的对象所共享。
举例：上诉例子中的printMess方法是为同一个类中的方法共享的，我们可以将其添加到原型对象中
function Student(name,age,gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
//添加公共方法,当然了也可以添加公共属性
Student.prototype.printMess = function() {
console.log("name:"+this.name+"age:"+this.age+"gender:"+this.gender);
}
//通过构造函数创建Student类对象
var student1 = new Student("李华",20,"男");
student1.printMess();//name:李华age:20gender:男
var student2 = new Student("张三",18,"男");
student2.printMess();//name:张三age:18gender:男
console.log(student1.printMess == student2.printMess); //true
js中的toString方法：
1.当我们在页面中打印一个对象时，实际上输出的是对象 的toString方法的返回值。如果我们希望输出对象时不输出[object object],可以为对象添加一个toString方法。这个类似于JAVA中的重写toString方法达到定制的打印对象值的功能的目的。
function Student(name,age,gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.toString = function() {
console.log("name:"+this.name+"age:"+this.age+"gender:"+this.gender);
}
}
var student1 = new Student("李华",20,"男");
console.log(student1);
js中的数组
1.js中的数组也是对象类型，通过索引值访问数组元素。
//创建一个数组对象
var arr = new Array();
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
console.log(typeof(arr));//object
//[object Array]: [10, 20, 30]
console.log(arr);
2.数组对象的属性length可以获取数组的长度
