南师大教育技术学考研笔记_Web程序设计·New

1）URL（统一资源定位技术）：URL，统一资源定位符，通过定义资源位置的抽象标识来定位网络资源。E.g. http://www.edu.cn:80/index.asp包含了http和www，3者什么关系？http是通信协议，所有html文件的发布和接收要按http协议的标准来；www表示基于超文本方式进行信息查询服务，www.edu.cn是主机名，80是端口号，后面是文件及其路径。

2）HTTP（超文本传输协议）：HTTP允许将HTML文档从Web服务器传送到Web浏览器，采用客户机/服务器（C/S）结构，定义了2者会话的规则，建立在TCP/IP之上，属应用层。

3）HTML（超文本标记语言）；4）Browser（浏览器）

3. Web高级技术

1）CGI（通用网关接口）；2）Applet：采用Java语言编写的应用小程序，可嵌入Web页面中；3）JavaScript：一种基于对象和事件驱动并具有相对安全性的客户端脚本语言；4）Servlet （运行在服务器端）& JSP & ASP & PHP；5）Flash。

4. WWW的新发展

1. DHTML：Dynamic HTML，动态HTML，结合了HTML、CSS、JavaScript和DOM等技术，可以动态地修改Web页面的内容和结构。

2. XML：可扩展标记语言，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。

3. AJAX：异步JavaScript和XML，拥有2大性能：1）无需重新装载整个页面便能向服务器发送请求；2）对XML文档进行解析和处理。

三、Web应用开发的需求与方法

1. 静态页面 & 动态页面 & 活动页面

静态网页是存储于服务器端的文件，内容是固定不变的；动态页面是在浏览器访问Web服务器时由Web服务器创建的；活动页面，在传统HTML文档的基础上，加入Applet、VBScript、ActiveX控件、Flash等活动元素。

2. Web应用程序的架构

1）C/S架构：数据库位于服务器，客户端应用提供了与用户交互的界面，并包含了对服务器上的数据进行操作的逻辑规则。

2）3层架构：分为表示层、功能层和数据层；客户机位于表示层，应用服务器位于业务逻辑层，数据库服务器位于数据层。

3）B/S架构：最大优势在于将应用程序部署在Web上，能创建跨平台的应用，避免多次创建和分发同一个软件的多个版本。

第2章网站策划设计与服务器架设管理

一、网站设计的总流程

初始会商 à概念开发 à内容综合 àHTML布局和导航 à媒体制作 à内容整合 à网络测试 à 交付 à ……（周而复始）

二、网站策划

1）建立网站前的市场分析 à2）网站目的及功能定位 à3）确定技术解决方案（服务器/域名/操作系统/安防/技术方案） à4）网站内容规划 à5）网页设计 à 6）网站测试 à7）网站发布与推广 à8）网站维护 à9）网站建设日程表 à10）费用明细

三、网站设计

1. CI形象设计：Logo·网站主色调·标准字体·宣传标语（适合网页标准的色系：蓝色·黄/橙色·黑/灰/白色）。

2. 总体结构设计：目录结构·逻辑结构。

3. 版面设计：正常平衡 & 异常平衡 & 对比 & 凝视 & 空白 & 线条和符号 ……

4. 色彩设计：统一与变化 & 秩序与多样性

5. 导航设计

6. 信息可用性设计：文字列表 & 图片呈现 & 图文结合 & 迷你块

四、网站安全

1. 网站安全威胁：信息截取、内部窃密和破坏、黑客、技术缺陷、计算机病毒、拒绝服务攻击（利用大量非正常的请求并拒绝服务器所提供的服务来破坏网站的正常运行，可导致部分Internet连接与网络通信终端）。

2. 防范策略：操作系统安全、加密、防火墙、安全认证、勤于备份等。

PS：防火墙，用于Internet接入和专用网与公用网之间的安全连接，包括病毒防火墙、包过滤防火墙、应用网关防火墙和代理服务器。

五、IIS的安装与配置：互联网信息服务，一种Web服务组件。

