应用 - 客户端
应用 - 服务端
应用 - 其他
JavaScript 不是 Java
语言特性 • 动态性 • 弱类型 • 基于对象 • 脚本语言
动态性
在一个Javascript对象中，要为一个属性 赋值，我们不必事先创建一个字段，只需要在 使用的时候做赋值操作即可
//定义一个对象 var obj = new Object(); //动态创建属性name = "an object"; //动态创建属性sayHi obj.sayHi = function(){ return "Hi"; }
前端开发基础知识培训
HTML & CSS & JS
摩云视讯 • 孔纯
2012-08-14
前端开发你想到了什么？
FrontPage与网页三剑客
仅仅依赖工具时代已经过去
Web Page To Web App
面向云服务的WebApp时代已经到来
HTML & CSS & JS
仅仅是 冰山一角
我们从这里开始
特点：在文档流中默认一行可以展示多个行内元素
• 嵌套规则
块级元素可以嵌套行内元素，除a以外的行内元素不能嵌 套块级元素
语义化元素
• header，footer • section，article • nav，aside，figure • h1~h6 • ol，ul，dl • table，tr，th，td
这里不是速成班
Web标准
Web标准不是某一个标准，而是一系列标准的集合
结构 Structure
表现 Presentation
行为 Behavior
XHTML&XML
CSS
DOM&ECMAScript
HTML
CSS
JavaScript
各自职责
各自职责
HTML: 结构&内容 CSS: 样式 JS: 结构&内容&样式&动画&交互
CSS优先级
层叠样式的优先级
� 浏览器缺省设置 � 外部样式表 � 内部样式表 � 标签自定义样式
CSS优先级
清除浏览器缺省样式
清除浏览器缺省样式
reset.css
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, code, em, img, q, small, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, table, tbody, tr, th, td, input....
CSS
层叠样式表 Cascading Style Sheets
程序员的画笔
发展简史
• • • • • 1994 HakonWium Lie提出CSS概念 1996 CSS Level 1 1997 CSSWorking Group 1998 CSS Level 2 CSS Level 3 – 进化中…
《Javascript中诡异的类型转换》
基本数据类型
• 字符串(String) • 数值(Number) • 布尔值(Boolean)
在JavaScript中，所有的数字，不论是 整型浮点，都属于“数值”基本类型。
var str = "Hello, world";//字符串 var i = 10;//整型数 var f = 2.3;//浮点数 var b = true;//布尔值
<!DOCTYPE html>
向上向下兼容
《DOCTYPE的奇怪影响》
Head文件
• title
页面标题，而且必须唯一
• meta
提供有关页面的元信息（meta-information），比如针对搜索引擎和更 新频度的描述和关键词
• link
定义文档与外部资源的关系
• script
定义文档内部的JavaScript
渐进增强的CSS3
• 圆角 border-radius • 渐变 gradient • 过渡动画 transition
致友、点点、淘宝
《视觉设计师需要了解Web知识》《CSS3介绍》
CSS Sprites
• 优点
1.减少HTTP请求,降低服务器负担 2.文件体积更小 1+1 < 2
• 缺点
1.开发/维护成本高 2.扩展性差
• style
定义文档内部的CSS
常用元素
• • • • • • • 结构：p,div,span,h1~h6,body… 列表：ul,ol,dl,li,dd,dt 文本：a,em,strong,pre… 表单：form,input,button,label… 媒体：img,object… 表格：table,tr,td,caption,tbody… …
Class方式定义样式
CSS 盒子模型
《浏览器的盒模型与兼容性》
display: block display: inline display: inline-block
CSS 兼容问题源自哪里？
• 盒模型展示方式不同
IE9+/FF/Chrome
<IE6-IE8
CSS 兼容问题源自哪里？
• 浏览器引擎本身的差异
• HTML4.0 & XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• HTML4.0 ~ HTML5.0
对象类型
• 对象(属性的集合，即键值的散列表) • 数组(有序的列表) • 函数(包含可执行的代码)
var obj = new Object(); obj.num = 2.3; var array = new Array("foo", "bar", "zoo"); var func = function(){ print("I am a function here"); }
对象
• JavaScript 是面向对象的编程语言 (OOP)。 使我们有能力定义自己的对象和变量类型。
注意：对象只是一种特殊的数据。对象拥有属性和方法。 //定义一个对象 var obj = new Object(); //属性 = "an object"; //方法 obj.sayHi = function(){ return "Hi"; } //调用属性 或 obj["name"] //调用方法 obj.sayHi()
类型比较 • typeof - 基本类型
返回一个用来表示表达式的数据类型的字符串。 number,string,boolean,object,function, undefined
• instanceof - 对象类型
返回一个 Boolean 值，指出对象是否是特定类的一个实例。
obj instanceof Array;//false array instanceof Array;//true
HTML语法
起始标记 结束标记
<div id="i">超文本标记语言</div>
元素 属性 内容
基本结构
<!DOCTYPE html> <html> <head> <title>标题 </title> </head> <body> 内容 ...... </body> </html>
HEAD BODY
《CSS浏览器兼容案例》
IE条件注解
<!--[if <!--[if <!--[if <!--[if <!--[if <!--[if lt IE 7]><html class="no-js ie ie6 lte9 lte8 lte7"> <![endif]--> IE 7]><html class="no-js ie ie7 lte9 lte8 lte7"> <![endif]--> IE 8]><html class="no-js ie ie8 lte9 lte8"> <![endif]--> IE 9]><html class="no-js ie ie9 lte9"> <![endif]--> gt IE 9]><html class="no-js"><![endif]--> !IE]><!--><html><!--<![endif]-->
函数
• 创建函数
var funcName = new Function( [argname1, [... argnameN,]] body ); var add = new Function("x", "y", "return(x+y)");
语法糖
function add(x, y){ return x + y; } 或 var add = function(x, y){ return x + y; }
