JavaScript是基于对象和事件的脚本语言
。
一、JavaScript特点
1、交互性:信息的动态交互
2、安全性:不允许直接访问本地硬盘),它可以做的就是信息的动态交互。
3、跨平台性:只要是可以解释Js的浏览器都可以执行,和平台无关。
二、JavaScript与Java不同
1、JavaScript是Netscape公司的产品,Java是Sun公司的产品
2、JavaScript是基于对象,Java是面向对象。
3、JavaScript只需解释就可以执行,Java需要先编译成字节码文件,再执行。
4、JavaScript是弱类型,Java是强类型。
三、JavaScript的组成
JavaScript语法基础
使用JS操作网页(DOM)
使用JS操作浏览器(BOM)
四、JS引入方式与引入位置
向HTML页面插入JavaScript的主要方法,就是使用中。
例:
注:规范中script标签中必须加入type属性。
Day2
注意:
1、页面上可以有多个关闭,而不能这样关闭。否则没有任何错误信息,但是没有运行结果。
五、JacaScript语法
1、常用函数
window.alert()
或写为 alert() :
显示一个提示框显示内容。
window.document.write() :
在网页的当前位置处写内容。
2、变量
变量是弱类型的
与 Java不同,ECMAScript 中的变量无特定的类型
定义变量时只用var
运算符,可以将它初始化为任意值。
var color = "red";
var num = 25;
var flag = true;
typeof()
可以用来查看当前变量的数据类型
注意:如果一个变量没有初始化值的时候,其类型为undefined
类型。表示没有定义。
3、流程控制语句
判断 if()
if (condition) statement1 else statement2
选择switch() case
function test6() {
var color = "xx";
var value1 = "red", value2 = "green";
switch(color) {
case value1:
alert("红色");
break;
case value2:
alert("绿色");
break;
default:
alert("执行默认default");
}
}
循环
while循环
//while循环
var i = 0;
while (i < 10) {
i += 2;
}
for循环
iCount = 6;
for (var i = 0; i < iCount; i++) {
alert(i);
}
for in 语句: 用于枚举对象的属性或者遍历一个数组的元素
for (sProp in window) {
alert(sProp);
}
with 语句 : 在存取对象属性和方法时就不用重复指定参考对象。
99乘法表案例
4、数组
指定长度
var arrs=new Array(20);
指定元素
var arrs=new Array("hello");
创建一个包含3个字符串的数组
var arrs=["aa","bb","cc"];
数组遍历:
for(var i = 0; i < arr.length; i++){
alert(arr[i]);
}
或
for( var i in arr ){
// i 是遍历出的数组中的索引,从0开始,一直到最大索引。
// 如果有其他属性,也会遍历出来,其实索引就是数组对象的属性。
alert(arr[i]);
}
注意:
JS数组可以动态增长:
5、JS的函数
函数格式
Function 函数名(参数列表){
代码;
return 返回值; //return 不是必须的.
}
示例:
function foo() {
alert("test");
}
function foo2( a ){
alert(a);
return; // 没有返回值,表示方法执行完了,后面如果有代码就不会执行了
}
function foo3( a, b ){
alert(a + b);
}
function foo4( a, b ){
return a + b;
}
特点:
1、使用function关键字定义函数。
2、没有任何的返回值类型。
3、函数的定义优先执行,与顺序无关。
4、可以通过函数名赋值函数,函数变量的类型是function对象。
5、参数列表不能有var关键字。
6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。
7、JavaScript函数天然的支持可变参数。
8、同名的函数最后声明会覆盖前面以声明。JavaScript中没有函数重载。
六、JavaScript对象
1、String对象
//通过构造函数创建String 对象
var b = new String("java");
var c = new String("java");
document.write(b + "," + c);
document.write(b == c);
//false
//比较字符串的值是否相等
document.write(b.valueOf() == c.valueOf());
属性:length 字符串的长度
document.write(a.length);
方法
1、与HTML相关的方法
bold()
将字体加粗
fontcolor()
设置字体的颜色
fontsize
设置字体的大小
link()
设置链接
sub()
显示为下标
sup()
显示为上标
2、与java相似的方法
concat()
连接字符串
charAt()
返回指定位置的下标,若字符位置不存在则返回空字符串
indexOf()
检索字符串的位置,若不存在返回-1
split()
将字符串切分为字符数组
replace()
替换与正则表达式匹配的子串replace("a","b")
b替换a
substr()
从第几位开始向后截取几位
substring()
提取字符串中两个指定的索引号之间的字符(两个参数,包头不包尾)
2、Array对象
方法
concat()
连接两个数组,返回一个新的数组
join()
根据指定字符将数组分割(替换一般数组中用逗号进行数组分隔)
push()
向数组的末尾添加一个或多个元素,并返回新的长度
pop()
删除并返回最后一个元素
reverse()
颠倒数组中元素的顺序
sort()
对当前数组进行排序,并返回已经进行了排序的此Array对象
shift()
移除数组中的第一个元素并返回该元素。如果该数组为空,那么将返回 undefined。
unshift([item1[, item2 [, . . . [, itemN]]]])
将指定的元素插入数组开始位置并返回该数组。
splice(start, deleteCount, [item1[, [, . . . [,itemN]]]])
移除从 start 位置开始的指定个数的元素,并插入新元素
3、Date对象
获取当前时间var date = new Date();
toLocaleString()
将时间转化为中国习惯的年月日小时分钟
getFullYear
从 Date 对象以四位数字返回年份
getMonth()
从 Date 对象返回月份 (0 ~ 11)
getDate()
从 Date 对象返回日(1~31)
getDay()
从 Date 对象返回星期(0~6)
getHours()
返回 Date 对象的小时 (0 ~ 23)
getMinutes()
返回 Date 对象的分钟 (0 ~ 59)
getSeconds()
返回 Date 对象的秒数 (0 ~ 59))
//获取系统时间
var date = new Date();
//获取年 月 日时分秒
var str = date.getFullYear() + "年" + (date.getMonth() + 1) + "月"
+ date.getDate() + "日" + "星期" + date.getDay() + " " + date.getHours() + "时"
+ date.getMinutes() + "分" + date.getMinutes() + "分" + date.getSeconds() + "秒"
getTime()
返回 1970 年 1 月 1 日至今的毫秒数
4、Math对象(静态方法:Math.方法)
ceil()
对一个数进行上舍入
floor()
对一个数进行下舍入
round()
四舍五入
random()
返回 0 ~ 1 之间的随机数
例:获得一个1~10的随机数
document.write(Math.ceil(Math.random()*10));
5、JS的全局函数
eval()
执行JavaScript代码
excape()
对字符(中文)串进行编码
decodeURI
解码某个编码的 URI
isNaN
检查某个值是否是数字(是数字返回false,不是数字返回true)
parseInt
将字符串类型转化为整数。
6、JS中的重载
JavaScript中没有重载,但是可以通过其他方式模拟重载
7、JS的BOM对象
全称 Browser Object Model,浏览器对象模型。
document.write(navigator.appName);
获取当前浏览器的名称
screen
获取屏幕的宽和高
document.write("屏幕的宽:"+screen.width);
document.write("
");
document.write("屏幕的高:"+screen.height);
location
获取到请求的URL地址
document.write("请求的URL地址:"+location.href);
window
窗口对象,顶层对象(所有的BOM对象都在window中操作)
alert()
在页面弹出一个框
window.confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。
var flog = window.confirm("是否删除")
if(flog == true){
alert("删除成功")
}else{
alert("删除失败")
alert("删除失败")
}
定时器
setInterval()
按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout()
在指定的毫秒数后调用函数或计算表达式。
clearInterval()
取消由 setInterval() 设置的定时。
clearTimeout()
取消由 setTimeout() 方法设置的定时。
8、JS的DOM对象
DOM
全称Document Object Model,即文档对象模型。
可以使用dom提供的对象的属性个方法对标记型文档进行操作
浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,
组建好之后,按照树的结构将页面显示在浏览器的窗口中。
节点层次
HTML网页是可以看做是一个树状的结构,如下:
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树,是由多个节点(Node)组成的,节点的类型有很多种。
节点最多有一个父节点,可以有多个子节点。
9、document对象
Document
对象代表整个 HTML 文档,可用来访问页面中的所有元素。
document.write()
输出内容
document.getElementById()
获取指定 id 的对象的引用。
document.getElementsByName()
返回带有指定名称的对象集合。
document.getElementsByTagName()
返回带有指定标签名的对象集合。
案例:在ul末尾添加结点
- 1111
- 2222
- 3333
- 4444
10、元素对象(element对象)
getAttribute()
获取属性里面的值
setAttribute("a","b")
添加属性和值
removeAttribute()
删除属性里面的值
getElementsByTagName()
获取标签下面的子标签
11、Node对象
nodeType
节点类型
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素,例..
文本 3 标签元素中的文本
注释 8 表示为注释
nodeName
节点名称
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue
节点值
nodeValue
对于文本节点,nodeValue 属性是所包含的文本。
对于属性节点,nodeValue 属性是属性值。
对于注释节点,nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
获取标签对象
获取属性
获取文本
哈哈哈哈
针对标签的操作
父节点:parentNode
子节点:childNodes
firstChild
lastChild
获取下兄弟(获取弟弟):nextSibling
获取大哥: previousSibling
//获取父节点.
alert(form.parentNode.nodeName);
// 获取子节点(Node 包含 文本,注释,标签)
var childArr = form.childNodes;
alert(childArr.length);
// 获取第一个孩子.
var first = form.firstChild;
alert(first);
//最后一个孩子.
var last = form.lastChild;
alert(last);
// 获取下兄弟(获取弟弟)
var sibling = form.nextSibling;
alert(sibling.nodeName);
// 获取大哥
var previous = form.previousSibling;
alert(previous.nodeName);
12、操作DOM树
appdndChild
添加子节点到末尾,类似于剪切粘贴的效果
- abc
- bcd
- cde
insertBefore(newNode,oldNode)
在某节点之前添加一个新节点
- abc
- bcd
- cde
- def
removeChild()
删除节点,通过父节点删除,不能自己删除自己
replaceChild(newNode,oldNode)
替换节点通过父节点替换子节点
cloneNode(Boolean)
复制节点(Boolean判断是否复制节点)
13、innerHTML
这个标签不是DOM属性的内容,但是大多数浏览器都支持的属性
第一个作用:获取文本内容
哈哈哈哈呵呵呵呵
第二个作用:向标签里面设置内容(可以是HTML代码)
哈哈哈哈呵呵呵呵