JavaScript总结

Posted 2020-07-29

javascript

l  什么是Javascript？

Javascript，简称js，是一种脚本语言，目前是前端页面中制作动态效果不可缺少的语言。除了应用在网页中之外，还广泛应用于在网页、手机游戏开发、服务器、nosql数据库等领域。

 

 

 

 

 

l  如何运行Javascript代码

只要有javascript的引擎就可以运行js的代码，一般浏览器中都内置了这种引擎所以在html页面中可以直接运行js的代码。

扩展说明：目前最快的引擎是谷歌出的V8引擎。

 

 

 

 

 

 

 

 

 

 

 

l  网页中应用Javascript代码

网页中编写js代码有两种方法：

 

方法一、直接写在页面中的<script> ... </script>标签中间【标签写在页面任何位置都行，不过一般好的习惯写到最后，浏览器是从上向下解析页面，把JS放到最后先让HTML的内容先解析显示出来让用户第一时间看到页面-用户体验，然后再运行JS,如果把JS写到前面会影响页面的加载，导致页面先是一片空白，等好久才能出来】

 

 

方法二、把js代码写在一个单独的.js文件中，然后在页面中使用script标签引入这个js文件

 

a.

 

b. 在HTML页面中引入并执行JS文件中的代码

 

 

 

 

l  输出【显示出来】

语法：console.log( 输出的内容 );

我们写程序时很多时候我们把要程序的状态打印出来用来调试代码就用这个方法：

 

 

 

 

l  查看错误信息

以下红色的就代表出错了！

 

 

 

 

 

 

 

l  注释

给程序员看的文本，这些不会被解析运行，用来对代码进行注解说明用的。

 

单行注释 ：//

多行注释 ：/* .... */

 

 

 

 

 

l  代码基本语法

js的代码是有语法要求的，要按照规则来写：

 

1. 一行一个语句，并且每个语句以;结尾

2. 代码中多余的空格和回车不影响代码的运行

3. 代码自上而下一行一行的执行

 

 

 

变量

l  什么是变量？

变量是指值可以改变的量。是用来在程序运行过程中暂时保存数据的。变量是写程序的最基本单元是写代码必不可少的。

比如制作一个功能：每秒钟在页面中输出一个#号，一共输出10个。当制作这个功能时定义了四个变量：

 

 

 

 

l  定义变量

• 注意：变量在使用之前必须先定义，否则会出错。

 

以下代码因为没有定义a和b两个变量就出错了：

 

正确的写法应该是先定义a,b两个变量之后再使用：

 

 

 

 

v  定义一个变量的语法：

var 变量名;

 

 

v  可以在定义时直接赋一个值：

var 变量名=值;

 

 

v  可以同时定义多个变量：

var 变量名1=值1,变量名2=值2.....;

 

 

 

 

 

l  变量名的要求

为变量起名字时有一些要求和规范：

 

1. 变量名只能包含字母、数字、下划线【_】和$，只能以字母、下划线和$开头。

 

2. 名字应该让人一看就知道是什么意思，【业内规范】

业内潜规则：当变量名由多个单词组成时应该这样：getUserName、get_user_name、GetUserName。

3. JS中有一些关键字【保留字】不能用来当变量名：

 

 

 

数据类型

l  什么是数据类型？

数据类型：变量保存的值的类型。变量的数据类型由这个变量所保存的值来决定。

 

• 说明：可以使用typeof函数查看一个变量的类型。

 

 

 

 

以下就是JS中支持使用的数据类型：

undefined

定义了一个变量，但是还没有赋值时，这个变量的值就是这个类型的。我们一般不会把一个变量设置成这个值。

 

 

 

 

 

null

null：空的意思。其实和上面的undefined一个意思都是没有的意思。

 

比如一个变量原来是有值，但现在我要把值去掉不要了，变成没值的变量就可以把变量设置为null。

 

 

 

 

 

 

 

boolean

boolean：布尔类型，只有两个值 true【真】、false【假】。

 

 

 

 

number

number：数字【正数、负数、整数、小数，二进制数、八进制数、十进制数、十六进制数等等】。

 

例子：

 

 

 

扩展1. 八进制：数字是由0,1,2,3,4,5,6,7 逢8进1。

