第0讲 内容概述
Javascript有以下三部分组成：
?? ECMAScript (Flash:actionscript, Silverlight)
?? DOM
?? BOM
?
document.getElementById('mydiv').style.left
?
第1讲 JavaScript背景知识
结构(Structure)???????????????? HTML XHTML
表现(Presentation)???????????CSS
行为(Behavior)????????????????? ECMAScript, DOM, BOM
?
第2讲 JavaScript基础
Camel标记法
Pascal标记法
匈牙利标记法
数组：? a
布尔值： b
浮点数： f
函数：????fn
整数：??? i
对象：??? o
正则表达式： re
字符串：??? s
变型：?????? v
?
未定义： Undefined
空：?????? Null
对象：??? Object
?
1. 字符串函数（String）：
length属性
charAt(i)
indexOf()
lastIndexOf()????????? 找不到返回-1
?
?
slice, substring, substr
slice支持负数，并且支持数组操作
substring可以倒置序号，负数为0
substr起始位置，长度
?
document.write可以直接写html网页
?
2. 数值型（Number)
?
9e5 科学计数法
toExponential（）
?
3. 布尔型 （Boolean）
true，false
typeof(true)
?
数值类型转换为字符串，可以用toString（2，8，16）进行进制转换。
?
boolean
number
string
object
?
4. 数组
var arr = new Array(1,"1",true);
var arr = [1,2,3];
?
join（）方法，改变连接数组项的“，”分隔符
split（）方法，字符串风格成数组
reverse（）方法，数组反序，可以用来进行字符串反转
sort（）方法，数组元素排序
push（），pop实现栈的功能
?
var iNumber = Number(prompt("请输入一个数字", ""));
if (isNaN(iNumber)) {
}
?
日期对象
var myDate = new Date();
date1 - date2 毫秒数
?
new Date("month dd,yyyy hh:mm:ss")
new Date("month dd,yyyy")
new Date(yyyy,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);
new Date(ms);
?
Math Object
ceil() floor(), round()
?
Math.floor(Match.random()*total + firstnumber)
?
Window对象
var win?= window.open(url,"_blank","height=300,width=400,resizable=yes");
?
oWin.close();
oWin.opener
?
if (window.confirm("xxx")) {}
?
document Object
anchors
applets
embeds
forms
images
links
?
Location Object
location.href = url
location.replace(url)? 不可以使用后退
location.reload(true,false)?????? 默认是false
?
Navigator 对象
userAgent属性可以检测浏览器版本及操作系统版本
?
Screen 对象
window.moveTo(0,0);
window.resize(screen.availWidth,screen.availHeight);
?
?
第3讲 CSS基础
?
行内样式? style
内嵌式?? <style></style>
链接式
导入式 @import url(1.css);
?
标记选择器??? <p>
类别选择器
?.class
?
ID选择器
#id
?
p b {}?? b标记嵌套p才有效
?
子选择器??? ul.myList > li > a
属性选择器?? a[title=CSS] {};
?
CSS设置文字效果
（1）文字样式
font-family??? 字体
font-size?????? 字号
color
font-weight??粗细
font-style?????斜体
text-decoration???? 下划线，删除线，顶划线
（2）段落文字
（3）首字放大
?
参见?project CSS基础?? 首字放大.jsp
?
?CSS设置图片效果
（1）图片的边框???????????
参见?project CSS基础?? 图片的边框样式.jsp
（2）图文混排
参见?project CSS基础?? 图文混排.jsp
?
CSS页面背景设置
(1) 设定背景颜色实现页面分块
参见?project CSS基础?? 背景颜色实现页面分块.jsp
(2) 设定背景图片
参见?project CSS基础?? 背景图片.jsp
(3) 设定超链接效果
参见?project CSS基础?? 设定超链接效果.jsp
?
?
第4讲 CSS进阶
?
1. <div>与<span>
?
<div>是段落标记
<span>是行标记
?
2. 盒子模型
content，border，padding和margin四个部分组成
?
浏览器兼容性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
IE：height+width指content + padding + border
Firefox：content
?
3. 元素的定位
float定位
float:left;
position定位 absolute??? 四个属性：left,rigth,top,bottom
position: absolute;
?
父块采用position时，则子块相对与父块
?
若子块采用position:relative，则父块设置的padding起作用
?
若不希望div大小充满屏幕，自己设置float或width
?
Z-index: 页面垂直管理
?
CSS排版观念
<div id="container">
???? <div id="banner">
???? <div id="content">
?????<div id="links">
???? <div id="footer">
</div>
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?