当前位置:首页 » 《关注互联网》 » 正文

JavaScript学习一_正曦08的博客

29 人参与  2022年01月22日 13:08  分类 : 《关注互联网》  评论

点击全文阅读


目录

0.前言

1.小程序中的js和普通的javascript区别

(1)小程序不是运行在浏览器中,所以没有BOM和DOM对象

(2)小程序中有更加多的方法函数

(3)生命周期函数

1.1 监听页面加载

1.2 监听页面初次渲染完成

1.3 监听页面显示 

1.3 监听页面隐藏

1.4 监听页面卸载

2.1 监听小程序初始化

2.2 错误监听函数

2.JavaScript的基础一小部分

(1)关键字与保留字

 (2)系统常量

(3)运算符

 (4)异常处理语句

(5)with语句和空语句

(6)数据类型

1、数值

2、字符串

3、布尔型

4、对象

5、数组

(7)函数应用

1、匿名函数

2、函数作为参数

(8)闭包函数

3.事件处理

(1)事件模型

(2)注册事件和销毁事件

4.使用Ajax

(1)使用XMLHttpRequest

(2)发送GET请求

(3)发送POST请求

(4)中止请求


0.前言

由于之前为了微信小程序项目是直接学习了微信的js,现在回来补一补JavaScript的基础。在大致浏览JavaScript相关书籍的时候,发现在项目中所用的东西覆盖面还挺全的,感觉很多跳过了学习阶段直接强硬使用上去了,但是肯定不够熟悉,所以需要恶补一下基础。接下来会就着《HTML5+CSS3+JavaScript从入门到精通(标准版)》进行回补基础,首先的是JavaScript学习。

1.小程序中的js和普通的javascript区别

(1)小程序不是运行在浏览器中,所以没有BOM和DOM对象

console.log(window); => undefined
console.log(document); => undefined

(2)小程序中有更加多的方法函数

wx.getApp、wx.getCurrentPages、getMenuButtonBoundingClientRect、wx.getSystemInfo、wx.getLaunchOptionsSync等等微信自带API实用的接口,因为小程序相比于网页版的,需要适配各种机型或者操作系统(ios、安卓或者鸿蒙等等),所要考虑的东西大大增加,难度也有所增加。除此之外,还有一个比较特殊的函数——生命周期函数,而小程序的也有些不同。

(3)生命周期函数

app、page里面都会有

1.1 监听页面加载

onLoad: function (options) {}, 

一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。 

1.2 监听页面初次渲染完成

onReady: function () {}, 

一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。 

1.3 监听页面显示 

onShow: function () {}, 

每次打开页面都会调用一次。 

1.3 监听页面隐藏

onHide: function () {}, 

当navigateTo或底部tab切换时调用。 

1.4 监听页面卸载

onUnload: function () {}, 

当redirectTo或navigateBack的时候调用。 

微信小程序的 app.js 中 独有的 函数

2.1 监听小程序初始化

onLaunch:function () {}, 

当小程序初始化完成时,会触发 onLaunch(全局只触发一次) 

2.2 错误监听函数

onError:function () {}, 

当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息

2.JavaScript的基础一小部分

我不知道的才会进行记录。

(1)关键字与保留字

 关键字是值Javascript默认定义具有特殊含义的词汇,如指令名、语句名、函数名、方法名、对象名、属性名。

 (2)系统常量

       Javascript暂不支持constant关键字,不允许用户自定义常量,但是提供了几个默认常量供开发使用,这些系统常量主要是数学和数值常量,方便数学运算和特殊值引用。有以下系统常量:

Math.E: 常量e,自然对数的底数。
Math.LN10: 10的自然对数。
Math.LN2: 2的自然对数。
Math.LOG10E: 以10为底的e的对数。
Math.LOG2E: 以2为底的e的对数。
Math.PI: 常量PI.
Math.SQRT12: 2的平方根除以1。
Math.SQRT2: 2的平方根。
Number. MAX VALUE: 可表示的最大的数。
Number. MIN VALUE: 可表示的最小的数。
Number.NaN: 非数字值。
Number. NEGATIVE INFINITY: 负无穷大;溢出时返回该值。
Number. POSITIVE INFINITY: 正无穷大:溢出时返回该值。