在JS中以0开头的数字就认为是八进制的：

 

 

扩展2. 十六进制：数字是由 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,逢16进1.

在JS中以0x开头的数字就认为是十六进制的：

 

 

 

扩展3. 二进制：数字是由0，1组成的，逢2进1

 

 

 

 

 

 

string

string：字符串类型，任意字母、数字、符号和汉字的组合都是一个字符串类型，字符串必须使用引号引起来。【单引号或者双引号都可以】

 

例子：定义一个字符串：

 

例子2：

 

 

扩展：引号里面的字符串不能再包含同样的引号，如果非要包含：

办法一、使用\转义

 

办法二、’引号和双引号替换着用

 

 

总结：有时候有些特殊字符在字符串中显示不出来，这些特殊字符需要在前面加上\转义一下即可：

 

 

 

 

 

array

array：数组。当要在一个变量中同时保存多个值时就可以使用数组。

语法：

var 变量名 = [   值1  ,  值2  ,  值3 ......   ];

 

 

例子：

 

 

 

²  多维数组

如果数组中的值又是数组那么这个数组就是多维数组。

 

 

 

 

object

object:对象：一个变量中以键值对的方式存储多个值。

 

 

扩展：所有的这些数据类型都可以混合使用，比如定义一个数组，然后数组中两个元素都是对象。

 

 

 

l  类型转换

转化成数字：

parseInt：转化成整型

parseFloat：转化成浮点【小数】型

 

 

所以在相加之前需要先把这两个值转化成数字类型再相加：

 

 

join：数组转字符串

split：字符串转数组

 

 

 

运算符

l  什么是运算符？

运算符是指两个变量进行运算时的符号。

 

 

 

赋值运算符

=：把一值赋给一个变量。

 

 

扩展：思考：

 

图解：

 

 

递增【+1】、递减【-1】运算符

递增：  前++    ，   后++

 

后++：先用原值用完再加

 

前++：先+1然后再用：

 

 

扩展：随便理解一下：

 

 

 

 

 

递减：  前--     ，   后--  【和递增同理】

 

 

算术运算符

【  +、-、*【乘】、/【除】、%【取模-》求余】  】

 

 

 

扩展：如果两个字符串相加就成连接：

 

 

简写：【+=、-=、*=、/=、%=【模等】  】

 

实例：

 

 

 

 

比较运算符

【>、<、>=、<=、==【是否相等】、!=【是否不相等】、===【是否全等】、!==【是否不全等】 】

 

这些运算符会返回一个布尔类型的值：

 

三种等号的区别：

 

 

 

实例：

 

 

 

 

 

 

 

三目运算符

语法：表达式 ? 值1  : 值2;

如果表达式为真就返回值1，否则返回值2：

 

 

 

逻辑运算符

【&&、||、!】

 

与【&&】：全是true时才返回true

或【||】：只要有一个是true就返回true

非【！】：如果是true就返回false,如果是false就返回true

 

简单例子：

 

 

 

例子：

 

 

 

 

 

 

js操作CSS样式

我们可以使用JS代码操作页面中HTML标签的CSS样式，直接使用style属性就可以操作：

注意：原来的带-的名字到JS中要去掉-并且下个字母大写：

比如是：css:  background-color   -->   js: backgroundColor

 

 

 

 

实例：移动的小球：

 

 

 

 

 

流程控制

l  什么是流程控制？

控制代码执行的顺序。

 

 

l  代码执行有三种顺序

程序代码有三种结构：顺序、分支、循环。

 

 

 

l  顺序结构

代码自上而下一行一行的执行。

 

 

 

 

l  分支结构

分支结构：当满足一定条件时才执行的代码。

 

单向分支：

语法：当表达式的返回值为true时就执行代码块的代码

if (  表达式   )

{

代码块;

}

例子：

 

 

 

双向分支

语法：如果表达式为true就执行代码块1，否则就执行代码块2【一块代码中肯定有一块会执行】

if(表达式)

{

代码块1;

}

else

{

代码块2;

}

 

 

 

实例：小球来回动：修改定时器中的代码添加两个判断：

 

 

 

多向分支

