JavaScript
客户端脚本语言
JavaScript = ECMAScript + BOM + DOM
ECMAScript
- 客户端脚本语言的标准
与html结合方式
-
内部定义
- 使用script标签
-
外部定义
- 通过src属性引入外部js文件
-
示例
<!DOCTYPE html>
<html lang="en">
<!-- script可在任意地方写,但是script在head中则先执行,
在body中则head执行完才执行 -->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 内部方式 -->
<script>
alert("hello world");
//注释
</script>
<script src="js_0.js"></script><!-- 外部方式-->
</body>
</html>
注释
- 单行注释://
- 多行/**/
数据类型
-
原始数据类型(基本数据类型)
- number:数字(整数,小数,NaN)(NaN 不是一个数字的数字类型)
- string:字符串
- boolean
- null 空的占位符
- undefined:未定义。如果一个变量没有给初始化值,则会默认赋值为undefined
-
引用数据类型:对象
变量
js为弱类型语言:在开辟变量存储空间时不定义空间将来存储数据类型
var 变量名 = 初始化值;
<script>
// var a = 3
// alert(a);
// a = "abb";
// alert(a);
//alter是输出一个弹框
var num0 = 1;
var num1 = 1.1;
var num2 = NaN;
//document.write()为输出语句
document.write(num0 + "</br>");
document.write(num1 + "</br>");
document.write(num2 + "</br>");
</script>
运算符
- 一元运算符:只有一个运算数的运算符 ++ –
- 算数运算符
- 赋值运算符 = += -=
- 比较运算符 ===(全等于)
- 逻辑运算符 && || !
- 三元运算符 ?:判断表达式的值,真为1,假为2
- 注意:类型不同时做运算,会先进行类型转换
特殊语法
- 使用var关键字定义的变量是局部变量,不用的话是全局变量(不常用)
流程控制语句
- 同Java
- switch中的case判断可以是不同的类型的判断条件
案例
//js_1.js
var num = 1;
var count = 1;
// document.write("<table border = '1' align = 'center'>");
document.write("<table align = 'center'>");
for (num = 1; num <= 9; num++) {
document.write("<tr>");
for (count = 1; count <= num; count++) {
document.write("<td>");
document.write(num + "*" + count + "=" + num * count + " ");
document.write("</td>");
}
// document.write("<br>")
document.write("</tr>")
}
<!DOCTYPE html>
<html lang="en">
<style>
td {
border: 1px solid;//css写边框
}
</style>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js_1.js"></script>
</body>
</html>
对象
Fuction
- 函数(方法)对象
- 创建
//法一
var fun = new Fuction(形参列表,方法体);
//不常用
//法二
function 方法名称(形参){
方法体;
}
//法三
var 方法名 = function(形参){
方法体;
}
-
方法
-
属性
- length:形参个数
-
特点
- 方法定义时形参的类型不用写,返回值不需在方法定义中设置返回类型
- 方法是一个对象,如果名称相同,则会覆盖
- js中,方法的调用只与方法的名称有关,和参数列表无关
- 在方法声明中有一个隐藏的内置对象(数组),arguments封装所有实际参数
-
示例
function count(a, b) {
alert(a + b);
}
// count(1, 2);
var count1 = function (a, b) {
alert(a + b);
}
// count(2, 3);
function add() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {//这里arguments.length则为传入形参个数
// document.write(arguments[i]);
sum += arguments[i];
}
return sum;
}
var m = add(1, 2, 3, 4, 5, 6);
// document.write(m);
alert(m);
// add(1, 2, 3, 4, 5);
array
- 创建
//法一
var arr = new Array(元素列表);
//法二
var arr = new Array(默认长度)
//法三
var arr = [元素列表]
-
方法
- join(参数):将数组中的元素按指定分割符拼接成字符串,默认逗号
- push(参数):添加参数在末尾
-
属性
- length表示数组的长度
-
特点
- 数组中元素类型可变
- 数组长度可变
-
示例
var arr1 = new Array(1, 2, 3);
document.write(arr1 + "<br>");
var arr2 = new Array(2);
arr2[1] = 12;
document.write(arr2 + "<br>");
// var arr3 = new Array[1, 2, 3, 4];
// document.write(arr3 + "<br>");
var arr4 = ["asd", 1, true];//类型可变,但是注意是中括号
document.write(arr4[1] + "<br>");
document.write(arr4 + "<br>");//默认输出为一个字符串,都拼接在一起
document.write(arr4.join("-") + "<br>")
arr4.push("mt");
document.write(arr4.join("-") + "<br>")
//输出结果:
/**1,2,3
*,12
*1
*asd,1,true
*asd-1-true
*asd-1-true-mt */
Date
- 日期类
- 创建
var date = new Date();
- 方法
- tolocaleString():返回日期本地形式的字符串
- getTime():返回当前毫秒值
Math
- 数学对象
- 创建
- Math对象不用创建,直接使用
- 方法
- random() 返回介于0和1之间一个数,含0不含1
- round(数) 约数
- ceil(数) 向上舍入
- floor(数) 向下舍入
RegExp
-
正则表达式对象
-
正则表达式:定义字符串的组成原则
-
单个字符 [] 如 [a]
- \d:单个数字字符
- \w:单个单词字符
-
量词符号
- ? 表示出现0次或1次
- * 出现0次或多次
- + 出现1次或多次
- {m,n} m<= 数量 <=n,若m或n没有则表示最少或最多
-
-
正则对象
- 创建
var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
- 示例
var reg = new RegExp("^\\w{6,12}$");
// 这里前面的\表示转义,^和$表示开始和结尾
var reg1 = /^\w{6,12}$/;
// 这种常用
alert(reg);
alert(reg1);
var uname = "asdfghjkl";
var flag = reg.test(uname);
// test函数检测字符串是否符合要求
document.write(flag);
Global
-
全局对象,里面的方法不需要对象可以直接调用
-
方法
- encodeURI() url编码
- decodeURL() url解码
- encodeURIComponent() 编码
- dencodeURIComponent() 解码
- parseInt() 将括号中内容转成数字,逐一判断数字直至非数字
- isNaN() 判断一个值是否为NaN
- eval() 将js字符串转成脚本来执行
-
示例
var uname = "江苏";
var en = encodeURI(uname);
document.write(en + "<br>");
var den = decodeURI(en);
document.write(den + "<br>");
var n = "123abd";
var num = parseInt(n);
document.write(num + "<br>");
//123
var n1 = "n123abd";
var num1 = parseInt(n1);
document.write(num1 + "<br>");
//NaN
var code = "alert(\"victory\")";
document.write(code);
eval(code);
BOM
-
浏览器对象模型,将浏览器各个组成部分封装成对象
-
组成
- window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
window对象
-
创建
-
方法
- alert() 显示带有信息的警告框,只有确定按钮
- confirm() 确认对话框,有确定和取消按钮,会返回true和false
- prompt() 显示可提示用户输入的对话框,会返回用户输入的值
- 开关浏览器
- open() 打开一个新界面。也可以用一个var得到界面的对象,便于下面对其的控制关闭
- clode() 关闭浏览器窗口,谁调用关闭谁
- 定时器有关的方法
- setTimeout(方法,毫秒值):指定毫秒后执行代码
- setInterval(方法,毫秒值):循环定时,每过毫秒执行一次。有返回值,用于取消定时
- clearTimeout(对象):取消定时,将setInterval得到一个对象放进来即可
-
属性
- 获取其他dom对象
-
特点
- 不需要创建,直接使用,window.方法名
- 其引用可省略
-
示例
- 开关浏览器
//开关浏览器
var k;
var f = document.getElementById("bt");
f.onclick = function () {
k = open("www.baidu.com");
}
var m = document.getElementById("close");
m.onclick = function () {
k.close();//谁调用关闭谁
}
- 轮播图
var m = 1;
var p = document.getElementById("pic");
var lunbo = function(){//假定有三张图片
m++;
if(m>3){
m = 1;
}
p.src = "../img/banner_"+m+".jpg";
}
setInterval(lunbo,2000);//无参方法不可以带括号!!!
Location对象
- 地址栏对象
- 创建:location
- location.href(“网址”) 可以跳转界面
- 案例:跳转首页
var t = 5;
var time = document.getElementById("time");
function jump(){
t--;
time.innerHTML = t+"";
if(t==0){
location.href = "http://www.baidu.com";
}
}
setInterval(jump,1000);
History对象
history表示的是当前窗口开过的页面,而不是浏览器的历史记录
-
创建
- window.history
- history
-
方法
- back() 加载当前窗口中前一个url
- forward() 加载当前窗口中下一个url
- go(参数) 加载history列表中某个具体页面
- 正数 前进几个历史目录
- 负数 后退几个历史目录
-
属性
- length 返回当前窗口历史列表中的url数量
DOM
简单介绍
- 控制html文档内容
- 获取元素对象 document.getElementById(“id”),看api手册看属性修改
- 修改标签体内容:innerHTML
var h = document.getElementById("title");
h.innerHTML = "hhhh";
-
事件
- 某些组件被执行了某些操作后,触发某些代码的执行
- 绑定事件
- onclick属性,点击后触发。onclick后面相当于写了一条js代码,可以建一个js方法调用
- js获取元素对象,设定事件属性(常用,好维护)
-
开关灯案例
var i = document.getElementById("pic");
var flag = false;
i.onclick = function(){
if(flag){
i.src = "../img/off.gif";
flag = false;
}else{
i.src = "../img/on.gif";
flag = true;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id= "pic" src="../img/off.gif">
<script src = "./开关灯.js"></script>
</body>
</html>
DOM
核心DOM
-
Document:文档对象
- 创建(获取):在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法:
-
获取Element对象:
- getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
-
创建其他DOM对象:
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
-
-
Attribute:属性对象
- setAttribute() 设置属性
- removeAttribute() 删除属性
- 案例
var b1 = document.getElementById("button1");
var b2 = document.getElementById("button2");
// var s = document.getElementById("jump");
var s = document.getElementsByTagName("a")[0];
//使用标签名获得,因为返回的是数组,所以用的是第一个元素
//超链接只可在a标签中用,若是p标签则没有用
button1.onclick = function(){
s.setAttribute("href","https://www.baidu.com");
}
button2.onclick = function(){
s.removeAttribute("href");
}
- Node:节点对象其他5个的父对象
- 特点:所有dom对象都可以被认为是一个节点
- 方法:
- appendChild():向节点的子节点列表的结尾添加新的子节点。
- removeChild():删除(并返回)当前节点的指定子节点。
- replaceChild():用新节点替换一个子节点。
- 属性:
- parentNode 返回节点的父节点。
- 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 1px solid red;//对div边框做设置
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- <img id= "pic" src="../img/banner_1.jpg" width="100%"> -->
<!-- <a id = "jump">点击跳跃</a> -->
<!-- <input type="button" id = "button1" value="设置属性">
<input type="button" id = "button2" value="删除属性"> -->
<div id = "div1">
div1
<div id = "div2">div2</div>
</div>
<!-- 当前div2是div1的子节点 -->
<a id = "del" href = "javascript:void(0);">点击删除div2</a>
<a id = "add" href = "javascript:void(0);">点击添加div3</a>
<!-- 这里的a标签由于href没写,默认是当前页面,所以点击后页
面没有变化,如果用button则功能正常 -->
<!-- 需要在href中写"javascript:void(0);"才可保留其可点击
的属性,但不进行超链接的跳转 -->
<!-- <script src = "./增删节点.js"></script> -->
<script>
var del = document.getElementById("del");
del.onclick = function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
var add = document.getElementById("add");
add.onclick = function(){
var div1 = document.getElementById("div1");
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
</script>
</body>
</html>
HTML DOM
- 标签体的设置和获取:innerHTML
var div = document.getElementById("div1");
var innerhtml = div.innerHTML;
div.innerHTML = "<input type = 'button'>";
//这里的innerHTML即为标签体,可以直接修改它,也可以用+=添加东西
- 控制元素样式
- style属性设置
- 提前定义类选择器的样式,通过元素classname来控制。在css中写
var div = document.getElementById("div1");
div.onclivk = function(){
div.style.border = "1px solid red";
}
div.onclivk = function(){
div.className = "d1";//d1为一个css样式
}
事件监听机制
- 某些组件被执行了某些操作后,触发某些代码的执行
- 常见的事件:
-
点击事件:
- onclick:单击事件
- ondblclick:双击事件
-
焦点事件
- onblur:失去焦点
- onfocus:元素获得焦点。
-
加载事件:
- onload:一张页面或一幅图像完成加载。
-
鼠标事件:
- onmousedown 鼠标按钮被按下。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
-
键盘事件:
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
-
选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
-
表单事件:
- onsubmit 确认按钮被点击。
- 返回false不提交,true提交
- onreset 重置按钮被点击。
-