(3)运算符

 (4)异常处理语句

异常表示一种非正常的信息,它提示程序发生了意外或错误,然后Javascrip通过一定的机制把异常信号给暴露出来,这个操作被称为抛出(throw),抛出操作将告诉系统当前程序出现了问题。Javascript使用异常处理语句捕获(catch)这个异常,并进行处理。

语法形式:

try{
   CreateException();
}
catch(ex){
   alert(ex.number+"\n"+ex.description);
}
finally{
   alert("end");
}

 例子:

    try{       //尝试运行下面代码
      alert("执行程序");
      var err=new Error("异常");
      throw err;
    }
    catch(e){  //捕获异常信息,并进行显示
      alert("错误名称:"+e.name+"\n 错误信息:"+e.message);
    }
    finally{   //最后必须执行的语句
      alert("finally");
    }

(5)with语句和空语句

with语句能够为一组语句创建缺省的对象。在这一句语句中,任何不指定对象的属性引用都将被认为是缺省对象的。其语法形式如下:

with(object){
   statements
}

例子:给id为box的元素补上两种样式

 with(document.getElementById("box").style){
      borderColor="red";
      borderWidth="1px";
 }

(6)数据类型

函数单独拿出来记录

使用typeof运算符可以检测数据类型(typeof a)

1、数值

使用toString()可以把数值转化为字符串。

有定义的特殊数值,上文已提及,也就是系统常量部分。

2、字符串

使用parseInt()parseFloat()方法可以把字符串转化为数值。parseInt为整数,parseFloat为浮点数。

使用字符串的replace方法可以实现字符串替换操作。该方法包含两个参数:第一个参数表示执行匹配的正则表达式,也可以传递字符串,第二个参数表示准备代替匹配的子字符串。

在该方法中,约定了一个特殊的字符“$”,如果这个美元符号附加了一个序号,就表示引用正则表达式中匹配子表达式存储的字符串。语义详细说明:

$1、$2、$3……:与正则表达式中的第n个子表达式相匹配的文本

$&: 与正则表达式相匹配的子字符串

