培训讲义
一.讲义内容
1.本次培训要求介绍
2.Ajax概念
3.Javascript(ECMAScript/ECMA-262) 开发简介
4.CSS (Cascading Style Sheets/层叠样式表单）开发简介
5.DOM (Document Object Model/文档对象模型）开发简介
6.XMLHttpRequest对象介绍
7.本节培训考核内容介绍
8.Q&A
二.训要本次培求介绍
1.本次培训主要正对对象为Junior Engineer
2.提高开发人员对Ajax的认识
3.提高开发人员的Javascript的开发能力
4.本次培训的主要目的在于提高Ajax的认识
三.概述
目前AJAX开发技术已经被越来越多的使用，大部分WEB的项目都有会不同程度的涉及到AJAX，对于AJAX地认识需要开发人员透过问题的表面现象，去了解其中的实质内容，这样才能进一步提高开发能力和问题的处理能力。
作为开发人员，需要了解AJAX的关键基础，本次培训是针对AJAX 的技术基础做出讲解。
四.Ajax概念
1.Ajax 出现的目的
减少页面刷新的数据流量
提高页面的响应速度
改善界面的操作特性
2.什么是Ajax
Asynchronous JavaScript + XML（异步JavaScript+XML）
3.Ajax优势
异步的方式交互数据
避免的页面的整体刷新
减少网络交互的数据流量，提高响应速度
改善了用户的使用体验
4.Ajax的技术基础
Javascript (ECMAScript)
CSS (Cascading Style Sheets/层叠样式表单）
DOM (Document Object Model/文档对象模型）
XMLHttpRequest对象
五.Javascript(ECMAScript/ECMA-262)
1.Javascript 的历史
Javascript从LiveScript 发展而来
Netscape 2.0 后支持Javascript(1996.3 )
Internet Explorer 3.0 后支持与”JavaScript 类似“的Jscript(1996.8)
ECMAScript 是由ECMA-262标准化的脚本语言的名称。(1997.6)
JavaScript和JScript与ECMAScript兼容，但包含超出ECMAScript的功能。
欧洲计算机制造商协会发表了ECMA-357标准，它是ECMAScript的一个扩延，它也被称为E4X（ECMAScript for XML）(2004.6)
许多网页浏览器支持ECMAScript
2.Javascript 的特点
Javascript 是脚本解析语言
Javascript 是轻量级的编成语言
Javascript 常常内嵌于网页中
Javascript 的主要作用是与Html交互
JavaScript不同于Java
3.Javascript 的语言特性(Client-Side JavaScript )
3.1.弱类型(动态类型)
变量不需要明确声明，同一个变量可以接受不同类型的赋值
代码不需要预先变异，源代码本身可以执行
代码内嵌于Html中进行解析运行
3.3.对象化编程 (prototypal language )
所谓“对象化编程”，是把 JavaScript 所处理的内容划分成不同的对象，对象内部还可以继续划分，整个编程结构都以对象为出发点，基于对象。
变量，浏览器，表单控件都被以对象的方式进行处理
每个对象有它自己的属性、方法和事件,但是不是所有的对象都有这三个性质，有些没有事件，有些没有属性
4.1.大小写敏感
关键字、变量、函数名称、以及其他标识符时，必须保持一致的大小写形式 。
html不区分大小写，标签和属性可以任意使用大小写
4.2.分号或换行划分语句
正常情况使用带有分号用于分隔语句，如果语句放置在不同的行中，分号可以省略。
javascript会在换行符前一行结尾处插入分号，使换行符前一行成为一个单独的语句。如果换行符插入的地方并未结束一个单独的语句，就会造成异常
4.3.变量的命名规则
变量名的第一个字母不能是数字,但是可以为下划线符号符号(underscore)_ ,$
4.4.1全局，局部
Javascript 提供有算术，逻辑， 赋值运算符
对于“+” 运算符 具备有字符串连接和数字加法运算的功能
函数创建方式：定义方式 和 附加的方式
函数参数设定为形势参数，可以按照需要定义函数参数表
对象内部的函数可以被设定为私有
Javascript 基于对象的基本特征，采用事件驱动(event-driven)。使得在Html 页面环境中，对于动作的响应简单化。
Client-Side JavaScrip 主要的事件时整对于浏览器和表单控件的各种动作响应
对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样
在处理中对于事件处理的方式有：附加于对象的事件
行内部嵌套
页面内部包含
外部文件包含
六.CSS (Cascading Style Sheets/层叠样式表单）
6.1.CSS的作用
是一种为HTML提供增强补充服务的技术，可对每一个HTML的置标(tag)做补充修饰
提供了将页面的样式修饰功能于HTML分离的功能
丰富了HTML的表现形势
6.2.CSS的语法特性
6.2.1.CSS的定义是由三个部分构成：
选择符（selector）
属性（properties）
属性的取值（value）
6.2.2.基本格式如下 ：selector { property: value}
6.2.3.定义方式
单一定义 ：body { color: black}
按组定义：h1, h2{ color: green }
按类定义：table.TypeA { text-align: right}
.TypeB{ text-align: center}
按ID定义：#TypeIDA{background-color:transparent}
包含方式定义：table a{font-size: 12px}
基于伪selector 定义：*.first-letter{color:red} a:hover:{color:yellow;}
6.2.4.使用方式
行内部嵌套
页面内部包含
外部文件包含
七.DOM(Document Object Model/文档对象模型）
7.1.DOM的作用
DOM是能够提供透明的文档结构，可以通过编程的方式处理该文档结构
Web页面中可以通过DOM表示，由对应的元素和节点构成
在Web页面中，通过Javascript内嵌的对象模型可以访问web上的全部信息
7.2.编程操作DOM
7.2.1.查询DOM对象
通过节点ID访问对象(节点必须已经指定过唯一的ID名）
通过节点遍历的方式访问(如果对于节点没有设定ID名）
对于可访问节点，可以所属的Javascript对象模型进行操作
可以修改节点的属性内容（必须是对应节点具备的属性）
可以在节点中创建新的节点内容（添加新的html tag 内容）
通过innerHTML使用文本内容的方式修改节点所包含的内容
八.XMLHttpRequest对象
8.1.XMLHttpRequest的作用
提供了异步的方式取得数据
XMLHttpRequest对象不是Web浏览器标准的DOM扩展，不同的浏览器有不同的支持方式
XMLHttpRequest在不同的浏览器的浏览其中创建方式不同
XMLHttpRequest 提供了不同的事件和属性来响应处理（如：onreadystatechange）
九.Q&A
9.1.Ajax的特点?
9.2.Javascript的语言特性?
9.3.异步处理的关键?
9.4.Others?
十.本节培训考核内容介绍
1.针对与本次培训的内容，本次考核的要求如下：
每个人提交一个简单的XMLHttpRequest 数据请求显示数据的Html Page
2.开发的内容为：
从一个指定文本文件中读取信息，每行150个字符，每一行表示一条记录,文件格式：
1-5 :ID,
6-30 :UserName;
31-38:UserBirthday；
39-90:UserEmail;90-190:Discription
将文档中的内容显示出来
3.开发使用语言：JavaScript
4.开发要求：独立完成，完成内容：程序代码，必须在多浏览器下可以使用
1.本次培训要求介绍
2.Ajax概念
3.Javascript(ECMAScript/ECMA-262) 开发简介
4.CSS (Cascading Style Sheets/层叠样式表单）开发简介
5.DOM (Document Object Model/文档对象模型）开发简介
6.XMLHttpRequest对象介绍
7.本节培训考核内容介绍
8.Q&A
二.训要本次培求介绍
1.本次培训主要正对对象为Junior Engineer
2.提高开发人员对Ajax的认识
3.提高开发人员的Javascript的开发能力
4.本次培训的主要目的在于提高Ajax的认识
三.概述
目前AJAX开发技术已经被越来越多的使用，大部分WEB的项目都有会不同程度的涉及到AJAX，对于AJAX地认识需要开发人员透过问题的表面现象，去了解其中的实质内容，这样才能进一步提高开发能力和问题的处理能力。
作为开发人员，需要了解AJAX的关键基础，本次培训是针对AJAX 的技术基础做出讲解。
四.Ajax概念
1.Ajax 出现的目的
减少页面刷新的数据流量
提高页面的响应速度
改善界面的操作特性
2.什么是Ajax
Asynchronous JavaScript + XML（异步JavaScript+XML）
3.Ajax优势
异步的方式交互数据
避免的页面的整体刷新
减少网络交互的数据流量，提高响应速度
改善了用户的使用体验
4.Ajax的技术基础
Javascript (ECMAScript)
CSS (Cascading Style Sheets/层叠样式表单）
DOM (Document Object Model/文档对象模型）
XMLHttpRequest对象
五.Javascript(ECMAScript/ECMA-262)
1.Javascript 的历史
Javascript从LiveScript 发展而来
Netscape 2.0 后支持Javascript(1996.3 )
Internet Explorer 3.0 后支持与”JavaScript 类似“的Jscript(1996.8)
ECMAScript 是由ECMA-262标准化的脚本语言的名称。(1997.6)
JavaScript和JScript与ECMAScript兼容，但包含超出ECMAScript的功能。
欧洲计算机制造商协会发表了ECMA-357标准，它是ECMAScript的一个扩延，它也被称为E4X（ECMAScript for XML）(2004.6)
许多网页浏览器支持ECMAScript
2.Javascript 的特点
Javascript 是脚本解析语言
Javascript 是轻量级的编成语言
Javascript 常常内嵌于网页中
Javascript 的主要作用是与Html交互
JavaScript不同于Java
3.Javascript 的语言特性(Client-Side JavaScript )
3.1.弱类型(动态类型)
变量不需要明确声明，同一个变量可以接受不同类型的赋值
1 Var age = 26; //数字
2 age = ‘My Birthday is 11,11’; //字符串
3 age = new ClassA(); //对象
3.2.解释型2 age = ‘My Birthday is 11,11’; //字符串
3 age = new ClassA(); //对象
代码不需要预先变异，源代码本身可以执行
代码内嵌于Html中进行解析运行
3.3.对象化编程 (prototypal language )
所谓“对象化编程”，是把 JavaScript 所处理的内容划分成不同的对象，对象内部还可以继续划分，整个编程结构都以对象为出发点，基于对象。
变量，浏览器，表单控件都被以对象的方式进行处理
每个对象有它自己的属性、方法和事件,但是不是所有的对象都有这三个性质，有些没有事件，有些没有属性
String 字符串对象。声明一个字符串对象最简单、快捷、有效、常用的方法就是直接赋值。
属性
length 用法：<字符串对象>.length；返回该字符串的长度。
方法
substring() 用法：<字符串对象>.substring(<始>[, <终>])；
返回原字符串的子字符串，该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。
3.3.1Client-Side JavaScript 中的核心对象属性
length 用法：<字符串对象>.length；返回该字符串的长度。
方法
substring() 用法：<字符串对象>.substring(<始>[, <终>])；
返回原字符串的子字符串，该字符串是原字符串从<始>位置到<终>位置的前一位置的一段。
Array,Boolean, Date,
Function, Math, Number, Object, String
3.3.2Client-Side JavaScript 附加的客户端对象有Function, Math, Number, Object, String
Document, Window, Location, navigator ,event, History,Option, Plugin
Anchor, Area, Button, Checkbox, FileUpload, Form, Frame, Hidden, Image,Layer,Link,MimeType, Password, Radio, Reset, screen, Select, Submit, Text, Textarea,
4.Javascript 的语法特性Anchor, Area, Button, Checkbox, FileUpload, Form, Frame, Hidden, Image,Layer,Link,MimeType, Password, Radio, Reset, screen, Select, Submit, Text, Textarea,
4.1.大小写敏感
关键字、变量、函数名称、以及其他标识符时，必须保持一致的大小写形式 。
html不区分大小写，标签和属性可以任意使用大小写
4.2.分号或换行划分语句
正常情况使用带有分号用于分隔语句，如果语句放置在不同的行中，分号可以省略。
javascript会在换行符前一行结尾处插入分号，使换行符前一行成为一个单独的语句。如果换行符插入的地方并未结束一个单独的语句，就会造成异常
4.3.变量的命名规则
变量名的第一个字母不能是数字,但是可以为下划线符号符号(underscore)_ ,$
if(typeof $=='undefined')$=function ()
{
alert("Hello World");
};
$();
4.4.变量的作用域{
alert("Hello World");
};
$();
4.4.1全局，局部
var str="All"
if(typeof $=='undefined')$=function (a,b){
var strA="A of $"
strB="B of $"
alert(strA); alert(strB);
};
$()
if(typeof strA=='undefined')
alert('undefined');
else
alert(strA);
if(typeof strB=='undefined')
alert('undefined');
else
alert(strB);
4.4.2.对象内部私有，对象属性，对象实例if(typeof $=='undefined')$=function (a,b){
var strA="A of $"
strB="B of $"
alert(strA); alert(strB);
};
$()
if(typeof strA=='undefined')
alert('undefined');
else
alert(strA);
if(typeof strB=='undefined')
alert('undefined');
else
alert(strB);
function ClassOne(name) {
var strClassInformation='Empty' + name;
this.ClassName = name;
this.ToString = function() {
return "Class Name is :" +this.ClassName;
}
}
var classA = new ClassOne('A');
alert(typeof(classA));
alert(classA.ClassName);
alert(classA.ToString());
if(typeof ClassOne.strClassInformation=='undefined')
alert('undefined strClassInformation');
else
alert(ClassOne.strClassInformation);
4.3.运算符var strClassInformation='Empty' + name;
this.ClassName = name;
this.ToString = function() {
return "Class Name is :" +this.ClassName;
}
}
var classA = new ClassOne('A');
alert(typeof(classA));
alert(classA.ClassName);
alert(classA.ToString());
if(typeof ClassOne.strClassInformation=='undefined')
alert('undefined strClassInformation');
else
alert(ClassOne.strClassInformation);
Javascript 提供有算术，逻辑， 赋值运算符
对于“+” 运算符 具备有字符串连接和数字加法运算的功能
alert(1+2);
alert("1"+2);
alert("1"+"2");
alert("1+2="+1+2+".")
alert("1+2="+(1+2)+".")
4.4.函数alert("1"+2);
alert("1"+"2");
alert("1+2="+1+2+".")
alert("1+2="+(1+2)+".")
函数创建方式：定义方式 和 附加的方式
函数参数设定为形势参数，可以按照需要定义函数参数表
对象内部的函数可以被设定为私有
var FunctionOne = function(arr1){
alert(arr1);
paraLength =FunctionOne.arguments.length;
}
function FunctionTwo(arr1,arr2,arr3,arr4){
alert(arr1);
alert(arr2);
alert(arr3);
alert(arr4);
}
FunctionTwo(0,1,2);
FunctionOne(0,1);
alert("FunctionOne:"+paraLength);
4.5.事件alert(arr1);
paraLength =FunctionOne.arguments.length;
}
function FunctionTwo(arr1,arr2,arr3,arr4){
alert(arr1);
alert(arr2);
alert(arr3);
alert(arr4);
}
FunctionTwo(0,1,2);
FunctionOne(0,1);
alert("FunctionOne:"+paraLength);
Javascript 基于对象的基本特征，采用事件驱动(event-driven)。使得在Html 页面环境中，对于动作的响应简单化。
Client-Side JavaScrip 主要的事件时整对于浏览器和表单控件的各种动作响应
对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样
在处理中对于事件处理的方式有：附加于对象的事件
<body onload="alert('onload 1');">
<script language="JavaScript">
window.onload = function(){
alert('onload 2');
}
</script>
</body>
5.Javascript 的使用方式<script language="JavaScript">
window.onload = function(){
alert('onload 2');
}
</script>
</body>
行内部嵌套
页面内部包含
外部文件包含
六.CSS (Cascading Style Sheets/层叠样式表单）
6.1.CSS的作用
是一种为HTML提供增强补充服务的技术，可对每一个HTML的置标(tag)做补充修饰
提供了将页面的样式修饰功能于HTML分离的功能
丰富了HTML的表现形势
6.2.CSS的语法特性
6.2.1.CSS的定义是由三个部分构成：
选择符（selector）
属性（properties）
属性的取值（value）
6.2.2.基本格式如下 ：selector { property: value}
6.2.3.定义方式
单一定义 ：body { color: black}
按组定义：h1, h2{ color: green }
按类定义：table.TypeA { text-align: right}
.TypeB{ text-align: center}
按ID定义：#TypeIDA{background-color:transparent}
包含方式定义：table a{font-size: 12px}
基于伪selector 定义：*.first-letter{color:red} a:hover:{color:yellow;}
6.2.4.使用方式
行内部嵌套
页面内部包含
外部文件包含
七.DOM(Document Object Model/文档对象模型）
7.1.DOM的作用
DOM是能够提供透明的文档结构，可以通过编程的方式处理该文档结构
Web页面中可以通过DOM表示，由对应的元素和节点构成
在Web页面中，通过Javascript内嵌的对象模型可以访问web上的全部信息
7.2.编程操作DOM
7.2.1.查询DOM对象
通过节点ID访问对象(节点必须已经指定过唯一的ID名）
通过节点遍历的方式访问(如果对于节点没有设定ID名）
对于可访问节点，可以所属的Javascript对象模型进行操作
<div id="content">
<script type='text/javascript'>
window.onload=function(){
var obj=document.getElementById("content");
obj.innerHTML ="Hello world";
var objChild = document.createElement("div");
objChild.innerHTML ="Hello world =2";
obj.appendChild(objChild);
}
</script>
7.2.2.节点操作<script type='text/javascript'>
window.onload=function(){
var obj=document.getElementById("content");
obj.innerHTML ="Hello world";
var objChild = document.createElement("div");
objChild.innerHTML ="Hello world =2";
obj.appendChild(objChild);
}
</script>
可以修改节点的属性内容（必须是对应节点具备的属性）
可以在节点中创建新的节点内容（添加新的html tag 内容）
通过innerHTML使用文本内容的方式修改节点所包含的内容
<div id="content">
<script type='text/javascript'>
window.onload=function(){
var obj=document.getElementById("content");
obj.innerHTML ="Hello world";
var objChild = document.createElement("div");
objChild.innerHTML ="Hello world =2";
obj.appendChild(objChild);
}
</script>
<script type='text/javascript'>
window.onload=function(){
var obj=document.getElementById("content");
obj.innerHTML ="Hello world";
var objChild = document.createElement("div");
objChild.innerHTML ="Hello world =2";
obj.appendChild(objChild);
}
</script>
八.XMLHttpRequest对象
8.1.XMLHttpRequest的作用
提供了异步的方式取得数据
XMLHttpRequest对象不是Web浏览器标准的DOM扩展，不同的浏览器有不同的支持方式
XMLHttpRequest在不同的浏览器的浏览其中创建方式不同
function createXmlHttpRequest(){
var req = null;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
return req;
}
XMLHttpRequest对象通过XMLHttpRequest 可以避免使用iframe的方式进行数据请求var req = null;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
return req;
}
XMLHttpRequest 提供了不同的事件和属性来响应处理（如：onreadystatechange）
var req = createXmlHttpRequest;
if (req) {
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.send(null);
}
function processStateChange(){
var ready=req.readyState;
if (ready==READY_STATE_COMPLETE){
..;
}
}
if (req) {
req.onreadystatechange = processStateChange;
req.open("GET", url, true);
req.send(null);
}
function processStateChange(){
var ready=req.readyState;
if (ready==READY_STATE_COMPLETE){
..;}
}
九.Q&A
9.1.Ajax的特点?
9.2.Javascript的语言特性?
9.3.异步处理的关键?
9.4.Others?
十.本节培训考核内容介绍
1.针对与本次培训的内容，本次考核的要求如下：
每个人提交一个简单的XMLHttpRequest 数据请求显示数据的Html Page
2.开发的内容为：
从一个指定文本文件中读取信息，每行150个字符，每一行表示一条记录,文件格式：
1-5 :ID,
6-30 :UserName;
31-38:UserBirthday；
39-90:UserEmail;90-190:Discription
将文档中的内容显示出来
3.开发使用语言：JavaScript
4.开发要求：独立完成，完成内容：程序代码，必须在多浏览器下可以使用