六、Apache的安装与配置

七、Tomcat的安装与配置

第3章 HTTP协议及其开发与HTML语言基础

一、HTTP协议

1. 概述：HTTP协议，即超文本传输协议，用于从WWW服务器传输超文本到本地浏览器的传输协议。

2. 工作原理：基于“请求/响应”范式。2大特点：1）无连接，即每次连接只处理一个请求，确认完成后断开连接；2）无状态，即对于事务处理没有记忆能力，每次请求都是独立的。

3. 协议基础

信息交换的过程分4步：建立连接（申请套接字，在服务器上建立虚拟文件）、发送请求信息、发送响应信息和关闭连接。

4. HTTP应用开发方法

1）HTTP客户端程序：Web浏览器 & 文件下载程序 & Web机器人。

2）HTTP服务器程序：HTTP服务器或HTTP代理。

3）服务器端应用程序：根据用户提交的信息实时生成响应。

二、HTML基础

1. HTMl概述

1）超文本：一种信息管理方式，本质含义是非线性的文章组织方式，采用了符合人脑思维模式的联想机制对庞大的信息资源进行索引的一种非线性结构（超文本即“超级练级+文本”）。

2）超媒体：即超文本+多媒体。

3）HTML：超文本标记语言。

1）标签及其属性：单标签·双标签·属性；

2）在<和标签名之间没有空格；

3）字符引用：A. 数值字符引用 B. 字符实体引用（以&开始，以; 结束）；

TM 商标 ™ 空格  

5）注释：；

6）HTML的Header：meta标签，单标签，可分为2部分，HTTP标题信息（HTTP-EQUIV）和页面描述信息。

HTTP标题信息：<META http-equiv =”Class” content=”内容”>

显示字符集：<META http-equiv=”content-type” content=”text/html;charest=GB2132”>

刷新：< META http-equiv=”refresh” content=”30”>

期限：< META http-equiv=”expires” content =”Wed,26 Feb 1998 08:23:38 GMT”>

Cookie设置：< META http-equiv=”set-cooie” content=”cookievalue=***,expiers= Wed,26 Feb 1998 08:23:38 GMT;path=/”>

页面信息描述：< META name=”Keywords/Description/Robots/Author/Copytright” content=”内容”>

常用的颜色对照表

白色 225 225 225 #FFFFFF

黑色 0 0 0 #000000

红色 255 0 0 #FF0000

绿色 0 255 0 #00FF00

蓝色 0 0 255 #0000FF

青色 0 255 255 #00FFFF

深红色 255 0 255 #FF00FF

黄色 255 255 0 #FFFF00

三、HTML的基本语法

1. 标题和段落

1）H1~H7，N越大，字号越小；有align属性；2）<p>可以看做2个强制换行符<br>；

3）显示预排格式标签<PRE>；4）<HR align, size, width, color(,noshade)>水平线

2. 文字标签（FONT）

size（1-7），face，color；<B><I><U><STRIKE（删除线）><SUB><SUP><BIG><SMALL>

3. 列表

1）无序列表：<ul><li></ul>，li和ul都有type属性，规定项目样式；

2）有序列表：<ol><li></ol>，亦可以在ol或li的type属性设置样式；

3）定义列表：<DL><DT><DD></DL>，分级缩进。

4. 超链接

1）锚点标签：name和href不能同时使用，name只作为锚链接的标志；

2）相对地址：“../”代表退回上一级目录；“#name”代表本页的链接；

3）电子邮件：href = “mailto:mfc36@qq.com”

5. 表格

1）<TH>即表头，按粗体显示，可看成特殊的<td>；

2）<TABLE>的属性集：border，width，height，cellspacing，cellpadding，background，bodercolor，align；

3）<CAPTION align, align>给表格加标题，嵌在<TABLE></TABLE>里面；

4）跨多行跨多列的表项：<TR><TD><TH>都有colspan和rowspan属性；

5）表格的分组显示：<TABLE><THEAD></THEAD><TFOOT></TFOOT><TBODY><TBODY></TABLE>

