Ajax 是什么

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

AjaxAsynchronous 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>

了解 JavaScript (2)- 需要了解的一些概念的更多相关文章

  1. javascript高级编程笔记02(基本概念)

    ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字 ...

  2. [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...

  3. Javascript本质第一篇:核心概念

    很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...

  4. 【javascript基础】1、基本概念

    前言 最近迷茫了一段时间,不知道应该从何处开始学习前端知识,好像这种状态已经持续了一年了,天天也在看前端的东西,但是记住的多少或者说在脑中一团糟,没有什么清晰的概念.最近加入了jQuery源码交流群( ...

  5. 理解javascript的caller,callee,call,apply概念

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[ ...

  6. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

  7. JavaScript面向对象当中的几个概念

    JS面向对象过程中的几个概念 前言 面向对象描述的是一种代码组织解构的形式,一种在软件中对真实世界中问题领域的建模方法. 下面将从理论层面来介绍下面向对象编程中一些常见的概念. 对象 所谓对象,本质上 ...

  8. Javascript DOM基础(一)概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  9. JavaScript高级程序设计学习笔记--基本概念

    1.语句 ECMAScript中的语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾,如下例所示: var sum=a+b //即使没有分号也是有效的语句--推荐 var diff=a-b; ...

  10. javascript中对象函数继承的概念

    什么是函数对象?这个对象既是通常意义上的对象,又可以加上括号直接执行的函数. 产生函数对象的方式有两种:1.通过function关键字产生:var fn = function(){};2.实例化Fun ...

随机推荐

  1. 【python】中文提取,判断,分词

    参考: http://www.cnblogs.com/kaituorensheng/p/3595879.html https://github.com/fxsjy/jieba 判断是否包含中文 def ...

  2. java 动态代理(类型信息)

    代理是基本的设计模式之一它为你提供额外的或不同的操作,而插入的用来代替"实际"对象的对象. package typeinfo; //: typeinfo/SimpleProxyDe ...

  3. PHP替换指定字符串

    在PHP中,有两个函数可以实现字符串替换,strtr()和str_repalce()函数. 首先我们简单了解下strtr()函数的定义及语法. strtr:转换指定字符. 两个语法: 第一种语法: s ...

  4. Linux权限命令

    Linux 基础——权限管理命令chmod   一.Linux中的文件权限与目录权限 Linux中定义了3种访问权限,分别是r.w.x.其中r表示对象是可读的,w表示对象是可写的,x表示对象是可执行的 ...

  5. JavaScript中函数的继承

    大多OOP语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠 原型链 来实现. 1.原型链 基本思想 ...

  6. CDH搭建Hadoop集群(Centos7)

    一.说明 节点(CentOS7.5) Server  || Agent CPU node11 Server  || Agent 4G node12 Agent 2G node13 Agent 2G 二 ...

  7. canvas扩散圆环

    最近看了很多牛的动画,想想自己的canvas的确很菜. 公式在那里,但是不是太会套.找demo发现都是很难的 于是找了个简单的效果 圆环从中间扩散的效果 关键是 globalCompositeOper ...

  8. zjoi 小星星

    题解: dp很容易想 f[i][j][s]表示匹配到了i点 对应点为j点,状态为s 那么这样的时间复杂度为(3^n*n^2) 然后会发现这其实可以转化为可以重复利用元素的子集卷积 http://www ...

  9. poj 2155(未完成)

    线段树套线段树模板题 链接:http://poj.org/problem?id=2155 题解: 代码: #include <bits/stdc++.h> using namespace ...

  10. java:合并两个排序的整数数组A和B变成一个新的数组。新数组也要有序。

    合并两个排序的整数数组A和B变成一个新的数组.新数组也要有序. 样例 1: 输入: A=[1], B=[1] 输出:[1,1] 样例解释: 返回合并后的数组. 样例 2: 输入: A=[1,2,3,4 ...