JavaScript AND BOM

最新推荐文章于 2020-08-01 00:22:00 发布

DH2264664169

最新推荐文章于 2020-08-01 00:22:00 发布

阅读量170

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/dh2264664169/article/details/85629600

版权

javascript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、简介

JavaScript用于网页和用户之间的交互

完整的javascript由语言基础，BOM和DOM组成

二、设计使用：

通过javascript向文档中输出文本：

document是javascript的内置对象，代表浏览器的文档部分
document.write("Hello Javascript"); 向文档写入字符串

javascript和DOM结合显示和隐藏文本：

<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>
 
<button onclick="document.getElementById('text').style.display='block'">显示文本</button>
 
<p id="text"> 这个是一段可以被javascript隐藏的文本</p>

οnclick="..." 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display='none' 隐藏
.style.display='block' 显示(准确的讲，以block的形式显示)

onclick，getElementById，style.display 这些内容，是HTML DOM 应该到才会用到的知识和概念

<script>标签：javascript代码必须放在script标签中，一旦加载，就会执行

script标签可以放在html的任何地方，一般建议放在head标签里

如果有多段script代码，会按照从上到下，顺序执行

使用外部js文件：<script src="hello.js"></script>

注释： //单行注释 /* */多行注释

变量： 使用var关键字声明 var x = 10; document.write("变量x的值："+x);

也可不用var关键字声明

变量命名：命名规则和java差不多
开头可以用 _$和字母，不可以用数字
其他部分可以用 $ _ 字母或者数字

JavaScript代码调试：

alert();

使用专业的调试工具(F12开发者工具)

firebug有一个日志输出工具console.log().会把信息输出在console里，而不会影响用户的使用

<script>
x = 10;
console.log("x="+x);
document.write("没有用var声明的变量x的值:"+x);
console.log("end");
</script>

基本数据类型：也叫简单数据类型五种

undefined（声明了未赋值），Boolean,Number（数字）,String，null（空对象/对象不存在）

javascript中的Number可以表示十进制，八进制，十六进制整数，浮点数，科学记数法

<script>
var a=10; //十进制
var b=012;//第一位是0，表示八进制
var c=0xA;//0x开头表示十六进制
var d=3.14;//有小数点表示浮点数
var e=3.14e2;//使用e的幂表示科学计数法

与java不同的是，javascript中没有字符的概念，只有字符串，所以单引号和双引号，都用来表示字符串。

var声明的变量是动态类型：当值是整数的时候，就是Number类型，当值是字符串的时候，就是String类型

变量类型判断：使用typeof来进行判断数据类型

document.write('赋值为5之后，类型是： '+typeof x); document.write("变量a的类型是:"+(typeof a));

伪对象：即便是基本类型，也是伪对象，所以他们都有属性和方法。

字符串，通过调用其为伪对象的属性length获取其长度 document.write("变量a的长度是:"+a.length);

转换为字符串：无论是Number,Boolean还是String都有一个toString方法，用于转换为字符串 a.toString()

document.write('默认模式下，数字10转换为十进制的'+a.toString()); //默认模式，即十进制

document.write('基模式下，数字10转换为二进制的'+a.toString(2)); //基模式，二进制

转换为数字：javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字

如果被转换的字符串，同时由数字和字符构成，那么parseInt会一直定位数字，直到出现非字符。所以"10abc" 会被转换为 10

字符串"10abc8" 会被转换为10 字符串的"hello javascript"转换为数字的:NaN

转换为Boolean：使用内置函数Boolean() 转换为Boolean值
当转换字符串时：非空即为true
当转换数字时：非0即为true
当转换对象时：非null即为true

空对象 null 转换为布尔后的值:false
非空对象 new Object() 转换为布尔后的值:true

document.write("非空对象 new Object() 转换为布尔后的值:"+Boolean(new Object())); //对象存在

Number()和parseInt()的区别：Number()和parseInt()一样，都可以用来进行数字的转换
区别在于，当转换的内容包含非数字的时候，Number() 会返回NaN(Not a Number)
parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN

String()和toString()的区别：String()和toString()一样都会返回字符串，区别在于对null的处理
String()会返回字符串"null"
toString() 就会报错，无法执行

