1.JS使用的基本语法
页面内单独使用
<script type="text/javascript">
alert("Hello World:js")
</script>
单独写在一个js文件中使用
使用步骤：
1）需要先创建一个.js文件，然后在里面写js代码
2）在需要使用的页面引入刚定义好的.js文件才会起到作用
2.JavaScript解析HTML：DOM
2.1.JavaScript选择器
2.1.1.id选择器
通过 id 查找 HTML 元素，如果找到该元素，则该方法将以对象的形式返回该元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS的第一个例子</title>
<script type="text/javascript">
function quickStart(){
var x=document.getElementById("te").value
alert(x)
alert("获取到的数据的类型为："+typeof(x))
var afterX=parseInt(x)
alert("获取到的数据的类型为："+typeof(afterX))
}
</script>
</head>
<body>
<input type="text" id="te" value="" />
<input type="button" value="点击" onclick="quickStart()" />
</body>
</html>
2.1.2.name选择器
通过name查找到HTML的元素，如果找到元素了，则会返回一个数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS的第一个例子</title>
<script type="text/javascript">
function quickStart(){
//1.通过name选择器获取到一组元素
var habbies=document.getElementsByName("like")
//2.对数组进行循环
for(var i =0;i<habbies.length;i++){
alert(habbies[i].value)
}
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="quickStart()" />
唱歌 <input type="checkbox" name="like" value="唱歌"/>
打球<input type="checkbox" name="like" value="打球"/>
跳舞<input type="checkbox" name="like" value="跳舞"/>
</body>
</html>
2.1.3.通过标签名找到 HTML 元素
getElementsByTagName("p");
var habbies=document.getElementsByTagName("input")//其他的都与步骤2一样
2.2.事件
2.2.1.常见的HTML事件
-
onchange HTML 元素改变
-
onclick 用户点击 HTML 元素
-
onmouseover 用户在一个HTML元素上移动鼠标
-
onmouseout 用户从一个HTML元素上移开鼠标
-
onkeydown 用户按下键盘按键
-
onload 浏览器已完成页面的加载
-
onmouseover、onmouseout(注重结果)；
-
onmouseenter、onmouseleave(注重过程)；
-
详解
1、onmouseover、onmouseout：
鼠标经过时自身触发事件，经过其子元素时也触发该事件(会冒泡)；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：
鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
2.2.23.HTML的事件触发
那么JavaScript 可以做什么？ 答案肯定是响应：
怎样响应：执行函数
<body >
<script type="text/javascript">
function quickEyes()
{
alert("确认过眼神，我就是你最爱的人");
}
</script>
<input type="button" value="函数--求和" onclick="quickEyes()"/>
</body>
2.3.JavaScript 能够改变页面中的所有 HTML 元素
document.getElementById("p1").innerHTML="新文本!";
2.4.改变 HTML 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS解析DOM之更改HTML中元素的属性</title>
<script type="text/javascript">
function res(){
var btn1=document.getElementById("btn1");
btn1.disabled=false; //恢复按钮的点击;
btn1.value="可以点击了"; //更新按钮显示的内容;
}
</script>
</head>
<body>
<input type="button" value="禁用" id="btn1" disabled="disabled" />
<input type="button" value="恢复" onclick="res()" />
</body>
</html>
2.5.改变HTML元素的CSS样式
2.5.1.改变HTML元素的CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function updateHtmlCss(){
alert("进入")
var p1=document.getElementById("p1")
p1.style.color="red"
p1.style.fontSize="28px"
p1.style.fontFamily="微软雅黑"
}
</script>
</head>
<body>
<p id="p1">Hello World!</p>
<input type="button" value="改变 HTML 样式" onclick="updateHtmlCss()" />
</body>
</html>
2.5.2.使用js实现HTML中元素的隐藏或显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hiddenElement(){
alert("隐藏")
var box=document.getElementById("box")
box.style.display="none"
//box.style.visibility="hidden"
}
function showElement(){
alert("显示")
var box=document.getElementById("box")
box.style.display="block"
//box.style.visibility="visible"
}
</script>
</head>
<body>
<div id="box" style="display: block;">
<p>上海滩</p>
<p>大上海。。。百乐门。。。。</p>
</div>
<input type="button" value="隐藏" onclick="hiddenElement()" />
<input type="button" value="显示" onclick="showElement()" />
</body>
</html>
2.5.3.升级版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hiddenAndShow(){
var btn1=document.getElementById('btn');
var box=document.getElementById("box")
alert(btn1.value)
if(btn1.value=="隐藏"){
box.style.display="none"
btn1.value="显示"
}
else{
box.style.display="block"
btn1.value="隐藏"
}
}
</script>
</head>
<body>
<div id="box" >
<p>上海滩</p>
<p>大上海。。。百乐门。。。。</p>
</div>
<input type="button" id="btn" value="隐藏" onclick="hiddenAndShow()" />
</body>
</html>
2.6.JavaScript对HTML元素的增删
2.6.1.创建新的html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function addElement(){
var div1=document.getElementById('div1');
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落的内容：666");
para.appendChild(node);
div1.appendChild(para)
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<input type="button" id="btn" value="增加" onclick="addElement()" />
</body>
</html>
2.6.2.删除HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function removeElement(){
var parent=document.getElementById('div1');
var child=document.getElementById('p1');
parent.removeChild(child)
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<input type="button" id="btn" value="删除" onclick="removeElement()" />
</body>
</html>
2.6.扩展–“盖大楼” ( 增 删 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function addRows() {
var table = document.getElementById("tad");
var oneRow = table.insertRow();//插入一行
oneRow.id=getRowId()
alert(oneRow.id)
var cell1= oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格
var cell2=oneRow.insertCell();
cell1.innerHTML = "第一列的内容";
cell2.innerHTML="第二列的内容：<a href=\"javascript:delRows('"+oneRow.id+"')\" >[删除]<\a>";
}
function delRows(a){
alert("删除该行"+a)
var newTr=document.getElementById(a)
alert(newTr.id)
newTr.parentNode.removeChild(newTr);
}
function getRowId(){
return Math.floor(Math.random()*256)
}
</script>
</head>
<body>
<table width="100%" height="300px" border="1px" id="tad">
<tr>
<td>商品单价</td>
<td>商品数量</td>
</tr>
</table>
<input type="button" value="添加一行" onclick="addRows()" />
</body>
</html>
3.js语法
3.1.js语法基础
3.1.1第一个JS例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<script type="text/javascript">
alert("Hello World")
</script>
</body>
</html>
小结：
- 1.js在页面内使用的时候必须要写在
3.1.2JavaScript 语法
- JavaScript： 是一个脚本语言。它是一个轻量级，但功能强大的编程语言
- 数据类型：虽然JavaScript在书写校验上不去区分数据的类型，但是并不意味着是不区分数据类型，而是通过在浏览器中内置的JS解析器/引擎自动的去判断的
数字
1.1数字：
var a=12 //整数
var b=2.3 //浮点数或者说是小数型
var c=-0.5
友情提示：1）在js中变量名必须以字母或下划线（"_"）开头
2）变量可以包含数字、从 A 至 Z 的大小写字母
3）JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量
逻辑型或布尔型
var a= true
var b=false
alert(a)
alert(b)
Undefined 和 null
- Undefined： 用于存放 JavaScript 的 undefined 值，表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性
- null:可以通过将变量的值设置为 null 来清空变量，其意思为空值
var a=""
var a=null
var a
alert(typeof(a))
字符串
可以使用单引号或双引号
var firstName="biil"
var familyName='Gates'
alert(firstName+familyName)
日期
Date是js中的一个内置的类
new：为类Date在内存中创建一个内存空间，进而实现实例化
var myDate=new Date()
alert(myDate)/*默认是格里尼形式的日期格式*/
提示：Date: 是js中的一个内置的类
new：为类Date在内存中创建一个内存空间，进而实现实例化
补充：关键字：就是具有特殊含义的词
数组
是一种存放数据的容器，其一般可以存放多个，且需要知道其长度
var array=[40, 100, 1, 5, 25, 10]
alert(array[0])
注释
单行注释：//
多行注释：/**/
扩展：注释的作用：
1）统一规范
2）注解，帮助理解/阅读代码
3）扯淡
连接字符和转义字符
-
连接字符：在js中场用+表示为连接字符
-
转义字符：具有特殊含义的字符
例如： var a=123
alert('变量a的值为：'+a)
\n 换行符 alert(“这是第一局 \n 这是第二句”)
\t 制表符 alert(“这是第一局 \t 这是第二句”)
运算符
2.1算术运算符： +， -， *， /， %，++，--
++：自动加1 例如 var a=12
alert(a++)
++在前：先计算再输出； ++在后：先输出再计算
--：自动减1，例如 var h=6
alert(a--)
---------------------------------------------------------------------------------------------------------
2.2关系运算符： > ，>=， <，<=, !=, ==（值比较）,=== （全等于）
---------------------------------------------------------------------------------------------------------
2.3逻辑运算符：
与 ：&& ：全真为真，只要有一个假则为假
或 ：|| ：全假为假，只要有一个为真则为真
非 ：! ：取相反的
3.1.3JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
1）使用 window.alert() 弹出警告框。
<!DOCTYPE html>
<html>
<body>
<h1>使用 window.alert() 弹出警告框</h1>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
2）使用 document.write() 方法将内容写到 HTML 文档中。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
document.write(123);
</script>
</body>
</html>
3）使用 innerHTML 写入到 HTML 元素。
<!DOCTYPE html>
<html>
<body>
<h1>使用 innerHTML 写入到 HTML 元素</h1>
<p id="demo">我的第一个段落</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
3.1.4基本语句
1）顺序语句：js默认是从上向下自动执行的
2）选择语句：
2.1）二路分支：
if(条件)
{
//JavaScript代码;
}
else
{
//JavaScript代码;
}
---------------------------------------------------------------------------------------------------------
多路决策：
switch (表达式)
{
case 常量1 :
JavaScript语句;
break;
case 常量2 :
JavaScript语句;
break;
...
default :
JavaScript语句;
}
小结：switch...case...default不仅有多路决策的特性，还有穿透性
---------------------------------------------------------------------------------------------------------
或者：
if (time<10)
{
alert("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
alert("<b>今天好</b>");
}
else
{
alert("<b>晚上好!</b>");
}
3）循环语句：
for循环语句：
for (var i=0;i<10;i++)
{
alert("当前i的值为:"+i)
}
---------------------------------------------------------------------------------------------------------
while循环语句：
var i =1
while (i>5)
{
alert("当前i的值为："+i)
i++;
}
---------------------------------------------------------------------------------------------------------
do...while循环：
var i=5
do
{
alert("执行了")
i++;
}
while (i<5);
备注：
- for：知道次数的循环
- while：>=0次的循环
- do…while：>=1次的循环
3.1.5Break 和 Continue 语句
- break 语句用于跳出循环。
- continue 用于跳过循环中的一个迭代。
for (i=0;i<10;i++)
{
if (i==3)
{
break;//结束本重循环
}
alert("当前i的值为："+i)
}
for (i=0;i<=10;i++)
{
if (i==3){
continue//结束本次循环
}
alert("当前i的值为："+i)
}
3.1.6.JavaScript 数据类型的转换
1.typeof 操作符：可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
---------------------------------------------------------------------------------------------------------
2.将数字转换为字符串
var a=123
//var castResult=String(a)
var castResult2=a.toString()
alert(typeof(castResult2))
---------------------------------------------------------------------------------------------------------
3.将字符串转换为数字
var a="123"
var b=Number(a)
var b=parseInt(a)//浮点数不常用
alert(typeof(b))
alert(b+998)
3.1.7.JavaScript正则表达式
1.match():匹配字符串
var a="jack"
var b="[a-z]+"
alert((a.match(b))!=null? true:false)
---------------------------------------------------------------------------------------------------------
2.search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
var str = "Super Start";
alert(str.search("pe"))//返回查找到的下标位置
alert(str.search("wyh"))//查查找不到的时候返回-1
---------------------------------------------------------------------------------------------------------
3.replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = "Super Start";
alert(str.replace("Start","wyh"))
ps:用一定的规律描述出来的表达式，匹配则执行，不匹配不执行
3.1.8.JavaScript函数
1.js中的函数定义
语法： function 函数名( ){
}
示例一：
<script type="text/javascript">
function sum(a,b){
alert(a+b)
}
</script>
<input type="button" value="函数--求和" onclick="sum(2,3)"/>
---------------------------------------------------------------------------------------------------------
示例二：
var fun=function(){
alert("匿名函数");
}
fun(); //执行匿名函数
---------------------------------------------------------------------------------------------------------
示例三：
var aa = function(x,y){
alert(x+y);
}(1,2);
小结：1）js中的函数可以没有返回值，就是不必须要有return
2 ) 常用事件(点击，鼠标移入，键盘输入)来触发函数，也可以匿名自执行函数（见示例三）
3）函数可以没有名字，这样的函数称之为匿名函数（现实世界中的一首歌曲：《干就完了》）
3.1.9.补充
==称作（相等）
===称作（严格相等）
对于Array,Object等高级类型，== 和 ===是没有区别的
js中的基本数据类型：undefined，boolean，number，string，null.
js中高级类型：Object、Array和Function
3.2.JS对象
3.2.1.JavaScript Array（数组） 对象
1.数组对象：是使用单独的变量名来存储一系列的值
1）创建一个数组：有3种方式
1: 常规方式:
var myCars=new Array();
myCars[0]="BYD";
myCars[1]="Volvo";
myCars[2]="BMW";
2.简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3.字面方式:
var myCars=["Saab","Volvo","BMW"];
2）访问数组：通过指定数组名以及索引号码，你可以访问某个特定的元素
例如：var name=myCars[0];
3）数组方法和属性：
var x=myCars.length // myCars 中元素的数量
var y=myCars.indexOf("Volvo") // "Volvo" 值的索引值
4）数组排序
sort():按照字符进行升序
<body>
<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
reverse（）：将一个数组中的元素的顺序反转（即是将数组中的元素的头变成了尾，尾变成了头，可不是其他的）
提示：fruits.reverse() 其他的都不变
3.2.2.JavaScript 字符串（String） 对象
字符串中常用的属性和方法
- str.length:获取字符串的长度
- str.match(""):内容匹配
- str.replace():替换内容
例如：str="Welcome to beiJing"
var n=str.replace("beiJing","shangHai");替换内容
str.toUpperCase()，str.toLowerCase()：字符串大小写转换
str.split(","):字符串的截取
3.2.3.JavaScript Date（日期） 对象
1.日期的常用方法
getDate()：如何使用 getDate() 来取得当前月份的日期。
myDate.getFullYear()+“"+myDate.getMonth()+"”+myDate.getDay()+“"+myDate.getHours()+"”+myDate.getMinutes()+"****"+myDate.getSeconds()
var time = new Date( ); //获得当前时间
Date() // 返回当日的日期和时间。
getDate() // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() // 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() // 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() // 从 Date 对象以四位数字返回年份。
getYear() // 请使用 getFullYear() 方法代替。
getHours() // 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() // 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() // 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() // 返回 Date 对象的毫秒(0 ~ 999)。
getTime() // 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() // 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() // 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() // 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() // 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() // 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() // 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() // 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() // 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() // 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() // 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() // 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() // 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() // 设置 Date 对象中的年份（四位数字）。
setYear() // 请使用 setFullYear() 方法代替。
setHours() // 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() // 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() // 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() // 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() // 以毫秒设置 Date 对象。
setUTCDate() // 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth() // 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear() // 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() // 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes() // 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() // 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() // 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource() // 返回该对象的源代码。
toString() // 把 Date 对象转换为字符串。
toTimeString() // 把 Date 对象的时间部分转换为字符串。
toDateString() // 把 Date 对象的日期部分转换为字符串。
toGMTString() // 请使用 toUTCString() 方法代替。
toUTCString() // 根据世界时，把 Date 对象转换为字符串。
toLocaleString() // 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() // 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString() // 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC() // 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() // 返回 Date 对象的原始值。
3.2.4.JavaScript Number 对象
1.Number: 数字对象，经过封装的能让你处理数字值的对象
2.常量，属性
MAX_VALUE 可表示的最大的数。 // 1.7976931348623157e+308
MIN_VALUE 可表示的最小的数。 // 5e-324
NaN 非数字值。 // NaN
NEGATIVE_INFINITY 负无穷大，溢出时返回该值。//-Infinity
POSITIVE_INFINITY 正无穷大，溢出时返回该值。//Infinity
例如： //alert(Number.MAX_VALUE+","+Number.MIN_VALUE)
var a="123";
var b="Jack";
alert(Number(b));//NaN:not a number :不是一个数字
3.方法
toString():将类型转换成字符串
3.2.5.JavaScript Math（算术） 对象
1.Math 对象：用于执行数学任务
语法
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根
2.Math 对象方法
abs(x) 返回 x 的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对 x 进行下舍入。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sqrt(x) 返回数的平方根。
3.2.6JavaScript面向对象编程（了解）
1.对象：是属性和/方法的组合
属性：是对象所拥有的一组外观特征，一般为名词
方法：是对象可以执行的功能，一般为动词
例如：对象：汽车
属性：型号：法拉利 颜色：绿色
方法：前进、刹车、倒车
PS:三类已经存在的对象：
浏览器对象：BOM(已经存在于浏览器中的，到时候我们直接调用即可，例如Screen,History,Location,Navigator)
js脚本对象:数组，字符串，日期，Math等(JS语言中已经写好的具有某一些功能的对象，例如Array,Number,Math…)
HTML文档对象：DOM（已经存在于HTML中的，且已经写好了，用的时候可以直接调用即可，例如Document）
2.js面向对象编程实例
<body>
<script type="text/javascript">
function Cat(name,color){
this.name = name;
this.color = color;
this.type = "猫科动物";
this.eat = function(){alert("吃老鼠");};
}
var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠
</script>
</body>
4.浏览器对象:BOM
4.1.Window Screen
Window Screen:包含有关用户屏幕的信息 , window.screen对象在编写时可以不使用 window 这个前缀。
1)常用的属性
screen.width / screen.height:总宽度/高度
screen.availWidth /screen.availHeight:可用宽度/高度
screen.colorDepth: 颜色深度
screen.pixelDepth: 颜色分辨率
4.2.Location的核心属性
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 （80 或 443）
- location.protocol 返回所使用的 web 协议（http:// 或 https://）
- location.href 属性返回当前页面的 URL。
- location.assign()方法：加载新的文档
<html>
<head>
<meta charset="utf-8" />
<script>
function newDoc()
{
window.location.assign("http://www.w3cschool.cc")
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>
4.3.window.history 对象包含浏览器的历史。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
例如：从一个页面跳转到当前页面的时候，可以用这个进行页面的跳转
<html>
<head>
<meta charset="utf-8" />
<script>
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
4.4.window.navigator 对象包含有关访问者浏览器的信息。
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
4.5JavaScript 弹窗
JavaScript 弹窗:可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框
1)警告框
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("你好，我是一个警告框！");
}
</script>
</head>
<body
<input type="button" onclick="myFunction()" value="显示警告框">
</body>
</html>
2）确认框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>确认框</title>
</head>
<body>
<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
3）提示框
提示框经常用于提示用户在进入页面前输入某个值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
</head>
<body>
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>
扫一扫
1456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
