javascript 小结

JavaScript总结

****************************JavaScript ******************************************

=====================第一章 javascript的基本语法==========================
1.HTML语言是一种标记语言，用于定义页面内容和表现形式，不具备逻辑性，不能与用户进行交互
JavaScript是一种基于对象和事件驱动的脚本语言，它提供专有的类、对象及函数。

(1)机器语言有两种执行方式：编译执行和解释执行
(2)脚本语言：脚本语言是HTML文档中嵌入一种具有程序逻辑的语言, 用于控制页面元素的行为，实现数据合法性验证
(3)javaScript语言：
a.严重误区:Java与JavaScript完全不同
b.工作原理:浏览器解释执行（所以：无需安装虚拟机）
c.特点：
各种浏览器解析方式不同
弱类型语言
灵活易操作

2基本数据类型
.javaScript的基本数据类型包括Number、Boolean、Null、String、Undefined
? JavaScript提供了4种基本的数据类型用来处理数字和文字
? Number类型
? 例如:　15    2.9     4E5
? String类型
? 例如　"abc"    "jack "    " "
? Null类型
? 只有一个值，即null。Null是一个位符，表示一个变量已经有值，但值为空
? Boolean类型
? 布尔类型只取两个值true或false
? Undefined类型
? 该类型只有一个undefined值，系统将自动把任何未赋值的变量赋值为undefined

3.变量和常量
变量的主要作用是存取数据、提供存放信息的容器。程序可以使用变量名来访问变量中的数据
Javascript中使用var关键字声明变量
语法：var variableName[=value];

? 变量的命名需要遵守一定的规范，主要有以下几点
? 变量名由字母、数字、下划线和$组成
? 变量名的首字母必须是字母、$或下划线
? 不能使用JavaScript 保留字（关键字），注意区分大小写

? JavaScript的常量通常又称字面常量，它是不能改变的数据，与基本的数据类型同对应，有以下几种常量。
? 整型常量        可以使用十六进制、八进制、十进制表示整型常量的值
? 实型常量        通常用整数加小数部分表示
? 布尔值          只有true和false两种状态
? 字符型常量    通常使用单引号（‘’）或双引号（“”）标注的字符
? 空值(null)        表示什么也没有
? undefined常量    表示变量还未被赋值或对象的某个属性不存在

Null和undefined
----------------------------------------------------------------------------------------------------------------------
? null表示变量尚未赋值，在次环境下会使用
? 表示变量存在，但不需要赋值
? 作为函数返回值，表示没有可以返回的值

? undefined类型是一个常量，它只有一个值，即“undefined”。与Null比较，则无需定义变量，可以用undefined直接检查代码。
----------------------------------------------------------------------------------------------------------------------

