JavaScript进阶

第1章、认识JS

JavaScript能做什么？

  • 1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

  • 2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

第2章、JS基础语法

什么是变量

变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果...等。

变量命名

遵循以下规则:

  • 1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。如下:
正确:           
    mysum            
    _mychar         
    $numa1

  • 2.变量名区分大小写，如:A与a是两个不同变量。

  • 3.不允许使用JavaScript关键字和保留字做变量名。
    image.png
    image.png

变量声明

声明变量语法: var 变量名;

var就相当于找盒子的动作，在JavaScript中是关键字（即保留字），这个关键字的作用是声明变量，并为"变量"准备位置(即内存）。

var mynum ; //声明一个变量mynum

当然，我们可以一次找一个盒子，也可以一次找多个盒子，所以Var还可以一次声明多个变量，变量之间用","逗号隔开。

var num1,mun2 ; //声明一个变量num1

注意:变量也可以不声明，直接使用，但为了规范，需要先声明，后使用。

变量赋值

我们使用"="号给变量存储内容,看下面的语句:

var mynum = 5 ; //声明变量mynum并赋值。
var num1 = 123;       // 123是数值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;    //布尔值true（真），false(假)

注:这里 "="号的作用是给变量赋值，不是等于号。

表达式

表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。
我们先看看下面的JavaScript语句：
image.png
image.png
image.png
image.png

加号操作符

JavaScript中还有很多这样的操作符，例如，算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)。
注意: “=” 操作符是赋值，不是等于。
算术运算符主要用来完成类似加减乘除的工作，在JavaScript中，“+”不只代表加法，还可以连接两个字符串，例如：

mystring = "Java" + "Script"; // mystring的值“JavaScript”这个字符串

自加一，自减一 ( ++和- -)

注意：
a++是先取值后运算，++a是先运算后取值。a++表达式的值，看我前面的讲解，a++的值就是a的值，也就是100。 别忘了这语句结束后a的值就会自增1

var a=3; var b=a++; var c=a;

输出：a=4; b=3; c=4

var a=3;
var b=++a;
var c=a;
 document.write(a,b,c)

输出：a=4; b=4; c=4

mynum = 10;
mynum++; //mynum的值变为11
mynum--; //mynum的值又变回10

mynum++使mynum值在原基础上增加1，mynum--使mynum在原基础上减去1,其实也可以写成:
mynum = mynum + 1;//等同于mynum++
mynum = mynum - 1;//等同于mynum--```

比较操作符

在JavaScript中，这样的比较操作符有很多，这些操作符的含义如下:
532a3c150001c65802010207.jpg

var a = 5;//定义a变量，赋值为5
var b = 9; //定义b变量，赋值为9
document.write (a<b); //a小于b的值吗? 结果是真(true)
document.write (a>=b); //a大于或等于b的值吗? 结果是假(false)
document.write (a!=b); //a不等于b的值吗? 结果是真(true)
document.write (a==b); //a等于b的值吗? 结果是假(false)`

逻辑与操作符

数学中的“b大于a，b小于c”是“a<b<c”，那么在JavaScript中可以用&&表示，如下：

b>a && b<c    //“&&”是并且的意思, 读法"b大于a"并且" b小于c "

逻辑与操作符值表:
52a16f880001d27803770180.jpg
注意: 如果A为假，A && B为假，不会在执行B; 反之，如果A为真，要由 B 的值来决定 A && B 的值。

逻辑或操作符

"||"逻辑或操作符，相当于生活中的“或者”，当两个条件中有任一个条件满足，“逻辑或”的运算结果就为“真”。

var a=3;
var b=5;
var c;
c=b>a ||a>b;  //b>a是true，a>b是false，c是true

逻辑或操作符值表:
530a9d2b0001a33e03770178.jpg

逻辑非操作符

"!"是逻辑非操作符，也就是"不是"的意思,非真即假，非假即真。
52a1760c000159a702330111.jpg

var a=3;
var b=5;
var c;
c=!(b>a);  // b>a值是true,! (b>a）值是false
c=!(b<a);  // b<a值是false, ! (b<a）值是true

操作符优先级

操作符之间的优先级（高到低）:
算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。

第3章、数组

什么是数组

一个数组变量可以存放多个数据。
52c9ff5c0001085a05460266.jpg

