前端笔记4-3

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% 准确

八进制和十六进制

如果前缀为 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

发表于 2018-02-02 14:18 Luas 阅读(155) 评论(0) 编辑收藏举报

创建直接的实例

把方法添加到 JavaScript 对象

JavaScript 类

JavaScript for...in 循环

公告