$`: 位于匹配子字符串左侧的文本

$': 位于匹配子字符串右侧的文本

$$: 表示$符号

3、布尔型

要把任何值转化为布尔型数据,在值的前面增加两个感叹号即可。任何非0数值转化后为true,而0是false。

4、对象

系统内置类型函数,即特殊对象:

var o = new Object();            //构造原型对象
var date = new Date();           //构造日期对象
var ptn = new RegExp("ab+c","i") //构造正则表达式对象

5、数组

定义数组通过构造函数Array()和运算符new来实现。

改变数组长度、动态增加或删除数组元素:

1、使用push()和pop()方法来操作数组

使用push方法可以在数组末尾插入一个或多个元素,使用pop方法可以依次把它们从数组中删除。

2、使用unshift()和shift()方法

和1类似,不过unshiftshift作用于头部。

3、使用splice()方法

该方法时一个通用删除和插入元素的方法,它可以在数组指定的位置开始删除或插入元素。

splice方法包含三个参数:第一个参数指定插入的起始位置,第二个参数指定要删除元素的个数,第三个参数开始表示插入的具体元素。

数组与字符串互转:

使用join方法可以把数组转换为多种形式的字符串。join方法包含一个参数,用来定义合并元素的连字符。如果join方法不提供参数,则默认以逗号连接每个元素。

使用split方法可以把字符串劈开为一个数组,该方法包含两个参数:第一个参数指定劈开的分隔符,第二参数指定返回数组的长度。

数组排顺:

使用reverse方法可以颠倒数组元素的顺序。该方法是在原数组基础上进行操作的,不会新建数组。

sort方法能够对于数组中的元素进行排序,排序的方法通过其参数来决定。这个参数是一个比较两个元素值的闭包。如果省略参数,则sort方法将按默认的规则对数组进行排序。

连接数组:

concat方法能够把该方法中的参数追加到指定数组中,形成一个新的连接数组。

截取子数组:

slice方法将返回数组中指定的片段,所谓片段就是数组中的一个子数组。该方法包含两个参数,它们指定要返回子数组在原数组中的起止点。其中第一个参数指定的元素是被截取的范围之内,而第二个参数指定的元素不被截取。

(7)函数应用

1、匿名函数

匿名函数就是没有名称的函数,它相当于一个复杂的表达式。当只需要一次性使用函数时,使用匿名函数会更加有效率。

var z = function(x,y){
    return (x+y)/2;
} (23,35);     //返回29

2、函数作为参数

函数作为值可以进行传递,因此可以把函数作为参数传递给另一个函数,也可以作为返回值。通过这种方式增强函数的应用能力。

var a = function (f,x,y){
    return f(x,y);
};

var b = function (x,y){
    return x+y;
};

alert( a(b,3,4));     //返回7

(8)闭包函数

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包函数就是外部函数被调用后,它的变量不会消失,仍然被内部函数所使用,而且所有的内部函数都拥有对外部函数的访问权限。

function a(){               //外层函数,闭包函数
       var n=0;              //私有变量
  function b(m){            //内部函数,私有函数
       n=n+m;                //递加上级私有变量的值
           return n;         //返回改变后的值
  }
  return b;                  //返回私有函数
}
var b=a();                 //调用外层函数,返回内部函数
document. write(b(3));   //输出3
document. write("<br>");
document. write(b(3));   //输出6
document. write("<br>");
document. write(b(3));   //输出9
document. write("<br>");
document. write(b(3));   //输出12

3.事件处理

简简单单写点,发现有点复杂,后续再继续。

(1)事件模型

基本事件模型:也称为DOM 0事件模型,是浏览器初期出现的一种比较简单的事件模型,主要通过事件属性,为指定标签绑定事件处理函数。由于这种模型应用比较广泛,获得了所有浏览器的支持,目前依然比较流行。但是这种模型对于HTML文档标签依赖严重,不利于 JavaScript独立开发。
DOM事件模型:由W3C制定,是目前标准的事件处理模型。所有符合标准的浏览器都支持该模型,E怪异模式不支持。DOM事件模型包括DOM2事件模块和DOM3事件模块,DOM3事件模块为DOM2事件模块的升级版,略有完善,主要是新增了一些事情类型,以适应移动设备的开发需要,但大部分规范和用法保持一致。
IE事件模型:E4.0及其以上版本浏览器支持,与DOM事件模型相似,但用法不同。
Netscape事件模型:由 Netscape4浏览器实现,在 Netscape6中停止支持。

(2)注册事件和销毁事件

通过调用对象的addEventListener方法来注册事件,用法如下:

element.addEventListener(String a,Function b,boolean c);

使用removeEventListener方法可以从指定对象中删除已经注册的事件处理函数,用法如下:

element.removeEventListener(String a, Function b,boolean c);

4.使用Ajax

Ajax是利用JavaScript脚本和XML数据实现客户端与服务器端之间快捷通信的一种技巧。这次先简单记录一些简单的。

(1)使用XMLHttpRequest

使用XMLHttpRequest实现异步通信步骤:

1、定义XMLHttpRequest实例对象。

2、调用XMLHttpRequest对象的open方法打开服务器端URL地址。

3、注册onreadystatechange事件处理函数,准备接收响应数据,并进行处理。

4、调用XMLHttpRequest对象的send方法发送请求

(2)发送GET请求

发送GET请求时,只需将包含查询字符串的URL传入open方法,设置第一个参数值为“GET”即可。

(3)发送POST请求

与GET类似,但需要将setRequestHeader方法设置请求消息的内容类型为“application/x-www-form-urlencoded”,从而表示传递的时表单值。

(4)中止请求

使用 abort方法可以中止正在进行的异步请求。在使用abort方法前,应先清除onreadystatechange事件处理函数,因为IEMozilla在请求中止后也会激活这个事件处理函数,如果给onreadystatechange属性设置为ull,则IE会发生异常,所以可以为它设置一个空函数。


点击全文阅读


本文链接:http://zhangshiyu.com/post/33732.html

函数  数组  方法  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1