1.概念：
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
2.特点
向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释
3.组成
ECMAScript
DOM
BOM
4.用法
1）基础语法
JavaScript 代码必须位于 <script> 与 </script> 标签之间。
<script type="text/javascript">//申明
<!—
JavaScript 语句;//内容
—>
</script >
2）网页中引用JavaScript的方式
外部JS文件
<script src="export.js" type="text/javascript"></script>
直接在HTML标签中
<input type=”buttom” value=”按钮” onclick=””;/>
3）JavaScript核心语法
1.申明变量：关键字 var
申明方式：
1）先申明再赋值
var width;
width = 5;
2）同时声明和赋值变量var catName= "皮皮";
var x, y, z = 10;
3）不声明直接赋值 width=5;
注：变量可以不经声明而直接使用，很难查找排错，不推荐使用
2.基本数据类型
Undefined 变量没有初始值，将被赋予值undefined
Null 表示一个空值，与undefined值相等
Number var iNum=23; //整数
var iNum=23.0; //浮点数
Boolean true和false
String 一组被引号（单引号或双引号）括起来的文本
3.typeof运算符
typeof检测变量的返回值
typeof运算符返回值如下
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null
4.String对象
属性
字符串对象.length
var str="this is JavaScript";
var strLength=str.length; //长度是18
5.方法
字符串对象.方法名();
charAt(index) 返回在指定位置的字符
indexOf(str，index) 查找某个指定的字符串在字符串中首次出现的位置
substring(index1，index2) 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str) 将字符串分割为字符串数组
6.数组
1）创建数组并且赋值
var 数组名称 = new Array(size);
New：表示数组的关键字
Size：表示数组中可存放的元素总数
Eg：
1）var fruit= new Array("apple", "orange", " peach","banana");
2）var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";
2）数组的常用属性和方法
|
类别 |
名称 |
描述 |
|
属性 |
length |
设置或返回数组中元素的数目 |
|
方法 |
join( ) |
把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔 |
|
sort() |
对数组排序 |
|
|
push() |
向数组末尾添加一个或更多 元素，并返回新的长度 |
7.运算符号
|
类型 |
运算符 |
|
算术运算符 |
+ - * / % ++ — |
|
赋值运算符 |
= += -= |
|
比较运算符 |
> < >= <= == != === !== |
|
逻辑运算符 |
&& || ! |
9.注释
单行注释以 // 开始，以行末结束
多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释
10.定义和使用函数
1）定义：函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
2）使用：更简单：不用定义属于某个类，直接使用:
3）函数分类：系统函数和自定义函数
4）常用系统函数
parseInt ("字符串")
将字符串转换为整型数字
如: parseInt ("86")将字符串“86“转换为整型值86
parseFloat("字符串")
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字
5）自定义函数
1）定义函数
function 函数名( ){
//JavaScript语句
[return 返回值]
}
2）调用函数
函数调用一般和表单元素的事件一起使用，调用格式
事件名＝ "函数名( )" ;
调用无参函数
调用无参函数，输出5次“欢迎学习JavaScript”
function study( ) {
for(var i=0;i<5;i++){
document.write("<h4>欢迎学习JavaScript</h4>");
}
}
单击此按钮时，调用函数study( )，执行函数体中的代码
<input name="btn" type="button" value="显示5次欢迎学习JavaScript" onclick="study( )" />
调用有参函数
根据输入的次数，显示“欢迎学习JavaScript“
function study(count ){
for(var i=0;i<count;i++){
document.write("<h4>欢迎学习JavaScript</h4>");
}
}
单击此按钮时，调用函数study( )，执行函数体中的代码
<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"
onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:','' ))" />
11.使用工具进行代码调试
实现步骤：
1）Chrome开发人员工具
停止断点调试
单步调试，不进入函数体内部
单步调试，进入函数体内部
跳出当前函数
禁用所有的断点，不做任何调试
2）alert()方法
12.BOM 和DOM操作对象
1.BOM模型的介绍
1.概念： 浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
2 .功能： 弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退
2.window对象
1.常用方法
prompt( ) 显示可提示用户输入的对话框
alert( ) 显示带有一个提示信息和一个确定按钮的警示框
confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框
close( ) 关闭浏览器窗口
open( ) 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( ) 在指定的毫秒数后调用函数或计算表达式
setInterval( ) 按照指定的周期（以毫秒计）来调用函数或表达式
2.方法详介
1.confirm()与alert ()、 prompt()区别
alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
Eg： <script type="text/javascript">
var flag=confirm("确认要删除此条信息吗？");
if(flag==true){
alert("删除成功！");
} else{
alert("你取消了删除");
}
</script>
2.open()方法
1）语法
window.open("弹出窗口的url","窗口名称","窗口特征”)
2）open方法的属性
height、width 窗口文档显示区的高度、宽度。以像素计。
left、top 窗口的x坐标、y坐标。以像素计
。。。。。 省略，在国内浏览器不常用
3.window常用的属性
1.history（有关客户访问过的URL的信息）
常用方法
back() 加载 history 对象列表中的前一个URL
forward() 加载 history 对象列表中的下一个URL
go() 加载 history 对象列表中的某个具体URL
注：history.back等价于history.go(-1) 浏览器中的“后退”
history.forward()等价于history.go(1)浏览器中的“前进”
2.location（有关当前 URL 的信息）
常用属性
Host 设置或返回主机名和当前URL的端口号
Hostname 设置或返回当前URL的主机名
Href 设置或返回完整的URL
常用方法
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
2）DOM对象
1.常用属性以及语法
属性：
Referrer 返回载入当前文档的URL
URL 返回当前文档的URL
语法：
document.referrer
document.URL
2.常用方法
getElementById() 返回对拥有指定id的第一个对象的引用 对象的id唯一
getElementsByName() 返回带有指定名称的对象的集合 相同name属性
getElementsByTagName() 返回带有指定标签名的对象的集合 相同的元素
write() 向文档写文本、HTML表达式或JavaScript代码
3.JavaScript内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
Date：用于操作日期和时间
4.访问节点
1.使用getElement系列方法访问指定节点
getElementById()
getElementsByName()
getElementsByTagName()
2.根据层次关系节点属性
3.根据层次关系访问element属性
4.节点信息
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
5.操作节点
1）操作节点的属性
getAttribute("属性名")
setAttribute("属性名","属性值")
2）操作节点
创建/添加/插入/复制/节点
createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点
删除和替换节点
RemoveChild( node) 删除指定的节点
replaceChild( newNode, oldNode)属性 用其他的节点替换指定的节点
3)操作节点样式
style属性
HTML元素.style.样式属性＝"值"
Eg: document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
className属性
获取元素的样式
(1)HTML元素.style.样式属性;
Eg: alert(document.getElementById("cartList").display);
(2) document.defaultView.getComputedStyle(元素,null).属性;
Eg:var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);
(3) HTML元素. currentStyle.样式属性;
Eg:alert(document.getElementById("cartList").currentStyle.display);