js基础

1、JS是脚本语言,主要用于页面与用户的交互和页面功能,实现部分动画效果

JS的组成

2、页面引入方式


3、变量

弱类型语言,变量类型由声明时的值决定

js数据类型

typeof(变量)     用于获取变量类型

number  123

string  'asd'

boolean  true

undefined  不赋值如var  a

null


复合类型

object

NaN表示不是一个数字

isNaN判断是不是一个数字 ,不是数字返回true,如果是数字则返回false

类型转换

这块涉及到parseInt方法的一个BUG

变量,函数,属性命名规范

第一个字符必须是字母,下划线,美元符号

其他可以是字母,下划线,美元符号和数字

区分大小写

4、js获取元素[html中的标签如div、a等]

通过document对象来实现

       其中id是div元素的一个属性

常用方法通过document对象,如document.getElementById()

获取页面上元素的属性之后就可以对属性进行读写操作

5、js函数

函数定义:在js文件或者javascript代码块中声明

function aa(){

    alert(hello)

}

函数调用:

在js文件或者javascript代码块中调用 aa()

函数传参

需要注意的是变量需要用【】中括号,而不能用点

函数返回值:返回函数返回值,结束程序运行

在行间事件调用

匿名函数  aa =  function( ) {

    alert(hello)

}

6、条件语句

if  else条件语句

switch条件语句

if elseif else多重条件语句

数学运算之运算符

7、数组

数组就是python中的列表

创建方式

方式1:var  aRrr01 = new  Array(1,2,3)       #定义了一个数组并初始化

方式2:var  aRrr02 = [0,1,2] 

数组的常用方法

获取长度 length属性

通过索引获取指定位置的元素  如aRrr01[0]

多维数组的创建方式:数组成员也是数组

多维数组使用方法

数组转字符串join方法,参数是分隔符

增加push和删除pop数组中的成员【对数组末尾进行操作】

增加unshift和删除shift数组中的成员【对数组前面进行操作】

数组反转reverse方法

获取数组元素的索引值,若有多个相同的元素,则从索引为0的位置开始,返回第一个元素出现的索引值indexof

返回1

在数组中间增加或删除元素splice方法

参数1:开始的索引,包括该元素

参数2:表示删除元素的个数

其他参数【可选】:表示增加的元素

数组去重

核心思想:主要是用for循环遍历每个元素,使用indexof判断每个元素当前索引值是不是与首次出现的索引值一致

8、循环语句

for循环

【注】这块的aLi不是一个数组,是一个选择集

while循环

9、字符串的处理方法

【注】substring包左,不包右

indexof找不到返回-1

使用方法:

JS中的一个BUG

若0.1与0.2直接相加会计算错误




字符串反转

核心思想,先转数组,调用数组的reverse方法,然后再用join方法转字符串

调试程序的方法

10、定时器

作用1:异步操作

setTimeout(aa,2000) 第一个参数是函数名,第二个参数是时间单位是ms

关闭定时器clearTimeout

Timer = setTimeout(aa,2000)

function aa(){

alert('hello')

}

clearTimeout(Timer)

作用2:制作动画

反复执行

实i现动画效果,让盒子向右移动,到一定距离时停止

通过定时器设置时钟

这块有两个坑:

第一个是月份是0到11,星期是0到6

倒计时【实际开发中now的时间要从服务器获取】

lefts单位是S

作用3:函数缓存和节流

页面效果做弹框:弹框弹出后用户只能操作弹框,操作不了界面其他元素。

第一点:设置一个罩子div01,能遮住浏览器【采用固定定位,宽度和高度均为100%】,同时要设置层级很大。保证遮住其他元素,要想显示其他元素,设置透明度。

第二点:弹框div02,首先层级要大于div01,这样才能显示。定位也采用固定定位

第三点:div02内设置关闭按钮,点击的时候设置div01和div02为display:none

11、变量的作用域以及封闭函数

全局变量:函数外定义的变量。函数内、函数外都可以访问

局部变量:函数内定义的变量,只有函数内才可以访问

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

封闭函数(定义的匿名函数)();

优点是不会影响全局的变量、函数等。项目开发中为了防止影响其他的,可以把自己要实现的功能放到封闭函数内,封闭函数定义的变量、函数都不会影响全局。

12、闭包

怎么理解闭包呢,就是函数嵌套一个函数,内函数调用外函数的局部变量和参数,参数和变量不会被垃圾空间回收。

大家都知道垃圾回收机制是变量的引用数为0的话,那么这个变量就会被回收。在闭包这个场景中,外函数内的变量被内函数调用,而外函数同时也在带调用内函数。形成了互相调用的关系,并且当我们在外面调用他们时,出现了第三方的调用关系。所以导致就算是函数执行完成后,变量的引用依然不是0.所以它不会被回收。

那为啥会出现闭包呢?大家都知道,函数外是无法访问函数内的变量的。而闭包的出现,使得在函数外面也可以访问函数内部的作用域。

闭包的用途:

用途1:由于闭包函数的变量不会被回收,所以我们可以用闭包在循环中存放索引值

类似于这种情况,我们期望的是弹出的i是从小到大,但实际上执行的过程中。是先绑定了onclick事件,最后弹出的i都是循环结束之后的i值。这个时候我们需要一个全局的作用域来存放闭包

上述代码块就使用了闭包函数来存所有值

用途2:私有变量计数器,外部无法访问,避免全局变量的污染

13、内置对象

第一个:document.referrer的使用场景是模拟登录过程,存储跳转之前的页面的URL。

第二个:Windows.location.herf用于跳转

Windows.location.serch  我们常在URL中加参数,如URL+?zhanghong

获取?后面的参数渲染页面

Windows.location.hash 我们常在URL中加参数,如URL+#zhanghong

第三个math

Math.random()获取0到1的整数,若想获取选定范围a-b的随机数。

Math.random()*(b-a)+a

Math.floor()    向下取整

Math.ceil()      向上取整

14、JS中的对象

调用对象中的属性,如Tom.age

调用对象中的方法,如Tom.showname()

工厂模式创建对象

通过构造函数创建对象

返回false

原型模式

解决了构造函数创建的实例化对象方法不能共享的问题

返回true

对象调用方法的时候,先在自己对象的方法中找,找不到再去找原型方法

继承

对象的call和apply方法

相同点:都可以用来改变对象中this的值

不同点:使用上传参不同

经常使用这个方法来实现继承

子类

你可能感兴趣的:(js基础)