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

时间 2019-11-09

标签 javaweb 简略前端技术 javascript 栏目 Java 繁體版

原文原文链接

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

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

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

6.1 JavaScript的语言基础

大体就几点。 web

1，区分大小写。编程

2，可加分号可不加分号，不加分号就以代码行的结尾做为结尾。浏览器

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

4，大括号标记数码段。微信

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

6，数据类型有：int，float，string，boolean，object，null，undefined。 spa

7，关键字通常的C，C++，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变量初始化一个字符串来建立。它经常使用的方法和Java的string对象差很少。不在赘述，其中可能常常用到的就是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 元素如下元素的祖先。

遍历文档。经过parentNode，firstChild，nextChild，lastChild，prevousSibling等属性能够很轻松的来遍历一个web文档的全部节点。

获取文档中指定的元素。能够经过ID获取，也能够经过名字(name属性)获取。例子：

document.getElementById(“userId”);

document.getElementByName(“userName”)[0];

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

下期预告：《七，搭建JavaWeb的开发环境》

若是想查看更多的技术文档请关注个人微信公众号：ITYaoDao，或者直接扫描下边二维码：