1.JS使用的基本语法
页面内单独使用
<script type="text/javascript"> alert("Hello World:js") </script>
单独写在一个js文件中使用
使用步骤:
1)需要先创建一个.js文件,然后在里面写js代码
2)在需要使用的页面引入刚定义好的.js文件才会起到作用
2.JavaScript解析HTML:DOM
<!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.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]; • 1
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.方法
toString():将类型转换成字符串 • 1
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>