JS对象
1.访问JS对象属性
语法:objectName.propertyName
2.访问对象的方法:
语法:objectName.methodName()
3.创建JS对象
创建新对象有两种不同的方法:
- 定义并创建对象的实例
- 使用函数来定义对象,然后创建新的对象实例
创建直接的实例
<script> person=new Object(); person.name="Bill Gates"; person.age=56; person.eyecolor="blue"; document.write(person.name+" is "+person.age+" years old."); </script>
<script> person={name:"John",age:56} document.write(person.name+" is "+person.age+" years old."); </script>
创建对象构造器
<script> function person(name,age){ this.name=name; this.age=age; } myRoomate=new person("John",56); document.write("myRoomate is "+myRoomate.name+", and she is "+myRoomate.age+" years old."); </script>
把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。
在构造器函数内部定义对象的方法:
1 <script> 2 function person(name,age){ 3 this.name=name; 4 this.age=age; 5 this.changename=changename; 6 function changename(n){ 7 this.name=n; 8 } 9 } 10 11 Roomate=new person("Bill",56); 12 Roomate.changename("John"); 13 document.write(Roomate.name,Roomate.age); 14 </script>
JavaScript 类
JavaScript 是面向对象的语言,但 JavaScript 不使用类。
在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
JavaScript 基于 prototype,而不是基于类的。
JavaScript for...in 循环
JavaScript for...in 语句循环遍历对象的属性。
<body> <button onclick="myfunction()">click</button> <p id="t"></p> <script> function myfunction(){ var x; var txt=""; var person={name:"John",age:56}; for(x in person){ txt=txt+person[x]; } document.getElementById("t").innerHTML=txt; } </script> </body>
JS数字
JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。
精度
整数(不使用小数点或指数计数法)最多为 15 位。
小数的最大位数是 17,但是浮点运算并不总是 100% 准确
<script>
document.write(0.2+0.1);
</script>
八进制和十六进制
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
JS字符串
1 <script> 2 var txt="hello world"; 3 document.write(txt.length); 4 </script>
1 <script> 2 var txt="hello world"; 3 document.write(txt.toUpperCase()); 4 </script>
为字符串添加样式
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <script type="text/javascript"> 6 7 var txt="Hello World!" 8 9 document.write("<p>Big: " + txt.big() + "</p>") 10 document.write("<p>Small: " + txt.small() + "</p>") 11 12 document.write("<p>Bold: " + txt.bold() + "</p>")//粗体 13 document.write("<p>Italic: " + txt.italics() + "</p>")//斜体 14 15 document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>") 16 document.write("<p>Fixed: " + txt.fixed() + "</p>") 17 document.write("<p>Strike: " + txt.strike() + "</p>")//贯穿线 18 19 document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>") 20 document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>") 21 22 document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>") 23 document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>") 24 25 document.write("<p>Subscript: " + txt.sub() + "</p>")//下角标 26 document.write("<p>Superscript: " + txt.sup() + "</p>")//上标 27 28 document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")//创建超链接 29 </script> 30 31 </body> 32 </html>
indexOf方法
使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
1 <script type="text/javascript"> 2 var x="hello world!"; 3 document.write(x.indexOf("hello")+"<br/>"); 4 document.write(x.indexOf("!")+"<br/>"); 5 document.write(x.indexOf("q")+"<br/>"); 6 </script>
match()方法
如何使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符,没有返回NULL
1 <script type="text/javascript"> 2 var x="hello world!"; 3 document.write(x.match("hello")+"<br/>"); 4 document.write(x.match("tim")+"<br/>"); 5 </script>
replace()方法
使用 replace() 方法在字符串中用某些字符替换另一些字符
1 <script type="text/javascript"> 2 var x="hello world!"; 3 document.write(x.replace(/world/,"doggy")); 4 </script>
JS日期
1.定义日期
1 <script type="text/javascript"> 2 var myDate=new Date(); 3 document.write(myDate); 4 </script>
2.操作日期
表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。
<script type="text/javascript"> var myDate=new Date(); myDate.setFullYear(2016,0,21); document.write(myDate); </script>
如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换
1 <script type="text/javascript"> 2 var myDate=new Date(); 3 myDate.setDate(myDate.getDate()+5); 4 document.write(myDate); 5 </script>
3.比较日期
1 <script type="text/javascript"> 2 var myDate=new Date(); 3 myDate.setFullYear(2008,2,3); 4 var today=new Date(); 5 if(myDate>today){ 6 alert("today is before 2008.3.3"); 7 } 8 else{ 9 alert("today is after 2008.3.3"); 10 } 11 </script>
4.返回当前日期
1 <script type="text/javascript"> 2 document.write(Date()); 3 </script>
5.getTime()方法:getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
1 var today=new Date(); 2 document.write("从1970.1.1到现在过去了 "+today.getTime()+"毫秒");
6.setFullYear()方法:使用 setFullYear() 设置具体的日期
1 <script type="text/javascript"> 2 var today=new Date(); 3 document.write(today+"<br/>"); 4 today.setFullYear(2019,7,7);//月份0-11,1月为0 5 document.write(today); 6 </script>
7.toUTCstring:使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串
http://www.360doc.com/content/14/1023/10/7821691_419148948.shtml
UTC与北京时间关系↑
1 <script type="text/javascript"> 2 var today=new Date(); 3 document.write(today+"<br/>"); 4 document.write(today.toUTCString()); 5 // document.write(today);//不可行 6 </script>
8.getDay()方法:使用 getDay() 和数组来显示星期,而不仅仅是数字
1 <script type="text/javascript"> 2 var d=new Date(); 3 var weekday=new Array(7); 4 weekday[0]="星期日"; 5 weekday[1]="星期一"; 6 weekday[2]="星期二"; 7 weekday[3]="星期三"; 8 weekday[4]="星期四"; 9 weekday[5]="星期五"; 10 weekday[6]="星期六"; 11 document.write("今天是"+weekday[d.getDay()]); 12 </script>
9.显示一个时钟
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
1 <body onload="startTime()"> 2 <div id="txt"></div> 3 <script type="text/javascript"> 4 function startTime(){ 5 var today=new Date(); 6 var h=today.getHours(); 7 var m=today.getMinutes(); 8 var s=today.getSeconds(); 9 m=checkTime(m); 10 s=checkTime(s); 11 document.getElementById('txt').innerHTML=h+":"+m+":"+s; 12 t=setTimeout('startTime()',500); 13 14 } 15 function checkTime(i){ 16 if(i<10){ 17 i="0"+i; 18 } 19 return i; 20 } 21 </script> 22 </body>
JS数组
1.定义数组(任意大小)
1 <script type="text/javascript"> 2 var array=new Array(); 3 array[0]="Bob"; 4 array[1]="Sam"; 5 array[2]="Dean"; 6 document.write(array); 7 </script>
定义数组(指定大小)
1 <script type="text/javascript"> 2 var array=new Array(3); 3 array[0]="Bob"; 4 array[1]="Sam"; 5 array[2]="Dean"; 6 document.write(array); 7 </script>
定义数组
1 <script type="text/javascript"> 2 var array=new Array("Bob","Dean","Sam"); 3 document.write(array); 4 </script>
2.访问数组
通过指定数组名以及索引号码,你可以访问某个特定的元素。
document.write(array[0]);
3.修改已有数组中的值
如需修改已有数组中的值,只要向指定下标号添加一个新值即可:
array[0]="Zchen";
JS逻辑对象
1.创建逻辑对象
var myBoolean=new Boolean();
如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!
创建值为False的逻辑对象
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
创建值为true的逻辑对象
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Bill Gates");
JS数学对象
1.算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值:
- 常数
- 圆周率
- 2 的平方根
- 1/2 的平方根
- 2 的自然对数
- 10 的自然对数
- 以 2 为底的 e 的对数
- 以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)
- Math.E
- Math.PI
- Math.SQRT2
- Math.SQRT1_2
- Math.LN2
- Math.LN10
- Math.LOG2E
- Math.LOG10E
2.Math.round() :
使用了 Math 对象的 round 方法对一个数进行四舍五入
var x=Math.round(4.7);
3.Math.random()
Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数
document.write(Math.random());
4.Math.floor()
floor() 方法可对一个数进行下舍入。
document.write(Math.floor(Math.random()*11));
JS正则表达式
1.定义RegExp
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。
2.RegExp的方法:test()、exec() 以及 compile()。
test()方法:检索字符串中的指定值。返回值是 true 或 false
1 <script type="text/javascript"> 2 var patt1=new RegExp("e"); 3 document.write(patt1.test("this is an egg")+"<br/>"); 4 document.write(patt1.test("try again")); 5 </script>
exec()方法:检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
1 <script type="text/javascript"> 2 var patt1=new RegExp("e"); 3 document.write(patt1.exec("this is an egg")+"<br/>"); 4 document.write(patt1.exec("try again")); 5 </script>
如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。
1 <script type="text/javascript"> 2 var patt1=new RegExp("e","g"); 3 do{ 4 5 result=patt1.exec("The best things in life are free"); 6 document.write(result); 7 }while(result!=null) 8 </script>
compile()方法:用于改变 RegExp, 既可以改变检索模式,也可以添加或删除第二个参数。
1 <script type="text/javascript"> 2 var patt1=new RegExp("e"); 3 document.write(patt1.test("The best things in life are free")); 4 patt1.compile("d"); 5 document.write(patt1.test("The best things in life are free")); 6 </script>
JS常用的内置对象
1.String
属性:length 包括所有空格和符号
方法:
String 对象共有 19 个内置方法,主要包括字符串在页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换等功能,下面是一些常用的:
charAt(n) :返回该字符串第 n 位的单个字符。(从 0 开始计数)
charCodeAt(n) :返回该字符串第 n 位的单个字符的 ASCII 码。
indexOf() :用法:string_1.indexOf(string_2,n); 从字符串 string_1 的第 n 位开始搜索,查找 string_2,返回查找到的位置,如果未找到,则返回 -1,其中 n 可以不填,默认从第 0 位开始查找。
lastIndexOf() :跟 indexOf() 相似,不过是从后边开始找。
split('分隔符') :将字符串按照指定的分隔符分离开,返回一个数组,例如:'1&2&345&678'.split('&');返回数组:1,2,345,678。
substring(n,m) :返回原字符串从 n 位置到 m 位置的子串。
substr(n,x) :返回原字符串从 n 位置开始,长度为 x 的子串。
toLowerCase() :返回把原字符串所有大写字母都变成小写的字符串。
toUpperCase() :返回把原字符串所有小写字母都变成大写的字符串。
2.Math
属性:
Math 的几个属性,是数学上几个常用的值:
E :返回常数 e (2.718281828...)。
LN2 :返回 2 的自然对数 (ln 2)。
LN10 :返回 10 的自然对数 (ln 10)。
LOG2E :返回以 2 为底的 e 的对数 (log2e)。
LOG10E :返回以 10 为底的 e 的对数 (log10e)。
PI :返回π(3.1415926535...)。
SQRT1_2 :返回 1/2 的平方根。
SQRT2 :返回 2 的平方根。
方法:
Math 的内置方法,是一些数学上常用的数学运算:
abs(x) :返回 x 的绝对值。
round(x) :返回 x 四舍五入后的值。
sqrt(x) :返回 x 的平方根。
ceil(x) :返回大于等于 x 的最小整数。
floor(x) :返回小于等于 x 的最大整数。
sin(x) :返回 x 的正弦。
cos(x) :返回 x 的余弦。
tan(x) :返回 x 的正切。
acos(x) :返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。
asin(x) :返回 x 的反正弦值。
atan(x) :返回 x 的反正切值。
exp(x) :返回 e 的 x 次幂 (e^x)。
pow(n, m) :返回 n 的 m 次幂 (nm)。
log(x) :返回 x 的自然对数 (ln x)。
max(a, b) :返回 a, b 中较大的数。
min(a, b) :返回 a, b 中较小的数。
random() :返回大于 0 小于 1 的一个随机数。
3.Array数组对象
属性:length