定义前端
综述
Web 和移动应用开发过程一般包含以下步骤
- (1) 用户在浏览器（客户端）里输入或者点击一个链接
- (2) 浏览器向服务器发送 HTTP请求
- (3) 服务器处理请求，如果查询字符串或者请求体里含有参数，服务器也会把这些参数信息 考虑进去
- (4) 服务器更新、获取或者转换数据库里的数据
- (5) 服务器以HTML、JSON或者其他格式返回一个 HTTP响应
- (6) 浏览器接收 HTTP响应
- (7) 浏览器以HTML或者其他格式（比如JPEG、XML或者 JSON）把 HTTP响应呈现给用户
移动应用和普通网站
- 移动应用的行为动作与普通网站相同，只不过原生应用取代了浏览器
- 其他主要区别为：带 宽带来的数据传输限制、更小的屏幕、更高效地使用本地存储
HTML
概述
- HTML本质上不是编程语言，而是一组用来描述内容结构和格式的标记
- HTML标签由一对 尖括号以及括号内的标签名组成
- 大多数情况下，内容会包含在一对开始标签和结束标签之间， 结束标签的标签名前有一个斜杠（/）
- 所有其他元素都是 html 标签的子标签
元素属性
-
class
-
class 属性定义了一个类，以便于使用 CSS给元素添加样式或者进行 DOM操作
<p class="normal">...</p>
-
-
id
-
id 属性定义了元素的 ID，作用有点像 class，但是必须是唯一的
<div id="footer">...</div>
-
-
style
-
style 属性定义了一个元素的内联 CSS
<font style="font-size:20px">...</font>
-
-
title
-
title 属性为元素指定了一些额外信息，在大多数浏览器里这些信息均是以小提示条的形式 呈现的
<a title="Up-vote the answer">...</a>
-
-
data-name
-
data-name 属性可以用来在 DOM中存储一些元数据
<tr data-token="fa10a70c-21ca-4e73-aaf5-d889c7263a0e">...</tr>
-
-
onclick
-
onclick 属性意味着在点击事件发生时，内联的 JavaScript代码将运行
<input type="button" onclick="validateForm();">...</a>
-
-
onmouseover
-
鼠标悬停事件触发
<a onmouseover="javascript: this.setAttribute('css','color:red')">...</a>
-
-
其他与内联 JavaScript代码相关的 HTML属性
- onfocus：当浏览器的焦点聚集在某个元素上时触发
- onblur：当浏览器的焦点离开一个元素时触发
- onkeydown：用户按下键盘上的键时触发
- ondblclick：用户双击鼠标时触发
- onmousedown：用户按下鼠标时触发
- onmouseup：用户释放鼠标时触发
- onmouseout：用户将鼠标移开元素区域时触发
- oncontextmenu：用户点击鼠标右键时触发
-
注意：内联 CSS和 JavaScript不是好方案，我 们会尽量避免内联
CSS
概述
-
CSS 是一种控制内容呈现和格式的方式
-
CSS 的三种引入方式
-
内联式css样式
-
内联式css样式表就是把css代码直接写在现有的HTML标签中
<p style="color:red">这里文字是红色。</p> -
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开（英文状态下;）
-
-
嵌入式css样式
-
在head元素内style属性内写，此样式可以被当前页面中元素使用
<style type="text/css">span{color:red;}</style>
-
-
外部式css样式
-
在单独CSS文件中写的样式，那个网页引用该文件就能复用该样式
<link href="style.css" rel="stylesheet" type="text/css" />
-
-
-
定位元素
-
在 CSS 里可以通过元素的 id、class、标签名，以及它与父级标签的关系或者元素属性值来定位元素
-
id
-
如：通过 id main 定位一个 div，并设置它的内边距
#main { padding-bottom:2em; padding-top:3em; }
-
-
class
-
如：把所有拥有类 large 的元素字体大小设置为 14pt
.large { font-size:14pt; }
-
-
标签名
-
如：把所有的段落（p 标签）的颜色变成了灰色
p { color:#999999; }
-
-
父子标签关系
-
如：div 是 body 元素的直接子元素；现在要隐藏下标签 div
body > div { display:none; }
-
-
元素属性值
-
如：设置 name 属性为 email 的 input 元素的宽度为 150px
input[name="email"] { 150px; }
-
-
JavaScript
使用方式
-
最简单使用方式
-
把 JS代码放进 HTML文档的 script 标签里
<script type="text/javascript" language="javascript"> alert("Hello world!"); //简单的提示对话框 </script>
-
-
引入外部的 js 文件
-
通过设置 script 标签的源属性 src="filename.js"来引入外部的 js 文件
<script src="js/app.js" type="text/javascript" language="javascript"> </script>
-
-
其他运行 JavaScript 代码的方式
- 内联的代码
- 使用Webkit的浏览器开发者工具和 FireBug控制台
- Node.js的交互命令行
JavaScript 对象/类（本身没有类；对象继承自对象）里一些主要的类型
-
数值原始值
-
数值
var num = 1;
-
-
数值对象
-
数值对象和它的方法
var numObj = new Number("123"); //数值对象 var num = numObj.valueOf(); //数值原始值 var numStr = numObj.toString(); //字符串表示
-
-
字符串原始值
-
包含在单引号或者双引号之间的字符序列
var str = "some string"; var newStr = "abcde".substr(1,2); // stringObject.substr(start,length) // substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
-
-
字符串对象
-
字符串对象有很多非常有用的方法，比如 length、match
var strObj = new String("abcde");//字符串对象 var str = strObj.valueOf(); //字符串原始值 strObj.match(/ab/); str.match(/ab/); //两种调用都可行 // match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
-
-
正则表达式对象
-
正则表达式对象是特殊的字符模式，以方便搜索、替换以及测试字符串
var pattern = /[A-Z]+/; str.match(/ab/);
-
-
特殊类型
-
可以使用 typeof 对象来看看它的类别
NaN ，null ，undefined， function
-
-
全局方法
-
可以在代码的任意地方调用这些方法，因为它们是全局方法
1 decodeURI 2 decodeURIComponent 3 encodeURI 4 encodeURIComponent 5 eval 6 isFinite 7 isNaN 8 parseFloat 9 parseInt 10 uneval 11 Infinity 12 Intl
-
-
JSON
-
JSON库帮助我们序列化和解析 JavaScript对象
var obj = JSON.parse('{a:1, b:"hi"}'); var stringObj = JSON.stringify({a:1,b:"hi"});
-
-
数组对象
-
数组是从 0 开始索引的列表。如创建一个数组
var arr = new Array(); var arr = ["apple", "orange", 'kiwi"]; // 数组有一些非常好用的方法，比如 indexOf、slice、join
-
-
数据对象
var obj = {name: "Gala", url:"img/gala100x100.jpg",price:129} 或 var obj = new Object(); -
布尔原始值和对象
-
就像字符串和数值，布尔值既可以是原始值，也可以是对象
var bool1 = true; var bool2 = false; var boolObj = new Boolean(false);
-
-
日期对象
-
日期对象帮助我们处理日期和时间
var timestamp = Date.now(); // 1368407802561 var d = new Date(); //Sun May 12 2013 18:17:11 GMT-0700 (PDT)
-
-
数学对象
-
数学常量和一些方法
var x = Math.floor(3.4890); var ran = Math.round(Math.random()*100);
-
-
浏览器对象
-
用于访问浏览器及其一些属性，比如 URL
window.location.href = 'http://rapidprototypingwithjs.com'; console.log("test");
-
-
DOM对象
document.write("Hello World"); var table = document.createElement('table'); var main = document.getElementById('main');
函数式和原型语言是 JS的另一个重要特性
-
一般的函数声明语法
function Sum(a, b) { var sum = a + b; return sum; } console.log(Sum(1, 2)); -
函数可以用作变量和对象
-
比如，一个 函数可以作为另一个函数的参数传递
var f = function(str1) { return function(str2) { return str1 + ' ' + str2; }; }; var a = f('hello'); var b = f('goodbye'); console.log((a('Catty')); console.log((b('Doggy'));
-
对象继承方式
- 类式继承
- 伪类继承
- 函数式继承