<script type="text/javascript">
 var myarr=new Array(); //定义数组
 myarr[0]=80; 
 myarr[1]=60;
 myarr[2]=99;
 document.write("第一个人的成绩是:"+myarr[0]);
 document.write("第二个人的成绩是:"+myarr[1]);
 document.write("第三个人的成绩是:"+myarr[2]);
</script>

结果：
第一个人的成绩是:80第二个人的成绩是:60第三个人的成绩是:99

如何创建数组

使用数组之前首先要创建，而且需要把数组本身赋至一个变量。好比我们出游，要组团，并给团定个名字“云南之旅”。

var myarray=new Array();

image.png
我们创建数组的同时，还可以为数组指定长度，长度可任意指定。

var myarray= new Array(8); //创建数组，存储8个数据。

注意：
1.创建的新数组是空数组，没有值，如输出，则显示undefined。
2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。

数组赋值

数组的表达方式：

第一步：创建数组var myarr=new Array(); 
第二步：给数组赋值
        myarr[1]=" 张三";
        myarr[2]=" 李四";

注意：数组每个值有一个索引号，从0开始。
我们还可以用简单的方法创建上面的数组和赋值：
第一种方法：

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

第二种方法：

var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）

注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）

向数组增加一个新元素

52ca00eb0001dd4805120199.jpg
只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。

myarray[5]=88; //使用一个新索引，为数组增加一个新元素

使用数组元素

我们知道数组中的每个值有一个索引号，从0开始，如下图， myarray变量存储6个人的成绩：
52ca012800016f3505460234.jpg
要得到一个数组元素的值，只需引用数组变量并提供一个索引，如：
第一个人的成绩表示方法：myarray[0]
第三个人的成绩表示方法: myarray[2]

数组属性length

如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。
语法：

myarray.length; //获得数组myarray的长度

注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4。
同时，JavaScript数组的length属性是可变的，这一点需要特别注意

arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10

数组随元素的增加，长度也会改变，如下:

var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34;  //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16

二维数组

一维数组，我们看成一组盒子，每个盒子只能放一个内容。

一维数组的表示: myarray[ ]

二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子。

二维数组的表示: myarray[ ][ ]

注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1。
1. 二维数组的定义方法一

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }

注意: 关于for 循环语句，请看第四章4-5 。

将上面二维数组，用表格的方式表示:
537957a20001c24c03200210.jpg
2. 二维数组的定义方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

3. 赋值
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。

说明: myarr[0][1] ,0 表示表的行，1表示表的列。

数组方法

常用方法：
concat() 连接两个或更多的数组，并返回结果。

合并三个数组的值：

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);

children 输出结果：
Cecilie,Lone,Emil,Tobias,Linus,Robin

splice() 从数组中添加或删除元素。

array.splice(index, howmany, items)
index：必需，规定从何处添加/删除
howmany：必需，规定应该删除多少元素。
item：可选，规定要添加到数组的元素。

例子：
移除数组的第三个元素，并在数组第三个位置添加新元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");

fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Mango

toString() 把数组转换为字符串，并返回结果。
slice() 选取数组的的一部分，并返回一个新数组。

在数组中读取元素：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);

citrus 结果输出:
Orange,Lemon

sort() 对数组的元素进行排序。
reverse() 反转数组的元素顺序。
map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
indexOf() 搜索数组中的元素，并返回它所在的位置。
forEach() 数组每个元素都执行一次回调函数。
centries() 返回数组的可迭代对象。
不常用方法：
opyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
every() 检测数值元素的每个元素是否都符合条件。
fill() 使用一个固定值来填充数组。
filter() 检测数值元素，并返回符合条件所有元素的数组。
find() 返回符合传入测试（函数）条件的数组元素。
findIndex() 返回符合传入测试（函数）条件的数组元素索引。
from() 通过给定的对象中创建一个数组。
includes() 判断一个数组是否包含一个指定的值。
isArray() 判断对象是否为数组。
join() 把数组的所有元素放入一个字符串。
keys() 返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
reduce() 将数组元素计算为一个值（从左到右）。
reduceRight() 将数组元素计算为一个值（从右到左）。
shift() 删除并返回数组的第一个元素。
some() 检测数组元素中是否有元素符合指定条件。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值。

不会改变原来数组的方法有：
concat、slice
会改变原来数组的方法有：
pop、push、splice、sort、

第4章、流程控制语句

if语句

语法:

if(条件)
{ 条件成立时执行代码}

假设你应聘web前端技术开发岗位，如果你会HTML技术，你面试成功，欢迎加入公司。代码表示如下:

