****************************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数据简单、方便