了解 JavaScript （2）- 需要了解的一些概念

Ajax 是什么

Ajax 是一种创建交互式 Web 应用程序的方式。

Ajax 是 Asynchronous JavaScript and XML 缩写（异步的 JavaScript 和 XML），这只是 JavaScript 的一小部分。

Ajax 一般指以下技术的组合：

  • XHTML 或 HTML
  • CSS（Cascading Style Sheet，层叠样式表）
  • 使用 JavaScript 访问 DOM（Document Object Model，文档对象模型）
  • XML 或 JSON，这是服务器和客户端之间传输的格式
  • XMLHttpRequest，用来从服务器获取数据。

Ajax 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。（传统的网页如果需要更新内容，必须重载整个页面）

Ajax 成功案例，新浪微博、Google 地图等。

组合式（snap-together）语言

JavaScript 是一种面向对象（object-oriented）的语言。有些挑剔的程序员认为是基于对象（object-based）的语言。

  • 对象（object），JavaScript 处理的对象都在 Web 浏览器中，如窗口、表单、按钮、复选框等等。
  • 属性（property），JavaScript 中，文档具有标题，表单可以有复选框，改变了对象的属性，就修改了这个对象。
  • 方法（method），如按钮的 click()， 窗口的 open()，文本的 selected()，圆括号表示它们是方法，而不是属性。

将对象、方法和属性组合，由点号分隔，点号语法（dot syntax）。例如：document.write()、forms.elements.radio.click()等

DOM 简介

DOM（Document Object Model） 以树结构表达 HTML 文档。

Firefox 中我们下 DOM Inspector  附加组件，就可以看到网页的树形结构图，如下图：

20150826001

页面的顶级包含在 <html> 标签中，在其中能找到 <body> 和 <head> 标签，而其他标签又会包含在这两个标签之中。

JavaScript 将文档树中的每一项都当做对象，可以使用 JavaScript 来操纵这些对象。用来表示文档中对象的标准模型就称为 DOM。

数中的每个对象也称为数的节点（node）。可以使用 JavaScript 修改树的任何方面，包括添加、访问、修改和删除树上的节点。

如果节点包含 HTML 标签，那么它称为元素节点（element node），否则就是文本节点（text node），当然元素节点可以包含文本节点。

处理事件

事件（event）是用户在访问页面时执行的操作。提交表单和在图像上移动鼠标就是两种事件。

JavaScript 使用事件处理程序（event handler）的命令来处理事件。用户在页面上的操作会触发脚本中的事件处理程序。

下面的表中为最常用的 12 种 JavaScript 事件处理程序。

事件 它处理了什么
onabort 用户终止了页面的加载
onblur 用户离开了对象
onchange 用户修改了对象
onclick 用户单击了对象
onerror 脚本遇到一个错误
onfocus 用户激活了对象
onload 对象完成加载
onmouseover 鼠标移动到对象上
onmouseout 鼠标离开了对象
onselect 用户选择了对象的内容
onsubmit 用户提交了表单
onunload 用户离开了页面

值和变量

JavaScript 中区分大小写。

类型 描述 示例
数字 任何数字值 3.141592654
字符串 引号中的字符 ‘hello world’
布尔值（Boolean） true 或者 false true
空值（null） 空且无含义  
对象 与对象相关联的任何值  
函数 函数返回的值  

操作符

操作符（operator）是用来操作变量的符号。

操作符 作用
x + y（数字） 将 x 和 y 相加
x + y（字符串） 将 x 和 y 拼接在一起
x - y 从 x 中减去 y
x * y 将 x 和 y 相乘
x / y 将 x 除以 y
x % y x 和 y 的模
x++，++x 给 x 加 1
x--,--x 给 x 减 1
-x x 的相反数

赋值和比较

在将一个值放进变量中时，就是将这个值赋给变量，使用等号进行赋值，例如：

hisName = 'Tom';

赋值 操作符

赋值 作用
x = y 将 x 设置成 y 的值
x += y 相当于 x = x + y
x –= y 相当于 x = x - y
x *= y 相当于 x = x * y
x /= y 相当于 x = x / y
x %= y 相当于 x = x % y

比较

常常需要对两个变量的值进行比较。比较操作符完整列表如下：

比较 作用
x == y 如果 x 和 y 相等，返回 true
x === y 如果 x 和 y 完全相等，返回 true
x != y 如果 x 和 y 不等，返回 true
x !== y 如果 x 和 y 完全不相同，返回 true
x > y 如果 x 大于 y，返回 true
x >= y 如果 x 大于等于 y， 返回 true
x < y 如果 x 小于 y，返回 true
x <= y 如果 x 小于等于 y， 返回 true
x && y 如果 x 和 y 都是 true，那么返回 true
x || y 如果 x 或 y 有一个是 true，那么返回 true
!x 如果 x 是 false，那么返回 true

编写对 JavaScript 友好的 HTML

因为将使用 JavaScript 操纵文档中的对象，所以希望以适当的方式编写 HTML，使脚本能够轻松地处理 HTML。

我们要编写现代符合标准的 HTML，并使用 CSS 将文档的结构与它的表现分隔开。JavaScript 也应该放置在外部文档中。按照这种方式，对站点的修改就会很容易，我们的站点将包含下面三种文件：

  • HTML：包含页面的内容和结构。
  • CSS：控制页面的外观和表现。
  • JavaScript：控制页面的行为。

1、<div> 和 <span>

在 HTML 中有两个非常重要的范围标签：<div> 和 <span>。

它们用来将内容划分为语义性（semantic）的块。

<div> 是一个块级（block-level）元素，它与前后元素之间有物理换行。

<span> 是行内的（inline），所以可以将它应用于句子中的一个短语。

2、class 和 id

在 HTML 中，将内容分隔为这些有意义的块。仍然需要标识出那些需要修改其表现或行为的内容片断。为此主要使用两个属性：class 和 id。

CSS 和 JavaScript 都可以利用这些属性定义页面外观和行为。

类（class）标识出可能会多次使用的元素。例如，电影院标题的类，加粗深蓝色：

.movieTitle {
  font: bold 14px;
  color: #000099;
}

页面上每个电影标题都包围在一个 <span> 标签之间，如：

<p>We're currently showing <span class="movieTitle">The Aviator</span> and <span class="movieTitle">The Outlaw</span>.</p>

id 标识出的元素对于文档是唯一的。如果电影院在页面只出现一次，可以使用 id 创建一个样式表，如下：

#theaterName {
  font: bold 28px;
  color: #FF0000;
}

在页面中显示电影院名称时，如下使用：

<h1 id="theaterName">The Raven Theater Presents:</h1>

posted on 2015-08-27 14:36  pchmonster  阅读(817)  评论(0)    收藏  举报

导航