<script type="text/javascript">
  var mycarrer = "HTML";
  if (mycarrer == "HTML")
  {
    document.write("你面试成功，欢迎加入公司。");
  }
</script>

if...else语句

语法:

if(条件)
{ 条件成立时执行的代码}
else
{条件不成立时执行的代码}

if..else嵌套语句

语法:

if(条件1)
{ 条件1成立时执行的代码}
else  if(条件2)
![52d121a70001de7503470226.jpg](https://upload-images.jianshu.io/upload_images/13172591-7abba84428e2c7bb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
{ 条件2成立时执行的代码}
...
else  if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}

假设数学考试，小明考了86分，给他做个评价，60分以下的不及格，60(包含60分)-75分为良好，75(包含75分)-85分为很好，85(包含85分)-100优秀。
541799000001aada05260280.jpg
结果:
52d121a70001de7503470226.jpg

Switch语句

当有很多种选项的时候，switch比if else使用更方便。
语法:

switch(表达式)
{
case值1:
  执行代码块 1
  break;
case值2:
 [图片上传中...(52d1293c0001394705510767.jpg-b47af4-1552638737562-0)]
 执行代码块 2
  break;
...
case值n:
  执行代码块 n
  break;
default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}

语法说明:
Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。

假设评价学生的考试成绩，10分满分制，我们按照每一分一个等级将成绩分等，并根据成绩的等级做出不同的评价。
代码如下:
52d1293c0001394705510767.jpg
执行结果:
评语: 及格，加油!
注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句，看以下代码:
52d128b80001995105210640.jpg
执行结果:
评语: 继续努力!
评语: 及格，加油!
评语: 凑合，奋进
评语: 很棒，很棒
评语: 高手，大牛

[图片上传中...(5579623800015fdb06300666.jpg-6e8533-1552639572297-0)]
在上面的代码中，没有break停止语句，如果成绩是4分，则case 5后面的语句将会得到执行，同样，case6、7-10后面的语句都会得到执行。

for循环

for语句结构：

for(初始化变量;循环条件;循环迭代)
{     
    循环语句 
 }

假如，一个盒子里有6个球，我们每次取一个，重复从盒中取出球，直到球取完为止。

<script type="text/javascript">
var num=1;
for (num=1;num<=6;num++)  //初始化值；循环条件；循环后条件值更新
{   document.write("取出第"+num+"个球<br />");
}
</script>

结果:

while循环

while语句结构：

while(判断条件)
{
    循环语句
 }

使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //条件判断
{
  document.write("取出第"+num+"个球<br />");
  num=num+1;  //条件值更新
}
</script>

Do...while循环

do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do...while语句结构：

do
{
    循环语句
 }
while(判断条件)=-=

我们试着输出5个数字。

<script type="text/javascript">
   num= 1;
   do
   {
     document.write("数值为:" +  num+"<br />");
     num++; //更新条件
   }
   while (num<=5)
</script>

执行结果:
52dc805c0001da3703680274.jpg

退出循环break

格式如下：

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  {break;}
  循环代码
}

当遇到特殊情况的时候，循环就会立即结束。看看下面的例子，输出10个数，如果数值为5，就停止输出。
5579623800015fdb06300666.jpg
执行结果:
52dc85920001b91503690273.jpg
注:当num=5的时候循环就会结束，不会输出后面循环的内容。

继续循环continue

语句结构：

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  { continue; }
 循环代码
}

上面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响。好比输出10个数字，如果数字为5就不输出了。
52dc85920001b91503690273.jpg
执行结果:
52dc88e800017b8d03700342.jpg

第5章、函数

什么是函数

使用函数

function add2(a,b){
sum = a + b;
 alert(sum);
} //  只需写一次就可以

add2(3,2);
add2(7,8);
....  //只需调用函数就可以

函数声明

用关键字function来声明一个函数

function  函数名( )
{
     函数体;
}

函数表达式

var fn = function(){}

匿名函数

  1. setTimeout中的参数
var time = setTimeout（function（）{expression；}，1000）；
  1. 数组方法中的参数
    arr.forEach（function（item）{

}）

  1. 匿名函数作为一个返回值。
return function(){
}

自执行函数

函数会产生独立的作用域

（function（）{
            //....
}）（）；

函数调用

第一种情况:在

posted on 2019-04-10 11:00  louisduan66  阅读(175)  评论(0)  编辑  收藏  举报

导航