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之间的交互就是通过事件实现的
*/
①.文档的加载
/*
文档的加载
- 浏览器在加载页面时，是按照自上而下的顺序加载的
*/
②.方法
/*
方法：
-
*/
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
