六,JavaWeb简略的谈下前端技术<三>JavaScript

心已入冬 提交于 2019-12-05 10:46:48

首先,JavaScript就是大家熟知的js,它和Java没有半毛钱关系,和JSP也没有半毛钱关系。他是Web页面中的脚本语言,是一种解释型语言,它的发明者看到java挺火的,然后就说,那么咱们就叫他javascript吧。纯粹是为了沾光来着。

那么它有啥作用呢?我们前面说过,HTML语言来决定一个网页的内容,CSS来决定这个页面的样式,那么JS就是来把这个页面从静态页面变成动态的可交互的页面的。我们在以后的javaWeb程序中,经常性的会用JavaScript来进行数据验证啊,控制浏览器啊,生成时钟啊,日历啊等小应用。

JavaScript是以事件来驱动的,直接对客户端进行相应,不需要经过服务器,做过window编程的人就很好理解这句话,比如说我点击了一个按钮,那么久会触发一个按钮的事件,这个事件的处理函数就可以直接作出处理,比如说去执行一个算数运算啊什么的,这个过程是不需要经过服务器的。驱动事件的事件函数里边可以直接做出相应的事情然后返回给客户端。

6.1 JavaScript的语言基础

大致就几点。

1,区分大小写。

2,可加分号可不加分号,不加分号就以代码行的结尾作为结尾。

3,弱类型,没有明确的变量类型,都是用var来定义变量得,初始化成什么类型的数据,变量就是什么类型的。

4,大括号标记数码段。

5///*,,,*/一共有两种注释。和C的注释用法相同。

6,数据类型有:intfloatstringbooleanobjectnullundefined

7,关键字一般的CC++JAVA关键字不用就没啥问题。

8,运算符,等同于C的运算符。

6.2 JavaScript的流程控制语句

C的控制语言一样。

6.3 JavaScript的函数定义和调用

1,函数的定义,最常用的就是function来实现,举例:

Function functioName([param1, param2,...]){

Statemets;

[return exprission;]

}

2,函数的调用,和C一样,有参数就加参数,没参数就直接调用就行了。

6.4 JavaScript的事件处理

前边说话JavaScript是事件驱动的。这里在介绍一下,比如说页面加载完毕之后就会触发onload事件,当用户点击某个按钮的时候就会触发onclick事件。事件处理程序就是为了响应这其中的某个事件而执行的处理程序。事件处理程序可以是任意的Javascipt语句,但是一般都是自定义的函数来进行事件处理。

事件的类型:多数的浏览器内部有很多的事件,这个事件我就不在列表格一一的描述了,百度随便找就一大把无非就是点击按钮onclick,加载完了onload,按下键盘是什么事件了,按下鼠标又怎么滴了,这些无聊的东西。咱们为了赶紧去搞后台,这个就忽略了吧。

6.5 JavaScript的常用对象

比较常用的主要有三个,String对象,Date对象,window对象。

String对象。它是动态对象,需要创建对象实例后才可以引用的属性和方法。它可以通过new来创建也可以通过给var变量初始化一个字符串来创建。它常用的方法和Javastring对象差不多。不在赘述,其中可能经常用到的就是length方法了,就是返回字符串的长度。

Date对象。必须使用new来创建,mydate = new Data();通过调用Data对象的方法可以获取各种各样的时间,比如说四位数的年份啦,小时数,分钟数啦,当然可以使用各种set方法来设置Data对象。

Window对象。它是真个网页的对象。一个网页最高级别的存在。各种方法还是不在赘述,举个例子如下:

<input name=button value=打开新窗口 type=button onclick=

window.open(newWindow.html,’’,width=360,height=100,status=yes)>

点击这个按钮就会打开一个新的窗口。

6.6 DOM技术

DOM=Document Object Model(文档对象模型)。

它把一个网页页面看成一个树,其中每一个页面的标记都是他的一个节点,打个比方来说,如果用过Json的人应该很好理解,同样的一串字符串,只要它符合特定的格式,你就可以用JSON来解析,组合一个串字符串。所以,字符串之于JSON就差不多像Web页面之于DOM

使用DOM技术之后就可以通过它来遍历一个页面里边的所以标记(也就是DOM技术里边的元素),打个比方:

<html>

<head>

<title>一个html文档<title>

</head>

<body>

呵呵

</body>

</html>

在这个非常简单的页面中的层次结构如下图:

额,和上边的HTML文档不一样,这个图我是别的书里边截的图,我女盆友把我鼠标“抢”走了,没法画,大致就是这个样子。

        其中 head 元素在 html 的下边所以称为 html 元素的子节点 (children) html 元素则称为 head 元素的父节点 (parent) body 元素和 head 元素有同一个父节点所以称为 head 元素的兄弟节点 (sibling) Head 元素一下的元素都是 html 元素的后代( descendant ,html 元素以上的节点是 head 元素以下元素的祖先。

遍历文档。通过parentNodefirstChildnextChildlastChildprevousSibling等属性可以很轻松的来遍历一个web文档的所有节点。

获取文档中指定的元素。可以通过ID获取,也可以通过名字(name属性)获取。例子:

document.getElementById(userId);

document.getElementByName(userName)[0];

巴拉巴拉这么多也该睡了,明天就开始搭建JavaWeb的开发环境喽。

下期预告:《七,搭建JavaWeb的开发环境》

如果想查看更多的技术文档请关注我的微信公众号:ITYaoDao,或者直接扫描下边二维码:


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!