语法：哪个表达式为真就执行哪个表达式中的代码【只会执行其中一个】，如果这些表达式都不满足就执行最后的else里面的代码：【如果有多个条件满足，只会执行上面第一个满足条件的】

if (表达式1)

{

代码块1;

}

else if(表达式2)

{

代码块2;

}

else if(表达式3)

{

代码块3;

}

....

else

{

代码块n;

}

 

例子：

 

 

 

l  循环结构

循环结构：当满足一个条件时就重复执行一段代码，直到条件不满足为止。

for循环

语法：

for(初始值; 表达式; 自增)

{

代码块;

}

 

例子代码：输出0~9999之间所有的数字：

代码执行流程是：

1. 先执行var i=0;

2. 再判断i<10000是否为true

3. 如果为true执行大括号中的代码，否则跳过循环执行{}后面的代码

4. 大括号中的代码执行完之扣再执行i++自增

5. 自增之后到执行第2步，之后2~4步一直循环执行。

 

 

实例1：批量处理页面中所有的H2标签

 

 

 

例子2：循环和分支可以混合着使用：上面H2一个红色的一个黄色的，替换显示：

 

 

作业：

1. 打印100行*，第一行一个*，第二行2个*，第三行3个*。。。。。以此类推。

 

2. 求1~100之间所有整数和。

 

3. 上面的H2标签，三种颜色交替显示【红、绿、蓝、红、绿、蓝.......】

 

 

for ... in ... 循环

主要用来循环一个对象中所有的键的：

 

实例：我们可以打印一下JS中的document对象中都有哪些方法可以使用：

 

 

 

while循环

只要表达式为true就执行大括号中的代码，代码执行完之后再判断表达式是否为true如果为true就继续再执行。。。。循环下去。

 

语法：

wihle(表达式)

{

代码块;

}

例子：输出100行星，每行多输出一个：

 

 

 

 

do-while循环

先执行代码块，执行完之后再判断如果表达式为true就再执行，执行完再判断。。。。。继续下去。

【和for、white的区别就是先执行一次代码之后再判断】

语法：

do

{

代码块;

}while(表达式);

例子：

 

 

 

 

continue和break

这两个一般只能用在循环【for,while,do-while】的大括号里面，用来控制循环的流程：

 

continue ; ：循环里面后面的代码不执行了直接进入下一次循环：

 

 

 

 

 

break：循环后面的代码不执行了，直接退出整个循环。

 

 

 

函数

l  什么是函数？

可以把经常使用的一段代码写到一个函数中，用时直接调用这个函数即可，不需要再重新写相同的代码。

 

 

 

 

 

 

l  定义函数

使用函数之前必须先要定义函数

语法：

function 函数名( )

{

代码块;

}

例子：

 

 

说明：函数中的代码是不会执行的，只有你调用这个函数时才会执行。

 

 

l  调用函数

函数中的代码只有在调用时才会执行。

调用函数的语法：

函数名( );

例子：

 

每次调用函数都是一个临时的内存地址，函数中的代码执行完之后这块内存就销毁了，所以在函数中的所有变量的值只在函数调用的过程中有效，函数执行完就没了【内存销毁】。

 

总结：函数内部定义的变量，在函数外部不能使用【因为已经销毁了】：

 

 

l  变量作用域

变量分为全局变量和局部变量。

 

 

全局变量：函数外部使用var定义的变量。在整个脚本中的任何位置都可以使用。

局部变量：函数内部使用var定义的变量。只在函数内部可以使用，并且只要函数执行过程中存在，函数执行结束就销毁了。

 

 

l  函数返回

在函数中执行return会退出函数的执行并返回调用函数的地方。【return只能用在函数内部用来退出函数的】

语法：

function 函数名( 参数列表 )

{

代码块;

return ;

}

例子：

 

return就退出函数并销毁内存，return后面的代码不执行了：

 

 

退出函数时还可以带一个值返回出来

语法：

function 函数名( 参数列表 )

{

代码块;

return 数据;

}

可以把函数内部的一值返回出来：

 

返回之后值的用途：

 

 

 

 

l  函数的参数

我们可以在调用函数时向函数里面传一个值：可以在定义函数时的小括号中添加要传入的值【参数】：