<THEAD><TBODY><TFOOT>可以是单标签；

<TD><TH><TR><COL><COLGROUP>具有align属性（center，left，right，justify）和valign属性（top，bottom，middle，baseline）（COL和COLGROUP用于给一次性改变多列的属性）

6. 图像

1）常用格式：gif（256种颜色，可制作透明，隔行和动画效果）和jpeg。

2）<IMG scr，alt，width，height，border，hspace，vspace，align clear>

3）文本和图片的混排：align：top| middle| bottom | left| right

4）图片上的热区：<IMG src, usename=”#iname”. ..>

<MAP name=”iname”><AREA sharp, cords, href></MAP>

5）网页背景：<body bgcolor=red> || <body background = i.jpg>

第4章 HTML高级应用及编辑工具

一、框架

1. 建立框架：<frameset><frame src=..><frame src..></frame></frame></frameset>;

2. 设置框架属性：

3. 框架中的链接：target的4个特殊操作值——_blank（在新的浏览器窗口打开），_self（在当前窗口打开），_top（在整个浏览器窗口打开），_parent（在父窗口打开）。

二、表单

表单架构：<form action,method><input>……</form>；

name：表单的标识；

action：表单处理的方式，一般是网址或者E-mail地址；

method：表单数据的传送方向，get或post；

input的常用属性：type，name，size，maxlength等，且为单标签。

1. 文字与密码框：<input type=text/password name=…>，其中name作为标识符；

2. 按钮（重置和提交）<input type=button/reset/submit value=btn_name>

3. 复选框和单选按钮<type=checkbox/radio name=_name value=-value (checked)>，同组的按钮name一致；

4. 选择栏：<select size, name, multiple> <option select, value></select>，其中select的size取1时，即为下拉列表框，multiple出现表示可多选，option的select属性表示预选；

5. 文本域：<textarea name=_name，rows=x，cols=y></textarea>，其中rows和cols表示不加滚动条的情况下可见的行和列。

6. 关于表单的设计

<div align = center><h1>填写个人资料</h1></div>

性别：<input type = "radio" name = "xb" value = "male" checked > 男

<input type = "radio" name = "xb" value = "female"> 女   

出生年月：<input type = "text" name = "year" size = "4">年

<input type = "text" mane = "month" size = "2">月

<input type = "text" name = "day" size = "2">日

</p> <p>个人爱好：

<input type = "checkbox" name = "hobby" value = "literue">文学 

<input type = "checkbox" name = "hobby" value = "art">艺术 

</p> <p>

学历：<select name = "credential" size = "1">

职称：<select name = "jobclass" size = "3">

</p> </form>

三、脚本

1. 滚动字幕

<marquee align=top/middle/bottom bgcolor, width, height direction=left/right loop=i/-1/infinite behavior=scroll/side/alternate hspace,vspace scrollamount = m scrolldelay=n>…</marquee>，其中loop表示循环的次数，-1或infinite表示无限循环，behavior表示循环的方式（scroll为单向移动，side设置流动文字到达边界停止，alternate设置文字到达彼岸节后反向流动），scrollamount表示字母流动的速度，scrolldelay表示延时。

2. 插入音视频：<bgsound src=musicfile loop=loop_num> | loop取-1或infinite，循环播放。

3. 自动刷新：<meta http-equiv=”refresh” content=”秒数;url=新页面”>

4. 插入Java Applet：

<applet code=”filename.class” codebase=”_path” width, height, name > alt=”…”</applet>；

5. 插入Flash：

<embed src="…/file_name.flv” quality="high" width="32" height="32"></embed> </object>

6. 插入通用对象（OBJECT）

第5章层叠式样式表（CSS）

一、CSS概述

1. CSS概念：DHTML的3要素——支持动态效果的浏览器，脚本语言(javascript, vbscript)和CSS(Cascading Style Sheets)样式表。

2. CSS的优点：

1）浏览器的广泛支持；2）滤镜可轻松实现图片特效，加快了下载速度；3）页面的字体等样式便于管理和编排；4）内容与表现分离，通过更改CSS文件可更改页面风格。

