声明:本系列博文为本人在w3school网站学习Javascript的笔记,所有权利归该网站所有。
1 对象
在C#中,对象指类的实例,但在JS中,对象类似于类,非指实例,实例称为对象实例,这是C#与JS的一个很大的区别。在JS中,我们把对象理解为c#中的类。
1.1 内建对象
包括Number,String,Date,Array等。
1.1.1 Number
JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等,JavaScript 中的所有数字都存储为根为 10 的 64 位(8字节)浮点数。整数最多为 15 位,小数的最大位数是 17,但是浮点运算并不总是 100% 准确。
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
1.1.2 String
var txt="Helloworld!"
document.write(txt.length)
document.write(txt.toUpperCase())
document.write("<p>Big:" + txt.big() + "</p>") //大字
document.write("<p>Small:" + txt.small() + "</p>") //小字,
document.write("<p>Bold:" + txt.bold() + "</p>") //加粗
document.write("<p>Italic:" + txt.italics() + "</p>") //斜体
document.write("<p>Blink:" + txt.blink() + " (does not work in IE)</p>") //闪烁
document.write("<p>Fixed:" + txt.fixed() + "</p>") //固定
document.write("<p>Strike:" + txt.strike() + "</p>") //删除线
document.write("<p>Fontcolor:" + txt.fontcolor("Red") + "</p>") //字色
document.write("<p>Fontsize:" + txt.fontsize(16) + "</p>")
document.write("<p>Lowercase:" + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase:" + txt.toUpperCase() + "</p>")
document.write("<p>Subscript:" + txt.sub() + "</p>") //下标
document.write("<p>Superscript:" + txt.sup() + "</p>") //上标
document.write("<p>Link:" + txt.link("http://www.w3school.com.cn") +"</p>") //链接
var x=txt.indexOf("Hello"); //0
var y=x.replace('world','Tom'); //或y=x.replace("world",'Tom') 或y=x.replace(/world/,"Tom"')。
1.1.3 Date
用于处理日期和时间。
document.write(Date()) // Mon Dec 12 10:40:52 UTC+0800 2016
var d=new Date();
var x=d.getTime();//得到从1970/1/1至今的毫秒数
var x=d.getFullYear();//得到对象中的年份
var x=d.getMonth();//得到对象中的月份
var x=d.getDay();//得到0-6中的一个数,0代表星期日,1代表星期一。
var x=d.getDate();//返回对象中的天(1-31)。
d.setFullYear(1992,10,3) //用于设置(改变) Date对象中的年份,也可以同时设定年月日。
d.setDate(d.getDate()+5);//将日期对象设置为5天后的日期,可用会自动改变月份和年份。
Date对象可进行大小比较。
var thatDay=new Date();
thatDay=setFullYear(2001,12,17);
var today=new Date();
if (thatDay>today)…
以下代码可显示一个时钟。
<html>
<head>
<scripttype="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in frontof numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',1000) //1秒后执行 startTime()方法。
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<bodyοnlοad="startTime()">
<divid="txt"></div>
</body>
</html>
1.1.4 Array
1) 合并两个数组:
array1.concat(array2)
2) 数组子项组成字符串:
array1.join();//array1[0]+", "+array[1]+..+array[n]
array1.join(" and ");// //array1[0]+"and,"+array[1]+..+array[n]
3) 排序
array1.sort();//按字符顺序排序
array1.sort(sortNumber);//按数值大小排序
4) length属性
1.1.5 Boolean
如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!
var b=new Boolean();
1.1.6 Math
1) round()
四舍五入取整。
varx=Math.round(0.60) ;// 1
varx=Math.round(0.5); //1
varx=Math.round(-4.5); //-5
2) random()
返回0到1之间的随机数。
var x=Math.random();//.20783892003
var x=Math.floor(Math.random()*11));//返回一个介于 0 和 10 之间的随机数
3) max()及min()
返回两数中的较大或较小者。
var x=Math.max(5,7); //7
1.1.7 RegExp
用于在字符串中检索。
var r=new RegExp("is"); //创建RegExp实例,设置检索的
var b=r.test("Thisis a bad ideal");//返回true;
var s=r.exec("Thisis a bad ideal");//返回is,否则返回null。
var r1=new RegExp("is","g"); //使用g参数,当次检索从上次检索到的位置开始
var o="";
do
{
s=r1.exec("this isa bad ideal");
o+=s;
}
while (s!=null)
r.compile("bad");//改变r的检索内容
t=r.test("This is agood ideal.") //返回为false.
document.write(b+""+s+" "+o+" "+t);//o的值为isisnull。
1.2 自定义对象
有两种方法。
1.2.1 定义并创建对象的实例
注意,这种方法创建的是实例。如:
employee=new Object();
employee.firstname=" Bolun";
employee.lastname=" Tien";
employee.sex="male";
employee.age=21;
也可使用如下替代语法:
employee={firstname:" Bolun",lastname:"Tien",sex:"male",age:21};
显然,后者要简捷得多。
1.2.2 使用对象构造器定义对象并创建实例
1) 定义对象
function employee(firstname,lastname,sex,age){
this.firstname=firstname;
this.lastname=lastname;
this.sex=sex;
this.age=age;
this.salary=0;
this.getsalary=getsala;
function getsala(para)
{
this.salary=para*(age-18);
}
}
注意方法的定义方式,上述对象中定义的方法的名为getsalary,而非getsala,实例引用时将用前者,但前者实际调用了后者。这与C#有很大的不同。
如上,employee对象定义了五个属性和一个方法。
2) 创建实例
employee1=new employee("Bolun","Tien","male",21);
employee1.getsalary(3);
var x=employee1.age;
var y=employee1.salary;
employee1.age=31;
实例创建后,可对其属性进行读写操作,
3) 用for/in循环遍历对象的属性
var txt="";
for (x in employee1)
{
txt+=employee1[x]+" ";
}
txt的值将为“Bulun Tien male 21 function getsala(para)
{ this.salary=para*(age-18);}”。可见方法也被视为属性一同被输出了。
2 window对象
浏览器对象模型(BOM),尚无正式标准。由于现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。
2.1 window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
与此相同:
document.getElementById("header");
2.1.1 innerHeight,innerwidth属性
分别表示浏览器窗口的内部高度和宽度。
对于Internet Explorer 8,7,6,5,还可以用document.documentElement.clientHeightdocumentElement.clientWidth或document.body.clientHeight,document.body.clientWidth来表示。
2.1.2 open,close,movoTo,reSizeTo方法
分别用于打开、关闭、移动、缩放浏览器窗口。
2.2 window对象的子对象
2.2.1 screen对象
该对象在编写时可不使用父对象window前辍。该对象有如下等属性:
Ø screen.availWidth 返回屏幕可用部分的宽度,以像素为单位。
Ø screen.availHeight返回屏幕可用部分的高度,以像素为单位。
这两个属性代表屏幕可用的像素,当浏览器所在计算机运行的是windows系列操作系统时,将扣除任务栏所占用的像素,如屏幕的实际物理像素为1920*1080,执行下列语句,当任务栏的位置在屏幕底部或顶部时,得到的结果为1920*1052,而任务栏的位置在屏幕左侧或右侧时,结果为1867*1080,可知任务栏所占用的部分是浏览器不可使用的。
document.write("屏幕可用宽度*高度:" +screen.availHeight+" "+screen.availWidth);
2.2.2 location对象
该对象在编写时可不使用父对象window前辍,有如下属性和方法:
Ø location.hostname返回web主机的域名
Ø location.pathname返回当前页面的路径和文件名
Ø location.port返回web主机的端口(80或443)
Ø location.protocol返回所使用的web协议(http://或https://)
Ø location.href 返回当前页面的 URL。
Ø location.assign() 加载新的文档
例子:
<html>
<head>
<script>
function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<inputtype="button" value="加载新文档" οnclick="newDoc()">
</body>
</html>
2.2.3 history对象
该对象在编写时可不使用父对象window前辍,有如下属性和方法:
Ø history.hack()与在浏览器点击后退按钮相同
Ø history.forward() - 与在浏览器中点击按钮向前相同
例子:
function goBack()
{
window.history.back()
}
....
<inputtype="button" value="Back" οnclick="goBack()">
2.2.4 navigator对象
该对象在编写时可不使用父对象window前辍,有如下属性和方法:
Ø navigator.appCodeName 返回浏览器代码名称,如Mozilla。
Ø navigator.appName 返回浏览器名称,如 Netscape
Ø navigator.cookieEnabled 返回是否启用Cookies。
Ø navigator.platform 返回操作系统,如Win32(不准,如在64位下,显示32位)。
Ø navigator.userAgent 返回用户代理头标,如Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101Firefox/50.0
Ø navigator.systemLanguage 返回系统语言,如undefined(不准,在windows中文版下,仍返回undefined)。
警告:来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为navigator 数据可被浏览器使用者更改或 浏览器无法报告晚于浏览器发布的新操作系统。
浏览器检测:由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器,由于不同的浏览器支持不同的对象,可使用对象来检测浏览器。例如,由于只有 Opera 支持属性"window.opera",您可以据此识别出 Opera。
例子:
if (window.opera) {...some action...}
2.3 消息框
2.3.1 警告框
alert("xxxxxx")
2.3.2 带折行的警告框
alert("XXXXXXX"+'\n'+"yyyyyy")
2.3.3 确认框
confirm("xxxxx");
例子:
<head>
<scripttype="text/javascript">
function show_confirm()
{
var r=confirm("Areyou sure?");
if (r==true)
{
...
}
else
{
...
}
}
</script>
</head>
<body>
<inputtype="button" οnclick="show_confirm()" value="Show aconfirm box" />
</body>
会出现一个带有“确定”和“取消”按钮的内容为“Are you sure?”确认框。
2.3.4 提示框
var name=prompt("请输入您的名字","BillGates")
if (name!=null && name!="")
{
......
}
会弹出一个文本框,内容默认为Tom,可输入内容。输入后按“确定”或“取消”按钮。