function 函数名( 参数1 , 参数2 , 参数3 , ..... )

{

代码块;

}

 

例子：定义一个函数，可以打印任意行的星星。通过调用函数时的参数来控制，这样这个函数特别灵活。

 

还可以有多个参数：

 

 

实际应用：我们现在每次获取页面中的元素都要执行document.getElementById这个方法，比较麻烦，所以我们可以自己定义一个更简单的函数实现这个功能：

 

以后我们再想要获取页面中一个元素时只需要这样：

 

 

 

 

l  匿名函数

匿名函数：没有名字的函数。

用途一、绑定时

 

用途二、做为另一个函数的参数

 

 

 

l  递归函数

在一个函数内部又调用自身的函数。

比如求4！= 4*3*2*1

 

不过：并没有特殊的，任何可以用递归做的功能都不是必须要用递归。

 

 

 

l  js中自带的系统函数

 

 

parseInt和parseFloat

总结：只有以数字开头的字符串才能转。别的不能转，否则结果是NaN。

parseInt：转化成整型

 

 

 

 

 

parseFloat：转化成浮点型

 

 

 

NaN是JS中提供的一种特殊的类型，代表非 数字，奇怪的是和自己都不相等：

 

 

 

 

扩展：字符串的比较：

 

 

 

 

 

 

 

setInterval和clearInterval

启动和清除一个定时器。

 

定时器会一直执行下去，直到关闭浏览器或者清除了定时器。

 

语法：setInterval( 执行的函数 , 间隔时间【单位：毫秒】 );

 

 

 

 

setTimeout和clearTimeout

定时只执行一次。

 

语法：setTimeout( 执行的函数 , 间隔时间【单位：毫秒】 );

 

在这个事件触发之前还可以使用clearTimeout把它停掉。这样就不会触发了。！

 

 

 

 

 

 

 

图片轮换实例

 

1. 先创建一个目录并找几个大小一样的图片：

 

2. 创建HTML页面

把四个图片放到一个DIV中并把DIV的宽、高设置成总图片的宽、高：

 

效果：

 

3. 在这个DIV的最外层再套一个DIV，并设置宽、高只能显示一张图片，其他溢出的隐藏：

 

效果：

 

4. 现在只要通过定时器让id=container的div向左移动即可：

 

5. 思考，如何让图片移动到一张图片时就停止？

 

 

 

 

 

事件

l  什么是事件？

事件：当页面中发生一个行为、一个动作时触发执行一段JS代码。

 

v  常用事件：

鼠标相关事件：

onclick ：鼠标点击时

ondblclick：鼠标双击时

onmousemove：鼠标移动

onmouseout：鼠标离开时

onmouseover：鼠标放上时

 

键盘相关事件：

onkeypress：键盘按键按下并未释放时【按住不放】

onkeydown：键盘按键按下瞬间时

onkeyup：当键盘按键放开时

 

onfocus：得到焦点时

onblur：失去焦点时

 

 

l  绑定事件处理函数

可以为页面中任何元素绑定一个事件处理函数：

比如以下例子：当点击球时把球背景色改为红色：然后当点击整个文档时文档背景变白色和黑色。

 

 

l  事件冒泡

当点击一个元素时，这个点击事件会一直向上级传递，所以如果上级也绑定了点击事件，那么上级的事件也会依次被触发！

 

 

当触发一个元素的事件时，这个事件会传递到元素的所有上级元素中

 

我们也可以通过事件对象来阻止事件冒泡【事件向上传递】。

 

l  事件对象

事件对象：在绑定事件的函数中可以加一个参数，这个参数就是这个事件的对象，参数名可以任意取。

通过这个事件对象可以获取事件的信息以及控制事件的行为。

 

 

v  在事件对象上的有一些常用的属性和方法可以控制这个事件：

target ：事件发生者

preventDefault() ：阻止默认行为,比如我们可以阻止 a标签点击之后跳转的这个默认行为：

 

 

stopPropagation() ：阻止冒泡

 

clientX ：触发事件时鼠标的x坐标

clientY ：触发事件时鼠标的鼠标y坐标

keyCode ：点击的键盘的按钮

 

 

 

 

