CSS与JavaScript复习笔记
2008-11-21 15:13
615 查看
1. JavaScript的语法
- 区分大小写
- 弱类型变量
- 每行结尾的分号可有可无
- 括号用于代码块
- 注释的方式与C语言、Java相同
2. 变量
- JavaScript中变量是通过var关键字（variable的缩写）来声明的。
- 首字符必须是字母（大小写均可）、下划线（_）或者美元符号（$）。
- 余下的字母可以是下划线、美元符号、任意字母或者数字字符。
- 变量名不能是关键字或者保留字。
3. 数据类型
- 字符串
- 数值
- 布尔值
- 数组
4. 条件语句
- 比较操作符
- 逻辑操作符
- if语句
- switch语句
5. 循环语句
- while语句
- for语句
6. 函数
div与span标记
在使用CSS排版的页面中，<div>与<span>是两个常用的标记，<div>(division)简单而言是一个区块
容器标记，即<div>...</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节
、摘要和备注等各种HTML元素。
在一般情况下div与span都是一个块，一个大的容器，当然也有其区别：
div像一个P标记，会自动换行，而span标记不会换行，横向排列
盒子模型：
一个盒子由(由里向外)content、border、padding、margin这四部分组成
元素的定位
float定位
position定位
*absolute 绝对定位
*relative 相对定位
z-index空间位置
CSS排版观念
1、将页面用DIV分块
<div id="container">
<div id="banner"></div>
<div id="content"></div>
<div id="links"></div>
<div id="footer"></div>
</div>
2、设计各个块的位置
--------------------------
| #container |
| #banner |
| #content #links |
| #footer |
|-------------------------
3、用CSS定位
主要就是运用position、float等来定位
-------------------------------------------------------------------------
DOM模型框架：
文档对象模型DOM（Document Object Module）定义了用户操作文档对象的接口，可以说DOM是
自HTML将网上相关文档连接起来后最伟大的创新，它使得用户对HTML有了空前的访问能力。
DOM模型中的节点
*元素节点
*文本节点
*属性节点
如<a title="css" href="http://www.baidu.com">baidu</a>
其中元素节点为a 属性节点为title="css" 属性节点href="http://www.baidu.com" 文件节点：
baidu
使用DOM：
访问节点
*getElementsTagName
*getElementById
父子关系(可以通过某一个元素遍历其它元素.hasChildNodes()-->childNodes)
节点的属性(元素.getAttribute("属性"))
创建新节点
如：var op=document.createElement("p");//新建一个P标签
var oText=document.createTextNode("这是一个故事");//创建一个文本节点
oP.appendChild(oText);//将文本节点赋给元素节点，做为其子节点
document.body.appendChild(oP);//将元素节点赋给body对象
innerHTML
该属性表示某个标记之间的所有内容，包括代码本身
该属性可以读取，也可以写
javascript事件
事件流
*冒泡型事件
*捕获型事件(IE浏览器不支持)
事件监听
*简单的通用方法 如：
<script language="javascript">
window.onload=function(){
var oP=document.getElementById("myP");
oP.onclick=function(){
alert("我被点击了");
}
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
*IE的监听函数
<script language="javascript">
function fnClick(){
alert("我被点击了");
oP.detachEvent("onclick",fnClick);//点击一次后删除监听函数
}
var oP
window.onload=function(){
oP=document.getElementById("myP");//找到对象
oP.attachEvent("onclick",fnClick);//添加监听函数
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
*标准DOM事件
事件对象
IE浏览器中事件对象是window对象的一个属性event
如：oP.onclick=function(){
var oEvent=window.event;//将一个事件对象赋给一个变量
}
DOM标准中规定event对象必须作为唯一的参数传给事件处理函数
如:Op.onclick=function(Oevent){
//......
}
因此为了兼容两种浏览器，通常采用下面的方法
oP.onclick=function(oEvent){
if(window.event)oEvent=window.enent;
}
事件类型
对象事件绑定：如：对象.onclick=函数;
if(window.event)oEvent=window.enent;
if(oEvent.type=="click"){
//....
}else if(oEvent.type="mouseover"){....}
表格与表单
1、动态控制表格
*动态添加
如：<table id="member" ....>...</table>这么一个表格
js: var oTr=document.getElementById("member").insertRow(2);//获得表格引用并插入一行,行标为2
var aText=new Array();//新建一个数组,在数组中添加各文本节点
aText[0]=document.createTextNode("文本数据");
....
for(var i=0;i<aText.length;i++){
var oTd=oTr.insertCell(i); //为表格添加单元格
oTd.appendChild(aText[i]);//将文本节点添加到单元格中
}
*动态删除
如：<table id="member" ....>...</table>这么一个表格
js: var oTable=document.getElementById("member");
oTable.deleteRow(2);//删除一行，后面的行号自动补齐
oTable.row[2].deleteCell(1);//删除一个单元格，后面的也自动补齐
2、表单基础
-可以通过document.form集合来引用表单，例如一个name属性为“myForm1”的表单可以用
如下语句来获得：document.forms[”myForm1″],其中HTML部分为：
<form method="post" name="myForm1" action="addInfo.do">
表单元素：
<label for="name">文本</label><input ......> label给我们带来了友好的提示,我们在书写表单时应
尽量的使用label标记
控制字符个数
*单行文本框的maxlength属性,而<textarea>的字符个数要通过js来控制输入
*<textarea ... maxlength=50 onkeypress="return LessThan(this)"></textarea>
js: function LessThan(oTestArea){
//返回文本框字符个数是否符号要求的bollean值
return oTextArea.value.length<oTextArea.getAttribute("maxlength");
}
自动选择文本
*鼠标经过时自动聚焦，并且能够选中默认值以便用户直接删除
如：<input type="text" name="name" id="name" value="姓名"
onmouseover="this.focus()" onfocus="this.select()">
javascript调试与优化
1、错误与异常
-拼写错误
-访问不存在的变量
-括号不匹配
-连接错误
-混淆等号(==)与赋值(=)
2、错误调试
try{
.....
}catch(exception){
var sError="";
for(var i in exception)
sError+=i+":"exception[i]+"/n";
alert(sError);
}
- 区分大小写
- 弱类型变量
- 每行结尾的分号可有可无
- 括号用于代码块
- 注释的方式与C语言、Java相同
2. 变量
- JavaScript中变量是通过var关键字（variable的缩写）来声明的。
- 首字符必须是字母（大小写均可）、下划线（_）或者美元符号（$）。
- 余下的字母可以是下划线、美元符号、任意字母或者数字字符。
- 变量名不能是关键字或者保留字。
3. 数据类型
- 字符串
- 数值
- 布尔值
- 数组
4. 条件语句
- 比较操作符
- 逻辑操作符
- if语句
- switch语句
5. 循环语句
- while语句
- for语句
6. 函数
div与span标记
在使用CSS排版的页面中，<div>与<span>是两个常用的标记，<div>(division)简单而言是一个区块
容器标记，即<div>...</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节
、摘要和备注等各种HTML元素。
在一般情况下div与span都是一个块，一个大的容器，当然也有其区别：
div像一个P标记，会自动换行，而span标记不会换行，横向排列
盒子模型：
一个盒子由(由里向外)content、border、padding、margin这四部分组成
元素的定位
float定位
position定位
*absolute 绝对定位
*relative 相对定位
z-index空间位置
CSS排版观念
1、将页面用DIV分块
<div id="container">
<div id="banner"></div>
<div id="content"></div>
<div id="links"></div>
<div id="footer"></div>
</div>
2、设计各个块的位置
--------------------------
| #container |
| #banner |
| #content #links |
| #footer |
|-------------------------
3、用CSS定位
主要就是运用position、float等来定位
-------------------------------------------------------------------------
DOM模型框架：
文档对象模型DOM（Document Object Module）定义了用户操作文档对象的接口，可以说DOM是
自HTML将网上相关文档连接起来后最伟大的创新，它使得用户对HTML有了空前的访问能力。
DOM模型中的节点
*元素节点
*文本节点
*属性节点
如<a title="css" href="http://www.baidu.com">baidu</a>
其中元素节点为a 属性节点为title="css" 属性节点href="http://www.baidu.com" 文件节点：
baidu
使用DOM：
访问节点
*getElementsTagName
*getElementById
父子关系(可以通过某一个元素遍历其它元素.hasChildNodes()-->childNodes)
节点的属性(元素.getAttribute("属性"))
创建新节点
如：var op=document.createElement("p");//新建一个P标签
var oText=document.createTextNode("这是一个故事");//创建一个文本节点
oP.appendChild(oText);//将文本节点赋给元素节点，做为其子节点
document.body.appendChild(oP);//将元素节点赋给body对象
innerHTML
该属性表示某个标记之间的所有内容，包括代码本身
该属性可以读取，也可以写
javascript事件
事件流
*冒泡型事件
*捕获型事件(IE浏览器不支持)
事件监听
*简单的通用方法 如：
<script language="javascript">
window.onload=function(){
var oP=document.getElementById("myP");
oP.onclick=function(){
alert("我被点击了");
}
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
*IE的监听函数
<script language="javascript">
function fnClick(){
alert("我被点击了");
oP.detachEvent("onclick",fnClick);//点击一次后删除监听函数
}
var oP
window.onload=function(){
oP=document.getElementById("myP");//找到对象
oP.attachEvent("onclick",fnClick);//添加监听函数
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
</body>
*标准DOM事件
事件对象
IE浏览器中事件对象是window对象的一个属性event
如：oP.onclick=function(){
var oEvent=window.event;//将一个事件对象赋给一个变量
}
DOM标准中规定event对象必须作为唯一的参数传给事件处理函数
如:Op.onclick=function(Oevent){
//......
}
因此为了兼容两种浏览器，通常采用下面的方法
oP.onclick=function(oEvent){
if(window.event)oEvent=window.enent;
}
事件类型
对象事件绑定：如：对象.onclick=函数;
if(window.event)oEvent=window.enent;
if(oEvent.type=="click"){
//....
}else if(oEvent.type="mouseover"){....}
表格与表单
1、动态控制表格
*动态添加
如：<table id="member" ....>...</table>这么一个表格
js: var oTr=document.getElementById("member").insertRow(2);//获得表格引用并插入一行,行标为2
var aText=new Array();//新建一个数组,在数组中添加各文本节点
aText[0]=document.createTextNode("文本数据");
....
for(var i=0;i<aText.length;i++){
var oTd=oTr.insertCell(i); //为表格添加单元格
oTd.appendChild(aText[i]);//将文本节点添加到单元格中
}
*动态删除
如：<table id="member" ....>...</table>这么一个表格
js: var oTable=document.getElementById("member");
oTable.deleteRow(2);//删除一行，后面的行号自动补齐
oTable.row[2].deleteCell(1);//删除一个单元格，后面的也自动补齐
2、表单基础
-可以通过document.form集合来引用表单，例如一个name属性为“myForm1”的表单可以用
如下语句来获得：document.forms[”myForm1″],其中HTML部分为：
<form method="post" name="myForm1" action="addInfo.do">
表单元素：
<label for="name">文本</label><input ......> label给我们带来了友好的提示,我们在书写表单时应
尽量的使用label标记
控制字符个数
*单行文本框的maxlength属性,而<textarea>的字符个数要通过js来控制输入
*<textarea ... maxlength=50 onkeypress="return LessThan(this)"></textarea>
js: function LessThan(oTestArea){
//返回文本框字符个数是否符号要求的bollean值
return oTextArea.value.length<oTextArea.getAttribute("maxlength");
}
自动选择文本
*鼠标经过时自动聚焦，并且能够选中默认值以便用户直接删除
如：<input type="text" name="name" id="name" value="姓名"
onmouseover="this.focus()" onfocus="this.select()">
javascript调试与优化
1、错误与异常
-拼写错误
-访问不存在的变量
-括号不匹配
-连接错误
-混淆等号(==)与赋值(=)
2、错误调试
try{
.....
}catch(exception){
var sError="";
for(var i in exception)
sError+=i+":"exception[i]+"/n";
alert(sError);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS和Javascript简单复习资料
- 学习Html、css和Javascript中的常用标签英文缩写笔记（可供同学们参考）
- JavaScript中级笔记(2)-转cssrain.cn
- javascript css html笔记
- 《web前端开发技术——html、css、javascript》笔记之二
- JavaScript细节知识点复习笔记
- jquery复习笔记2 - 选择器 定义css
- 【代码笔记】HTML+CSS+JavaScript实现密码输入框显示文字
- （清华大学HTML+CSS+JavaScript入门到精通学习笔记）第一章 网页设计基础
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理
- javascript复习笔记（三）
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理
- html+(DIV+CSS)+javascript视频笔记(全)
- 【HTML+CSS+JavaScript】网页实战开发笔记之二—关于Web标准，你不能不知道的事
- 韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- javascript与CSS复习（《精通javascript》）
- JavaScript中级笔记(3)-转cssrain.cn