1、概述
解释性(不用编译)脚本语言(自己无法独立使用，需要和HTML一起使用)，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
解释器称为JavaScript引擎，作为浏览器的一部分
用来给HTML网页增加动态功能，定义网页的行为
2、JavaScript组成
JavaScript包含三部分：
ECMAScript语法。
文档对象模型(DOM Document Object Model)
浏览器对象模型(BOM Browser Object Model)
3、JavaScript使用方式
在<script>标签中编写：
可以在网页的任何地方编写
在外部JS文件中编写：
需要使用<script src=”“></script>关联
在事件属性中编写：
<button onlick="">按钮</button>
4、变量
JS中变量都用var关键字来声明，var是variable的缩写
注意：
var是声明关键字，num是变量名，语句以分号结尾；分号可省略。
命名：
包含字母、数字、下划线、$
不能以数字开头
变量名不能是关键字
5、基本类型
基本类型包括Number、String、Boolean、Undefined、Null五种。
使用typeof运算符检测一个变量的类型。
使用方式：typeof(表达式)或typeof变量名
// 内部方式
//弱类型:声明变量时不指定其类型
var age = 10; //赋值10后,age就是number类型
//动态类型
age = "我正在学习JavaScript知识"; //此时age是String类型
alert(age);
alert("我是外部js文件里的内容");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部js文件 -->
<script src="js/demo10.js"></script>
</head>
<body>
<!-- 可以出现在页面的任何位置 -->
<!-- 行内方式 -->
<input type="button" value="测试" onclick="alert('我是单击按钮后的弹窗')"/>
</body>
</html>
6、引用类型
对象类型：
Object表示任何对象
使用JSON表示法创建对象。
注意：创建数组时可不用指定长度
//声明变量的方式
var age = 30;
var age1;
age1 = 31;
age2 = 30;
//弹窗执行
alert(age2);
var pi = 3.14;
var num2 = -30;
var name = "张三";
var name = '张三';
var isPass = true;
var names = ["aaa","bbb"];
var obj = null;
//js直接把内容显示到body中
document.writeln(typeof(age2));
document.writeln(typeof(pi));
document.writeln(typeof name);
document.writeln(typeof name2);
document.writeln(typeof isPass);
//object类型
document.writeln(typeof(names));
document.writeln(typeof(obj));
var testNum = 100;
//弹窗显示数据类型
alert(typeof(testNum));
testNum = "abc";
//弹窗返回的是String类型
alert(typeof(testNum));
//当一个变量未赋值时,它的类型及值都是undefined
var addr;
//界面上显示的是undefined
document.writeln(typeof(addr));
//界面上返回的依旧是addr
document.writeln(addr);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo11.js"></script>
</head>
<body>
</body>
</html>
//声明JSON对象
var stu={"stuName":"张三","stuAge":18,"stuAddr":"北京市海淀区"};
//输出到body中
document.writeln("姓名：" + stu.stuName);
//输出到控制台中
//F12可显示
console.log(stu.stuAge);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo12.js"></script>
</head>
<body>
</body>
</html>
//1、字面量方式
var aryName = ["张三","李四","王五"];
//2、new
var ary = new Array();
ary[0] = "黄六";
ary[1] = 100;
ary[11] = 3.14;
alert(ary[0]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组</title>
<script src="js/demo13.js"></script>
</head>
<body>
</body>
</html>
7、算术运算符
//参数收到后是String类型
//参数1:提示信息
//参数2:可以省略,是文本框中的默认值
//文本框当中提示信息输入数字用
var num1 = prompt("请输入第一个数：",0);
var num2 = prompt("请输入第二个数：",0);
//类型转换
//将输入的String类型转换成int类型
num1 = parseInt(num1);
num2 = parseInt(num2);
var oper = prompt("请输入一个运算符");
var result;
switch (oper){
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
}
alert("计算结果：" + result);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo15.js"></script>
</head>
<body>
</body>
</html>
8、赋值运算符
9、逻辑运算符
//定义一个方法
//此时的num1和num2不能写var
//计算出两个数的最大公约数
function com(num1,num2){
var min = num1<num2?num1:num2;
var result = 1;
while(min>1){
if(num1%min==0 && num2%min==0){
result = min;
break;
}
min--;
}
alert("最大公约数：" + result);
return result;
}
//调用函数
var result = com(12,16);
alert(result);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo16.js"></script>
</head>
<body>
<input type="button" value="计算两个数的最大公约数" onclick="com(12,16)"/>
</body>
</html>
10、关系运算符
var num1 = 123;
var num2 = "123";
//只比较值,不判断类型
var result1 = num1 == num2; //true
//当值、类型都相等的时候,才为true
var result2 = num1===num2; //false
document.writeln(result1);
document.writeln(result2);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>==和===的区别</title>
<script src="js/demo14.js"></script>
</head>
<body>
</body>
</html>
11、三目运算符
语法：布尔表达式？结果1：结果2；
12、分支结构-if
和Java语言使用基本一致
基本语法
注意：
条件是一个布尔值
条件是一个变量，如果值为0、null、undefined、NaN表示false，否则为true
如果变量没有定义，则出现异常
13、分支结构-switch
基本语法：
14、循环结构
for循环：
while循环：
do while循环：
break和continue：
break用于结束循环
continue用于结束本次循环
15、函数
概念：
封装特定任务功能的代码块。
定义：
JavaScript函数通过function关键词进行定义
调用：
当事件发生时。
代码调用、自调用。
16、弹窗函数
alert：
只能点击确定按钮的弹窗
confirm：
可以点击确定或者取消的弹窗
prompt：
可以输入文本内容的弹窗
第一个参数是提示信息，第二个参数是用户输入的默认值(可不写)
点击确定反回用户输入的内容；点击取消或者关闭，返回null。
//删除id 写一个带参数的方法
function del(id){
//confirm 可以点击确定或者取消的弹窗
var result = confirm("确定要删除" + id + "吗？");
if(result == true){
alert("删除成功！");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo17.js"></script>
</head>
<body>
//onclick 事件会在元素被点击时发生 当按钮被点击时执行Javascript代码
<input type="button" value="删除" onclick="del(1)" />
</body>
</html>
17、系统函数
parseInt()：
解析一个字符串并返回一个整数。
parseFloat()：
解析一个字符串并返回一个浮点数。
isNaN()：
检查某个值是否是数字。是数字返回false 不是数字返回true
//isNaN能够判断一个值是否为数值
//false 是数值 true不是数值
var str1 = "123a";
var str2 = "23";
// var result = str-str1;
//str1不是数字，所以返回true
//str2是数字，所以返回false
var result = isNaN(str2);
alert(result);
function check(){
//获取输入的昵称
//先获取到昵称的文本框，然后获取文本框里的值
//var name = document.getElementsByName("userName")(获取到昵称的文本框)[0].value;（获取值）
var name = document.getElementsByName("UserName")[0].value;
//判断名字中是否包含数字
var result = false; //假设没有数字
//把每一个值拿出来循环控制需要循环几次才能拿出来
for(var i=0;i<name.length;i++){
var str = name.substring(i,i+1);
if(isNaN(str) == false){
result = true;
break;
}
}
if(result == true){
alert("数据不合法，包含了数字");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>isNaN应用</title>
<script src="js/demo19.js"></script>
</head>
<body>
<p>昵称：<input type="text" name="UserName"/></p>
<input type="button" value="保存" onclick="check()"/>
</body>
</html>
18、事件
#box{
width: 500px;
height: 500px;
background-color: deeppink;
}
function change(){
alert("键按下时");
}
function change2(){
alert("键自动抬起");
}
function change3(){
//event浏览器封装的对象，存储了事件的信息
//13-回车 32-空格
if(event.keyCode == 13){
alert("执行了按钮功能");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
<link rel="stylesheet" type="text/css" href="css/demo20.css"/>
<script src="js/demo20.js"></script>
</head>
<body>
<!-- onkeyup是任意键 -->
<input type="button" value="按钮" onkeyup="change3()" />
<!-- onkeydown是任意键都可以运行 -->
<div id="box" onkeydown="change()">
</div>
</body>
</html>
function init(){
alert("页面初始化完成");
}
//没有名字的函数---匿名函数
//使用场景,在某个事件中,直接声明、调用一个函数
window.onload = function(){
init();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo21.js"></script>
</head>
<body>
sdfsdfsdfsdf
</body>
</html>
19、正则表达式
概念：
正则表达式是描述字符模式的对象
是一个定义规则的表达式，检验我们的字符串符不符合这个规则，用于简化业务逻辑代码
作用：
用于对字符串模式匹配及检索替换
是对字符串执行模式匹配的强大工具
语法：
var patt = new RegExp(pattern,modifiers);
var patt = /pattern/modifiers;
修饰符：
#emailSpan{
color:red;
}
function check(){
//获取
var code = document.getElementsByName("code")[0].value;
//定义正则表达式
var regCode =/[1-9][0-9]{5}/g;
var result = regCode.test(code);
if(result){
alert("邮编符合规则");
}else{
alert("邮编格式不正确");
}
}
function checkEmail(){
//获取值
var email = document.getElementsByName("email")[0].value;
var span = document.getElementById("emailSpan");
//编写邮箱的正则表达式
//只要是循环就要拿\定义一下
var emailReg = /^\w{1,}@\w{1,}(\.[A-z]{2,3}){1,2}$/g;
var result = emailReg.test(email);
if(result){
//改变样式
span.style.color="green";
span.innerHTML="√";
}else{
span.innerHTML="邮箱格式不正确";
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/demo22.js"></script>
<link rel="stylesheet" type="text/css" href="css/demo22.css"/>
</head>
<body>
<!-- 定义邮编 -->
<p>邮编：<input type="text" name="code"/></p>
<!-- onblur --- 失去焦点，光标 -->
<!-- 定义邮箱 -->
<p>邮箱：<input type="text" name="email" onblur="checkEmail()"/><span id="emailSpan"></span></p>
<!-- 定义验证 -->
<input type="button" value="验证" onclick="check()"/>
</body>
</html>
20、DOM
概述：
通过HTML DOM ，可访问JavaScript HTML文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。
21、查找HTML元素
获取网页元素的三种方法：
getElementsByName 通过标签的name来获取标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js获取html标签方式</title>
<script type="text/javascript">
function getByName(){
//通过标签的name来获取标签
var ary = document.getElementsByName("hobby");
//遍历获取得到的数组
for(var i=0;i<ary.length;i++){
//获取选中的复选框里的值
//if中ary[i].checked == true代表着这样在页面中就是被选中了
if(ary[i].checked == true){
//表单标签获取值/赋值的属性是value
alert(ary[i].value);
}
}
}
function getById(){
//通过ID值获取标签
var div = document.getElementById("box");
//非表单标签的值
//innnerHTML
alert(div.innerText);
//innerText仅输入文本
//innnerHTML输入文本和html一共的内容
}
function getByTag(){
//通过标签名获取标签
var ary = document.getElementsByTagName("a");
for(var i=0; i<ary.length; i++){
//获取文本名字
// alert(ary[i].innerText);
//获取标签的某个属性值
//标签对象.getAttribute("属性名")
//获取a标签里的href
alert(ary[i].getAttribute("href"));
}
}
function gatByClasName(){
//通过class值来获取标签
var ary = document.getElementsByClassName("divclass");
for(var i=0; i<ary.length; i++){
alert(ary[i].innerText);
}
}
</script>
</head>
<body>
<p>
爱好：
<input type="checkbox" name="hobby" value="编程" />编程
<input type="checkbox" name="hobby" value="跑步" />跑步
<input type="checkbox" name="hobby" value="打游戏" />打游戏
<input type="checkbox" name="hobby" value="睡觉" />睡觉
</p>
<p>
<div id="box">
boxboxbox
</div>
</p>
<p>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
</p>
<div id="" class="divclass">
111111111111111111111111111111111
</div>
<div id="" class="divclass">
222222222222222222222222222222222
</div>
<div id="" class="divclass2">
3333333333333333333333333333333333
</div>
<p>
<input type="button" value="通过name获取标签" onclick="getByName()" />
<input type="button" value="通过id获取标签" onclick="getById()" />
<input type="button" value="通过 标签名 获取标签" onclick="getByTag()" />
<input type="button" value="通过class获取标签" onclick="gatByClasName()" />
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改变标签的值、样式</title>
<!-- 设置背景 -->
<style type="text/css">
.self{
width: 600px;
height: 200px;
border: 1px solid black;
background-color: greenyellow;
}
</style>
<script type="text/javascript">
function setValue(){
var div=document.getElementById("box");
//非表单标签的值有两种设置方式
//方式1：innerText---赋值内容以文本方式显示
div.innerText="<a href='http://www.baidu.com'>王家宝，大帅哥!</a>";
//方式2：innerHTML---赋值内容被浏览器解析
//div.innerHTML="<a href='http://www.baidu.com'>王家宝，大帅哥!</a>"
}
//页面加载之后自动执行
window.onload=function(){
//获取标签
var userName=document.getElementsByName("userName")[0];
userName.value="用户昵称";
}
function changeHref(){
//改变属性及值
var a=document.getElementsByTagName("a")[0];
//改变超链接文本
a.innerText="搜狐";
//改变属性值
// (要设定的属性名,要设定的属性值)
a.setAttribute("href","http://www.sohu.com");
}
function changeStyle(){
var div1=document.getElementsByClassName("divclass")[0];
//改变样式1
//在js中-是减法计算，样式的属性中把-去掉，-后单词首字母大写
//语法：标签对象.style.属性名="属性值"
// div1.style.backgroundColor="pink";
// div1.style.width="500px";
// div1.style.height="300px";
//方式2 标签对象.className="类选择器名"
div1.className="self";
}
</script>
</head>
<body>
<p>昵称：<input type="text" name="userName"/></p>
<p>
爱好：
<input type="checkbox" name="hobby" value="codding" />编程
<input type="checkbox" name="hobby" value="run" />跑步
<input type="checkbox" name="hobby" value="game" />打游戏
<input type="checkbox" name="hobby" value="sleep" />睡觉
</p>
<p>
<div id="box">
boxboxbox
</div>
</p>
<p>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
</p>
<div id="" class="divclass">
11111111111111111111111
</div>
<div id="" class="divclass">
22222222222222222222222
</div>
<div id="" class="divclass2">
33333333333333333333333333333
</div>
<p>
<input type="button" value="改变div的值" onclick="setValue()" />
<input type="button" value="通过超链接" onclick="changeHref()" />
<input type="button" value="改变标签的样式" onclick="changeStyle()" />
<input type="button" value="通过class获取标签" onclick="getByClasName()" />
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态添加事件</title>
<style type="text/css">
/* div开始的样子 */
.divClass{
width: 500px;
height: 500px;
background-color: palegreen;
}
/* 碰到div之后的样子 */
.changeClass{
width: 600px;
height: 600px;
border-radius: 50%;
background-color: purple;
}
/* 再碰一下之后的样子 */
.outClass{
width: 500px;
height: 600px;
border-radius: 50%;
background-color: yellow;
}
/* 二者之间来回变换 */
</style>
<script type="text/javascript">
window.onload=function(){
//js加载 解析顺序
var div = document.getElementsByClassName("divClass")[0];
//动态加载事件
//不知道是什么方法的时候一定要写匿名方法
//在里边用this去调用写好的css
div.onmouseover = function(){
//改变其样式
//必须用this
this.className = "changeClass";
}
div.onmouseout = function(){
this.className="outClass";
}
}
</script>
</head>
<body>
<div id="" class="divClass">
</div>
</body>
</html>
22、修改HTML内容
document.write()方法：
可用于直接向HTML输出流写内容
innerHTML属性：
获取或设置HTML内容
HTML标签会被解析
----------------------->innnerHTML 输入文本和html一共的内容
innerText属性：
获取或设置HTML内容
HTML标签会作为普通文本
------------------------>innerText 仅输入文本
23、修改HTML属性
对象.attribute
获取或设置DOM对象的属性
使用方式：
getAttribute("att"),获取属性值
setAttribute("att","value"),设置属性值
24、改变CSS
获取：
getComputedStyle()
currentStyle
设置：
对象.style.property=新样式；
将property替换成真实的css属性名
25、设置DOM事件
通过DOM对象设置事件属性
26、EventListener
addEventListener()方法:
向指定元素添加事件
不会覆盖已存在的事件
remoeEventListener()方法:
移出事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.divClass{
width: 500px;
height: 500px;
background-color: palegreen;
}
.changeClass{
width: 600px;
height: 600px;
border-radius: 50%;
background-color: purple;
}
.dbClass{
width: 300px;
height: 300px;
border: 10px solid darkblue;
}
</style>
<script type="text/javascript">
function addOver(){
//获取标签
var div = document.getElementsByClassName("divClass")[0];
//添加事件---匿名函数
div.addEventListener("mouseover",function(){
this.className = "changeClass";
});
}
function changeStyle(){
var div = document.getElementsByClassName("divClass")[0];
div.className= "dbClass";
}
//将上边的方法给下边
function addDb(){
var div = document.getElementsByClassName("divClass")[0];
//添加事件---调用普通函数
div.addEventListener("dblclick",changeStyle);
}
function delDb(){
//获取标签
var div = document.getElementsByClassName("divClass")[0];
//不能删除以匿名函数添加的事件
//双击时变化调用上边函数
div.removeEventListener("dblclick",changeStyle);
}
</script>
</head>
<body>
<p>
<input type="button" value="添加鼠标悬停事件" onclick="addOver()"/>
<input type="button" value="添加鼠标双击事件" onclick="addDb()"/>
<input type="button" value="删除鼠标双击事件" onclick="delDb()"/>
</p>
<div id="" class="divClass">
</div>
</body>
</html>
27、新建、删除元素
新建元素：
document.createElement("标签");
追加：appendChild();
添加：insertBefore();
删除元素：
删除子元素：removeChild();
删除元素：remove();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态编辑元素</title>
<style type="text/css">
.box{
width: 600px;
height: 400px;
border: 2px solid black;
text-align: center;
}
.box ul{
list-style-type: none;
height: 300px;
background-color: #98FB98;
}
.box ul li:hover{
background-color: deeppink;
}
</style>
<script type="text/javascript">
function createUl(){
//获取div
var div = document.getElementById("box");
//创建无序列表标签 ul-li
//1 创建ul
var ul = document.createElement("ul");
//2 把ul添加到div中
//父容器 .appendChild(创建的标签);
div.appendChild(ul);
//3 创建li
var liTitle = document.createElement("li");
liTitle.innerText="静夜思";
//添加到ul中
ul.appendChild(liTitle);
var li1 = document.createElement("li");
li1.innerText="床前明月光";
ul.appendChild(li1);
var li2 = document.createElement("li");
li2.innerText="举头望明月";
ul.appendChild(li2);
var li3 = document.createElement("li");
li3.innerText="疑是地上霜";
//父容器 .insertBefore(新建标签,旧标签)
ul.insertBefore(li3,li2);
var li4 = document.createElement("li");
li4.innerText = "低头思故乡";
ul.appendChild(li4);
}
function deleteUl(){
var result=confirm("确定要删除子标签吗？");
if(result==true){
//删除标签---删除子标签
var ul=document.getElementsByTagName("ul")[0];
//ul.removeChild();
ul.remove();
}
}
</script>
</head>
<body>
<div id="box" class="box">
</div>
<input type="button" value="创建列表标签" onclick="createUl()" />
<input type="button" value="删除列表标签" onclick="deleteUl()" />
</body>
</html>
高端操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态创建表格</title>
<style type="text/css">
table{
text-align: center;
border-collapse: collapse;
width: 800px;
}
td{
border: 1px solid black;
}
table tr:hover{
background-color: deeppink;
}
</style>
<script type="text/javascript">
function createTable(){
var rows=document.getElementsByName("row")[0].value;
var cols=document.getElementsByName("col")[0].value;
//创建表格
var table=document.createElement("table");
//添加到body中
document.body.appendChild(table);
//外层循环控制行数
for(var i=1; i<=rows; i++){
//创建tr
var tr=document.createElement("tr");
if(i%2==0){
tr.style.backgroundColor="gainsboro";
}else{
tr.style.backgroundColor="gray";
}
table.appendChild(tr);
//内层循环控控制每行里的列数
for(var j=1; j<=cols; j++){
//创建td
var td=document.createElement("td");
tr.appendChild(td);
//单元格内容
td.innerText=(i+"-"+j);
}
//再创建一列：操作列
var tdLast=document.createElement("td");
tr.appendChild(tdLast);
//创建删除按钮
var btnDel=document.createElement("input");
btnDel.type="button";
btnDel.value="删除";
//动态添加事件
btnDel.onclick=function(){
var result=confirm("确定要删除此行数据吗？");
if(result){
//this 单击的那个按钮
//通过层级关系找标签
this.parentNode.parentNode.remove();
}
}
tdLast.appendChild(btnDel);
}
}
</script>
</head>
<body>
行数：<input type="text" value="10" name="row" />
列数：<input type="text" value="8" name="col" />
<input type="button" value="创建表格" onclick="createTable()" />
<hr />
</body>
</html>
28、BOM
概述：
浏览器对象模型(Browser Object Model)使 JavaScript 有能力与浏览器"对话"。
现代浏览器实现了和JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法 和属性
29、window对象
概述：
所有浏览器都支持window对象，它表示浏览器窗口
JavaScript全局对象、函数以及变量均自动成为window对象的成员。
属性：
window.innerHeight：内部高度，包括滚动条
window.innerWidth：内部宽度，包括滚动条。
方法：
open()：打开新的窗口
close()：关闭窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
height: 3000px;
width: 1000px;
margin: 0 auto;
background-color: pink;
}
#ad{
width: 100px;
height: 150px;
background-color: palegreen;
position: fixed;
top: 30px;
right: 20px;
}
#closeDiv{
margin-left: 70px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: gainsboro;
}
</style>
<script type="text/javascript">
function getMeg(){
alert("宽："+window.innerWidth+",高："+window.innerHeight+
"可用宽度："+window.screen.availWidth +",可用高度："+window.screen.availHeight);
}
function openDemo6(){
window.open("demo6.html");
}
function myClose(){
window.close();
}
window.onload=function(){
var closeDiv=document.getElementById("closeDiv");
closeDiv.onclick=function(){
this.parentNode.style.display="none";
//this.parentNode.remove();
}
}
</script>
</head>
<body>
<div id="" class="box">
<input type="button" value="获取浏览器" onclick="getMeg()" />
<input type="button" value="打开demo6" onclick="openDemo6()" />
<input type="button" value="关闭当前窗口" onclick="myClose()" />
</div>
<div id="ad">
<div id="closeDiv">
x
</div>
</div>
</body>
</html>
30、screen对象
表示当前屏幕对象。
属性：
screen.availWidth：可用的屏幕宽度
screen.availHeight：可用的屏幕高度
31、location对象
概述：
location 对象用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面。
属性：
方法：
reload()重新加载页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function jump(){
var meg=prompt("请输入你要跳转的网站");
var urls="";
if(meg=="百度"){
urls="http://www.baidu.com";
}else if(meg=="新浪"){
urls="http://www.sina.com.cn"
}else if(meg=="163"){
urls="http://www.163.com";
}else {
urls="http://www.sohu.com";
}
location.href=urls;
}
function getMeg(){
var urls=location.href;
var port=location.port;
var pro=location.protocol;
var name=location.hostname;
alert("网址："+urls+","+
"端口："+port+",协议："+pro+",主机名："+name)
}
function myReadLoad(){
location.reload();
}
</script>
</head>
<body>
<input type="button" value="页面跳转" onclick="jump()" />
<input type="button" value="获取当前页面location信息" onclick="getMeg()" />
<input type="button" value="刷新页面" onclick="myReadLoad()" />
</body>
</html>
32、history对象
概述：
包含用户在浏览器窗口中访问过的URL
属性：
length：返回浏览器历史列表中的URL数量
方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function next(){
window.location.href="page2.html";
}
</script>
</head>
<body>
页面1
<hr />
<input type="button" value="下一页" onclick="next()" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function next(){
window.location.href="page3.html";
}
function pre(){
history.forward();
}
function bac(){
history.back();
}
</script>
</head>
<body>
页面2
<hr />
<input type="button" value="下一页" onclick="next()" />
<input type="button" value="前进" onclick="pre()" />
<input type="button" value="后退" onclick="bac()" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function bac(){
//history.back();
history.go(-2);
}
</script>
</head>
<body>
页面3
<hr />
<input type="button" value="后退" onclick="bac()" />
</body>
</html>
33、navigator对象
概述：
navigator对象包含有关浏览器的信息
属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getMet(){
alert(navigator.appName+","+navigator.appVersion)
}
</script>
</head>
<body>
<input type="button" value="获取浏览器信息" onclick="getMet()" />
</body>
</html>
34、JavaScript定时器
定时器函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>时间</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#time{
width: 600px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #98FB98;
margin: 0 auto;
font-size: 40px;
}
</style>
<script type="text/javascript">
var myTime;
var myTimeOut;
window.onload = function(){
getTime();
//参数1: 函数
//参数2: 间隔的时间 ,毫秒为单位
//每间隔参数2时间就执行一次参数1的函数
myTime = setInterval("getTime()" ,1000);
//过了指定时间后,执行下一次函数
//myTimeOut = setTimeout("getTime()",1000);
}
function getTime(){
//获取标签
var div = document.querySelector("#time");
//创建时间对象
var dt = new Date();
var year = dt.getFullYear(); //获取四位的年份
var month = dt.getMonth()+1; //月份
if(month <= 9){
month = "0" + month;
}
var date1 = dt.getDate(); //日期
var hour = dt.getHours(); //小时
var minute = dt.getMinutes(); //分钟
var seconds = dt.getSeconds(); //秒
var week = dt.getDay();
var strWeek = doWeek(week);
// div.innerText = year + "-" + month + "-" + datel + " " + hour + ":" + minute + ":" + seconds + " " + strWeek;
div.innerText=year+"-"+month+"-"+date1+" "+hour+":"+minute+":"+seconds+" "+strWeek;
}
function doWeek(day){
var strWeek = "";
switch (day){
case 1:
strWeek="星期一";
break;
case 2:
strWeek="星期二";
break;
case 3:
strWeek="星期三";
break;
case 4:
strWeek="星期四";
break;
case 5:
strWeek="星期五";
break;
case 6:
strWeek="星期六";
break;
case 7:
strWeek="星期日";
break;
default:
break;
}
return strWeek;
}
function stopClock(){
clearInterval(myTime);
//clearTimeout(myTimeout);
}
</script>
</head>
<body>
<div id="time">
</div>
<input type="button" value="时钟停止" onclick="stopClock()" />
</body>
</html>
35、总结
JavaScript时定义网页行为的一门脚本语言
JavaScript组成：
ECMAScript语法
DOM
BOM
语法：
变量
数据类型
运算符
函数
事件
DOM
BOM
扫一扫
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