l  键盘事件

例子：点击上、下、左、右和wasd八个键子时，小球能够移动：

说明：我们可以使用事件对象中的keyCode属性来判断点击的按钮是哪一个：

 

 

l  鼠标事件

鼠标移动时小球跟着移动：

说明：我们可以使用事件对象中的clientX和clientY属性获取鼠标的x、y坐标：

 

 

 

 

实例：点击左右滚动图片：

1. 先找几个大小相同的图片：

 

2. 制作HTML和CSS结构：

 

 

3. 编码JS代码：

 

左按钮点击时：

 

右按钮点击时

 

效果：鼠标放到图片上时显示 左、右按钮，并且点击时图片移动：

 

 

 

 

 

 

 

BOM操作

l  什么是BOM操作？

BOM浏览器对象模型【Broswer Object Model】。在javascript中可以使用window对象来对浏览器窗口进行操作。

 

 

 

 

l  获取整个电脑屏幕的宽、高

window.screen.width

window.screen.height

 

 

 

 

 

 

 

l  打开窗口

语法：window.open( 打开的页面地址，打开的窗口，窗口属性);

打开的窗口：_self：本窗口打开，  _blank：新窗口打开。

窗口属性：

 

例子：

 

说明：现在网页中很少使用这种弹出窗口，现在都是在页面中弹出一个DIV层：

 

 

 

 

 

 

l  关闭窗口

语法：window.close();：能关闭用脚本打开的窗口。

 

 

 

 

 

l  设置滚动条位置 - scrollTo和scrollBy

scrollTo(左右  ， 上下)：滚动到：

window.scrollTo(0 ,  200px);  --> 向下滚动到200px的位置

 

scrollBy：滚动多少

window.scrollBy(0 ,  200px);  --> 向下滚动200px的位置

 

示例：让滚动条自动向下滚动的动画：

 

 

 

 

l  系统对话框

alert：弹出提示窗口。

 

confirm：弹出确认窗口。

 

prompt：弹出输入窗口。

 

 

说明：行内近几年一般都使用弹出 DIV 层制作类似的功能，很少用这种弹出窗口了！

 

 

 

 

 

 

 

DOM操作

l  什么是DOM操作？

DOM：文档对象模型【Document Object Model】。可以使用document对象【或者：window.document对象】来操作窗口中的HTML文档。

 

 

 

 

l  页面内容【body】宽、高

document.body.offsetWidth

document.body.offsetHeight

获取的是内容高度：如果没有内容就是0：

 

 

 

 

l  查找元素

获取一个元素：

document.getElementById：根据id查找一个元素，返回这个元素对象。

 

获取多个元素：这里查到的元素必须要指定下标或者循环才能使用

document.getElementsByClassName：根据class查找所有元素，返回包含所有元素的数组。

document.getElementsByTagName：根据标签名字查找元素，返回包含所有元素的数组。

document.getElementsByName：根据name属性查找元素，返回包含所有元素的数组。

 

当操作多个元素时必须要指定数组的下标：

 

如果要同时操作多个需要循环：

 

 

 

 

l  设置元素样式 - style

当查询到一个元素之后就可以使用style属性来修改标签的css样式。

 

 

 

 

 

 

 

 

 

l  元素对象的属性

获取到一个标签之后可以获取或者设置这个标签上的属性：

getAttribute(属性名);  ：获取标签上的属性。

setAttribute(属性名,属性值);  ：设置标签上的属性值。

 

示例：点击按钮时设置所有的框都为选中的状态 ：【原理：设置checked属性】

 

 

 

 

 

l  元素内容：innerHTML和innerText

可以使用innerHTML和innerText属性获取和设置元素里面的内容。

 

总结：

innerHTML：会解析 HTML标签

innerText：不会解析HTLM标签，直接显示出来了

 

innerHTML

 

innerText：

 

 

 

 

 

l  创建、追加、删除元素

我们可以使用JS代码在页面中生成一个HTML元素进去 。

 

创建节点

document.createElement

追加节点

document.body.appendChild

删除子元素

document.body.removeChild

 

例子：点击时生成一个小球：

1. 先定义一个球的样式：

 

