文章目录
建议搭配b站动力节点深入浅出JavaScript的课程,笔记和代码为本人自己所写,尚有疏漏之处,如误人子弟深感歉意
ECMAScript(js核心语法)
ECMAScript:JS的核心语法(ES规范/ECMA-262标准)
HTML中嵌入JavaScript代码的三种方式
一、绑定事件
<html>
<head>
<title>HTML中嵌入JS代码(一)</title>
</head>
<body>
<input type="button" value="hello" onclick="window.alert('hello js1');window.alert('hello js2');window.alert('hello js3')">
</body>
</html>
二、脚本块
不能绑定事件,自上而下逐行执行,也可以放在head(文件的任意处)
<html>
<head>
<title>HTML中嵌入JS代码(二)</title>
</head>
<body>
<!--脚本块,自上而下逐行执行,也可以放在head中-->
<script type="text/javascript">
<!--alert()会阻塞代码加载-->
window.alert("hello js1");
window.alert("hello js2");
</script>
<input type="button" value="按钮" onclick="window.alert('hello')"
</body>
</html>
三、引入外部js文件
引入的js文件里的代码也会自上而下逐行执行,且标签内写的代码并不会执行,注意标签是src而css是href
<html>
<head>
<title>HTML中嵌入JS文件(三)</title>
</head>
<body>
<script type="text/javascript" src="js/1.js"></script>
<!--结束的script标签必须有-->
<script type="text/javascript" src="js/1.js" />
</body>
</html>
js中的变量
变量声明和赋值
JavaScript是一种弱类型语言,变量可以随意赋各种类型的值
<script type="text/javascript">
var i;
//undefined在JS中是一个具体的值
alert("i=" + i); //i=undefined
alert(undefined);
var k = undefined;
alert("k=" + k); //k=undefined
</script>
一个变量没有声明就用,浏览器会报错
全局变量和局部变量
全局变量:
函数体之外声明的变量,生命周期是浏览器打开时声明,浏览器关闭时销毁,很耗费内存
当一个变量声明的时候没有var关键字,无论在哪声明,都是全局变量
局部变量:
函数体内部声明的变量,生命周期较短,随函数的调用声明,函数结束时销毁
js函数初步
语法格式
很灵活,没有参数类型,且形参可以随便传多少个,故没有重载机制
如果定义两个同名的函数,后面定义的会覆盖掉前面定义的函数
第一种方式:
function 函数名(形参列表){
函数体;
}
第二种方式:
函数名=function(形参列表){
函数体;
}
调用才能执行,直接调用或者绑定事件
<body>
<script type="text/javascript">
function sum(a, b) {
alert(a + b);
}
sayHello = function (username) {
alert("hello " + username)
}
//sum(1, 2);
//sayHello("张三");
sum();//NaN 是一个具体的值,但不是数字,Not a Number
</script>
<input type="button" value="hello" onclick="sayHello('Jack')" />
<input type="button" value="计算和" onclick="sum(10,20)" />
</body>
js中的数据类型
6种数据类型
虽然变量声明的时候不需要指定数据类型,但赋值的时候,数据有类型
JS中数据类型有:原始类型、引用类型
ES6版本之前有6种类型,ES6版本及之后有7种类型
原始类型:Undefined、Number、String、Boolean、Null
引用类型:Object以及Object的子类
ES6之后多了Symbol类型
JS中函数typeof可以在运行阶段动态地获取变量的数据类型
typeof运算符的结果是以下6个字符串之一:
undefined、number、string、boolean、object、function
typeof null为"object"
js中比较字符串相等用==没有equals
Undefined类型只有一个值,就是undefined
<script type="text/javascript">
function sum(a, b) {
if (typeof a == "number" && typeof b == "number") {
return a + b;
}
alert(a + ',' + b + "必须都为数字");
}
var retValue = sum(3, false);
alert(retValue); //undefined
</script>
Number类型包括以下值:
-1 0 1 3.14 100 NaN Infinity等
关于NaN,运算结果本应是个数字,但实际运算完不是数字,结果是NaN
<script type="text/javascript">
var e = "abc";
var f = 10;
alert(e + f);//abc10
</script>
Infinity无穷大,除数为0时,结果为Infinity
<script type="text/javascript">
alert(10 / 0);//Infinity
alert(10 / 3);//3.3333333333333335
</script>
isNaN()函数,返回true或false
parseInt() 可以将字符串自动转换成数字,并且取整数位
parseFloat() 可以将字符串自动转换成数字
Math.ceil() 将数字向上取整
Boolean类型,有一个函数Boolean(),作用是将非布尔类型转换为布尔类型
if后面如果不是Boolean类型,会自动转换
alert(Boolean(1)); //true
alert(Boolean(0)); //false
alert(Boolean("")); //false
alert(Boolean("abc")); //true
alert(Boolean(null)); //false
alert(Boolean(NaN)); //false
alert(Boolean(undefined)); //false
alert(Boolean(Infinity)); //true
String类型,以下两种方式创建的字符串可以通用使用函数或者属性
常用函数:
indexOf、lastIndexOf、replace(只替换第一个,全部替换用正则表达式)、
substr(index,length)、substring(index,index))、toLowerCase、toUpperCase、split
<script type="text/javascript">
var x = "abcdef";
alert(typeof x); //"string"
var y = new String("abc");
alert(typeof y); //"object"
alert(x.length); //6
alert(y.length); //3
</script>
Object类型
Object类是所有类的超类
Object类包含那些属性?
prototype属性(主要的)
constructor属性
在JS中怎么定义类?怎么new对象?
第一种方式:
function 类名(形参列表){
}
第二种方式:
类名=function(形参列表){
}
<script type="text/javascript">
function Student() {
alert("Student...");
}
//当做普通函数调用
Student(); //Student...
//当做类来创建对象
var stu = new Student(); //Student...
alert(stu); //[object Object]
</script>
在JS中类的定义,同时又是个构造函数的定义,类的定义和构造函数的定义是放在一起完成的
<script type="text/javascript">
function User(a, b, c) {
this.sno = a;
this.sname = b;
this.sage = c;
}
var u1 = new User(111, "zhangsan", 30);
//访问对象的属性有两种方式
alert(u1.sno);//111
alert(u1["sname"]);//zhangsan
alert(u1["sage"]);//30
//调用对象的函数
var age = u1.getAge();
alert(age);//30
</script>
prototype可以给任何类(甚至String类)扩展属性和函数
//通过prototype属性给类扩展属性和函数
User.prototype.getName = function () {
return this.sname;
}
alert(u1.getName());//zhangsan
null、NaN、undefined的区别
以及和=的区别
<script type="text/javascript">
//数据类型不同
alert(typeof null);//object
alert(typeof NaN);//number
alert(typeof undefined);//undefined
//null和undefined可以等同,==是等同运算符只比较值
alert(null == NaN);//false
alert(null == undefined);//true
alert(undefined == NaN);//false
//===是全等运算符,比较值和数据类型
alert(null === undefined);//false
alert(1 == true);//true
alert(1 === true);//false
</script>
JS的事件
常用事件
JS中的事件
任何一个事件都会有句柄,事件前添加on
onXXX这个事件句柄出现在一个标签的属性上blur失去焦点
focus获得焦点 (对不起老师一句福克斯实在忍不住笑了)click鼠标单击
dbclick鼠标双击keydown键盘按下
keyup键盘弹起mousedown鼠标按下
mouseup鼠标弹起
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开reset表单重置
submit表单提交change下拉列表中选项改变
select文本被选定
load页面加载完毕(整个HTML页面中所有元素全部加载完毕后发生)
事件的注册方式
什么是window
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8j2a4E6J-1667932172873)(en-resource://database/516:1)]
什么是document
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3104fp6U-1667932172874)(en-resource://database/518:1)]
<script type="text/javascript">
//该函数称为回调函数,不是自己调用
function sayHello() {
alert("Hello");
}
</script>
<!--注册事件的第一种方式,直接在标签中使用事件句柄-->
<input type="button" value="hello" onclick="sayHello()" />
<!--第二种方式,使用纯JS代码完成事件的注册-->
<input type="button" value="hello2" id="mybtn" />
<input type="button" value="test" id="mybtn1" />
<script type="text/javascript">
//通过id获取element注册事件
var btnObj = document.getElementById("mybtn");
btnObj.onclick = sayHello; //不能加小括号!!!!!!
//匿名函数也可以作为回调函数
document.getElementById("mybtn1").onclick = function () {
alert("test......");
}
</script>
JS代码的执行顺序
判断以下代码是否会执行?
<body>
<script type="text/javascript">
//事件绑定失败,因为button还未加载到内存
document.getElementById("mybtn1").onclick = function () {
alert("test......");
}
</script>
<input type="button" value="test" id="mybtn1" />
</body>
如何修改?
给窗口绑定一个onload事件,等所有元素加载完成,再注册事件
<body>
<script type="text/javascript">
window.onload = ready;//等待页面加载完成后,调用ready(),也可以直接在body中绑定onload事件
function ready() {
document.getElementById("mybtn1").onclick = function () {
alert("test......");
}
}
</script>
<input type="button" value="test" id="mybtn1" />
</body>
节点存在的属性都可以修改
<body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("mybtn").onclick = function () {
var mytext = document.getElementById("mytext");
//节点对象存在的属性都可以更改
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext" />
<input type="button" value="将文本框修改为复选框" id="mybtn" />
</body>
回调函数的事件参数(以键盘事件为例)
回车键是13,ESC键是27
回调函数会默认有一个事件参数1、回调函数实际上是浏览器调用函数(用户操作是某个事件发生后,浏览器调用回调函数)
2、浏览器在调用函数的时候会传入一个参数(事件对象)对于键盘对象来说,都会有keycode属性获取键值
window.onload = function () {
document.getElementById("username").onclick = function () {
var usernameElt = document.getElementById("username");
usernameElt.onkeydown = function (event) {
alert(event);//[object KeyboardEvent] 这里是一个键盘事件
alert(event.key + "," + event.keyCode);
if (event.ctrlKey) {
alert("是ctrl键");
} else {
alert("不是ctrl键");
}
if (event.keyCode == 13) {
alert("正在登陆...");
}
}
}
}
零碎的知识点
void运算符
void运算符的语法:void(表达式) 小括号里必须有表达式
运算原理:执行表达式,但不返回任何结果,既不是返回的null也不是返回的""
以下案例void常用:javascript:void(0)
<body>
<h1>顶部</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript:void(0)" onclick="window.alert('test code...')">
既保留超链接的样式,同时用户点击该超链接时执行一段JS代码,但页面不能跳转
</a>
</body>
JS的控制语句
与java的相同
if
switchwhile
do…while
forbreak
continue多出的2个(了解就行,基本不用)
for…in
with
//创建JS数组,JS数组中元素的类型随意,元素的个数随意
var arr = [1, 2, false, true, 3.14, "abc", undefined];
//遍历数组
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
for…in…语句
//for...in语句 遍历数组时i为下标不是元素
for (var i in arr) {
alert(arr[i]);
}
User = function (username, password) {
this.username = username;
this.password = password;
}
var u = new User("zhangsan", "333");
//这里i是属性名
for (var i in u) {
alert(i);//username password
alert(typeof i);//string string
alert(u[i]);//zhangsan 333
}
with语句,没什么用,可读性差
//with语句,自动在前面加上u.
with (u) {
alert(username + "," + password);
}
DOM编程
Document Object Model(文档对象模型:对网页当中的节点进行增删改查的过程)HTML文档被当做一棵DOM树来看待。
var domObj = document.getElementById(“id”)
获取和修改文本框的value
标签有什么属性就能用点符号获取该属性或者修改
<body>
<script type="text/javascript">
window.onload = function () {
window.document.getElementById("btn").onclick = function () {
var mytext = document.getElementById("username");
//标签有什么属性就能用.符号获取该属性或者修改
alert(mytext.value);
mytext.value = "修改后的value";
}
}
</script>
<input type="text" id="username" />
<input type="button" value="获取文本框的value" id="btn" />
</body>
blur事件
this表示当前的element对象
<script type="text/javascript">
window.onload = function () {
window.document.getElementById("username").onblur=function(){
alert(this.value);
}
}
</script>
<input type="text" id="username" />
this表示当前的input节点对象
<input type="text" id="username" onblur="alert(this.value)" />
innerHTML和innerText操作div和span
innerHTML和innerText都是为了设置元素内部的内容
不同点是innerHTML可以把后面的"用户名不能为空!"当做一段代码执行
而innerText不可以
<head>
<meta charset="utf-8">
<title>JS</title>
<style type="text/css">
#div1 {
background-color: aquamarine;
width: 300px;
height: 300px;
border: 1px black solid;
/*solid表示实线*/
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
var divElt = document.getElementById("div1");
//divElt.innerHTML="asdfghjasdasdask";
divElt.innerHTML="<font color='red'>用户名不能为空!";
divElt.innerText="<font color='red'>用户名不能为空!";
}
}
</script>
<input type="button" value="设置div中的内容" id="btn" />
<div id="div1"></div>
</body>
关于正则表达式
字符 | 含义 | 字符 | 含义 |
---|---|---|---|
. | 匹配除换行符以外的任意字符 | \w | 匹配字母、数字、下划线、汉字 |
\s | 匹配任意的空白符 | ^ | 匹配字符串的开始 |
\d | 匹配数字 | $ | 匹配字符串的结束 |
\b | 匹配单词的开始或结束 | ||
* | 重复零次或更多次 | + | 重复一次或更多次 |
? | 重复零次或一次 | {n} | 重复n次 |
{n,} | 重复n次或更多次 | {n,m} | 重复n到m次 |
\W | \S | ||
\D | \B | ||
[^] | [^abc] |
常用的正则表达式
//1.QQ号的正则表达式
^[1-9][0-9]{4,}$
//2.邮箱
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
JS中如何创建正则表达式
第一种
var regExp = /正则表达式/flags;
第二种:使用内置类RegExp
var regExp = new RegExp(“正则表达式”,“flags”);关于flags
g:全局匹配
i:忽略大小写
m:多行搜索。当前面是普通字符串的时候,m才能使用
正则表达式对象的test()方法
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
var email = document.getElementById("email").value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (emailRegExp.test(email)) {
document.getElementById("emailError").innerHTML = "<font color='green' size=24px>合法";
} else {
document.getElementById("emailError").innerHTML = "<font color='red' size=24px>不合法";
}
}
document.getElementById("email").onfocus = function () {
document.getElementById("emailError").innerHTML = "";
document.getElementById("emailError").innerHTML = "<font color='blue' size=6px>合法or不合法";
}
}
</script>
<input type="text" id="email" /><br>
<!--<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。-->
<h6>这是一个<span id="emailError" style="color: blue">合法or不合法</span>的邮箱</h6>
<input type="button" value="验证邮箱" id="btn" />
扩展字符串中的trim函数
作用:去除字符串的前后空格
<body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
var username = document.getElementById("username").value;
alert("-->" + username.trim() + "<--");
}
}
</script>
<input type="text" id="username" /><br>
<input type="button" value="去除前后空格" id="btn" />
</body>
存在一个问题:IE8不支持字符串的trim()函数,怎么办?
答案:使用prototype给字符串扩展函数,会覆盖掉自身的trim函数
String.prototype.trim = function () {
return this.replace(/^\s+/, "").replace(/\s+$/, "");
}
表单验证案例
自己写的初始版,很难看且垃圾
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").onclick=function(){
var username=document.getElementById("username").value;
var usernameReg=/^[0-9a-zA-Z]{6,14}$/;
var email=document.getElementById("email").value;
var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(username==""){
document.getElementById("usernameSpan").innerText="用户名不能为空";
}else if(!usernameReg.test(username)){
document.getElementById("usernameSpan").innerText="用户名只能由数字和字母组成且长度在6-14位之间";
}else if(document.getElementById("password1").value!=document.getElementById("password2").value){
document.getElementById("passwordSpan").innerText="确认密码和密码必须一致";
}else if(!emailReg.test(email)){
document.getElementById("emailSpan").innerText="邮箱地址不合法";
}else{
alert("表单提交成功!");
}
}
document.getElementById("username").onfocus=function(){
document.getElementById("username").value="";
document.getElementById("usernameSpan").innerText="";
}
document.getElementById("password1").onfocus=function(){
document.getElementById("password1").value="";
document.getElementById("passwordSpan").innerText="";
}
document.getElementById("password2").onfocus=function(){
document.getElementById("password2").value="";
document.getElementById("passwordSpan").innerText="";
}
document.getElementById("email").onfocus=function(){
document.getElementById("email").value="";
document.getElementById("emailSpan").innerText="";
}
}
</script>
<!--form应该用post 这里用get只是便于验证-->
<form action="http://localhost:8080/jd/save" method="get">
用户名:
<input type="text" id="username" /><span id="usernameSpan" style="color: red;font: size 12px;"></span><br>
邮箱地址:
<input type="text" id="email" /><span id="emailSpan" style="color: red;font: size 12px;"></span><br>
密码:
<input type="password" id="password1" /><br>
确认密码:
<input type="password" id="password2" /><span id="passwordSpan" style="color: red;font: size 12px;"></span><br>
<input type="button" value="提交" id="btn" />
</form>
老师的版本,有几个关键的地方,利用span的提示信息判断是否输入错误、手动调用focus和blur、如何手动调用form的submit事件
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
span {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var usernameElt = document.getElementById("username");
var usernameErrorSpan = document.getElementById("usernameError");
//光标移出
usernameElt.onblur = function () {
//获取username并去除前后空格
var username = usernameElt.value.trim();
if (username == "") {
usernameErrorSpan.innerText = "用户名不能为空";
} else {
if (username.length < 6 || username.length > 14) {
usernameErrorSpan.innerText = "用户名的长度必须在6-14之间";
} else {
var regExp = /^[0-9a-zA-Z]+$/;
var ok = regExp.test(usernameElt.value);
if (ok) {
} else {
usernameErrorSpan.innerText = "用户名必须由数字和字母组成";
}
}
}
}
//光标移回去
usernameElt.onfocus = function () {
//不合法,聚焦光标才清空,很妙,亮点1
if (usernameErrorSpan.innerText != "") {
usernameElt.value = "";
}
usernameErrorSpan.innerText = "";
}
var userpwd2Elt = document.getElementById("userpwd2");
var pwdErrorSpan = document.getElementById("pwdError");
userpwd2Elt.onblur = function () {
var userpwdElt = document.getElementById("userpwd");
var userpwd = userpwdElt.value;
var userpwd2 = userpwd2Elt.value;
if (userpwd != userpwd2) {
pwdErrorSpan.innerText = "确认密码和密码必须一致";
}
}
userpwd2Elt.onfocus = function () {
if (pwdErrorSpan.innerText != "") {
userpwd2Elt.value = "";
}
pwdErrorSpan.innerText = "";
}
var emailElt = document.getElementById("email");
var emailErrorSpan = document.getElementById("emailError");
emailElt.onblur = function () {
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!regExp.test(emailElt.value)) {
emailErrorSpan.innerText = "邮箱地址不合法";
}
}
emailElt.onfocus = function () {
if (emailErrorSpan.innerText != "") {
emailElt.value = "";
}
emailErrorSpan.innerText = "";
}
//给提交表单绑定鼠标单击事件,为什么要这样,因为防止信息输入错误还能提交
var submitBtnElt = document.getElementById("submitBtn");
submitBtnElt.onclick = function () {
//手动触发所有的blur事件,否则当不触发blur事件也能提交,亮点2
usernameElt.focus();
usernameElt.blur();
userpwd2Elt.focus();
userpwd2Elt.blur();
emailElt.focus();
emailElt.blur();
var formElt = document.getElementById("userForm");
if (usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailErrorSpan.innerText == "") {
formElt.submit();
}
}
}
</script>
<!--form应该用post 这里用get只是便于验证-->
<form id="userForm" action="http://localhost:8080/jd/save" method="get">
用户名:
<input type="text" name="username" id="username" /><span id="usernameError"></span><br>
密码:
<input type="text" name="userpwd" id="userpwd" /><br>
确认密码:
<input type="text" name="userpwd2" id="userpwd2" /><span id="pwdError"></span><br>
邮箱:
<input type="text" name="email" id="email" /><span id="emailError"></span><br>
<!-- <input type="submit" value="注册" /> -->
<input type="button" value="注册" id="submitBtn" />
<input type="reset" value="重置" />
</form>
</body>
复选框的全选和取消全选
<body>
<script type="text/javascript">
window.onload = function () {
var qxkElt = document.getElementById("qxk");
var hobbyElts = document.getElementsByName("hobby");
qxkElt.onclick = function () {
for (var i = 0; i < hobbyElts.length; i++) {
hobbyElts[i].checked = qxkElt.checked; //关键
}
}
//循环注册事件
var all = hobbyElts.length;
for (var i = 0; i < hobbyElts.length; i++) {
hobbyElts[i].onclick = function () {
//总量和选中的数量相等的时候,第一个复选框也被选中
var checkedCount = 0; //关键的地方
for (var i = 0; i < hobbyElts.length; i++) {
if (hobbyElts[i].checked) {
checkedCount++;
}
}
// if (checkedCount == all) {
// qxkElt.checked = true;
// }
qxkElt.checked = (all == checkedCount);
}
}
}
</script>
<input type="checkbox" id="qxk" /><br>
<!--全选操作-->
<input type="checkbox" name="hobby" value="play" />玩<br>
<input type="checkbox" name="hobby" value="basketball" />篮球<br>
<input type="checkbox" name="hobby" value="sing" />唱歌<br>
</body>
获取下拉列表选中项的value
<body>
<script type="text/javascript">
window.onload=function(){
var provinceListElt=document.getElementById("provinceList");
provinceListElt.onchange=function(){
alert(this.value);
}
}
</script>
<select id="provinceList">
<option value="">请选择省份</option>
<option value="001">河北省</option>
<option value="002">河南省</option>
<option value="003">山东省</option>
<option value="004">山西省</option>
</select>
</body>
周期调用函数setInterval
如何显示网页时钟
利用JS中内置的Date类,可以获取日期,时间
//获取系统当前时间
var nowTime=new Date();
//输出
//document.write(nowTime);
//转换为具有本地语言环境的日期格式
nowTime=nowTime.toLocaleString();
document.write(nowTime)
document.write("<br>");
document.write("<br>"); //换行
//也可以获取年月日等信息,自己写格式
var t=new Date();
var year=t.getFullYear(); //返回的是年信息
var month=t.getMonth(); //返回的是0-11
var day=t.getDate(); //返回的是日
document.write(year+"年"+month+"月"+day+"日");
//获取毫秒数,一般会用作时间戳
document.write("<br>");
document.write("<br>"); //换行
var times=t.getTime();
document.write(times);
在网页里显示系统时间
以下错误示范,Error显示displayTime is not defined,尚未解决
<body>
<script type="text/javascript">
window.onload = function () {
var btnElt = document.getElementById("btn");
btnElt.onclick = start;
function displayTime() {
var time = new Date();
time = time.toLocaleString();
document.getElementById("time").innerHTML = time;
}
function start() {
//每隔1秒自动调用display函数
window.setInterval("displayTime()", 1000);
}
}
</script>
<input type="button" value="显示系统时间" id="btn" />
<div id="time"></div>
</body>
以下为正确示例,
setInterval( )函数,返回值传递给clearInterval( )可以取消调用
<body>
<script type="text/javascript">
function displayTime() {
var time = new Date();
time = time.toLocaleString();
document.getElementById("time").innerHTML = time;
}
function start() {
//每隔1秒自动调用display函数
v = window.setInterval("displayTime()", 1000); //全局变量不加var
}
function stop() {
window.clearInterval(v);
}
</script>
<input type="button" value="显示系统时间" onclick="start()" />
<input type="button" value="停止" onclick="stop()" />
<div id="time"></div>
</body>
BOM编程
Browser Object Model(浏览器对象模型)
关闭浏览器窗口、打开新的浏览器窗口、后退、前进、浏览器地址栏上的地址等,都是BOM编程DOM和BOM的区别和联系?
BOM的顶级对象是window
DOM的顶级对象是document
BOM包含DOM
window的open和close
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com')" />
<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self')" />
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank')" />
<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent')" />
<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top')" />
<input type="button" value="关闭当前窗口" onclick="window.close()" />
弹出确认框
window.comfirm(),有返回值
<script type="text/javascript">
function del(){
var ok=window.confirm("确认删除吗?");
alert(ok);//确定是true,取消是false
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息框')" />
<input type="button" value="弹出确认框(删除)" onclick="del()" />
将当前窗口设置为顶级窗口
问题:什么是顶级窗口
004.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将当前窗口设置为顶级窗口</title>
</head>
<body>
<script type="text/javascript">
//如果当前窗口不是顶级窗口,就设置为顶级窗口
</script>
<iframe src="005.html" width="500px" height="500px"></iframe>
</body>
</html>
005.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>005页面</title>
</head>
<body>
005page
<script type="text/javascript">
function setTop(){
//window代表当前浏览器窗口,代表005.html
//控制台输出
//console.log((window.top!=window.self));
if(window.top!=window.self){
//window.top就是当前窗口对应的顶级窗口,代表004.html
//window.self是当前自己这个窗口
window.top.location=window.self.location;
}
}
</script>
<input type="button" value="如果当前窗口不是顶级窗口,就设置为顶级窗口" onclick="setTop()" />
</body>
</html>
history对象
后退网页,前进网页
007-history.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history对象</title>
</head>
<body>
<a href="007.html">007页面</a>
<input type="button" value="前进" onclick="window.history.go(1)" />
</body>
</html>
007.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>007页面</title>
</head>
<body>
007page
<input type="button" value="后退" onclick="window.history.back()" />
<input type="button" value="后退" onclick="window.history.go(-1)" />
</body>
</html>
设置浏览器的URL地址
主要是学会用location
<body>
<script type="text/javascript">
function goBaidu(){
var locationObj=window.location;
locationObj.href="http://www.baidu.com";
//以下方式都可以
window.location.href="http://www.baidu.com";
window.location="http://www.baidu.com";
document.location.href="http://www.baidu.com";
document.location="http://www.baidu.com";
}
</script>
<input type="button" value="百度" onclick="goBaidu()" />
</body>
总结:有哪些方法可以通过浏览器网服务器发送请求
表单form,动态地传输数据
超链接
documen.location
window.location
window.open(‘url’)
浏览器地址栏手动后输入
JSON
什么是JSON
JavaScript Object Notation,简称JSON。(数据交换格式)
JSON主要的作用是:一种标准的数据交换格式。(两个系统之间交换数据通常都采用JSON)两种数据交换格式
JSON:轻量级,体积小,容易解析
XML:体积大,解析麻烦,优点是语法严谨(通常银行相关的系统会用)
JSON对象的创建和访问
创建JSON对象用大括号
访问有2种方式,用 . 或 [ ]
<script type="text/javascript">
//创建JSON对象(JSON也可以称为无类型对象,没有类型)
var studentObj = {
"sno": "110",
"sname": "张三",
"sex": "男"
};
//访问JSON对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
//JSON数组
var students=[
{"sno":"110","sname":"张三","sex":"男"},
{"sno":"120","sname":"李四","sex":"女"},
{"sno":"130","sname":"王五","sex":"男"},
]
//遍历JSON数据
for(var i=0;i<students.length;i++){
alert(students[i].sno + "," + students[i].sname + "," + students[i].sex);
}
</script>
更复杂一点的JSON对象
让我想起之前爬weibo的时候…How big can data be ?
<script type="text/javascript">
//比较复杂的JSON对象
var user = {
"usercode": 110,
"username": "张三",
"sex": true,
"address": {
"city": "北京",
"street": "朝阳区",
"zipcode": "111111"
},
"hobby": ["唱", "跳", "rap"]
}
//访问人名及居住的城市
alert(user.username + "居住在" + user.address.city);
</script>
eval函数
eval函数的作用是:将字符串当做一段JS代码解释并执行
实际开发中的应用:
java连接数据库,查询数据后,将数据在java程序中拼接成JSON格式的字符串,将JSON格式的字符串响应到浏览器,也就是说java传给浏览器的仅仅是一个“JSON格式的字符串”,还不是一个JSON对象
可以使用eval函数,将JSON格式的字符串转换成JSON对象
<script type="text/javascript">
//下面相当于var i = 100;
window.eval("var i=100;");
alert("i = " + i);
</script>
实际应用
又回到开头介绍了,JSON是数据交换格式
<script type="text/javascript">
//接收字符串
var fromJava = "{\"name\":\"张三\",\"password\":\"123\"}";
//将字符串转换为json对象
window.eval("var jsonObj = " + fromJava);
//访问json对象
alert(jsonObj.name + "," + jsonObj.password);//张三,123
</script>
设置table的tbody
主要是拼接字符串,拼成html格式,然后利用innerHTML
<body>
<script type="text/javascript">
//以下json数据
var data = {
"total": 4,
"emps": [
{ "empno": 1000, "ename": "smith", "sal": 800.0 },
{ "empno": 1000, "ename": "smith", "sal": 800.0 },
{ "empno": 1000, "ename": "smith", "sal": 800.0 },
{ "empno": 1000, "ename": "smith", "sal": 800.0 },
]
}
//希望把json数据展示到table中
window.onload = function () {
var displayBtnElt = document.getElementById("displayBtn");
displayBtnElt.onclick = function () {
var emps = data.emps;
//拼接字符串
var html = "";
for (var i = 0; i < emps.length; i++) {
var emp = emps[i];
html += "<tr>";
html += "<td>" + emp.empno + "</td>";
html += "<td>" + emp.ename + "</td>";
html += "<td>" + emp.sal + "</td>";
html += "<tr>";
}
//放进tbody中
document.getElementById("empTbody").innerHTML = html;
document.getElementById("count").innerHTML = data.total;
}
}
</script>
<input type="button" value="显示员工信息列表" id="displayBtn" /><br>
<h2>员工信息列表</h2>
<hr>
<!--显示一条水平线,分割文档-->
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tbody id="empTbody">
<!-- <tr>
<td>员工编号</td>
<td>员工名字</td>
<td>员工薪资</td>
</tr>
<tr>
<td>员工编号</td>
<td>员工名字</td>
<td>员工薪资</td>
</tr>
<tr>
<td>员工编号</td>
<td>员工名字</td>
<td>员工薪资</td>
</tr> -->
</tbody>
</table>
总共<span id="count">0</span>条数
</body>