了解 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 附加组件，就可以看到网页的树形结构图，如下图：
页面的顶级包含在 <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）- 需要了解的一些概念的更多相关文章
- javascript高级编程笔记02(基本概念)
ParseInt()函数: 由于Number函数在转换字符串时比较复杂而且不合理,我们常常转换字符串都用parseInt函数, Parseint函数规则: 忽略字符串前面的空格,直到找到第一个非空格字 ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...
- Javascript本质第一篇：核心概念
很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...
- 【javascript基础】1、基本概念
前言 最近迷茫了一段时间,不知道应该从何处开始学习前端知识,好像这种状态已经持续了一年了,天天也在看前端的东西,但是记住的多少或者说在脑中一团糟,没有什么清晰的概念.最近加入了jQuery源码交流群( ...
- 理解javascript的caller,callee,call,apply概念
在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[ ...
- javascript高级编程笔记01(基本概念)
1.在html中使用JavaScript 1. <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...
- JavaScript面向对象当中的几个概念
JS面向对象过程中的几个概念 前言 面向对象描述的是一种代码组织解构的形式,一种在软件中对真实世界中问题领域的建模方法. 下面将从理论层面来介绍下面向对象编程中一些常见的概念. 对象 所谓对象,本质上 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- JavaScript高级程序设计学习笔记--基本概念
1.语句 ECMAScript中的语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾,如下例所示: var sum=a+b //即使没有分号也是有效的语句--推荐 var diff=a-b; ...
- javascript中对象函数继承的概念
什么是函数对象?这个对象既是通常意义上的对象,又可以加上括号直接执行的函数. 产生函数对象的方式有两种:1.通过function关键字产生:var fn = function(){};2.实例化Fun ...
随机推荐
- PHP实现的简单组词算法
?php //组词算法 function diyWords($arr,$m){ $result = array(); if ($m ==1){//只剩一个词时直接返回 return $arr; } i ...
- 使用@property - 廖雪峰的官方网站
使用@property 阅读: 20616 在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9 ...
- 性能测试三十三：监控之Linux系统监控命令大全
1.top命令top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top - 01:06:48 up 1: ...
- hihocoder 1342 Full Binary Tree Picture【完全二叉树】
转自http://www.jianshu.com/p/e37495f72cf6 hihocoder 1342 解释:题目描述了一种用ASCII码绘制的满二叉树,然后将树的根设置在一个特殊坐标轴的原点( ...
- [HNOI2010]CITY 城市建设
问题: 给一张图,支持边长度修改,求MST 题解: 自己想就想不到了.. 考虑cdq分治 1.首先求出一定有用的边 对于未处理的边,全部设为-INF,求一次MST,出现在MST上的边一定最终出现在后面 ...
- [解决]IP地址非法，请接入联通热点后重新获取
在使用联通chinaunicom WLAN上网时,在弹出的登陆界面后输入账号.密码,点登陆,显示IP地址非法,请接入联通热点后重新获取.现在在其他地方看到解决办法连接chinaunicom,弹出登陆界 ...
- Java相关英语单词
day1 Java概述 掌握 .JDK abbr. Java开发工具包(Java Developer's Kit) (abbr.缩写) .JRE abbr. Java运行环境(Java Runtime ...
- ACM题目中的时间限制与内存限制 复杂度的估计
运行时限为1s,这很常见,对于该时限,我们设计的算法复杂度不能超过百万级别,即不要超过一千万.假如你的算法时间复杂度为O(n^2),则n不应该大于3000 空间限制是32MB,即你程序中申请的内存不能 ...
- cookie、sesion
关于保存问题 如果高并发不多的话可以保存session 否则用cookie吧,session可以保存到其他服务器哦,比如其他服务器的redis memacache(没有持久化,崩了登录信息就全没了) ...
- Java动态追踪技术探究
引子 在遥远的希艾斯星球爪哇国塞沃城中,两名年轻的程序员正在为一件事情苦恼,程序出问题了,一时看不出问题出在哪里,于是有了以下对话: “Debug一下吧.” “线上机器,没开Debug端口.” “看日 ...