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() 关闭浏览器窗口。
- open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
-
定时器
- 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>
