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);