JavaScript
/*
*JS代码从上至下一依次执行
*控制浏览器弹出一个警告框
*alert的作用是创建个弹窗
*/
alert("这是我的第一行JS代码");
/*
*
*让计算机在页面中输出一个内容
*document.write()的作用可以向你body中暑促一个内容
*/
document.write("你看我出不出来");
/*
向控制台输出一个内容
console.log9()的作用是向控制太输出一内容
*/
console.log('你猜我在哪里出来');
/*可以将js代码写到超链接的href属性中。这样点击超链接 时,会执行js代码
*/
<a href="javascript:alert('让你点你就点!');">你也点我一下</a>
一、基本语法
①.注释
/*
JS注释:
多行注释,注释中的内容不会执行,但是可以在源码中查看
要养成良好的注释习惯,也可以通过注释对代码进行一些简单的调试
*/
单行注释://
alert("hello");
document.write("hello");
console.log('hello');
②.规定
/*
1.JS中严格区分大小写。
2.JS中每一条语句以分号(;)结尾。
-如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,而且有一些时候,浏览器会加错分号。所以开发中必须加上分号。
3.JS中会忽略多个空格和换行。所以可以利用空格和换行对代码进行格式化。
*/
③.变量
/*
字面量和变量
字面量:
都收一些不可改变的值,都可以直接使用。一般不直接使用字面量。
变量:
变量可以用来保存字面量,变量的值可以任意改变。而且变量更加方便使用。所以我们开发中都是通过变量去保存一个字面量。
可以通过变量对字面量进行描述
*/
// 声明变量
// 在JS中使用var关键字练声明一个变量 var a = 12;
var a;
//为变量赋值
a = 123;
④.标识符
/*
标识符
- 在JS中所有可以由我们自己命名的的都是标识符。
- 如:变量名、函数名、属性名。
命名规则:
1.标识符中可以含有:字母、数字、‘_’、‘&’
2.不能以数字开头。
3.标识符不能是ES中的关键字或者保留字。
4.标识符一般都采用驼峰命名法。
- 首字母小写,每个单词的开头字母大写,其余字母小写。如:helloWorld
*/
2、数据类型
/*
在JS中一共有六种数据类型:string(字符串)、Number、布 尔值、null、undefined、object
*/
其中string(字符串)、Number、布尔值、null、undefined属于基本数据类型。object属于引用数据类型。
①.字符串 string
/*
字符串:
在JS中字符创需要使用引号引起来双引号和单引号都可以,但是不要混着用。
引号不能嵌套。
在字符创中我们可以使用\作为转义字符,
当我们一些特殊符号时可以使用\进行转义。
\" -- “
\' -- '
\n -- 换行
\t -- 制表符(tab)
*/
var str = 'hello';
console.log(str);
②.Number
/*
Number:整数和浮点数(小数)
*/
/*
typeof运算符
检查一个变量的类型
语法:typefo 变量
使用typeof检查Infinity也会返回Number。
*/
/*
JS中可以表示数字的最大值
- Number.MAX_VALUE
console.log(Number.MAX_VALUE);
如果使用数字表示的数字超过了最大值,则会返回一个Infinity,表示正无穷。
- Number.MIN_VALUE
*/
/*
在JS中整数运算基本可以保持精确
进行浮点数运算。可能得到一个不精确的结果,千万不要使用JS进行精确度要求高的运算。
*/
var a = 123;
a = 123.1231;
var b = "123";
console.log(typeof a);
console.log(typeof b);
console.log(Number.MAX_VALUE);
③.布尔值
/*
Boolean 布尔值
布尔值只有两个主要用于逻辑判断
- true:表示真
- false:表示假
*/
④.undefined
/*
Null类型的值只有一个,就是null。
null这个值专门用来表示一个为空的对象。
undefined类型的值只有一个,就是undefined。
当声明一个变量但是不给变量赋值时,它的值就是undefined。
*/
3、类型转换
/*
强制类型转换
- 指将一个数据类型转换为其他数据类型
转换为:string、number、Boolean。
*/
①.string类型转换
/*
将其他数据类型转换为string
方式一:
- 调用被转用数据类型的tostring()方法。
- 该方法不会影响到原变量,它会影响转换的结果返回。
- null和undefined这两个值没有tostring()方法。
方法二:
- 调用String()函数,并将被转换的数据类型作为参数传递给函数。
- 使用string()函数做强制类型转换时,
对于number和Boolean实际上就是调用的tostring()方法
但是对于null和undefined,就不会调用tostring()方法,它会将null直接转换为 “null”,将undefined直接转换为 “undefined”
*/
var a = 123;
//调用a的tostring()方法
//调用xxx的yyy方法 就是xxx.yyy()
var b = a.toString();
console.log(typeof a);
// 方法二:
// - 调用String()函数
a = String(a);
②.number类型转换
/*
将其他数据类型转换为Number
方式一:
- 使用Number()函数
- 字符串 --> 数值
1.如果是纯数字的字符串,则直接转换为数字
2.如果字符串中有非数字的内容,则转换为null
3.如果字符串是一个空字符串或者是一个全是空格的字符串,则转换为0
4.Boolean --> 数字
true --> 1
false --> 0
5.null --> 数字 ==0
6.undefined --> 数字 ==NaN
方式二:专门用来字符串
- parseInt()把一个字符串转换成整数。
parseInt()可以将一个字符串中的有效的整数取出来,然后转换为Number。
- parseFLoat()把一个字符串转换为浮点数。
parseFLoat()可以获得有效的小数。
如果对非string使用parseFLoat()或者parseInt()它会将其转换为string,然后在操作。
*/
var a = "123";
a = "abc";
// 调用Number()函数
a = Number(a);
a = "123px";
//a = Number(a);
a = parseInt(a);
console.log(typeof a);
console.log(a);
③.Boolean类型转换
/*
将其他数据类型转换为Boolean
- 使用Boolean()函数
- 数字 --> 除了0和NaN都是true
- 字符串 --> 除了空串,其余都会转换为true
- null和undefined都会转换为false
- 对象也会转换为true
*/
var a = 123;
a = Boolean(a);
console,log(typeof a);
console.log(a);
3、运算符—操作符
/*
运算符---操作符
通过运算符可以对一个或者多个值进行运算,并获取运算结果
如:typeof就是运算符,可以来获得一个值的类型
它会将这个值得类型以字符串的形式返回
number、string、Boolean、undefined、object
*/
①.算数运算符
/*
算数运算符
+ --> 可以对两个值进行加法运算,并将结果返回。
如果对两个字符串进行加法操作,则会将两个个字符串连接起来,
☆ 任何的值和字符串做加法运算,都会先转换为字符串在进行操作。
- --> 可以对两个值进行减法运算,并将结果返回。
任何值做减法,运算时都会自动转换为Number
* --> 可以对两个值进行乘法运算,并将结果返回。
/ --> 可以对两个值进行除法运算,并将结果返回。
% --> 可以对两个值进行取余运算,并将结果返回。
*/
console.log('c = ' + c);
②.一元运算符
/*
一元运算符,只需要一个操作数
+ 正号
- 正号不会对数字产生任何影响。
- 可以对一个其他数据类型使用“+”,来将其转换为数字类型。原理和Number()函数一样。
- 负号
- 负号对数字进行符号的取反
- 对于非Number值,先转换为数字类型在进行运算。
*/
③.自增和自减
/*
自增和自减:
- 自增:通过自增可以是变量自身+1。
对一个变量自增以后,原变量会立即子自增1。
无论是前++还是后++,都会立即使原变量自增1.
- a++:先取值,后运算。
- ++a:先运算,后取值。
- 自减:通过自减可以是变量自身-1。
对一个变量自减以后,原变量会立即子自减1。
无论是前--还是后--,都会立即使原变量自减1.
- a--:先取值,后运算。
- --a:先运算,后取值。
*/
④.逻辑运算符
/*
逻辑运算符:
!非
!可以用来对一个值进行非运算。
- 所谓非运算就是对布尔值进行取反操作。
- 如果对非布尔值进行取反,则会先将其转换为布尔值,再进行取反。
&& 与(and)
- && 对符号两侧的值进行与运算并返回结果。
- 运算规则:
全真则真,一假则假。
- JS中的“与”属于短路的与,
如果第一个值为false,则不会看第二个值
- 如果第一个值为true,则必然返回第二个值。
- 如果第一个值为false,则直接返回第一个值。
|| 或(or)
- || 可以对符号两侧的值进行或运算,并返回结果
- 运算规则:
一真则真。
- JS中的“或”,是短路的或,
如果第一个值为true,则不会看第二个值
- 如果第一个值为true,则直接返回true。
- 如果第一个值为false,则直接返回第二个值。
&& 和 || 非布尔值的情况
- 对于非布尔值进行与或运算时,
会先将其转换为布尔值,然后再运算,并且返回原值。
与运算:
- 如果两个值都为true,则返回后面的。
- 如果一真一假,则返回靠前的false。
或运算:
- 如果第一个值为true,则直接返回true。
- 如果第一个值为false,则直接返回第二个值。
*/
⑤.赋值运算符
/*
复制运算符 (=)
=
- 可以将符号右侧的值赋值给左侧的变量。
+= a += 4 ==> a = a+4
—= a -= 4 ==> a = a-4
*=
/=
*/
⑥.关系运算符
/*
关系运算符 -- 通过关系运算符可以比较两个值之间的关系
- 关系成立,则返回true
- 关系不成立,则返回false
> - 大于
< - 小于
>= - 大于等于
<= - 小于等于
非数值的情况
- 对于数值进行比较时,会将其转换为数字然后再进行比较
- 如果符号两侧都是字符串时,不会将其转换为数字进行比较,二回分别比较字符串的Unicode编码。
- 比较字符编码时,是一位一位比较,如果成立则返回true,不成立怎比较下一位。可以借用它来进行对英文字符串进行排序。
- 比较两个字符串型数字的时候,必须要转型才能进行比较。
*/
⑦.相等运算符
/*
相等运算符
- 用来比较两个值是否相等,如果相等会返回true,否则返回false。
使用 == 来做运算时,如果只的类型不同,
- 当使用 == 来比较两个值时,如果两个类型不同,
则会自动进行类型转换,将其转换为相同类型然后比较。
*/
⑧.条件运算符
/*
条件运算符 -- 三元运算符
语法:
条件表达式?语句1:语句2;
- 执行流程:
首先对条件表达式进行求值,
如果该值为true,则返回语句1,并返回执行结果,
如果该值为false,则执行语句2,并返回执行结果。
*/
⑨.运算符优先级
/*
运算符优先级
- 使用逗号,可以分割多个语句,一般可以在声明多个变量时使用。
优先级:优先级越高,就先运算。优先级相等,从左至有运算。
- 先乘除后加减。
- && > ||
*/
4、流程控制语句
/*
程序是由一条一条的语句构成的
在JS中可以使用{}来为语句进行分组
同一个{}中的语句是一组语句,一个{}中的语句,也称为代码块。
☆JS中的代码块值具有分组作用,没有其他任何作用。
流程控制语句:
- 在JS中通过流程控制语句可以控制程序的执行流程,
是程序可以根据一定的条件来执行
- 语句分类:
1 条件判读语句
2 条件分支语句
3 循环语句语句
*/
①.条件判断语句 ----if语句
/*
条件判断语句:
- 可以在执行某个语句之前进行判断,
如果条件成立才会执行语句,条件不成立则语句不执行。
if语句:if语句只能控制紧随其后的一条语句。(没有大括号),代码块不是必须的,但是开发中尽量写上。
- 语法一:
if(条件表达式){
语句.....;
}
if语句在执行时,会先对表达式进行判断哪,
如果表达式的值为true,则执行if后的语句。
如果表达式的值为false,则不会执行if后的语句。
- 语法二:
if(条件表达式){
语句.....;
}else{
语句.....;
}
if...else...语句执行时,会先对if后的表达式进行判断,
如果该值为true,则执行if后的语句。
如果该值为false,则执行else后的语句。
- 语法三:
if(条件表达式){
语句.....;
}else if(条件表达式){
语句.....;
}else if(条件表达式){
语句.....;
}else{
语句.....;
}
当该语句执行时,会从上往下依次对表达式进行求值判断,
如果值为true,则执行当前语句。
如果值为false,则继续往下执行。
该语句中,只会有一个代码块被执行,一旦代码块执行了免责直接结束语句。
*/
var age = 60;//50、 60
if (age >= 60) {
alert("你已经退休了");
}else {
alert("你还没退休");
}
练习1
/*
prompt()可以弹出一个提示框,该提示框中会带有一个文本框,
用户可以在该文本框中输入一段内容,该函数需要一个字符串作为参数,该字符串将会作为提示框的提示文字
用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接受该返回值。
prompt()返回值是string
*/
var score = prompt("请输入成绩(0-100):");
//alert("score");
if (score > 100 || score <0 || isNaN(score)) {
alert("拉出去毙了。。。!")
}else {
if(score == 100){
alert("宝马拿去!");
}else if (score >= 80 /*&& score <=99*/) {
alert("手机拿去玩!");
}else if (score >= 60) {
alert("参考书拿去!");
}else {
alert("棍子一根!");
}
}
练习2
var height = prompt("请输入你的身高:");
var money = prompt("请输入你的财富::");
var face = prompt("请输入你的颜值:");
//alert(height);
if (height >= 180 && money >= 1000 && face > 500) {
alert("嫁给他");
}else if (height >= 180 || money >= 1000 || face > 500) {
alert("ok");
}else {
alert("滚");
}
练习3
var num1 = +prompt("请输入第一个数:");
var num2 = +prompt("请输入第二个数:");
var num3 = +prompt("请输入第三个数:");
//找到三个数中的最小的数
if (num1 < num2 && num1 < num3) {
//num1最小,比较num2和num3
if (num2 < num3) {
alert(num1 + "," +num2 +"," +num3);
}else {
alert(num1 + "," +num3 +"," +num2);
}
}else if (num2 < num3 && num2 < num1) {
// num2最小
if (num1 < num3) {
alert(num2 + "," +num1 +"," +num3);
}else {
alert(num2 + "," +num3 +"," +num1);
}
}else {
//num3最小
if (num1 < num2) {
alert(num3 + "," +num1 +"," +num2);
}else {
alert(num3 + "," +num2 +"," +num1);
}
}
②.条件分支语句
/*
条件分支语句 ---switch语句:
语法:
switch(表达式){
case 表达式:语句...; break;
case 表达式:语句...; break;
case 表达式:语句...; break;
case 表达式:语句...; break;
default:语句...; break;
}
执行流程:
在执行时会依次将case后的表达式的值和switch后的条件表达式进行全等比较。
如果比较结果为true,则从当前case处开始执行代码。
如果比较结果为false,则继续向下进行比较。
break:可以退出switch语句。
default:如果所有的比较结果都为false,则执行default后的语句。
*/
③.while循环
/*
while循环:
- 语法:
- while(条件表达式){
语句...
}
先对表达式进行求值判断。
如果为true,则执行表达式,直到判断结果为false时,则终止循环。
*/
④.for循环
for(①初始化表达式;②条件表达式;④更新表达式){
③语句...;
}
执行流程:
①执行初始化表达式,初始化变量(执行初始化表达式只会执行一次)
②执行条件表达式,判断是否执行循环
如果为true,则执行循环③
如果为false,则终止循环
③执行更新表达式,更新表达式执行完毕后继续重复②
for循环中的三部分可以省略,也可以写到外部
如果在for循环中,不写任何表达式,只写两个分号;此时循环是一个死循环。几乎不用。
⑤.break和continue
break 关键字可以用来退出switch或者循语句。
break 关键字会立即终止最近的循环语句
continue 关键字可以用来跳过当次循环。
默认只会跳出最近的循环。
二、Object 对象
①.简介
对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
②.对象的分类
- 内建对象:
- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
- 如:Math String Number Boolean .......
- 宿主对象
- 由JS的运行环境提供的对象,目前来讲主要由浏览器提供的对象
- 如:BOM DOM
- 自定义对象
- 由开发人员自己创建的对象
1、对象的基本操作
/*
使用new关键字调用的函数,是构造函数construction
构造函数是专门用来创建对象函数
使用typeof检查一个对象是,会返回object
*/
var obj = new Object();
//在对象中保存的值称为属性
/*
创建对象
语法:对象.属性名 = 属性值;
*/
//向obj中添加一个name属性
obj.name = “张三”;
//向obj中添加一个age属性
obj.age = "18";
/*
读取属性:
语法:对象.属性名
- obj.name;
*/
/*
修改属性:
语法:对象.属性名 = 新值
- obj.name = "李四";
*/
/*
删除属性:
语法:delete 对象.属性名
- delete obj.name;
*/
console.log(obj);
①属性名和属性值
/*
属性名:
- 对象的属性名不强制要求遵守标识符的规则,但是使用时尽 量按照标识符规范。
如果要使用特殊的属性名,不能使用.的方式操作
需使用:
- 语法: 对象[“属性名”] = 属性值
使用[]这种形式去操作属性,更加灵活,
在[]中可以直接传递一个变量,这样变量值是多少就会读取哪 个属性
var obj = new Object();
var n = "123";
console.log(obj[n]);
属性值
- JS对象的属性值,可以是任意的数据类型。甚至也可以是一 个对象。
*/
var obj = new Object();
//向对象中添加属性
obj.name = "王五"
/*
in运算符
- 通过该运算符可以检查一个对象中是否含有指定属性
如果有则返回true,没有则返回false
- 语法:“属性名” in 对象
console.log("name" in obj);
*/
②.基本和引用数据类型
/*
基本数据类型:string(字符串)、Number、Boolean、 null、undefined
引用数据类型:object
JS中的变量都是保存在栈内存中的。
- 基本数据类型的值直接在栈内存中储存,
值与值之间是独立存在的,修改一个不会影响其他的变 量
- 对象保存到堆内存中的,每创建一个i新的对象,就会在 堆内存中开辟一个新的空间,二变量保存的是对象的内 存地址(对象的引用)。
如果两个变量保存的是同一个对象的引用,当一个变量修 改属性时,另一个也会随之改变。
- 当比较两个基本数据类型的值时,就是比较值。
- 而比较引用数据类型时,则是比较的对象的内存地址,
如果两个对象是一模一样的,但是地址不同,则会返回 false。
*/
③.对象字面量
/*
使用字面量来创建一个对象
var obj = {}
使用对象字面量,可以在创建对象时,直接指定对象中的属性
- 语法:{
属性名1:属性值,
属性名2:属性值,
...
}
*/
④.工厂方式创建对象
//通过该方法可以大批量的创建对象
/*
使用工厂方法创建的对象,使用的构造函数都是Object
所以创建的对象都是Object这个类型,
就导致我们无法区分出多种不同类型的对象
*/
function createPerson(name , age , gender){
//创建一个新的对象
var obj = obj Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
//将新的对象返回
return obj;
}
var obj2 = createPerson("猪八戒", 18, "男");
var obj3 = createPerson("孙悟空", 18, "男");
var obj4 = createPerson("沙和尚", 18, "男");
console.log(obj2);
⑤.构造函数
/*
创建一个构造函数,专门用来创建对象的
构造函数就是一个普通的函数,创建方式和普通方式没有区别,不同的事构造函数习惯上首写字母大写
构造函数和普通函数的区别就是调用方法的不同
普通函数就是直接调用,而构造函数需要使用new关键字调用
构造函数执行流程:
- 1.立即创建一个新的对象
- 2.将新建的对象,设置为函数中的this
- 3.逐行执行函数中代码
- 4.将新建的对作为返回值返回
使用同一个构造函数创建的对象,称为同一类对象,也将一个构造函数称为一个类。
我们将通过一个构造函数创建的对象,称为是该类(构造函数)的实例。
this的情况:
- 当以函数的形式调用时,this是window
- 当以方法的形式调用时,谁调用方法this就是谁
- 当以构造函数的形式调用时,this就是新创建的那个对象
*/
//创建函数
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
}
}
//创建对象
var pre = new Person("猪八戒", 18, "男");
var pre2 = new Person("孙悟空", 18, "男");
var pre3 = new Person("沙和尚", 18, "男");
/*
创建一个Person构造函数
在Person构造函数中,为每一个对象都添加了一个sayName方法,
目前我们的方法是在构造函数内部创建的,也就是构造函数每执行一次就会创建一个新的sayName方法
也就是所有实例的sayName都是唯一的。
这样就导致了构造函数执行一次就会创建一个新的方法,执行多少次就会创建多少个新的方法。
*/
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gerder = gender;
//想对象中添加方法
this.sayName = fun;
}
//将sayName()方法在全局作用域中定义
/*
将函数定义在全局作用中,污染了全局作用的命名空间,而且定义在全局作用域中也很不安全
*/
function fun(){
alert("hell0 大家好,我是" + this.name );
}
//创建一个Person实例
var per = new Person("孙悟空", 18, "男");
var per2 = new Person("猪八戒", 28, "男");
per.sayName();
per2.sayName();
/*
原型prototype
- 我们所创建的每一个函数,我们的解析器都会向函数中添加一个prototype
- 这个属性对应着一个对象,这个对象就是我们所谓的原型对象
- 当函数以构造函数调用时,它所创建的对象中都会隐藏一个属性,指向该构造函数的原型对象。可以通过__proto__来访问该属性。
- 原型对象相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,可以将对象中公用的内容,同意设置到原型对象中。
当我们访问对象的一个属性或者方法时,它会先在自身中查找,如果有则直接使用,如果没有则去原型对象中,有则直接使用
- 创建对构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,这样不同分别为每一个对象添加,也不会影响到全怒作用域,就可以使每个对象都具有这些属性和方法。
*/
Myclass.prototype.a = 123;
function Myclass(){
}
//向Myclass的原型中添加一个name属性
Myclass.prototype.name = "我是原的名字";
var mc = new Myclass();
tostring.
/*
*/
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
//创建一个Person实例
var per = new Person("孙悟空", 18, "男");
//当我们直接在页面打印一个对象时,实际上是输出的对象的tostring()方法的值
//如果希望输出对象时不输出【object object】,可以为对象添加一个tostring方法
per.toString = function(){
}
console.log(per);
⑥.Math
/*
Math和其他的对象不同,它不是一个构造函数
属于一个工具类不用创建对象,封装了数学运算相关的属性和方法
属性:
- Math.PI 表示圆周率
方法:
- abs() 计算一个数的绝对值
- ceil() 对一个数向上取整
- floor() 对一个数向下取整
- round() 对一个数四舍五入取整
- random() 可以用来生成一个0-1之间的随机数
- 生成一个 x-y 之间的随机数
Math.rundom(Math.round(Math.random()*(y-x)+x));
- max() 可以获取多个数之间的最大值
- min() 可以获取多个数之间的最小值
- pow(x,y) 返回x的y次幂
- aqrt() 开方运算
*/
console.log(Math.abs(-5));
包装类
/*
JS中有三个包装类,这三个包装类可以将基本数据类型的数据转换为对象
- String() 转换为String对象
- Number() 转换为Number对象
- Boolean() 转换我Boolean对象
*/
⑦.String方法
/*
属性:
- length 可以用来获取字符串长度
方法:
- charAt() 返回指定位置的字符
- charCodeAt() 获取指定位置字符的字符编码(Unicode)
- fromCharCode() 根据字符编码去获取字符
- concat() 可以用来连接连个或多个字符串和 +作用一样
- indexOf() 用来检索字符串中是否含有指定内容,返回第一次出现的索引
- slice(start,end) 可以用来截取字符串
- substring() 可以用来截取一个字符串
*/
var result = String.fromCharCode(\u8d75);
var result2 = String.fromCharCode(\u4e39);
alert(result);
三、函数
①.函数的简介
/*
函数:
- 函数也是对象。
- 函数中可以封装一些功能(代码),可以在需要时,执行这 些功能(代码)。
- 函数中可以保存一些代码在需要的时候调用。
-
//封装到函数中的不会立即执行,会在函数调用的时候执 行。当调用函数时,函数中封装的代码会立即按照顺序 执行。
//调用语法:函数对象()
//函数声明
function 函数名([形参1,形参2,....]){
语句...
}
//调用函数
函数名();
/*
使用函数表达式
var function([形参1,形参2,....]){
语句...
}
*/
//匿名函数
function(){
}
*/
②.函数的参数
/*
可以在函数的()中指定一个或多个形参(形式参数)
- 多个形参之间用,隔开,声明形参就相当于在函数内部声 明了对应的变量,但是并不赋值
- 在函数调用时,可以在()中指定实参(实际参数),实参 将赋值给函数中对应的形参。
function sun(a,b){
console.log(a+b);
}
*/
/*
- 实参可以是任意的数据类型,也可以是一个对象
当参数过多时,可以把参数封装到一个对象中,然后通 过对象传递。
- 实参也可以是一个函数
*/
③.函数的返回值
/*
可以使用return 来设置函数的返回值
- 语法:
return 值
- return后的值将会函数的执行结果返回,
可以定义一个变量保存该结果。
- return 后的语句都不会执行。
- 若果return语句后不跟任何值就会返回undefined
- return后可以跟任何类型的值
*/
function sun(a, b, c){
//alert(a + b + c);
var d = a+b+c;
return d;
}
// sun(4,5,6);
var result = sum(4,5,6);
④.返回值类型
/*
返回值类型:
- 返回值可以是任意的数据类型
*/
⑤.立即执行函数
/*
立即执行函数
- 函数定义完,立即调用
- 立即执行函数,只能执行一次。
*/
//立即执行函数
(function(){
alert("我是一个匿名函数");
})();
//立即执行函数
(function(){
console.log("a ="+a);
console.log("b ="+b);
})(123,456);
⑥.方法
/*
- 如果一个函数作为一个对象的属性保存,那么这个函数则是这个对象的方法。
- 调用函数就说调用对象的方法(method)
//调用方法
obj.fun();
//调用函数
fun();
*/
/*
使用for ... in 语句
- 语法:
for(var 变量in 对象){
}
for...in 语句 对象中有几个属性,循环体就会执行几次,每次执行时,会将对象的一个属性的名字赋值给变量
*/
⑦.作用域
/*
作用域:
- 作用域值一个变量的作用的范围
- 1.全局作用域
直接编写在script标签中的代码,都在全局作用域
- 全局作用域在页面打开时创建,关闭时销毁
在全局作用域中有一个全局对象Window,可以直接使用。
- 在全局作用域中:
- 创建的对象都会作为Window对象的属性保存
- 2.函数作用域(局部作用域)
*/
function fun(){
var a = 123;
}
fun();
⑧.函数作用域
/*
函数作用域;
- 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁。
- 每调用一次函数就会创建一个新的函数作用域,他们之间是相互独立的
- 在函数作用域中可以访问到全局作用域的变量
在全局作用域中无法访问到函数作用域的变量
- 在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接用,如果没用则向上一级作用域中寻找
- 在函数中,不适用var声明的变量都会成为全局变量
*/
//创建一个变量
var a = 10;
function fun(){
console.log("a = " + a);
}
fun();
⑨.this
/*
解析器在调用函数每次都会向函数内部传递一个隐含的参数
这个隐含参数就是this,this指向的是一个对象,这个对象我们称为函数执行的上下文对象,根据函数的调用方式不同,this会指向不同的对象。
① 以函数的形式调用时,this永远都是window
② 以方法的形式调用时,this就是调用方法的那个对象
*/
⑩.剩余方法
/*
fun():函数返回值
fun:函数对象
call()和apply()
- 这两个方法都是函数对象方法,需要通过函数对象来调用
- 在调用call()和apply()可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行的this
- call()方法可以在实参在对象之后一次传递
- apply()方法需要将实参封装到数组中传递
- this的情况
1.以函数的形式调用时,this永远是window
2.以方法的形式调用时,this是调方法的对象
3.以构造函数的形式调用时,this是新创建的对象
4.使用call和Apply调用时,this是指定的对象
*/
function fun(){
//alert("我是一个函数");
alert(this);
}
fun.call();
fun.apply();
var obj = {
};
fun();
fun.call(obj);
fun.apply(obj);
/*
在调用函时,浏览器每次都会传递两个隐含的参数:
1.函数上下文对象this
2.封装实参的对象arguments
- arguments是一个数组对象,也可以通过索引来操作数据,㛑可以获取长度。
- 在调用函数时,所传递的实参都会在arguments中保存
arguments.length可以用来获取实参的长度
*/
function fun(){
console.log(arguments.length);
}
fun();
四、数组
①.数组
/*
数组:数组也会是一个对象
-
*/
//创建数组对象
var arr = new Array();
/*
向数组中添加元素
- 语法:数组[索引] = 值
*/
arr[0] = 10;
/*
获取数组的长度
可以使用length
*/
console.log(arr.length);
②.字面量
/*
字面量创建数组
- 语法:[]
*/
var arr = [];
//使用字面量创建数组,可以在创建时就可以指定数组中的元素。
var arr = [1,2,3,4,5,6,7,8];
console.log(arr.length);
③.数的方法
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
/*
push()
- 该方法可以向数组末尾中添加一个或多个元素,并且返回数组长度
- 可以将要添加的元素作为该方法的参数传递,这样这些元素将会自动添加到数组的末尾
*/
var result = arr.push("唐僧","蜘蛛精","白骨精");
console.log(arr);
console.log("result = " +result);
/*
pop()
- 该方法可以删除数组中的最后一个元素
- 并将被删除的元素返回作为返回值返回
*/
var result = arr.pop();
console.log(arr);
console.log("result = " +result);
/*
unshift()
- 向数组开头添加一个或多个元素,并返回新的数组长度
*/
console.log(arr);
arr.unshift("牛魔王","二郎神");
console.log(arr);
/*
shift()
- 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
*/
console.log(arr);
var result = arr.shift("牛魔王","二郎神");
console.log(arr);
console.log("result = " +result);
④.数组的遍历
/*
数组的遍历
*/
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
for(var i = 0;i<arr.length;i++){
console.log(i);
}
//练习
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age"]";
}
//创建一个Person对象
var per = new Person("孙悟空",18);
var per2 = new Person("猪八戒",28);
var per3 = new Person("红孩儿",8);
var per4 = new Person("蜘蛛精",16);
var per5 = new Person("二郎神",38);
//将Person对象放入到一个数组中
var perArr = [per,per2,per3,per4,per5];
console.log(per);
/*
创建一个数组,可以将perArr中的满18岁的Person提取出来,然后封装到一个新的数组中并返回
arr
- 形参,要提取信息的数组
*/
function getAdult(arr){
//创建新数组
var newArr = [];
//遍历
for(var i = 1;i<arr.lenght;i++){
//console.log(arr);
var res = arr[i];
//判断Person对象的age是否大于等于18
//如果大于18,则将这个对象添加到newArr中
if(p.age>=18){
//将对象放入新都数组中
newArr.push(p);
}
}
//将新的数组放回
return newArr;
}
//调用
var result = getAdult(perArr);
⑤.foreach
/*
forEach()
- 只支持IE8以上的版本。
- 需要一个函数作为参数,由我们创建不由我们调用,叫做回调函数
- 数组中有几个元素就执行几次,每次执行时,浏览器将会遍历到的元素以实参的形式传递过来,我们可以定义这些形参,来读取这些内容。
- 浏览器在回调函数中传递三个值
第一个参数:当前正在遍历的元素
第二个参数:当前元素的索引
第三个参数:正在遍历的数组
*/
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
arr.forEach(function(value, index, obj){
//console.log("hello");
});
⑥.slice和splice
/*
slicr()
- 可以用来从数组中提取指定元素
- 语法:arr.slice(start,end)
- start:包括开始位置得值
- end:不包含结束的位置的值,也可以省略不写
*/
//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"];
var res = arr.slice(0,5);
console.log(res);
/*
splice()
- 可以用来删除指定的元素,会影响到原数组,会讲指定的元素从数组中删除,并将删除的元素作为返回值返回。
- 第一个,表示开始位置的索引
- 第二个,表示删除的数量
- 第三个、及以后,可以传递新的元素,这些新的元素会自动插入到开始位置索引前边。
*/
练习
//练习 去除相同元素
var arr = [1,2,3,2,2,1,3,4,2,5];
for(var i = 0;i<arr.length;i++){
for(var j = i+1;j<arr.length;j++){
//判断两个元素是否相等
if(arr[i] == arr[j]){
//如果相等则证明出现了重复的元素,则删除j对应的元素
arr.splice(j,1)
//当删除当前J所在的元素以后,后边的元素会自动补位
//此时将不会在这个比较这个元素,需要在比较一侧j所在的位置的元素。
j--;
}
}
}
console.log(arr);
⑦.剩余方法
/*
concat()可以连接两个或多个数组,并将新的数组返回
- 该方法不会对原数组产生影响
*/
var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["唐僧","玉兔精"];
var arr3 = arr.concat(arr2);
/*
join()该方法可以将数组转换成字符串
- 不会对原本数组产生影响
- 在join中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符,如果不指定连接符,默认用逗号连接。
*/
var result = arr.join();
/*
reverse()该方法用来反转数组
- 直接修改原数组
*/
arr.reverse();
console.log(arr);
/*
sort()可以用来对数组中的元素进行排序
- 会影响原数组,默认按照Unicode编码进行排序
*/
var arr = ["b","a","c","e","f","g"];
arr.sort();
/*
对于纯数字的数组排序,也会按照Unicode编码来排序。
可以在sort中添加一个回调函数,来指定排序规则
回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数。
在数组中a在b前边
- 浏览器会根据回调函数的返回值来决定元素的顺序,
如果返回大于0的值,则元素交换位置
如果返回小于0电脑值,则元素位置不变
如果返回0,则元素位置不变
*/
var arr2 = [3,5,6,8,3,2,7,1,4];
//升序排列
arr2.sort(function(a,b){
/*
if(a > b){
return 1;
}else if(a < b){
return -1;
}else{
return 0;
}
*/
//升序排列
return a - b;
//降序排列
return b - a;
});
console.log(arr2);
五、正则表达式
/*
正则表达式:
- 检查是否符合规则
- 语法:
- var reg = new RegExp("正则表达式","匹配模式")
匹配模式:
- i:忽略大小写
- g:全局匹配模式
- |:或者
- [a-z]:任意小写字母
- [^ ]:除了
- [0-9]:任意数字
- ^a:开头
- a$:结尾
- 方法:
- test()
- 检查是否符合规则
符合返回true,否则返回false。
字面量创建:
- 语法:var 变量 = /正则表达式/匹配模式
*/
reg = /a/i;
①.相关方法
/*
相关方法:
- spilt():可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数,就可以根据正则表达式去拆分字符串
- search():可以搜索字符串中是否含有指定内容
如果搜索到指定内容,则会返回第一次出现的索引,如果没有怎会返回-1
- match():可以根据正则表达式,从字符串中将符合条件的内容提取出来
可以设置正则表达式为全局模式,这样就会匹配到所有内容
- replace():可以将字符串指定内容替换为新的内容
- 参数:
1.被替换的内容
2.新的内容
*/
var str = 1a2b3c4d5e6f;
var result = str.split([A-z]/);
var result = str.search(/a[bef]c/);
var result = str.match(/[a-z]/);
六、DOM和事件
/*
DOM
- JS中通过DOM对HTML文档进行操作
事件
- JavaScript与HTML之间的交互就是通过事件实现的
*/
①.文档的加载
/*
文档的加载
- 浏览器在加载页面时,是按照自上而下的顺序加载的
*/
②.方法
/*
方法:
-
*/