类型转换
? parseInt (String)
? 将字符串转换为整型数字
?  如：parseInt (“123")将字符串“123”转换为整型值123
? parseFloat(String)
?  将字符串转换为浮点型数字
?  如: parseFloat (“5.45")将字符串“5.45”转换为浮点值5.45

运算符
? 运算符是一种特殊符号，用于实现数据之间的运算、赋值和比较等功能
? 根据运算符的功能，可分为以下几种：
? 算术运算符
            +、-、 * 、 / 、%、++、--
? 比较运算符
==、!=、>、>=、<、<=
? 逻辑运算符
            &&、||、！

注释
? JavaScript 注释有两种
? 单行注释     //
? 多行注释     /**/

流程控制语句
? if条件语句
? switch多分支语句
? for、while、do…while循环语句
? break 和 continue 语句
break 语句来中断一个循环的运行。continue 语句用来跳过余下的代码块而直接转到下一次循环继续执行

4.函数与事件
函数是指一段需要重复使用的代码的集合
Javascript中定义函数必须以function开头
function 　函数名　(参数列表)
{
函数代码块;
return 表达式;
}

事件指的是通过鼠标或按钮在浏览器窗口或网页上执行的操作，如鼠标单按钮产生的onclick事件等
常用事件有onload、onclick、onmouseover、onmouseout、onchange等

 

======================第二章  DOM编程=================================
1.浏览器对象模型
浏览器对象模型是用于描述对象与对象之间层次关系的模型，该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

1.1window对象
 Window 是浏览器对象模型中的顶层对象，它代表一个浏览器窗口。
打开一个新浏览器窗口可以使用window对象中的open方法实现
语法：
window.open([URL][,Name][,Features])
其中URL指打开窗口后加载的文档地址，Name指窗口名称，Features指窗口特征
1.2 history对象
history对象用来管理当前窗口最近访问过的URL
history.forward、history.go(1)表示前进
history.back、history.go(-1)表示后退
1.3 location对象
location对象用来管理当前打开窗口的URL信息

2.文档对象模型
2.1 DOM概述
? DOM－Document Object Model（文档对象模型） ，它是W3C国际组织的一套Web标准
? DOM是一种与浏览器、平台、语言无关的接口

document对象代表浏览器窗口中加载的整个HTML文档
document对象是window对象的一个属性

? document对象访问页面元素的常用方式有四种
? document.all.页面元素名称;
? document.表单名.元素名称;
? document.getElementById("ID名称");
? document.getElementsByName("元素名称");

2.2节点信息
常用节点属性
childNodes当前节点的所有子节点
firstChild当前节点的所有子节点中第一个节点
lastChild当前节点的所有子节点中最后一个节
parentNode当前节点的父节点
nodeValue节点值
nodeName节点的名称
nodeType节点的类型

常用节点类型
类型 值 描述
元素节点 1 HTML标签
属性节点 2 HTML标签中的属性
文本节点 3 文本信息

 

 

2.3 动态添加和删除节点
document文档对象可以创建、添加、删除DOM支持的任何类型的节点
使用document.createElement创建节点
document.createElement的功能是创建一个指定标签名的元素节点，标签名可以是任何名字，包括自定义的标签
使用appendChild(node)将节点追加到所有子节点的末尾
使用removeChild删除节点

2.4 innerHTML属性
innerHTML是DOM节点的一个属性，它表示节点的开始标签与结标签之间的内容

 

======================第三章    表单验证与正则表达式=====================
1.表单验证
表单验证分为两步：第一步是编写验证函数验证表单数据的合法性，第二步是处理表单onsubmit，即在表单提交事件中调用表单验证函数

使用String对象处理表单验证
String 是动态对象，需要创建对象实例后才能引用它的属性或方法

substr和subString方法的主要区别：
substr方法用于截取指定长度的子字符串，subString方法用于截取指定范围的子字符串

2.正则表达
2.1 正则表达式概述
? 正则表达式是一种对文字进行模糊匹配的语言。
2.2 创建RegExp对象
? RegExp是JavaScript中提供的一种用来完成有关正则表达式操作和功能的对象
创建正则表达式的两种方式：
1． 构造函数方式
var reg=new RegExp(“表达式”,”附加参数”);
2普通方式:
var reg = /表达式/附加参数

常用方法
test 它指出在被查找的字符串中是否存在模式
exec 用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组

3查找和替换
match  使用正则表达式模式查找字符串，并返回包含查找结果的数组
search  返回与正则表达式查找内容匹配的第一个子字符串的位置
replace  返回根据正则表达式进行文字替换后的字符串

 

===================第四章  表单验证高级特效 ============================
1.访问样式属性
   使用元素的style属性访问样式规则
语法：
object.style.property;
className属性的用法
className属性可以动态引用样式的类选择器
语法：
object.className= "className";

2.数组的定义和使用
Array是JavaScript的内置对象

创建数组
(1) var array = new Array();
创建初始元素个数为0的Array对象，可以使用动态赋值的方式为数组添加新元素：
array[0] =”10”;
array[1] = “jack”;
array[2] = 25;

(2) var array = new Array(3);
javaScript 中不存在数组越界
创建具有指定大小的Array对象，当用户访问的下标超出指定的长度时，数组自动扩展
系统将自动把为赋值的元素赋为常量值undefined

(3) var array = new Array(10,30,25);
数组长度由列表中元素个数决定。

常用属性
length表示的是数组所占内存空间的数目
常用方法
join()  将数组转换为使用符号连接的字符串
reverse()   将数组进行反向排序
sort()    对数组进行排序

2.2 使用for-in语句遍历数组
for-in语句的功能用于对某个对象的所有属性进行循环操作
语法：
for(变量  in  对象)
  {
    执行语句;
  }

==========================================================================================第五章  CSS高级特效(一)=============================
? 页面Tab特效基本组成部分包括Tab菜单和Tab内容
? 页面Tab特效的实现思路
? 使用display属性实现内容的显示和隐藏
? 使用className属性动态切换样式规则

实现自动切换效果需要借助于setTimeout函数的定时调用功能。
制作遮罩层特效
? 遮罩层由网页内容、遮罩层部分和弹出层三部分组成
!important用于提高指定样式规则在非IE浏览器中的应用优先权

scrollWidth
是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。
clientWidth
是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth
是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

=======================第六章  CSS高级特效(二)==========================
1.制作下拉式导航菜单
hover对象用于设置鼠标悬停时的样式表属性
使用onmouseover和onmouseout事件处理程序实现hover对象的鼠标悬停功能

2.制作树形菜单
树形菜单的制作类似于下拉导航菜单，采用嵌套ul实现菜单的结构

3.制作图片轮换广告
图片轮换特效通常由轮换图片、导航按钮和导航标题三个部分组成

======================================================================

****************************************************************************
JavaScript创建数组有两种方式
使用[]创建
使用new关键字创建数组对象Array()
在JavaScript中可以创建命名函数、匿名函数和内部函数
JavaScript中函数的参数长度是不固定的，实际参数可以与形式参数的个数不同
JavaScript中对象就是无序属性的集合，对象的属性可以是任何类型的数据
JavaScript常用的内置对象
Global对象时顶级对象，在浏览器中，window对象就是Global对象
Object对象时所有对象
Function对象的构造函数可以创建函数对象
Object对象是所有对象的基础，任何其他对象都是从Object对象扩展而来
当一个内部函数在包含它们的外部函数之外被调用时，就会形成闭包。闭包可以读取函数内部的变量，让这些变量的值始终保持在内存中
JSON是一种基于文本格式的轻量级对象，使用JavaScript处理JSON数据简单、方便