javaScript review 3

1. String object (String)

2. Number Object

3. JavaScript Array (array)

4. JavaScript Boolean [note the difference between the Boolean object and the boolean value]

      1. Create a boolena object

            1.1 Direct assignment

            Var boo1 = false;

            1.2 Create a boolean object through the constructor

            Create a boolean object through the constructor can be

            Number 0--false not 0--true

            String ""---false not ""--true

            null---false

            NaN --- false

            Object【Boolean Object】-- true

      E.g:

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数据值

       note:

              1. The creation of the Boolena object is the Boolean object obtained by new Boolean(), and the original value of the boolean obtained by valueOf ().

              2. Whether it is a Boolen object or not, as long as it is an object, it will be converted into a boolean value and must be true in the judgment condition of the if statement. Get the boolean data value in the Boolen object through the valueOf() method provided by the Boolen object.

5. JavaScript Date

       1. Create a Date object

              new Date(); //Current system time

              For example: get the current system time   
                    

 var date=new Date();

document.write(date);

              Thu Nov 19 2020 11:01:14 GMT+0800 (China Standard Time)
       2.new Date(milliseconds) //Returns the number of milliseconds since January 1, 1970

       E.g:

 var date2=new Date(10000);

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

       3.new Date(dateString)

       E.g:

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)

       E.g:      

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

       5. Common methods of Date

              getTime() returns the number of milliseconds since January 1, 1970.

              getFullYear() Get the year

              getMonth() to get the month [counting from 0, we are using +1]

              getDate() Get the number of days in the month

              getDay() Get the day of the week

              getHours() Get the number of hours

              getMinutes() Get the number of minutes

              getSeconds() Get the number of seconds

              setFullYear(y,m,d) Set a specific date.

              setMonth() sets the month [counting from 0, we are using -1]

              setDate() sets the number of days in the month

              setDay()Set the day of the week

              setHours() set the number of hours

              setMinutes() set the number of minutes

              setSeconds() set the number of seconds

              setTime() set the number of milliseconds, get the number of milliseconds set from January 1, 1970, give the time and date again

E.g:

              //getTime() returns the number of milliseconds since January 1, 1970.

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

              //getFullYear() Get the year

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

              //getMonth() Get the month [counting from 0, we are using +1]

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

              //getDate() Get the number of days in the month

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

              //getDay() Get the day of the week

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

              //getHours() Get the number of hours

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

              //getMinutes() Get the number of minutes

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

              //getSeconds() Get the number of seconds

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

              //setFullYear() Set a specific date.

              //[The month starts from 0, what we are setting is -1]

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

              date.setHours(12);

              date.setMinutes(12);

              date.setSeconds (12);

              //setTime sets the number of milliseconds,

              //Get the number of milliseconds set from January 1, 1970 to give the time and date again

              date.setTime(10000)

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

           How to display a clock on a web page.

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;
}
	

          Compare two dates

              The date object can also be used to compare two dates.

              The following code compares the current date with January 14, 2100:

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(算数)

          The function of the Math object is to perform common arithmetic tasks.

          Calculated value [constant value]

          Math.E - natural constant, a constant in mathematics , is an infinite non-recurring decimal , and a transcendental number , its value is about 2.718281828459045.           Math.PI------Pi

          Arithmetic method

             max() returns the larger of the two given numbers

             min() returns the smaller of the two given numbers

             random() returns a random number between 0 and 1.

             round() the nearest integer, pay attention to negative numbers

             E.g:

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 Object

       RegExp: Shorthand for regular expression.

       RegExp is a format used to retrieve and judge text data. It is often used when doing data verification.

       Create format:

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

          Note: When using the constructor to create a regular object, regular character escaping rules are required (preceded by a backslash \) .

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

          RegExp common operation method:

               1. The test() method searches for the value specified by the string, and returns true or false according to the result

               E.g:

<!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>

Elements in Javascript

1. Variable 【var】
2. Operation, expression [1. Assignment 2. Arithmetic {++,--} 3. Comparison {===} 4. Logic 5. typeof]
3. Statement [1. Sequence structure 2. Select structure {switch{...break}} 3. Loop {for/in} 4.....]
4. Function {method} 【function】
5. type of data
6. Object [1. Built-in object 2. DOM 3 BOM]

JavaScript type conversion --- data type conversion

     1. By using JavaScript functions such as: toString()

     2. Automatic conversion through JavaScript itself For example: var num1=100; var res=num1+”hello”;

1. Convert a number to a string    

//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. Convert a string containing a numeric value to a number

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. Convert boolean value to string

//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. Convert string to boolean

//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. Convert numbers to boolean values

//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. Convert Boolean values ​​to numbers

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. Convert dates to numbers

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. Convert numbers to dates

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

Note: If the number is the number of year|month|days|hours, minutes and seconds, then we can use the setXXXX() method provided by the Date object

9. Convert the date to a string

//全局方法 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. Convert string to date

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

Note: The string contains string data that conforms to the time and date format

7. DOM objects

       DOM--Document Object Model[Document Object Model]

       When a web page is loaded, the browser creates the document object model of the page.

       The HTML DOM model is structured as a tree of objects

Html file

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

    1. Functions that DOM can complete

        1. JavaScript can change all HTML elements in the page

        2. JavaScript can change all HTML attributes in the page

        3. JavaScript can change all CSS styles in the page

        4. JavaScript can react to all events in the page

    2. Find HTML elements

        In order to do this, you must first find the element. There are three ways to do this:

        2.1. g etElementById ( id attribute value ); find HTML element by id

For example :

<!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 ( tag name ) find HTML elements by tag name

   E.g:

    //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 attribute value) find HTML elements by class name

      E.g:

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 can change all HTML elements in the page [text content of elements]

        innerHTML property-change the text content of HTML elements in the page

    For example :

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 property-change the text content of HTML elements in the page

     E.g:

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 can change all HTML attributes in the page

              Attributes are available in html and css.

              The attribute in Html --- is to explain to the browser that additional information is passed when running the html markup.

              It often appears in the opening tag of html, if there are multiple spaces separated by spaces.

       E.g:

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

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

              src=”” width=”” height=””----attribute in Html tag

              Attributes in css are used to change the style of html elements.

       1. Pass the style attribute in the html start element

       E.g:

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

              style--- is an html attribute

              width:100px;height:100px----css property

       2. In the <style> element and in the ".css" file

              Selector{

                   Properties in css

              }

              Control the format of HTML attributes :

              dom object. Specific html attribute name = attribute value corresponding to the attribute name;

       E.g:

<!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 can change all CSS styles in the page

              dom object.style. Specific css attribute name = attribute value corresponding to the attribute name;

              E.g

<!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>