PRESENTED BY Rao Zhijian WEB程序设计技术 PRESENTED BY Rao Zhijian
CONTENTS 01 B/S/DBMS架构 02 HTML / CSS 03 JavaScript 04 前端框架
Browser / Server / DBMS 架构 01 Browser / Server / DBMS 架构
01 B/S/DBMS架构 Browser / Server 静态网页 HTTP
01 B/S/DBMS架构 Browser / Server /DBMS 动态网页 Code HTTP DBMS
02 HTML / CSS
HTML HTML 是用来描述网页的一种语言 HTML 指的是超文本标记语言 (Hyper Text Markup Language) 01 HTML / CSS HTML HTML 是用来描述网页的一种语言 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签
<title>Page</title> </head> <body> HTML基本结构 <html> <head> <title>Page</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<h1>This is heading 1</h1> HTML 标题（Heading）通过 <h1> - <h6> 等标签进行定义的 <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
在 href 属性中指定链接的地址 <html> <body> <a href="http://www.w3school.com.cn">This is a link</a> </body> </html> 在 href 属性中指定链接的地址
<img src="/i/eg_w3school.gif" width="300" height="120" /> HTML 图像 <html> <body> <img src="/i/eg_w3school.gif" width="300" height="120" /> </body> </html>
元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 <html> <body> <p>This is my first paragraph.</p> </body> </html> 完整的 HTML 参考手册
可以通过 <div> 和 <span> 将 HTML 元素组合起来。 HTML <div> 和 <span> 可以通过 <div> 和 <span> 将 HTML 元素组合起来。 <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。它没有特定的含义。由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。 <span> 元素是内联元素，可用作文本的容器。 <span> 元素也没有特定的含义。 …. <div > <img src=…> <span >Test</span> </div>
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。 为相同的类设置相同的样式，或者为不同的类设置不同的样式。 <html><head><style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style></head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. </p> </div> </body> </html>
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一
CSS 基础语法
p { color:red; } /* 元素选择器, HTML标记 */ CSS 选择器 … <p id=demo class=info>测试<span title=test>CSS</span></p> <style> p { color:red; } /* 元素选择器, HTML标记 */ #demo {font-size:10px;} /*id 选择器 */ .info {text-align: right; } /* 类选择器 */ p span { color: blue; } /* 派生选择器 */ [title=test] { font-size: 20px; } /*属性选择器*/ </style>
<style type="text/css"> body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y } </style>
a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 设置链接的样式 a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻
规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 CSS 框模型概述 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
Static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一 个或多个行框，置于其父元素中。 CSS 定位和浮动 CSS position 属性 Static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一 个或多个行框，置于其父元素中。 Relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 Absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素 或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定 位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 Fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
<html><body> 绝对定位 <html><body> <div style='background-color:red;width:100px;height:100px;'>Red</div> <div style='position:absolute;left:50px;top:50px;background-color:blue; width:100px;height:100px;'>Blue</div> </body></html>
03 JavaScript
JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每 个人都有能力将小的 JavaScript 片段添加到网页中。
HTML 中的脚本必须位于 <script> 与 </script> 标签之间 …. <script> JavaScript基本语法 HTML 中的脚本必须位于 <script> 与 </script> 标签之间 …. <script> alert("My First JavaScript"); </script> 外部 JavaScript 文件的文件扩展名是 .js
访问某个 HTML 元素，可以使用 document.getElementById(id) 方法 直接把内容写到 HTML 文档 document.write(string) … <script> document.write(‘<h2>This is a text.</h2>’); </script> <img src=logo.jpg>
var name="Gates", age=56, job="CEO"; … </script> JavaScript 变量 var 关键词来声明变量 <script> var name="Gates", age=56, job="CEO"; … </script> 拥有动态类型 var x ; // x 为 undefined var x = 6; // x 为数字 var x = "Bill"; // x 为字符串
function myFunction(var1,var2) { 这里是要执行的代码 } JavaScript 函数语法 function myFunction(var1,var2) { 这里是要执行的代码 }
通过 HTML DOM(文档对象模型)，可访问 JavaScript HTML 文档的所有元素 JavaScript HTML DOM 通过 HTML DOM(文档对象模型)，可访问 JavaScript HTML 文档的所有元素
JavaScript 对象 Number 对象
JavaScript 对象 String 对象 substring 语法 共有32个方法
JavaScript 对象 Date 对象
JavaScript 对象 Array（数组）对象
Window 对象表示浏览器中打开的窗口。 Windows 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为 每个框架创建一个额外的 window 对象。
Navigator 对象包含有关浏览器的信息。
Screen 对象包含有关客户端显示屏幕的信息。
History 对象包含用户（在浏览器窗口中）访问过的 URL
Location 对象包含有关当前 URL 的信息
正则表达式 Regular Expression 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组 合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。 普通字符 普通字符包括没有显式指定为元字符的所有可打印和不可打印字符。这包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号。 非打印字符 非打印字符也可以是正则表达式的组成部分。下表列出了表示非打印字符的转义序列：
正则表达式 Regular Expression 限定符 字符 描述 * 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。 + 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 ? 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。 {n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 {n,} n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 {n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
正则表达式 Regular Expression 定位符 字符 描述 ^ 匹配输入字符串开始的位置。如果设置了 RegExp 对象的 Multiline 属性，^ 还会与 \n 或 \r 之后的位置匹配。 $ 匹配输入字符串结尾的位置。如果设置了 RegExp 对象的 Multiline 属性，$ 还会与 \n 或 \r 之前的位置匹配。 \b 匹配一个字边界，即字与空格间的位置。 \B 非字边界匹配。
正则表达式应用——实例应用 正则表达式 Regular Expression 1.验证用户名和密码：（"^[a-zA-Z]\w{5,15}$"） 正确格式："[A-Z][a-z]_[0-9]"组成,并且第一个字必须为字母6~16位； 2.验证电话号码：（"^(\d{3,4}-)\d{7,8}$"）正确格式：xxx/xxxx-xxxxxxx/xxxxxxxx； 3.验证手机号码："^1[3|4|5|7|8][0-9]\\d{8}$"； 4.验证身份证号（18位数字）："\d{17}[[0-9],0-9xX]"； 5.验证Email地址：("^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$")； 6.只能输入由数字和26个英文字母组成的字符串：("^[A-Za-z0-9]+$")； 7.整数或者小数：^[0-9]+([.][0-9]+){0,1}$
04 前端技术和框架
前端技术 jQuery Bootstrap React.JS React Native AngularJS JavaScript 前端技术和框架 前端技术 jQuery Bootstrap React.JS React Native AngularJS JavaScript Ember.JS Zepto.js Backbone.js CSS HTML5 SUI Mobile Sea.js
JQuery jQuery是一个兼容多浏览器的JavaScript框架，核心理念是write Less,do more(写得 更少,做得更多)。jQuery是免费、开源的，使用MIT许可协议。 引用 jQuery <!DOCTYPE html> <html> <head> <script src="jquery/1.8.3/jquery.min.js"> </script> </head> <body> </body> </html> jQuery在线教程
JQuery 插件 50个最新最酷的免费JQuery插件
BootStrap Bootstrap3中文文档
Sea.js Sea.js http://seajs.org/docs/ 京东前端：Sea.js + JQuery 京东首页前端技术剖析与对比
SUI Mobile http://m.sui.taobao.org/
WeUI是微信官方设计团队为微信 Web 开发量身设 计，可以令用户在HTML5应用中的使用感知更加统 一。 组件包含button、cell、dialog、 progress, toast、 article、icon等等。 官方Demo：https://weui.io/
App 应用开发模式 移动端web webApp 混合App 原生App
React Native React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上 构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的 开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。 Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
图表（数据可视化） http://www.bootcss.com/p/chart.js/ Chart.js
地图API http://lbsyun.baidu.com/ 百度地图API