7_JavaScript_Math对象_字符串对象_浏览器对象B

作者: Zd_silent | 来源:发表于2016-12-14 13:03 被阅读17次

Math对象

Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

Math.PI 返回圆周率（约等于3.14159）。

Math.E 返回算术常量 e，即自然对数的底数（约等于2.718）。
Math.SQRT2 返回 2 的平方根（约等于 1.414）。
Math.SQRT1_2 返回返回 1/2 的平方根（约等于 0.707）。
Math.LN2 返回 2 的自然对数（约等于0.693）。
Math.LN10 返回 10 的自然对数（约等于2.302）。
Math.LOG2E 返回以 2 为底的 e 的对数（约等于 1.443）。
Math.LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。

document.write(Math.PI);

数值取整

ceil(x) 对数进行上舍入。

floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。

document.write(Math.floor(3.6));

随机数

random() 返回 0 ~ 1 之间的随机数。

注意并不包括0和1

document.write(Math.random());

三角函数

cos(x) 返回数的余弦。

acos(x) 返回 x 的反余弦值。
sin(x) 返回数的正弦。
asin(x) 返回 x 的反正弦值。
tan(x) 返回角的正切。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。

document.write(Math.cos(Math.PI/2));

其他方法

max(x,y) 返回 x 和 y 中的最高值。

min(x,y) 返回 x 和 y 中的最低值。
abs(x) 返回 x 的绝对值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
exp(x) 返回 e 的指数。
log(x) 返回数的自然对数（底为e）。
pow(x,y) 返回 x 的 y 次幂。
valueOf() 返回 Math 对象的原始值

document.write(Math.max(5,10));

字符串对象

字符串是非常重要的数据类型，除了基本字符串外，JavaScript还提供了字符串的引用类型--字符串对象。

字符串对象提供了字符串检索、替换、连接等方法...
可以通过new 关键字创建字符串对象
var str=new String()
length 属性返回字符串的长度(字符数)。

var str1 = "hello";
var str2 = new String()
document.write(typeof str1);
document.write(typeof str2);
document.write(str1.length);
document.write(str2.length);

字符串与数字的转换

toString() 返回字符串。可以将数值转换成字符串。

如果需要获取数值的二进制、八进制、十六进制的字符串表示，则可以给toString()传递一个表示进制的的整数
parseInt()函数可以将字符串转换成整数
parseFloat()函数可以将字符串转换浮点数
Number()函数可以将任意类型的值转换数值。

var str2 = num.toString();
var str2 = num.toString(2);
var str2 = parseInt(num);

字符串对象的常用方法

charAt() 返回在指定位置的字符。

charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
slice(n,m) 提取字符串n到m之间的片断(不包括m位置的字符串)，并在新的字符串中返回被提取的部分。
substring() 提取字符串中两个指定的索引号之间的字符。大多数情况和上一个作用相同，当参数为负值时会有不同，但这种情况较少用
substr(n,m) 从起始索引号提取字符串中指定数目的字符。
split() 把字符串分割为字符串数组。
indexOf() 检索字符串,返回某个指定的字符串值在字符串中首次出现的位置。注意，如果查找不到会返回 -1
lastIndexOf() 从后向前搜索字符串。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
match() 找到一个或多个正则表达式的匹配。(正则表达式后续课程会讲)
该方法会返回一个数组，数组中包含了所有符合条件的文本。
replace() 替换与正则表达式匹配的子串，并返回替换后的字符串，注意原字符串不会改变
search() 检索与正则表达式相匹配的值。查找与参数模式相匹配的文本，并返回该文本的位置。若无则返回null(indexOf()会返回-1).与indexOf()相似。
......
需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。

var str1 = "hello";
var str2 = new String("javascript");
document.write(str2.charAt(1)+'<br>');
document.write(str2.charCodeAt(1)+'<br>');
document.write(str2.concat('a')+'<br>');

浏览器对象BOM

基本概念

BOM是Browser Object Model的缩写，简称浏览器对象模型

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
基本的BOM体系结构图
能利用BOM做什么？
BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！

window对象的方法和属性

window对象是浏览器窗口对文档提供的一个现实的容器，代表打开的浏览器窗口，是每一个加载文档的父对象

window的属性和方法调用方法:window.属性，window.方法也可以直接调用省略 window.

对话框
- alert() 显示带有一段消息和一个确认按钮的警告框。
- confirm() 显示可提示用户输入的对话框。返回值为布尔值
- prompt() 显示带有一段消息以及确认按钮和取消按钮的对话框。
  第一个参数是提示,第二个参数是默认值;
  返回值为输入的值，取消返回null
窗体控制
- open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
  - URL:声明了要在新窗口中显示的文档的 URL。
  - name:声明了新窗口的名称或者窗口目标。
  - features:声明了新窗口要显示的标准浏览器的特征。
  - 窗口的属性：
    - 常用：
      - width:新建窗口宽度
      - heigth:新建窗口高度
      - top:左上角垂直坐标
      - left:左上角水平坐标
    - 其他不太常用的属性：
      - toolbar：指定窗口是否有标准工具栏。当该选项的值为1或yes时，表示有标准工具栏，当该选项的值为0或no时，表示没有标准工具栏；
      - resizable：指定窗口是否可改变大小，选项的值及含义与toolbar相同；
      - ocation：指定窗口是否有地址工具栏，选项的值及含义与toolbar相同；
      - directories：指定窗口是否有链接工具栏，选项的值及含义与toolbar相同；
      - status：指定窗口是否有状态栏，选项的值及含义与toolbar相同；
      - menubar：指定窗口是否有菜单，选项的值及含义与toolbar相同；
      - scrollbar：指定当前窗口文档大于窗口时是否有滚动条，选项的值及含义与 toolbar相同；
      - ........