String(null) 把空对象转换为字符串：null
null.toString() 就会报错，所以后面的代码不能执行

函数：function关键字用于定义一个函数不会自动执行，须调用

带参数和返回值的函数：

function calc(x,y){
  return x+y;
}
 
var sum = calc(500,20);
print(sum);

如何从input中取值:

var value = document.getElementById("num1").value;

如何把数值放回input中:

document.getElementById("result1").value=value;

依据表格数据自动生成内容：

<html>
<script>
function generate(){
   var location = $("location");
   var companyType= $("companyType");
   var companyName= $("companyName");
   var bossName= $("bossName");
   var money= $("money");
   var product= $("product");
   var unit= $("unit");
 
   var result  = location +"最大"+companyType+companyName+"倒闭了，王八蛋老板"+bossName+"吃喝嫖赌，欠下了"+money+"个亿，"
                            + "带着他的小姨子跑了!我们没有办法，拿着"+product+"抵工资!原价都是一"+unit+"多、两"+unit+"多、三"+unit+"多的"+product+"，"
                            + "现在全部只卖二十块，统统只要二十块!"+bossName+"王八蛋，你不是人!我们辛辛苦苦给你干了大半年，"
                            + "你不发工资，你还我血汗钱，还我血汗钱!";   
 
   document.getElementById("result").value=result;  
 
}
 
function $(id){
   var value = document.getElementById(id).value;
   return value;
}
 
</script>
 
<style>
body{
   font-family: 宋体;
}
span{
   display:inline-block;
   border: 1px solid lightgray;
   width:120px;
   margin-bottom:5px;
}
 
button#generate{
   width:80px;
   height:30px;
}
 
textarea{
     width:100%;
     height:150px;
     margin-top:20px;
}
 
</style>
 
<body>
<span>地名:</span> <input type="text" id ="location"  value="浙江">
<span>公司类型:</span> <input type="text" id ="companyType"  value="互联网公司">
<br>
<span>公司名称:</span> <input type="text" id ="companyName" value="阿里九九">
<span>老板姓名:</span> <input type="text" id ="bossName" value="牛风">
<br>
<span>money:</span> <input type="text" id ="money" value="一万">
<span>产品:</span> <input type="text" id ="product" value="贴膜">
<br>
<span>价格计量单位:</span> <input type="text" id ="unit" value="百">
 
<br>
<div align="center">
<button id="generate" onclick="generate()">生成</button>
<br>
<textarea id="result">浙江最大互联网公司阿里九九倒闭了，王八蛋老板牛风吃喝嫖赌，欠下了一万个亿，带着他的小姨子跑了!我们没有办法，拿着贴膜抵工资!原价都是一百多、两百多、三百多的贴膜，现在全部只卖二十块，统统只要二十块!牛风王八蛋，你不是人!我们辛辛苦苦给你干了大半年，你不发工资，你还我血汗钱，还我血汗钱!</textarea>
</div>
 
<br>
 
</body>
</html>

参数作用域：一个参数的作用域就在这个函数内部，超出函数就看不见该参数了

全局变量的作用域：全局变量会随着相应使用到它的函数执行而改变

事件：是javascript允许html与用户交互的行为。用户任何对网页的操作，都会产生一个事件

如鼠标移动，鼠标点击οnclick=""，键盘点击等等。

算数运算符：+ 具备多态特征
当两边都是数字的时候，表现为算数运算符
当任意一边是字符串的时候，表现为字符串连接符

绝对等与绝对不等于：

与==进行值是否相等的判断不同，绝对等 ===还会进行类型的判断
比如数字1和字符串'1'比较，值是相等的，但是类型不同
所以==会返回true,但是===会返回false
绝对不等于!== 与上是一个道理

三目运算符：三目运算符 ?: 有三个操作数 var x = a>0?b:c ;
如果第一个返回true,就返回第二个操作符
否则就返回第三个操作符。

条件语句：

条件成立时执行（if条件一定是一个Boolean类型的值，当为true时，执行对应的语句） if else if else

多条件判断 - switch：每个判断结束，都要加上break;

