对象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="">
	&nbsp*&nbsp
	<input type="text" id="num2" class="ku" value="">
	&nbsp=&nbsp
	<input type="text" id="result" class="ku" value="">
	<input type="button" name="" value="取值" οnclick="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="替换" οnclick="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 οnclick="goBack()">返回</button>

如果需要返回多次之前的访问，用back不行了，得go了：

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

设置多少时间之后执行某个函数，第一个参数是函数，第二个参数是时间，单位毫秒。

云乐QAQ

发布了58 篇原创文章 · 获赞 20 · 访问量 5206

私信关注

前端学习笔记对象、BOM

对象Number

对象字符串

对象数组

对象日期

对象Math

自定义对象

BOM

window对象

Navigator对象

Screen对象

History对象

Location对象

弹出框

计时器

猜你喜欢

前端学习笔记 对象、BOM

对象Number

对象字符串

对象数组

对象日期

对象Math

自定义对象

BOM

window对象

Navigator对象

Screen对象

History对象

Location对象

弹出框

计时器

猜你喜欢

前端学习笔记对象、BOM