- close() 关闭浏览器窗口。
定时器
- setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
- clearInterval() 取消由 setInterval() 设置的 timeout。
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
```
var timeId = setTimeout(test,10);
clearTimeout(timeId);
```
其他方法
- print() 打印当前窗口的内容。
- blur() 把键盘焦点从顶层窗口移开。
- createPopup() 创建一个 pop-up 窗口。
- focus() 把键盘焦点给予一个窗口。
- moveBy() 可相对窗口的当前坐标把它移动指定的像素。
- moveTo() 把窗口的左上角移动到一个指定的坐标。
- resizeBy() 按照指定的像素调整窗口的大小。
- resizeTo() 把窗口的大小调整到指定的宽度和高度。
- scrollBy() 按照指定的像素值来滚动内容。
- scrollTo() 把内容滚动到指定的坐标。
Window 对象属性
- 掌握部分
  - innerWidth 返回窗口的文档显示区的宽度。
  - innerHeight 返回窗口的文档显示区的高度。
- 了解部分
  - name 设置或返回窗口的名称。
  - opener 返回对创建此窗口的窗口的引用。
  - closed 返回窗口是否已被关闭。
  - self 返回对当前窗口的引用。
  - top 返回最顶层的先辈窗口。
  - outerheight 返回窗口的外部高度。
  - outerwidth 返回窗口的外部宽度。
  - status 设置窗口状态栏的文本。
  - ......

History对象的常用方法

history对象有back和forward两个方法，它可以跳转到当前页的上一页和下一页，可以用length属性查看客户端浏览器的历史列表中访问的网页个数

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。

Location 对象

Location 对象的属性
- href 设置或返回完整的 URL。
- host 设置或返回主机名和当前 URL 的端口号。
- hash 设置或返回从井号 (#) 开始的 URL（锚）。
- hostname 设置或返回当前 URL 的主机名。
- pathname 设置或返回当前 URL 的路径部分。
- port 设置或返回当前 URL 的端口号。
- protocol 设置或返回当前 URL 的协议。
- search 设置或返回从问号 (?) 开始的 URL（查询部分）。
Location 对象的方法
- assign() 加载新的文档。
- reload() 重新加载当前文档。
  如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
- replace() 用新的文档替换当前文档。
  replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

Screen 对象

availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
height 返回显示屏幕的高度。
width 返回显示器屏幕的宽度。
bufferDepth 设置或返回调色板的比特深度。
......

Navigator 对象属性

appCodeName 返回浏览器的代码名。

appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
userAgent 返回由客户机发送服务器的 user-agent 头部的值
onLine 返回指明系统是否处于脱机模式的布尔值。
......

// 动态显示时间
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    function clock() {
        var today = new Date();
        var hours = today.getHours();
        var minutes = today.getMinutes();
        var seconds = today.getSeconds();
        var str = "现在时间："
        if (hours < 12) {
            str+='上午';
        }else {
            str+='下午';
        }
        str+=hours+'时'+minutes+'分'+seconds+'秒';
        // document.write(str+'<br>')
        var clock=document.getElementById('clock')
        clock.value=str

    }
    setInterval('clock()',1000);
    </script>
    <input type="text" id="clock" size="40">
    <input type="button" id="clock" size="40"  value="停止时间" onclick="clearInterval(timeId) ">
</body>
</html>

// 比赛
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var guojing=new Object();
            guojing.name="郭靖"
            guojing.HP=500;
            guojing.gj=90;
            guojing.sd=60;
            guojing.skill=new Array('亢龙有悔','飞龙在天','见龙在田','鸿渐于陆','潜龙勿用')

        var ouyang=new Object();
            ouyang.name='欧阳锋';
            ouyang.HP=800;
            ouyang.gj=100;
            ouyang.sd=40;
            ouyang.skill=new Array('灵蛇棍法','凤凰神力','颠倒阴阳','逆转静脉','天蟾神功')

        function whoGjwho(a,b) {
            return a.sd*Math.random()>b.sd*Math.random()?[a,b]:[b,a];
        }

        function game() {
            var skillIndex=Math.floor(Math.random()*5)
            var fight = whoGjwho(guojing,ouyang);
            var attacker = fight[0];
            var defender = fight[1];
            var damage=attacker.gj*Math.random()-defender.gj*Math.random();
                if(damage<=0){
                    damage=0
                }else{
                    damage=Math.ceil(damage);
                }
            defender.HP-=damage;

            document.write(attacker.name+"使用了一招"+attacker.skill[skillIndex]+'<br>')
            document.write(defender.name+"损失了"+damage+'点HP'+'<br>')

            if (defender.HP>0) {
                document.write(defender.name+"的HP:"+defender.HP+'<br>'+attacker.name+'的HP:'+attacker.HP+'<hr>')
            }else{
                document.write(defender.name+'战败了'+'<br>'+attacker.name+'取得了胜利！'+'<br>')
                alert(attacker.name+'取得了胜利！'+'Gmame Over!')
                clearInterval(zd)
            }
        }
        var zd=setInterval('game()',50)
    </script>

</body>
</html>