<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var today;
switch (day)
{
case 0:
  today="星期天";
  break;
case 1:
  today="星期一";
  break;
case 2:
  today="星期二";
  break;
case 3:
  today="星期三";
  break;
case 4:
 today="星期四";
  break;
case 5:
  today="星期五";
  break;
case 6:
  today="星期六";
  break;
}
 
document.write("今天是 ： "+today);
 
</script>

循环语句：for while do-while for-each

continue 表示放弃本次循环，进行下一次循环 break表示终止循环，循环体结束

（使用标记结束相应循环）

a:for(int i=1;i<3;i++){} break a;

<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
document.write("使用for循环打印 0 到 4<br>");
 
for(var i=0;i<5;i++){
  p(i);
}
 
</script>

错误处理：对未定义的方法调用进行try catch的处理。捕捉到了该方法未定义的错误。并打印出来。
后续的代码，也就可以继续执行了。

数据计算生成：

<style>
table{
 border-collapse:collapse;
}
td{
  border:1px silver solid;
  padding: 5px;
  font-size:12px;
}
input{
  width:180px;
}
</style>
<script>
/*取幂函数*/
function p(base, power){
    if(1==power)
       return base
    if(0==power)
       return 1;
    var result = base;
    for(var i = 0; i<power-1; i++){
        result = result*base;
    }
    return result;
}
 
/*取复利*/
function fuli(rate, year){
    var result = 0;
    for(var i=year;i>0;i--){
      result+=p(rate,i);
    }
    return result;
}
 
