javaScript复习3

1.字符串对象（String）

2.Number 对象

3.JavaScript Array（数组）

4.JavaScript Boolean（布尔)【注意Boolean对象与boolean值的差异】

      1.创建boolena对象

            1.1直接赋值

            Var  boo1=false;

            1.2通过构造器创建boolean对象

            通过构造器创建boolean对象可以将

            数字0--false   非0--true

            字符串 “”---false  非””--true

            null---false

            NaN---false

            对象【Boolean对象】-- true

      例如:

var b1=new Boolean(0);
var b2=new Boolean(-1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");

var b11= Boolean(0);
var b22= Boolean(-1);
var b33= Boolean("");
var b44= Boolean(null);
var b55= Boolean(NaN);
var b66= Boolean("false");

document.write("<h1>0 为布尔值 "+ b1 +"Boolean对象</h1>");
document.write("<h1>1 为布尔值 "+ b2 +"Boolean对象</h1>");
document.write("<h1>空字符串是布尔值 "+ b3 + "Boolean对象</h1>");
document.write("<h1>null 是布尔值 "+ b4+ "Boolean对象</h1>");
document.write("<h1>NaN 是布尔值 "+ b5 +"Boolean对象</h1>");
document.write("<h1>字符串'false' 是布尔值"+ b6 +"Boolean对象</h1>");
			
document.write("<h1>0 为布尔值 "+ b11 +"boolean值</h1>");
document.write("<h1>1 为布尔值 "+ b22 +"boolean值</h1>");
document.write("<h1>空字符串是布尔值 "+ b33 + "boolean值</h1>");
document.write("<h1>null 是布尔值 "+ b44+ "boolean值</h1>");
document.write("<h1>NaN 是布尔值 "+ b55 +"boolean值</h1>");
document.write("<h1>字符串'false' 是布尔值"+ b66 +"boolean值</h1>");
valueOf()返回 Boolean 对象的原始值。boolean数据值

       注意:

              1.创建Boolena对象是通过new Boolean()的方式得到的是Boolean对象，通过valueOf()得到的是boolean的原始值。

              2.无论是不是Boolen对象，只要是对象，在if语句的判断条件中会被转换成boolean值且一定是true。通过Boolen对象提供的valueOf()方法得到Boolen对象中的boolean数据值。

5.JavaScript Date（日期）

       1、创建Date对象

              new Date(); //当前系统时间

              例如:得到当前系统时间   
                    

 var date=new Date();

document.write(date);

              Thu Nov 19 2020 11:01:14 GMT+0800 (中国标准时间)
       2.new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数

       例如:

 var date2=new Date(10000);

document.write("<h1>"+date2+"</h1>");

       3.new Date(dateString)

       例如:

var date3=new Date("2018/12/1 12:29:30");

document.write("<h1>"+date3+"</h1>");

       4.new Date(year, month, day, hours, minutes, seconds, milliseconds)

       例如:      

var date4 = new Date(2021,month+1,21,18,10);

       5.Date的常用方法

              getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

              getFullYear()获取年份

              getMonth()获取月份【从0开始数，我们在使用的是需要+1】

              getDate()获取月中的天数

              getDay()获取星期

              getHours()获取小时数

              getMinutes()获取分钟数

              getSeconds()获取秒数

              setFullYear(y,m,d) 设置具体的日期。

              setMonth()设置月份【从0开始数，我们在使用的是需要-1】

              setDate()设置月中的天数

              setDay()设置星期

              setHours()设置小时数

              setMinutes()设置分钟数

              setSeconds()设置秒数

              setTime()设置毫秒数，得到从 1970 年 1 月 1 日设置的毫秒数重新给出时间日期

例如：

              //getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

              document.write("<h1>"+date.getTime()+"</h1>");

              //getFullYear()获取年份

              document.write("<h1>"+date.getFullYear()+"</h1>");

              //getMonth()获取月份【从0开始数，我们在使用的是需要+1】

              document.write("<h1>"+(date.getMonth()+1)+"</h1>");

              //getDate()获取月中的天数

              document.write("<h1>"+date.getDate()+"</h1>");

              //getDay()获取星期

              document.write("<h1>"+date.getDay()+"</h1>");

              //getHours()获取小时数

              document.write("<h1>"+date.getHours()+"</h1>");

              //getMinutes()获取分钟数

              document.write("<h1>"+date.getMinutes()+"</h1>");

              //getSeconds()获取秒数

              document.write("<h1>"+date.getSeconds()+"</h1>");

              //setFullYear() 设置具体的日期。

              //【月份从0开始数，我们在设置的是需要-1】

              date.setFullYear(2019,10,20); []

              date.setHours(12);

              date.setMinutes(12);

              date.setSeconds(12);

              //setTime设置毫秒数，

              //得到从 1970 年 1 月 1 日设置的毫秒数重新给出时间日期

              date.setTime(10000)

              document.write("<h1>"+date+"</h1>");

           如何在网页上显示一个钟表。

function startTime(){
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.write(h+":"+m+":"+s);
    today = setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if(i < 10){
    i = "0"+i;
    }
    return i;
}
	

          两个日期比较

              日期对象也可用于比较两个日期。

              下面的代码将当前日期与 2100 年 1 月 14 日做了比较：

var x=new Date();
x.setFullYear(2100,0,14);//设置一个时间用来比较
var today = new Date(); //得到当天的时间日期
if (x>today){
    alert("今天是2100年1月14日之前");
}else{
    alert("今天是2100年1月14日之后");
}

6.JavaScript Math(算数)

          Math（算数）对象的作用是：执行常见的算数任务。

          算数值【常量值】

          Math.E  --  自然常数，为数学中一个常数，是一个无限不循环小数，且为超越数，其值约为2.718281828459045。
          Math.PI------圆周率

          算数方法

             max()返回两个给定的数中的较大的数

             min()返回两个给定的数中的较小的数

             random()返回 0 到 1 之间的随机数。

             round()最为接近的整数,注意负数

             例如:

document.write("<h1>自然常数=="+Math.E+"</h1>");
document.write("<h1>圆周率=="+Math.PI+"</h1>");
document.write("<h1>平方根=="+Math.sqrt(9)+"</h1>");
document.write("<h1>立方根=="+Math.cbrt(8)+"</h1>");
document.write("<h1>次幂=="+Math.pow(2,3)+"</h1>");
document.write("<h1>随机数=="+Math.random()+"</h1>");
document.write("<h1>最为接近的整数=="+Math.round(-12.6)+"</h1>");
document.write("<h1>最大数=="+Math.max(12,34,8)+"</h1>");
document.write("<h1>最小数=="+Math.min(12,34,8)+"</h1>");

7.JavaScript RegExp 对象

       RegExp：是正则表达式（regular expression）的简写。

       RegExp就是一个用来检索，判断文本数据的一种格式。在做数据校验的时候经常使用。

       创建格式：

var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers; 【不推荐使用】

          注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。

          var re = new RegExp("\\d+");   

          RegExp常用操作方法：

               1.test()方法搜索字符串指定的值，根据结果并返回真或假

               例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//1.test()方法搜索字符串指定的值，根据结果并返回真或假
			var reg1=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
			var phoneNum="100000";
			var res1=reg1.test(phoneNum);
			document.write("<h1>"+res1+"</h1>");
			//2.exec("被查找的数据值") 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
			var reg2=new RegExp("134");
			var text1="hello13474682774world";
			var res2=reg2.exec(text1);
			if(res2==null){
				document.write("<h1>不存在</h1>");
			}else{
				document.write("<h1>存在,结果是=="+res2+"</h1>");
			}
		</script>
	</head>
	<body>
	</body>
</html>

Javascript中的元素

1. 变量  【var】
2. 运算,表达式  【1.赋值 2.算数{++,--} 3.比较{===} 4.逻辑 5.typeof】
3. 语句  【1.顺序结构  2.选择结构{switch{...break}} 3.循环{for/in} 4.....】
4. 函数{方法} 【function】
5. 数据类型
6. 对象 【1.内置对象 2.DOM  3 BOM】

JavaScript 类型转换---数据类型的转换

     1.通过使用 JavaScript 函数 例如:toString()

     2.通过 JavaScript 自身自动转换 例如:var  num1=100;  var res=num1+”hello”;

1.将数字转换为字符串    

//1.全局方法 String() 可以将数字转换为字符串。
var  num1=100;
//var str1=new String(num1); //String Object
var str1=String(num1); //String value
document.write("<h1>str1==="+str1+",type=="+typeof str1+"</h1>");
//document.write("<h1>str1 length==="+str1.length+"</h1>");

//2.Number 方法 toString() 也是有同样的效果。
var str2=num1.toString(); //String value
document.write("<h1>str2==="+str2+",type=="+typeof str2+"</h1>");

//3.toFixed(小数的位数)把数字转换为字符串，结果的小数点后有指定位数的数字。
var str3=num1.toFixed(0);
document.write("<h1>str3==="+str3+",type=="+typeof str3+"</h1>");

//4.+""
var str4=num1+"";
document.write("<h1>str4==="+str4+",type=="+typeof str4+"</h1>");  

2.将包含数字值的字符串转换为数字

var  str1="25";

//1.全局方法 Number() 可以将字符串转换为数字。
var  num1=new Number(str1); //Number Object
var  num1=Number(str1); //Number value
document.write("<h1>num1==="+num1+",type=="+typeof num1+"</h1>");

//2.包含数字值的字符串*1
var  num2=str1*1; //Number value
document.write("<h1>num2==="+num2+",type=="+typeof num2+"</h1>");

//3.一元运算符 +
var  num3= +str1; //Number value
document.write("<h1>num3==="+num3+",type=="+typeof num3+"</h1>");

3.将布尔值转换为字符串

//1、全局方法 String() 可以将布尔值转换为字符串。
var boo1=true;
//var str1=new String(boo1);
var str1= String(boo1);
document.write("<h1>str1==="+str1+",type=="+typeof str1+"</h1>");

//2.Boolean 方法 toString() 也有相同的效果。
var str2=boo1.toString();
document.write("<h1>str2==="+str2+",type=="+typeof str2+"</h1>");

4.将字符串转换为布尔值

//1.空字符串被转换成false
var str1="";
//var  boo1=new Boolean(str1);  //Boolean Object
var  boo1=Boolean(str1);  //Boolean vaue
document.write("<h1>boo1==="+boo1+",type=="+typeof boo1+"</h1>");


//2.非空字符串被转换成true
var str2="asgsde";
//var  boo2=new Boolean(str2);  //Boolean Object
var  boo2=Boolean(str2);  //Boolean vaue
document.write("<h1>boo2==="+boo2+",type=="+typeof boo2+"</h1>");
//注意:值为false的字符串被转换成boolean值为true值，因为值为false的字符串也是非空字符串
var str3="false";
var  boo3=Boolean(str3);  //Boolean vaue
document.write("<h1>boo3==="+boo3+",type=="+typeof boo3+"</h1>");

5.将数字转换为布尔值

//1.数字0被转换成false
var  num1=0;
//var  boo1=new Boolean(num1);  //Boolean Object
var  boo1=Boolean(num1);  //Boolean vaue
document.write("<h1>boo1==="+boo1+",type=="+typeof boo1+"</h1>");

//2.非0数字被转换成true
var  num2=123;
//var  boo1=new Boolean(num1);  //Boolean Object
var  boo2=Boolean(num2);  //Boolean value
document.write("<h1>boo2==="+boo2+",type=="+typeof boo2+"</h1>");

6.将布尔值转换为数字

var boo1=true;  //true 被转换成数字1
//var num1=new Number(boo1);
var num1=Number(boo1);
document.write("<h1>num1==="+num1+",type=="+typeof num1+"</h1>");
var boo2=false;  //false 被转换成数字0
//var num2=new Number(boo2);
var num2=Number(boo2);
document.write("<h1>num2==="+num2+",type=="+typeof num2+"</h1>");
//乘1【*1】
var num3=boo1*1;
document.write("<h1>num3==="+num3+",type=="+typeof num3+"</h1>");
var num4=boo2*1;  
document.write("<h1>num4==="+num4+",type=="+typeof num4+"</h1>");

7.将日期转换为数字

var date1=new Date();
//var num1=new Number(date1);
var num1= Number(date1);
document.write("<h1>num1==="+num1+",type=="+typeof num1+"</h1>");
//注意:日期被转换成数字以后是从1970-1-1到当前日期的毫秒数
//日期方法 getTime()   也有相同的效果。
var num2= date1.getTime();
document.write("<h1>num2==="+num2+",type=="+typeof num2+"</h1>");

8.将数字转换为日期

//将数字转换为日期
var num1=1605844538320;
//var date1=new Date(num1); //Object
var date1=Date(num1); //string
document.write("<h1>date1==="+date1+",type=="+typeof date1+"</h1>");

注意:如果数字是年份|月份|天数|时分秒的数字，那么我们可以通过Date对象提供的setXXXX()方法

9.将日期转换为字符串

//全局方法 String() 可以将日期转换为字符串。
var date1=new Date();
//var str1=new String(date1);
var str1=String(date1);
document.write("<h1>str1==="+str1+",type=="+typeof str1+"</h1>");
//Date 方法 toString() 也有相同的效果。
var str2=date1.toString();
document.write("<h1>str2==="+str2+",type=="+typeof str2+"</h1>");

10.将字符串转换为日期

var str1="2020-11-20 12:11:30";
var date1=new Date(str1);
document.write("<h1>date1==="+date1+",type=="+typeof date1+"</h1>");

注意：字符串中包含的是符合时间日期格式的字符串数据

7.DOM对象

       DOM--Document Object Model[文档对象模型]

       当网页被加载时，浏览器会创建页面的文档对象模型。

       HTML DOM 模型被构造为对象的树

Html文件

<html>
    <head>
        <title>My title</title>
    </head>
    <body>
        <a href=””>My link</a>
        <h1>My header</h1>
    </body>
</html>

    1.DOM可以完成的功能

        1.JavaScript 能够改变页面中的所有 HTML 元素

        2.JavaScript 能够改变页面中的所有 HTML 属性

        3.JavaScript 能够改变页面中的所有 CSS 样式

        4.JavaScript 能够对页面中的所有事件做出反应

    2.查找 HTML 元素

        为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

        2.1. getElementById(id属性值);通过 id 查找 HTML 元素

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//getElementById(id属性值);通过 id 查找 HTML 元素
			function testByID(){
				var p1=document.getElementById("p1");
				//p1--[object HTMLParagraphElement];  DOM对象
				p1.style.fontSize="50px";
				var p2=document.getElementById("p2");
				//p2--[object HTMLParagraphElement] DOM对象
				p2.style.color="red";
				//当id属性值相同时,只能得到第一个元素
				var p3=document.getElementById("p3");
				//p3---[object HTMLParagraphElement] DOM对象
				p3.style.fontSize="50px";
				p3.style.color="red";
			}
		</script>
	</head>
	<body>
		<p id="p1">p元素测试getElementById(id属性值)</p>
		<p id="p2">p元素测试getElementById(id属性值)</p>
		<p id="p3">p元素测试getElementById(id属性值)</p>
		<p id="p3">p元素测试getElementById(id属性值)</p>
		<input type="button" value="测试getElementById(id属性值)" 
		onclick="testByID();">
	</body>
</html>

        2.2. getElementsByTagName(标签名)通过标签名查找 HTML 元素

   例如:

    //getElementsByTagName(标签名)通过标签名查找 HTML 元素
    function testByTagName(){
    /*
        var p=document.getElementsByTagName("p");
        //p---[object HTMLCollection] DOM对象的集合---数组
        //typeof p---object 数组也是对象所以typeof p值才会是object
        //p[5]---[object HTMLParagraphElement]  DOM对象
        var size=5;
        for(var i=0;i<p.length;i++){
            var fonts=size*i+size;
            p[i].style.fontSize=fonts+"px";
        }
    */
//当元素在html文件中只有一个的时候，
//通过getElementsByTagName方法得到的结果依然是数组
        var h2=document.getElementsByTagName("h2");
        //alert(h2); [object HTMLCollection] DOM对象的集合---数组
        if(h2.length==1){
            h2[0].style.color="blue";
        }
    }

        2.3. getElementsByClassName(class属性值)通过类名找到 HTML 元素

      例如:

function testByClassName(){
    var p1= document.getElementsByClassName("p1");
    //alert(p1); //[object HTMLCollection]
    for(var i=0;i<p1.length;i++){
        p1[i].style.color="red";
    }
    var h= document.getElementsByClassName("h");
    //alert(h); //[object HTMLCollection]
    for(var i=0;i<h.length;i++){
        h[i].style.color="blue";
    }
}

    3.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]

        innerHTML 属性--改变页面中HTML 元素的文本内容

    例如:

function  testinnerHTML(){
    var text1=document.getElementById("text1");
    var h1=document.getElementsByTagName("h1")[0];
    //h1--[object HTMLHeadingElement]  Dom对象
    var textvalue=text1.value;
    h1.innerHTML=textvalue;
    //h1.innerHTML=text1.value;
    //h1.innerHTML=document.getElementById("text1").value;
    //注意:innerHTML中设置的字符串内容中有html标记，那么这个被包含的html标记会被解释运行。
			}

                innerText 属性--改变页面中HTML 元素的文本内容

     例如:

function  testinnerText(){
    var text1=document.getElementById("text1");
    var h1=document.getElementsByTagName("h1")[0];
    //h1--[object HTMLHeadingElement]  Dom对象
    var textvalue=text1.value;
    h1.innerText=textvalue;
    //注意:innerText中设置的字符串内容中有html标记，那么这个被包含的html标记会被作为字符串输出。
}

       4.JavaScript 能够改变页面中的所有 HTML 属性

              属性在html和css中都有。

              Html中的属性---是给浏览器解释运行html标记时通过附加信息。

              往往出现在html的开始标记中，如果有多个中间使用空格分离。

       例如:

              <img ></img>--<img />

              <img src=”” width=”” height=”” />

              src=”” width=”” height=””----Html标记中的属性

              css中的属性----是用来改变html元素的样式。

       1.在html开始元素中通过style属性

       例如:

              <div style=”width:100px;height:100px”></div>

              style---是html属性

              width:100px;height:100px----css属性

       2.在<style>元素中和“.css”文件中

              选择器{

                   css中的属性

              }

              控制 HTML 属性的格式:

              dom对象.具体的html属性名称=属性名称对应的属性值；

       例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testattribute(){
				//dom对象.具体的html属性名称=属性名称对应的属性值；
				var imgdoc=document.getElementsByTagName("img")[0];
				//alert(imgdoc); [object HTMLImageElement]
				imgdoc.src="imgs/avatar2.png";
				//imgdoc---dom对象
				//src--具体的html属性名称
				//"imgs/avatar2.png"---属性名称对应的属性值;
			}
		</script>
	</head>
	<body>
		<img src="imgs/avatar.png" />
		<input type="button" value="控制html属性" onclick="testattribute();">
	</body>
</html>

       5.JavaScript 能够改变页面中的所有 CSS 样式

              dom对象.style.具体的css属性名称=属性名称对应的属性值；

              例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testCss(){
				//dom对象.style.具体的css属性名称=属性名称对应的属性值；
				var imgdoc=document.getElementsByTagName("img")[0];
				var button=document.getElementById("but1");
				var hdoc=document.getElementsByTagName("h1")[0];
				//alert(hdoc.innerText);
				//alert(hdoc.innerHTML);
				var buttext=button.value;
				//alert(buttext);
				if(buttext=="隐藏"){
					button.value="显示";
					imgdoc.style.display="none";
				}
				if(buttext=="显示"){
					button.value="隐藏";
					imgdoc.style.display="block";
				}
			}
		</script>
	</head>
	<body>
		<h1>hello<a href="#">test</a></h1>
		<img src="imgs/avatar.png" />
		<input id="but1" type="button" value="隐藏" onclick="testCss();">
	</body>
</html>