二、添加CSS的方法

1. 内嵌样式：<tag style=”para1:value1; para2:value2;”>content</tag>;

2. 内部样式表：<style type=”text/css”> … … </style>;位于<head>标签内；

3. 链入外部样式表：<link rel=”stylesheet” href=”i.css” type=”text/css”>;

4. 导入外部样式表：<head><style type=”text/css><! -- @import “i.css” --></style></head>;

5. 优先级：内嵌样式 > 内部样式表 > 导入外部样式表（链入的外部样式表 & 内部样式表：最后定义的优先级更高）。

三、CSS的的语法

1. 选择符：CSS包括选择符（selector），属性（properties）和属性（value）的取值。

1）标签选择符；

2）类选择符：E.g. p.right{text-align:right} .center{text-align:center}；

3）ID选择符：#intro{…}；

4）选择符的组合：A.选择符组 E.g. h1,h2,h3{color:red}；B.包含选择符 E.g. table a{font:32px}

PS：样式表的层叠性，即继承性，指外部的元素样式继承给给元素所包含的其他元素，即所嵌套在元素中的元素都会继承外层元素以指定的属性值。另外当样式表继承冲突时，以最后定义的样式为准。

PS：优先级——ID > class > tag || 同一级别，后来者优先 || 在属性值后，加”!important”优先级最高。

5）伪类：selector: pseudo-class {property:valuel;} 或 selector.class:pseudo-class {property:valuel;}

:active 向被激活的元素添加样式。

:focus 向拥有键盘输入焦点的元素添加样式。

:hover 当鼠标悬浮在元素上方时，向元素添加样式。

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式。

:first-child 向元素的第一个子元素添加样式。

:lang 向带有指定 lang 属性的元素添加样式。

注：定义时一定按照link-visited-hover-active的顺序。

PS：伪类和类选择符：selector.class:pseudo-class {property:valuel;}