2. 为文档绑定点击事件：

 

 

作业：页面中添加一个“清空”的按钮，一点击按钮，就删除页面中所有的球：

提示：以下代码演示了如何创建、添加、和删除一个元素：

// 创建元素

var  newball  =  document.createElement(‘div’);

// 把div添加到页面中

document.body.appendChild(newball);

// 从页面中删除

document.body.removeChild(newball);

 

删除的代码：

 

 

 

例子：改变所有球的大小为随机尺寸：

 

 

 

l  学习JS一般网站中主要的用途是什么？

1. 页面动画：图片轮换、图片滚动、弹出层、div的移动【网页游戏】

动画原理：使用定时器，改变一个元素CSS样式。

2. 表单验证【提交表单时先通过JS判断表单中数据是否满足要求，否则不允许提交表单】

 

3. 通过【AJAX】到和服务器进行数据通信，并且把服务器返回的数据显示在页面中【DOM】

a. 创建一个HTML页面：

 

b. 写JS加载数据：

说明：数据应该通过AJAX从服务器获取，暂时我们先模仿一个JSON数据：

 

 

效果：点击之后加载数据：

 

 

扩展：现在滚动加载数据，滚动一屏加载一屏数据：

1. 先放一个图片：

 

2. 为滚动条绑定一个滚动事件

 

完成，现在当手动滚动条，把狗显示出来时会再加载一屏幕数据。

 

 

 

 

小技巧：JS是在浏览器中运行【浏览器中有JS引擎】，客户可以关闭浏览器中运行JS的功能。

 

 

 

 

 

 

 

 

l  元素位置：offsetTop和offsetLeft

可以获取一个元素在页面中距离上面和左边的距离。

比如：获取一个元素距离上面的距离

 

 

 

l  滚动条滚动高度

火狐和IE：document.documentElement.scrollTop;

谷歌浏览器：document.body.scrollTop

因为不同的浏览器获取方式不同，所以用时要先判断：

 

 

 

 

 

 

 

 

 

 

l  获取文档可视内容宽、高

浏览器里面真正的宽、高度

document.documentElement.clientWidth

document.documentElement.clientHeight

 

这两个获取的是文档部的高度，会随着浏览器尺寸的变大、变小而改变。我们之前学习的window.screen.height是电脑屏幕的高，是不会根据浏览器而改变的。

 

 

 

 

 

 

 

 

 

 

 

Location对象和History对象

l  location对象

在javascript中可以使用location对象获取当前访问的页面地址【URL地址】信息：

 

 

 

 

 

 

 

 

 

 

l  history对象

可以使用history对象实现历史页面的跳转：

 

history.go(-1)：后退一页

history.go(1)：前进一页

history.back()：后退一页

history.forward()：前进一页

 

Math和Date对象

l  介绍

javascript中提供了两个对象Math和Date分别用来做 数学 操作和 时间 操作。

 

 

 

 

 

 

l  Math

Math对象：当要做一些数学运算时就可以使用这个对象

 

v  常用方法：

Math.abs()：计算绝对值【取正数】

Math.ceil()：向上【进1】取整 :          Math.ceil(5.3)  -->  6  ,            Math.ceil(1.1)  --> 2

Math.floor()：向下【舍去小数】取整：    Math.floor(5.3)   -->   5 ,        Math.floor(1.1)    -->   1

Math.round：四舍五入取整。      Math.floor(5.3)   -->   5 ,      Math.floor(1.6)    -->   2

Math.random()：随机数 [  0,1  ) ：取一个 0~1之间的随机数， 包含0，不包含1

 

如何随机到一个指定区间的数字呢？比如要随机一个0~200之间的数？

原理：扩大200倍并取整：

 

 

 

 

 

l  Date

Date对象可以做时间相关的操作。

 

v  常用方法：

getDate()：返回一个月的某一天。【1~31】

getDay()：返回一周中的某一天。【0~6】

getMonth()：返回一年中的某一个月。【0~11】

getFullYear()：返回四位数的年

getHours()：返回小时【0~23】

getMinutes()：返回分钟【0~59】

getSeconds()：返回秒【0~59】

getTime()：返回时间戳【1970年1月1日至少经过的毫秒数】