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 附加组件,就可以看到网页的树形结构图,如下图:
页面的顶级包含在 <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>