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

Math对象

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

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

算数值

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

1. 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);

数值取整

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

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

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

随机数

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

• 注意并不包括0和1

document.write(Math.random());

三角函数

1. 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));

其他方法

1. 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));

字符串对象

1. 字符串是非常重要的数据类型，除了基本字符串外，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);

字符串与数字的转换

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

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

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

字符串对象的常用方法

1. 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

基本概念

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

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

window对象的方法和属性

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

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

1. 对话框

   • alert() 显示带有一段消息和一个确认按钮的警告框。
   • confirm() 显示可提示用户输入的对话框。返回值为布尔值
   • prompt() 显示带有一段消息以及确认按钮和取消按钮的对话框。
     第一个参数是提示,第二个参数是默认值;
     返回值为输入的值，取消返回null

2. 窗体控制

   • 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() 关闭浏览器窗口。

3. 定时器

   • setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
   • setTimeout() 在指定的毫秒数后调用函数或计算表达式。
   • clearInterval() 取消由 setInterval() 设置的 timeout。
   • clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

   var timeId = setTimeout(test,10);
   clearTimeout(timeId);
   

4. 其他方法

   • print() 打印当前窗口的内容。
   • blur() 把键盘焦点从顶层窗口移开。
   • createPopup() 创建一个 pop-up 窗口。
   • focus() 把键盘焦点给予一个窗口。
   • moveBy() 可相对窗口的当前坐标把它移动指定的像素。
   • moveTo() 把窗口的左上角移动到一个指定的坐标。
   • resizeBy() 按照指定的像素调整窗口的大小。
   • resizeTo() 把窗口的大小调整到指定的宽度和高度。
   • scrollBy() 按照指定的像素值来滚动内容。
   • scrollTo() 把内容滚动到指定的坐标。

5. Window 对象属性

   • 掌握部分
     • innerWidth 返回窗口的文档显示区的宽度。
     • innerHeight 返回窗口的文档显示区的高度。
   • 了解部分
     • name 设置或返回窗口的名称。
     • opener 返回对创建此窗口的窗口的引用。
     • closed 返回窗口是否已被关闭。
     • self 返回对当前窗口的引用。
     • top 返回最顶层的先辈窗口。
     • outerheight 返回窗口的外部高度。
     • outerwidth 返回窗口的外部宽度。
     • status 设置窗口状态栏的文本。
     • ......

History对象的常用方法

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

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

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

Location 对象

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

Screen 对象

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

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

Navigator 对象属性

1. 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>