function calc(){
    var initMoney= getIntValue("initMoney");
    var rate= getIntValue("rate");
    var year= getIntValue("year");
    var each= getIntValue("each");
    var sum1 = (year-1)*each+initMoney;
    var sum3=each* fuli(  (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year);
    var sum2 = sum3-sum1;
    setValue("sum1",sum1);
    setValue("sum2",sum2);
    setValue("sum3",sum3);
}
 
function setValue(id,value){
    document.getElementById(id).value=value;
}
 
function getIntValue(id){
    return parseInt(document.getElementById(id).value);
}
</script>
<table>
<tr>
  <td>起始资金</td>
  <td><input type="text" id="initMoney" value='10000'> ￥</td>
<tr>
  <td>每年收益</td>
  <td><input type="text" id="rate" value='5'> %</td>
</tr>
<tr>
  <td>复利年数</td>
  <td><input type="text" id="year" value='10'> 年</td>
</tr>
<tr>
  <td>每年追加资金</td>
  <td><input type="text" id="each" value='10000'> ￥</td>
</tr>
<tr>
   <td colspan="2" align="center"><input type="button" value="计算" onclick="calc()"></td>
</tr>
<tr>
  <td>本金和</td>
  <td><input type="text" id="sum1" disabled="disabled"  value='0'> ￥</td>
</tr>
<tr>
  <td>利息和</td>
  <td><input type="text" id="sum2"  disabled="disabled" value='0'> ￥</td>
</tr>
<tr>
  <td>本息和</td>
  <td><input type="text" id="sum3"  disabled="disabled" value='0'> ￥</td>
</tr>
</table>

对象：JavaScript中的对象是有着属性和方法的一种特殊数据类型。

常见的对象有数字Number，字符串String，日期Date，数组Array等。

这里的Number是对象Number,和基本数据类型中的基本类型Number是不一样的Number。

创建一个数字对象：可以通过new Number()创建一个数字对象

与基本类型的数字不同，对象类型的数字，拥有更多的属性和方法

数字对象x的值:123
数字对象x的类型:object
基本类型y的值:123
基本类型y的类型:number

最大值与最小值：Number对象能够取到的最大和最小边界 Number.MIN_VALUE Number.MAX_VALUE

不是数字：NaN(Not a Number),表示不是一个数字
当通过非数字创建Number的时候，就会得到NaN.
注意：不能通过是否等于Number.NaN来判断是否 “不是一个数字”，应该使用函数 isNaN()

返回一个数字的小数表达：toFixed返回一个数字的小数表达

数字对象123通过toFixed(2) 保留两位小数:123.00
PI 通过toFixed(3) 保留三位小数:3.142

返回一个数字的科学计数法表达：

数字对象123通过toExponential 返回计数法表达 1.23e+2
数字对象3.1415926通过toExponential 返回计数法表达 3.1415926e+0

返回一个数字对象的基本数据类型：方法 valueOf() 返回一个基本类型的数字
通过typeof 判断数据类型可以发现，一种是object,一种是number

数字对象a的类型是: object
通过valueOf()返回的值的类型是number

一个乘法示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
    input{
        width:50px;
    }
</style>
 
<script>
function cal(){
    var value1 = document.getElementById("num1").value;
    var value2 = document.getElementById("num2").value;
    num1 = parseInt(value1);
    num2 = parseInt(value2);
    var result1 = num1 * num2;
    var num3 = new Number(result1);
    document.getElementById("num3").value = num3.toExponential ();
}
</script>
</head>
<body>
    <input type="text" id="num1" value="4"/>*
    <input type="text" id="num2" value="5"/>=
    <input type="text" id= "num3"/>
    <input type = "button" value="运算" onclick="cal()">
</body>
</html>

字符串：

创建字符串对象：与Number类似的，可以通过new String()创建一个String对象

属性 length 返回字符串的长度

charAt 返回指定位置的字符
charCodeAt 返回指定位置的字符对应的Unicode码

concat用于进行字符串拼接

indexOf 返回子字符串第一次出现的位置
lastIndexOf 返回子字符串最后一次出现的位置

localeCompare 比较两段字符串是否相同，0即表示相同，非0表示不同

截取字符串：substring（）

字符串x的值: Hello JavaScript
x.substring (0,3) 获取位0到3的字符串： Hel
左闭右开，取得到0，取不到3

字符串转换为数组：split 根据分隔符，把字符串转换为数组。
注：第二个参数可选，表示返回数组得长度

字符串x的值: Hello This Is JavaScript
通过空格分隔split(" "),得到数组Hello,This,Is,JavaScript
通过空格分隔split(" ",2),得到数组，并且只保留前两个Hello,This

字符串替换：replace(search,replacement)
找到满足条件的子字符串search，替换为replacement

默认情况下只替换找到的第一个子字符串，如果要所有都替换，需要写成：

x.replace(/a/g, "o");

或者

var regS = new RegExp("a","g");

x.replace(regS, "o");

所有返回字符串类型的方法，返回的都是基本类型的String

字符串替换工具：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
function getElement(id){
    var value = document.getElementById(id).value;
    return value;
}
function replace(){
    var iniS = getElement("initialS");
    var fS = getElement("findS");
    var rS = getElement("replaceS");
    var regS = new RegExp(fS,"g");
    var aS = iniS.replace(regS,rS);
    /* var aS = iniS.replace(/fS/g,"rS"); */
    document.getElementById("afterS").value = aS;
}
</script>
</head>
<body>
    <p>字符串替换工具</p>
<table>
    <tr>
        <td>源字符串:</td>
        <td><input type="text" id="initialS" value="example"/></td>
    </tr>
     
    <tr>
        <td>查询字符:</td>
        <td><input type="text" id="findS" value="a"/></td>
    </tr>
     
    <tr>
        <td>替换字符:</td>
        <td><input type="text" id="replaceS" value="e"></td>
    </tr>
     
    <tr>
        <td>替换后为:</td>
        <td><input type="text" id="afterS"></td>
    </tr>
     
    <tr>
        <td colspan="2"><input type="button" value="替换" style="width:80px;" onclick="replace();"/></td>
    </tr>
</table>
</body>
</html>

数组：javascript中的数组是动态的，即长度是可以发生变化的。

创建数组对象的3种方式：
1. new Array() 创建长度是0的数组
2. new Array(5); 创建长度是5的数组,，但是其每一个元素都是undefine
3. new Array(3,1,4,1,5,9,2,6); 根据参数创建数组

属性length 获取一个数组的长度

遍历有两种方式
1.结合for循环，通过下标遍历
2.使用增强for in循环遍历
需要注意的是，在增强for in中，i是下标的意思。

for(i in x){ //for in 循环

p(x[i]);

}

方法 concat 连接两个数组

方法 join 通过指定分隔符，返回一个数组的字符串表达

数组x是:3,1,4
y = x.join() 得到的是数组x的字符串表达，其值是3,1,4 其类型是 :string
z = x.join("@");是x的字符串表达，不过分隔符不是默认的"," 而是"@" : 3@1@4

方法 push pop,分别在最后的位置插入数据和获取数据(获取后删除)
就像先入后出的栈一样

数组x是:3,1,4
向x中push 5,得到 3,1,4,5
从x中pop一个值出来，其值是 5
pop之后，x数组的值是:3,1,4

方法 unshift shift ,分别在最开始的位置插入数据和获取数据(获取后删除)

数组x是:3,1,4
对数组 unshift 值5(在最前面加)，数组变为:5,3,1,4
从数组中 shift 一个数(从最前面取)，其值是:5
shift之后，数组变为:3,1,4

方法 sort对数组的内容进行排序（从小到大）

自定义排序算法：

sort()默认采用正排序，即小的数排在前面。如果需要采用自定义排序的算法，就把比较器函数作为参数传递给sort()。
比较器函数:

function comparator(v1,v2){

return v2-v1; //v2-v1表示大的放前面，小的放后面

}

调用sort函数的时候，把这个比较器函数comparator作为参数传递进去即可

x.sort(comparator);

自定义一个函数，对数组进行排序，要求排序后数组中无重复数据：

<!DOCTYPE html>
<!-- 数组排序并去除重复数据 -->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
function p(s){
  document.write(s);
  document.write("<br>");
}
 
function check(value,a){
  for(i in a){
    if(value==a[i])
       return true;
  }
  return false;
}
 
function removeDuplicate(a){
var result =new Array();
while(a.length!=0){
   var v = a.pop();
   console.log(v);
   if( !check(v,a) ){
     result.push(v);
   }
}
return result;
}
 
var x = new Array(1,3,4,5,7,7,4,5,6,7,7);
p('数组x是:'+x);
x = removeDuplicate(x);
x.sort();
p('使用sort排序后的无重复数据的数组x是:'+x);
 
</script>
</head>
<body>
	
</body>
</html>

方法 reverse，对数组的内容进行反转

方法 slice 获取子数组
注意：第二个参数取不到

数组x是:3,1,4,1,5,9,2,6
x.slice(1)获取的子数组是:1,4,1,5,9,2,6
x.slice(1,3)获取的子数组是:1,4
第二个参数取不到

方法 splice (不是 slice) 用于删除数组中的元素
奇葩的是，它还能用于向数组中插入元素

数组x是:3,1,4,1,5,9,2,6
x.splice (3,2) 表示从位置3开始，删除2个元素:3,1,4,9,2,6
x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5,最后得到:3,1,4,1,5,9,2,6

日期：date

通过new Date创建一个日期对象，这个对象就表示当前日期(现在)

获取年月日：

<script>
var d = new Date();
document.write('分别获取年月日: ');
document.write(d.getFullYear());
document.write("/");
document.write(d.getMonth()+1);
document.write("/");
document.write(d.getDate());
</script>

分别获取时:分:秒:毫秒：

<script>
var d = new Date();
document.write("分别获取时:分:秒:毫秒 ");
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.write(":");
document.write(d.getMilliseconds());
</script>

一周的第几天：

<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
document.write("今天是： "+weeks[day]);
</script>

<script>
var time = new Date().getTime();
document.write("从1970/1/1 08:00:00 到今天的毫秒数： "+ time);
</script>

<script>
var d=new Date();
document.write("修改日期对象的值为世界末日:<br>");
d.setFullYear(2012);
d.setMonth(11); //月份时基0的，所以11表示12月
d.setDate(12);
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
document.write(d);
</script>

计算年龄：

<script>
function calc(){
 
  var year = document.getElementById("year").value;
  var month = document.getElementById("month").value;
  var day = document.getElementById("day").value;
  var today=new Date();
  var birthday=new Date();
  birthday.setFullYear(year );
  birthday.setMonth(month -1);
  birthday.setDate(day); 
  var nowTime = today.getTime();
  var birthTime = birthday.getTime();
  console.log(nowTime);
  console.log(birthday);
  var age = (nowTime -birthTime) /(1000*60*60*24*365);
  age= Math.round(age);
 
  document.getElementById("age").innerHTML=age;
 
}
</script>
请输入出生年月日<br>
年份
<select id="year">
<script>
for(i=1900;i<2010;i++){
  document.write("<option value='"+i+"'>"+i+"</option>");
}
</script>
</select >
月份
<select id="month">
<script>
for(i=1;i<13;i++){
  document.write("<option value='"+i+"'>"+i+"</option>");
}
</script>
</select>
日
<select  id="day">
<script>
for(i=1;i<32;i++){
  document.write("<option value='"+i+"'>"+i+"</option>");
}
</script>
</select>
<br>
<br>
<button onclick="calc()">计算年龄</button>
<br>
<br>
今年<span id="age">100</span> 岁

Math对象：Math是JavaScript的工具对象，用于常见的数学运算

属性E PI，分别表示自然对数和圆周率PI

方法 abs 取绝对值 document.write(Math.abs(-1));

方法 min max 分别取最小值，最大值 document.write(Math.max(1,100));

方法 pow 求一个数的n次方 document.write(Math.pow(3,3)); //3的立方，即27

方法 round,小数四舍五入取整 document.write(Math.round(3.5));

方法 random 取0-1之间的随机数 document.write("十个 5-10 之间的随机数 : Math.round(Math.random() *5)+5 ");

自定义对象：通过new Object()创建一个对象在JavaScript中可以自定义对象，添加新的属性，添加新的方法

<script>
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name，并且赋值
hero.kill = function(){
document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
hero.kill(); //调用函数kill
</script>

通过function设计一个对象：

通过new Object创建对象有个问题，就是每创建一个对象，都得重新定义属性和函数。这样代码的重用性不好
那么，采用另一种方式，通过function设计一种对象。然后实例化它。
这种思路很像Java里的设计一种类，但是 javascript没有类，只有对象，所以我们叫设计一种对象

<script>
function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在杀敌<br>");
}
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();
</script>

为已经存在的对象，增加新的方法：需要通过prototype实现这一点

<script>
function Hero(name){
this.name = name;
this.kill = function(){
document.write(this.name + "正在杀敌<br>");
}
}
var gareen = new Hero("盖伦");
gareen.kill();
var teemo = new Hero("提莫");
teemo.kill();
Hero.prototype.keng = function(){
document.write(this.name + "正在坑队友<br>");
}
gareen.keng();
teemo.keng();
</script>

三、BOM ：浏览器对象模型(Brower Object Model)

浏览器对象包括：
Window(窗口) ：

一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。
通过window对象可以获取文档显示区域的高度和宽度 document.write("文档显示区域的高度"+window.innerHeight);

获取外部窗体的宽度和高度：所谓的外部窗体即浏览器，可能用的是360，火狐，IE, Chrome等等

document.write("浏览器的高度:"+window.outerHeight);

打开一个新的窗口：一些网站会自动打开另一个网站，那么是怎么做到的呢?
就是通过window的open方法做到的
不建议使用，如果需要打开一个新的网站，应该通过超级链接等方式让用户主动打开，在没有告知用户的前提下就打开一个新的网站会影响用户的体验

<script>
function openNewWindow(){
myWindow=window.open("/");
}
</script>
<button οnclick="openNewWindow()">打开一个新的窗口</button>

Navigator(浏览器) ：Navigator即浏览器对象，提供浏览器相关的信息

<script type="text/javascript">
document.write("<p>浏览器产品名称：");
document.write(navigator.appName + "</p>");

document.write("<p>浏览器版本号：");
document.write(navigator.appVersion + "</p>");

document.write("<p>浏览器内部代码：");
document.write(navigator.appCodeName + "</p>");

document.write("<p>操作系统：");
document.write(navigator.platform + "</p>");

document.write("<p>是否启用Cookies：");
document.write(navigator.cookieEnabled + "</p>");

document.write("<p>浏览器的用户代理报头：");
document.write(navigator.userAgent + "</p>");
</script>

Screen (客户端屏幕) ：Screen对象表示用户的屏幕相关信息

<html>
<body>
<script type="text/javascript">
document.write("用户的屏幕分辨率: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("可用区域大小: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
</script>
</body>
</html>

如果是在台式电脑上，通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。
History(访问历史) ：History用于记录访问历史

<script>
function goBack()
{
history.back();
}
</script>
<button οnclick="goBack()">返回上一次</button>

<script>
function goBack()
{
history.go(-2); //-1表示上次，-2表示上上次，以次类推
}
</script>
<button οnclick="goBack()">返回上上次</button>

Location(浏览器地址) ：Location表示浏览器中的地址栏

reload方法刷新当前页面

<span>当前时间:</span>
<script>
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.write(":");
document.write(d.getMilliseconds());
function refresh(){
location.reload();
}
</script>
<br>
<button οnclick="refresh()">刷新当前页面</button>

跳转到另一个页面：

<script>
function jump(){
//方法1
//location="/";
//方法2
location.assign("/");
}
</script>
<br>
<button οnclick="jump()">跳转到首页</button>

Location的其他属性：

<script>
function p(s){
document.write(s);
document.write("<br>");
}

p("协议 location.protocol:"+location.protocol);
p("主机名 location.hostname:"+location.hostname);
p("端口号 (默认是80，没有即表示80端口)location.port:"+location.port);

p("主机加端口号 location.host:"+location.host);
p("访问的路径 location.pathname:"+location.pathname);

p("锚点 location.hash:"+location.hash);
p("参数列表 location.search"+location.search);

</script>

弹出框：浏览器上常见的弹出框有警告框，确认框，提示框这些都是通过调用window的方法实现的。

警告框 alert，常用于消息提示，比如注册成功等等

确认框 confirm，常用于危险性操作的确认提示。比如删除一条记录的时候，弹出确认框
confirm返回基本类型的Boolean true或者false

<script>
function del(){
var d = confirm("是否要删除");
alert(typeof d + " " + d);
}
</script>

<br>
<button οnclick="del()">删除</button>

输入框 prompt，用于弹出一个输入框，供用户输入相关信息。因为弹出的界面并不好看，很有可能和网站的风格不一致，所以很少会在实际工作中用到。

<script>
function p(){
var name = prompt("请输入用户名:");
alert("您输入的用户名是:" + name);
}
</script>

<br>
<button οnclick="p()">请输入用户名</button>

计时器：

只执行一次：函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后，执行一次函数functionname
本例在3秒钟后，打印当前时间。
解释:
document.getElementById 获取id=time的div元素
.innerHTML 修改该元素的内容

<script>

function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;

}

function showTimeIn3Seconds(){
setTimeout(printTime,3000);
}

</script>
<div id="time"></div>
<button οnclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

不停地重复执行：函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数，重复的时间间隔由第二个参数指定

<p>每隔1秒钟，打印当前时间</p>

<div id="time"></div>

<script>

function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;

}