E.g. a.red: link{color:#FF0000}

6）伪对象

:first-letter向文本的第一个字母添加特殊样式 || E.g. p:first-letter{font-size: 300%}

:first-line 向文本的首行添加特殊样式。

:before 在元素之前添加内容。（对象树逻辑结构中的前一因素）

:after在元素之后添加内容。

四、滤镜

滤镜在CSS语句中定义，格式：filter: flitername(parameters)

filter:progid:DXImageTransform.Microsoft._fltrName(parameters).

1. 界面滤镜

1）filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(scr=’i.png’,sizingMethod=’scale’)

2）..Gradient (GradientType=1,StartColorStr=’#000000’,EndColorStr=’#FFFFFF’)

2. 静态滤镜

1）filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60,style=1)

2）..Blur (makeShadow=false,pixelRadius=3,ShadowOpacity=0.6)

3. 转换滤镜

1）Spiral滤镜，呈现效果的特效；2）RevealTrans滤镜，呈现+切换图片。

五、CSS经典案例

第6章 JavaScript脚本语言

一、JavaScript概述

1. JavaScript及其作用和特点

JavaScript是一种基于对象和事件驱动并具有相对安全性的脚本语言。具有以下特点：

1）是嵌在HTML文档中、由浏览器下载并在读取时才编译的解释性编程语言；

2）基于对象而非面向对象的语言；

3）简单性，即采用了基于java基本语法和控制流并在此基础上简化而成的语法，且变量类型为弱类型； 4）不允许访问本地磁盘，安全性高；

5）可直接对用户的操作做出快速反应，无须经过服务器；跨平台性。

JavaScript可以用来创建生动的用户界面、对数据有效性进行验证、进行数据查找等。

2. JavaScript & Java

1）前者是基于对象的，后者是面向对象的；2）前者是解释执行，后者是编译执行；3）前者采用弱变量，后者采用强变量；4）代码格式不同；5）嵌入方式不同（<script> & <applet>）。

3. JavaScript语言的组成

1）Js核心语言，即内置对象（Array & Date & Math等）；2）Js客户端扩展，即DOM；3）Js服务器端扩展，例如Ajax技术。

4. JavaScript嵌入网页的方式

1）直接嵌入：在任意位置，使用<script language =”JavaScript” type=”text/JavaScript”></script>，通常置于head或body中；2）使用外部文件的方式加入，E.g.<script src=”i.js” language type></script>；3）在浏览器中直接调用：E.g. <a href=”javascript:<…>”>…</a> & <tga onclick=”…”>

二、JavaScript基本语法

1. 数据类型

1）JavaScript是一种弱语言，一般情况下，不需要声明数据的类型，javascript会自动计算它们的类型。2）数值数据：整数和浮点数。尽管整数和分数被看做不同的类型，其实，javascript统视为浮点型。3）文本数据：用双引号或单引号括起来的字串或字符；4）布尔数据：true & false；5）转义字符：\’ &\’’…

2. 变量

1）JavaScript对大小写敏感，变量名不能是关键字和特殊字符，不能以数字开头；

2）声明的方法：var variable_name;变量声明而不赋值的默认为undefined类型；

3）JavaScript中同一个变量名在不同时期可以指向不同数据类型的数据；

3. 运算符与表达式

1）+-*/%运算：javascript按照浮点数处理，e.g.5/4=1.25，即得到1.25而不是1；

2）字符串的基本操作：连接字符串（直接“+”连接）| 当字符串与数字相加时，数字转化为字符串，然后连接；3）逻辑运算中的&&和||与C语言相通。

4. 功能语句

1）注释：//或/*…*/；

2）条件语句：if…else… & switch；

3）循环语句：for & while & do…while & break & continue。

5. 函数

1）参数不全或类型不一致会导致错误；2）return语句可有可无，但为了保证程序的严谨性，即使不需要返回值，也写return；3）函数的定义必须在调用之前，所以一般情况下把函数定义在<head>部位；4）变量的作用域：任何定义在函数之外的变量，在本页有效，即全局变量，而定义在函数内部的称之为局部变量（局部变量和全局变量最好不要重名）。

三、对象化编程

1. 概述

Js对象是由属性和方法的集合。前者是对象在实施其所要行为的过程中，实现信息爱的装载单位，从而与变量相关联；后者指对象能够按照设计者的意图而被触发执行，与特定函数相关联。

对象可分3类：内部对象、浏览器环境提供的对象和自定义对象。

PS：有关对象操作的语句

1）for… in E.g. for( var index in object) document.write(object[index]);

2）with；3）this；4）new；5）对象属性的引用：Object.^ & Object[] & Object[“”]。

2. 事件处理

1）指定事件处理程序：A. 嵌入标签中：<body onload =”…”>…

B. 把事件处理器作为浏览器对象的属性，在js中指定：

E.g. document.links [0].onclick = link_onclick(); 但是此设置要在links或images对象初始化之后。当通过动态代码改变事件处理器所连接的处理函数时，一般使用此方法。

E.g. 在定义了f ()后，window.onerror = f;（当f无须参数时，不加括号）

C. 特定情况：<script language for=”window” event=”onload”> alert(‘…’);</script>。

2）常用事件：

Øonblur：窗口失去焦点，应用于window对象；

Øonchange：文本内容变化或焦点转移，应用于Password、Select、Text和Textaera对象；

Øonclick：对象被单击时（Link对象onclick事件的处理结果若为false，则无法打开连接）；

Øonfocus：窗口得到焦点时，主要应用于window对象；

Øonload：当文档全部装载完成时，置于<body>中，属window对象；

onmousedown & onmouseout & onmouseover & onmouseup

onreset & onsubmit & onunload onresize & onerror

3. 内部对象

1）Number对象：Num.NaN = false & Num.toString()

2）String对象：Str.length

Str.toLowerCase() Str.toUperCase

Str.substring(start,end)截取字符串

Str.substr(strat[,length]) 截取字符串

Str.indexOf(str1) 查找Str中str1的初始位置，若找不到返回-1

Str.lastIndexOf(str1)反向查找

3）Array对象

Var Ary = new Array(); … Ary[Ary.length] = … 添加新元素。

concat(ary1,ary2)，把第2个数组连接到第1个数组后面；

slice(intStart,intEnd)，复制数组中的部分元素，返回新数组；

join(str)，把数组中的元素转换成1个字符串类型，str为分隔符；

sort()，按从大到小顺序排序；

reverse()反转数组中的顺序。

4）Math对象

Math.abs()

Math.max(a,b) Math.min(a,b)

Math.pow(m,n)

Math.random() 返回一个大于0小雨1的随机数

Math.ceil(number) 大于或等于number的最大整数

Math.floor(number) 小于或等于number的最大整数

Math.round(x)四舍五入

5）Date对象

var date1 = new Date();获取当前PC上的时间，也可以在括号内放入毫秒作参数，亦可以放入年月日，或用逗号相隔，写入年,月,日,小时,分钟,秒,毫秒。

获取Date的值：getDate()（返回日）& getDay()（返回一个整数，代表星期几，0代表星期天）, getMonth(), getFullYear(), getDateString()

设置Date对象：setDate(),setMonth(),setFullYear();如果参数越界，将自动进位；

获取Time的值：getHour(),getMinutes(),getSeconds(),getMilliseconds(),getTimeString();

设置Time的对象：setHour(),setMinutes(),setMilliseconds();（以毫秒计）

6）系统函数和和全局对象

parseFloat(numString) & parseInt(numString) & toString()

4. 自定义对象

1）类的组成：构造函数，方法定义，属性；2）类的定义（数组亦可以作为类的元素）：

function CustomerBooking (customerName){

this.customerName = customerName;//无需先定义，直接赋值，javascript自动创建

}

CustomerBooking.prototype.getCustomerName = function(){//方法的原型声明

return this.customerName;

}

CustomerBooking.prototype.setCustomerName = function(customerName){//用方法设置属性

this.customerName = customerName;

}（property属性 & prototype原型）

var cb1 = new CustomerBooking(“SenMiao”);document.write(cb1.customerName); …

四、浏览器内部对象

1. window对象：

1）浏览器为JavaScript所提供的对象的集合称为浏览器对象模型（BOM，Browser Object Model），W3C标准为跨平台的浏览器程序设计提供方便；BOM是一个层次化的对象结构。顶级是window对象，它代表了浏览器的框架以及与浏览器相关的一切，如滚动条，导航按钮等。

2）window代表浏览器的框架或者窗体，是一个全局对象，因此可以直接使用其属性和方法，无须写出对象名，如alert(“…”)，confirm(“…”)，prompt(提示字符串[,默认值])，close()，open(URL,窗口名称[,窗口规格])，defaultStatus（状态栏的默认信息）等。

3）window的某些属性也是对象，如document，navigator，history，screen，location等。

4）事件：onBlur & onLoad & onMove & onResize & onDragDrop & onUnload …

2. document对象（代表页面本身，浏览器之间差异较大）

1）特有write()方法和bgColor、fgColor、linkColor、alinkColor、vlinkColor属性，并拥有onClick、onDblClick、onKeyUp、onMouseOver、onMouseDown等事件。

2）images数组对象（可以通过length属性查看长度），访问时可以使用索引值，也可以使用插入图片时给定的图片名称name，而images元素又有src等属性；

3）links数组对象，元素有href属性，其他的与images类同。

E.g. function linkGettr(){ //弹出新窗口，在该窗口显示当前窗口中的链接个数和地址

msgWindow = window.open(‘’,’’,’width = 250,height = 200’);

msgWindow.document.write(“共有” + document.links.length + “个链接”)

for(idx = 0; idx = document.links.length; i++){

msgWindow.document.write(“<li>” + document.links[i]);

}

} /*document.links[0].host & document.links[0].text & document.links[0].href*/

4）forms数组对象

A. 如何锁定form中的元素

document.forms[0].name & document.form0.name

document.forms[0].reset() & docement.form0.reset()

document.form0.userName.length

document.form0.sex[0].checked 返回表单中名为sex的单选按钮组中第一项的选定状态

~~document.form0.hobby[0].checked~~ checkbox的名字不要重复，因为无法通过名字索引

function show(){

var num = document.testing.elements.length; var sum = 0;

for(var i = 0; i < num; i++){

if(document.testing.elements[i].checked)

sum++;

}

alert("您喜欢" + sum.toString() + "颜色！");

}

3. Event对象

event.screenX 鼠标的x坐标

event.screenY 鼠标的y坐标

4. history对象

1）历史栈（history stack）保存了用户访问过的页面信息，类似于Array；

2）history.current & history.next & history.previous & history.length；

3）history.back() & history.forward() & history. go(intN)或history.go(URL)。

5. location对象

1）包含了大量当前页面位置的信息（URL，Web服务器，端口，通信协议）；

2）window.location.href+; window.location.replace(URL)，区别在于replace()从浏览器的历史栈中溢出当前页面，用新的页面替换之，而href属性仅仅把新页面加入历史栈。

3）location自身存有URL地址，与location.href的字符串一致；

4）location.protocol & location.host & location.port & location.search（查询信息）

setInterval(‘f()’,1000);间隔触发

6. navigator对象：返回浏览器名称、版本号、以及用户计算机的操作系统。

navigator.appName & navigator.appVersion & navigator.language & navigator.javaEnabled()

7. Screen对象

Write(screen.height + screen.width + screen.avaiHeight + screen.availWidth);--></script>

第7章动态主页技术基础

一、动态主页基本原理

1. 客户端动态页面

1）由附加到浏览器上的模块（插件）完成动态网页创建的全部工作；

2）缺点：需下载单独的指令文件，耗时 & 不同的浏览器对指令的解释不一 & 安全性差。

2. 服务器端动态页面

1）动态主页是存放在服务器端的程序，由客户端提出执行请求，在服务器端运行，运行的结果通过HTML的形式传回客户端；

2）工作原理：用户请求页面，Web服务器响应HTTP请求，调用ASP（…）引擎，解释并执行被申请的文件à若脚本中含有访问服务器的语句，则通过ODBC等与后台数据库建立联系 à综合ASP引擎和数据库系统处理的结果集，生成用户需要的HTML网页，发送给客户端。

二、.NET介绍

.NET是微软退出的新一代Windows服务，其基本思想是：将侧重点从连接到互联网的单一网站或设备上，转移到计算机、设备和服务群组上，使其通力合作，提供更为丰富的解决方案。

PS：文件后缀名为.aspx & 代码块用<% … %>封装 &

<%@ Page Language = “C#”%> … <html><script language=”C#” runat=”server”>… </script>…

PS：ASP，即动态服务器主页，是一套服务器端运行的脚本平台，内涵于IIS中。

1）特点：无须Compile编译；2）与浏览器无关；3）面向对象；4）与ActiveX Scripting兼容；5）源代码安全。

2）ASP的对象：Request & Response & Server & Application & Session。

3）页面间参数传递：Application & Session。

三、Java技术

1. Java特点

面向对象 & 多线程 & 分布性 & 安全性 & 可移植性 & 体系结构中立 & 解释执行 & 动态性 …

2. Applet（小应用程序） & Application（应用程序）

1）Application可提供Java运行环境；Applet只能使用浏览器提供的功能；

2）Application 是从main()开始的，applet是从init开始的；

3）Application自行管理其生存周期，而Applet由浏览器管理其生存周期，即new - init - start - stop - destroy。

3. Servlet

可视为服务器端的Applet，它从客户端接收请求，执行设定的操作后，把结果返回客户端。Web浏览器不直接与Servlet通信，Servlet是由Web服务器加载和执行的（提高了安全性）。

特点：1）持久性；2）与平台无关；3）可扩展性；4）安全性；5）可在异构的客户机上运行。

缺点：通过HTML语句来实现动态网页，动态部分与静态部分的整合过程复杂。

4. JSP

J2EE是建立在J2SE基础上的异构平台，为企业级应用提供完整、稳定、安全和快速的Java平台，它是一种标准而非产品。主要支持2类开发：Web应用服务器 & 在Web应用服务器上运行的Web应用。J2EE的开发模型包括3个部分，即视图、控制器和模型。

PS：PHP 超文本预处理器

1）开发组合：PHP + Mysql + Zend + IIS/Apache

2）特色功能：全新的对象模式 & 异常处理 & 命名空间

PS：试比较ASP & ASP.NET & JSP & PHP

第8章 XML技术与Ajax技术

一、XML及其相关技术

1. 概述

1）XML指是的“可拓展性标识语言”（SGML是通用标识语言标准），是一种语义/结构化语言，它描述了文档的结构和语义；2）XML & HTML & SGML …

2. 文档格式

E.g. <? Xml version=”1.0” ?>

<list>

<car>

</car>

<car>

</car>

</list>

结构良好的XML文档：1）根元素唯一；2）起始标签与结束标签匹配；3）大小写一致；4）正确嵌套，即子元素完全包括在父元素内；5）属性值包括在引号内；6）元素的属性不重复。

有效的XML文档：遵守DTD文件或Schema规定的XML文档。（必然结构良好）

3. 相关技术

1）DTD：文档类型定义，即一组标记符的语法规则，表明XML文本是怎样组织的。

2）XML Schema：描述可扩展标记语言文档的结构的文件，比DTD已与开发。

3）CSS & XSL & XSLT：XSL，即可扩展样式表语言，是用于以可读格式呈现 XML 数据的语言；XSLT，即扩展样式表转换语言，可以从已定义的XML文档中抽取需要的数据，然后转换成不同的形式（转换时需要解析器，通常使用MSXML）。

4）DOM：文档对象模型，定义了一种访问和处理HTML/XML文档的方法；利用DOM可以动态地创建文档、遍历文档结构，添加、删除、修改文档内容，改变文档的显示方式等。

5）Xpointer & Xlinks：用于链接其他XML文档和其他XML文档中的部分内容（Xpointer相当于链接到锚）。

6）XML开发工具：Notepad & XML Writer & Microsoft XML Notepad & …

4. XML的使用前景：商务自动化处理 & 信息发布 & 智能化的Web应用程序和数据集成。

二、Ajax技术

1. 概述

1）全称Asynchronous JavaScript and XML，即异步JavaScript和XML技术；

2）构成：A.利用XHTML和CSS实现标准化的呈现；B. 借助DOM实现动态显示和交互；C. 使用XML和XSLT进行数据的交换和处理；D. 采用XMLHttpRequest进行异步数据读取； E. 通过JavaScript绑定和处理所有数据。

2. Ajax的创新

基于Ajax的Web & 传统Web

1）局部刷新：不刷新整个页面，在页面内与服务器通信；

2）使用异步方式与服务器通信，不需要打断用户的操作，响应更迅速；

3）页面数量减少，大部分交互在一个页面即可完成，无需切换整个页面。

Ajax & DHTML

BOM & DOM

南师大教育技术学考研笔记_Web程序设计·New

本站小编免费考研网/2015-08-25

相关话题/教育

领限时大额优惠券,享本站正版考研考试资料!

南师大教育技术学考研笔记_教学设计·问题

南师大教育技术学考研笔记_教育心理学

南师大教育技术学考研笔记_教育心理学·架构

刘珣《对外汉语教育学引论》摘要笔记

2015年北京语言大学汉语国际教育复试回忆版

2015年北京语言大学汉语国际教育两门专业课考题回忆版

南开大学2010汉语国际教育基础考研真题

东北师范大学2010汉语国际教育基础考研真题

北语汉语国际教育硕士15年真题回忆版

2015首都师范大学教育综合333考研真题

南师大教育技术学考研笔记_Web程序设计·New

本站小编 免费考研网/2015-08-25

相关话题/教育

本站小编免费考研网/2015-08-25