对象Number
new Number | 创建一个数字对象 |
属性MIN_VALUE 属性MAX_VALUE | 最小值 最大值 |
属性NaN | 表示不是数字 |
方法toFixed | 返回一个数字的小数表达 |
方法toExponential | 返回一个数字的科学计数法表达 |
方法valueOf | 返回一个数字对象的基本数字类型 |
作业:
做一个乘法计算器,但是要求输出结果是科学计数法表示
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.ku{
width: 40px;
}
</style>
<script>
function get(){
var value1 = document.getElementById("num1").value;
console.log(1);
var value2 = document.getElementById("num2").value;
var value3 = new Number(parseFloat(value1)*parseFloat(value2));
document.getElementById("result").value=value3.toExponential();
}
</script>
</head>
<body>
<input type="text" id="num1" class="ku" value="">
 * 
<input type="text" id="num2" class="ku" value="">
 = 
<input type="text" id="result" class="ku" value="">
<input type="button" name="" value="取值" onclick="get()">
</body>
</html>
对象字符串
new String() | 创建字符串对象 |
属性 length | 字符串长度 |
方法 charAt charCodeAt | 返回指定位置的字符,charCodeAt是返回指定字符的Unicode码 |
方法 concat | 字符串拼接 |
方法 indexOf lastIndexOf | 子字符串出现的位置 第一次和最后一次,基0 |
方法 localeCompare | 比较两段字符串是否相同 |
方法 substring | 截取一段子字符串 |
方法 split | 根据分隔符,把字符串转换为数组 |
方法 replace | 替换子字符串 |
方法 charAt 方法 concat 方法 substring | 返回基本类型 |
注意的是,substring中,比如x.substring (0,3) 获取位0到3的字符串,左闭右开,取不到3.
split 根据分隔符,把字符串转换为数组。第一个参数设置分隔符,可选第二个参数来设置需要得到的数组长度。比如通过空格分隔split(" ",2),得到数组,并且只保留前两个Hello,This
替换子字符串,replace,直接使用是用第二个参数的字符串来替换第一个参数的字符串,但是!!!,只会替换碰到的第一个位置就会停止。如果需要把源字符串中的全部目标串都替换了,则需要这样写:
var regS = new RegExp("a","g");
x.replace(regS, "o");
RegExp中的第二个参数"g"表示全部替换。
所有带返回值的方法的返回值类型都为基本类型的String
练习:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script>
function changetext() {
// body...
var oldstring = new String(document.getElementById('oldstr').value);
var s1 = document.getElementById('search').value;
var c1=document.getElementById('change').value;
var changeS = new RegExp(s1,"g");
document.getElementById("newstr").value = oldstring.replace(changeS,c1);
console.log(end);
}
</script>
</head>
<body>
<table>
<tr>
<td><span>原字符串:</span></td>
<td><input type="textarea" name="yzfc" id="oldstr" value=""></td>
</tr>
<tr>
<td><span>查询:</span></td>
<td><input type="text" id="search" value=""></td>
</tr>
<tr>
<td><span>替换为:</span></td>
<td><input type="text" id="change" value=""></td>
</tr>
<tr>
<td><span>替换为:</span></td>
<td><input type="textarea" id="newstr" value=""></td>
</tr>
</table>
<input type="button" id="th" value="替换" onclick="changetext()">
</body>
</html>
对象数组
关键字 | 简介 |
---|---|
new Array | 创建数组对象 |
属性 length | 数组长度 |
for for in | 遍历一个数组 |
方法 concat | 连接数组 |
方法 join | 通过指定分隔符,返回一个数组的字符串表达 |
方法 push pop | 分别在最后的位置插入数据和获取数据(获取后删除) |
方法 unshift shift | 分别在最开始的位置插入数据和获取数据(获取后删除) |
方法 sort | 对数组的内容进行排序 |
方法 sort(comparator) | 自定义排序算法 |
方法 reverse | 对数组的内容进行反转 |
方法 slice | 获取子数组 |
方法 splice | 删除和插入元素 |
要注意的有,比较函数comparator的写法:
function comparator(v1,v2){
return v2-v1; //v2-v1表示大的放前面,小的放后面
}
slice类比字符串中的substring,也是第二个参数是取不到的,左闭右开。
方法 splice (不是 slice) 用于删除数组中的元素
奇葩的是 ,它还能用于向数组中插入元素:
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
对象日期
new Date | 创建日期对象,当前的时间 |
getFullYear getMonth getDate | 年/月/日,要注意月份是基0的,其他基1 |
getHours getMinutes getSeconds getMilliseconds | 时:分:秒:毫秒 |
getDay | 一周的第几天,和月份一样,基0的 |
getTime | 经历的毫秒数 |
setFullYear setMonth setDate setHours setMinutes setSeconds | 修改日期和时间 |
对象Math
关键字 | 简介 |
---|---|
属性E PI | 自然对数和圆周率 |
方法 abs | 绝对值 |
方法 min max | 最小最大 |
方法 pow | 求幂 |
方法 round | 四舍五入 |
方法 random | 随机数 |
都和java的差不多。
自定义对象
通过new Object()创建一个对象,
<script>
var hero = new Object();
hero.name = "盖伦"; //定义一个属性name,并且赋值
hero.kill = function(){
document.write(hero.name + " 正在杀敌" ); //定义一个函数kill
}
hero.kill(); //调用函数kill
</script>
创建了之后再去写属性方法,但是这样很不方便,你每要弄一个对象都得写一遍,为了增加复用性,可以像java设置类一样。用function设置一种对象:
<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>
现在Hero对象已经设计好了,但是我们发现需要追加一个新的方法keng(),那么就需要通过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
window对象
一旦页面加载,就会自动创建window对象,所以无需手动创建window对象。
通过window对象可以获取文档显示区域的高度和宽度,window.innerWidth,window.innerHeight
还有外部窗口的高和宽,也就是浏览器,window.outerWidth,window.outerHeight
打开一个窗口 : window.open(),自动弹窗就是它干的。
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对象
用于记录上次的访问
<script>
function goBack()
{
history.back();
}
</script>
<button onclick="goBack()">返回</button>
如果需要返回多次之前的访问,用back不行了,得go了:
<script>
function goBack()
{
history.go(-2); //-1表示上次,-2表示上上次,以次类推
}
</script>
<button onclick="goBack()">返回上上次</button>
Location对象
Location表示浏览器中的地址栏
reload方法刷新当前页面
assign跳转到某个网页
还有一些属性:
<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>
弹出框
alter 警告框
confirm 确认框
prompt 输入框,很少用
计时器
setTimeout | 只执行一次 |
setInterval | 不停地重复执行 |
clearInterval | 终止重复执行 |
document.write() | 不要在setInterval调用的函数中使用document.write(); |
设置多少时间之后执行某个函数,第一个参数是函数,第二个参数是时间,单位毫秒。