var t = setInterval(printTime,1000);

</script>

<br><br>

终止重复执行：通过clearInterval终止一个不断重复的任务

<p>每隔1秒钟，打印当前时间</p>

<div id="time"></div>

<script>

var t = setInterval(printTime,1000);

function printTime(){
var d = new Date();
var h= d.getHours();
var m= d.getMinutes();
var s= d.getSeconds();
document.getElementById("time").innerHTML= h+":"+m+":"+s;
if(s%5==0)
clearInterval(t);
}

</script>
<br>

不要在setInterval调用的函数中使用document.write()：

注：部分浏览器，比如firefox有这个问题，其他浏览器没这个问题。

假设setInterval调用的函数是printTime, 在printTime中调用document.write();
只能看到一次打印时间的效果。
这是因为document.write，会创建一个新的文档，而新的文档里，只有打印出来的时间字符串，并没有setInterval这些javascript调用，所以只会看到执行一次的效果。

<p>每隔1秒钟，通过document.write打印当前时间</p>

<script>

function printTime(){
var d = new Date();
document.write(d.getHours());
document.write(":");
document.write(d.getMinutes());
document.write(":");
document.write(d.getSeconds());
document.close();
}

var t = setInterval(printTime,1000);

</script>

DH2264664169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript AND BOM

一、简介JavaScript用于网页和用户之间的交互完整的javascript由语言基础，BOM和DOM组成二、设计使用：通过javascript向文档中输出文本：document是javascript的内置对象，代表浏览器的文档部分document.write("Hello Javascript"); 向文档写入字符串javascript和DOM结合显示和隐藏文本：...
复制链接

扫一扫