JavaWeb-前端基础 (7)

函数本身也是一种类型,他可以被变量接收,所有函数类型的变量,也可以直接被调用:

function f(a = "6666") { console.info("得到的实参为:"+a) return 666 } let k = f; k();

我们也可以直接将匿名函数赋值给变量:

let f = function (str) { console.info("实参为:"+str) }

既然函数是一种类型,那么函数也能作为一个参数进行传递:

function f(test) { test(); } f(function () { console.info("这是一个匿名函数") })

对于所有的匿名函数,可以像Java的匿名接口实现一样编写lambda表达式:

function f(test) { test(); } f(() => { console.info("可以,不跟你多bb") }) function f(test) { test("这个是回调参数"); } f(param => { console.info("接受到回调参数:"+param) }) JavaScript数组和对象

JS中的数组定义与Java不同,它更像是Python中的列表,数组中的每个元素并不需要时同样的类型:

let arr = [1, "lbwnb", false, undefined, NaN]

我们可以直接使用下标来访问:

let arr = [1, "lbwnb", false, undefined, NaN] console.info(arr[1])

我们一开始编写的排序算法,也是使用了数组。

数组还可以动态扩容,如果我们尝试访问超出数组长度的元素,并不会出现错误,而是得到undefined,同样的,我们也可以直接往超出数组长度的地方设置元素:

let arr = [1, "lbwnb", false, undefined, NaN] arr[5] = "???" console.info(arr)

也可以使用push和pop来实现栈操作:

let arr = [1, "lbwnb", false, undefined, NaN] arr.push("bbb") console.info(arr.pop()) console.info(arr)

数组还包括一些其他的方法,这里就不一一列出了:

let arr = [1, "lbwnb", false, undefined, NaN] arr.fill(1) console.info(arr.map(o => { return \'xxx\'+o }))

我们接着来看对象,JS中也能定义对象,但是这里的对象有点颠覆我们的认知:

let obj = new Object() let obj = {}

以上两种写法都能够创建一个对象,但是更推荐使用下面的一种。

JS中的对象也是非常随意的,我们可以动态为其添加属性:

let obj = {} obj.name = "伞兵一号" console.info(obj)

同理,我们也可以给对象动态添加一个函数:

let obj = {} obj.f = function (){ console.info("我是对象内部的函数") } obj.f()

我们可以在函数内使用this关键字来指定对象内的属性:

let name = "我是外部变量" let obj = {} obj.name = "我是内部变量" obj.f = function (){ console.info("name属性为:"+this.name) } obj.f()

注意:如果使用lambda表达式,那么this并不会指向对象。

除了动态添加属性,我们也可以在一开始的时候指定对象内部的成员:

let obj = { name: "我是内部的变量", f: function (){ console.info("name属性为:"+this.name) } } obj.f()

注意如果有多行属性,需要在属性定义后添加一个,进行分割!

JavaScript事件

当我们点击一个页面中的按钮之后,我们希望之后能够进行登陆操作,或是执行一些JS代码来实现某些功能,那么这个时候,就需要用到事件。

事件相当于一个通知,我们可以提前设定好事件发生时需要执行的内容,当事件发生时,就会执行我们预先设定好的JS代码。

事件有很多种类型,其中常用的有:

onclick:点击事件

oninput:内容输入事件

onsubmit:内容提交事件

那么如何为事件添加一个动作呢?

<input type="password" oninput="console.info(\'正在输入文本\')">

我们可以直接为一个元素添加对应事件的属性,比如oninput事件,我们可以直接在事件的值中编写js代码,但是注意,只能使用单引号,因为双引号用于囊括整个值。

我们也可以单独编写一个函数,当事件发生时直接调用我们的函数:

function f() { window.alert("你输入了一个字符") } <input type="password" oninput="oninput()">

仅仅了解了事件,还不足以实现高度自定义,我们接着来看DOM。

Document对象

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),它将整个页面的所有元素全部映射为JS对象,这样我们就可以在JS中操纵页面中的元素。

DOM HTML 树

比如我现在想要读取页面中某个输入框中的内容,那么我们就需要从DOM中获取此输入框元素的对象:

document.getElementById("pwd").value

通过document对象就能够快速获取当前页面中对应的元素,并且我们也可以快速获取元素中的一些属性。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzdjdx.html