JavaScript Learning Notes - B Station Power Node

Article Catalog

1.1. What is JavaScript and what is it used for?
1., CSS, JavaSript three relations
2. How to embed JavaScript code in HTML?
identifiers and keywords of the
4. About variables in JS
function of a preliminary
6. Local and Global Variables
7. Data types
typology
typology
typology
typology
typology
What is the difference between the three values NaN undefined
The common events and two ways to register events for the
Order of code execution (load event)
The code after ---- is written in this way ----
Code to set the properties of the node (load event)
Code to capture the enter key (keydown event)
The void operator of the
control statements and JS arrays.
Includes three pieces: ECMAScript, DOM, BOM
Programming - Getting the value of a text box
Programming-innerHTML and innerText manipulate divs and spans
Programming - About Regular Expressions
Programming - trim function to remove whitespace before and after the string
Programming - Form Validation
Programming - checkboxes with full selection and unselection
Programming - Get the value of the selected item in the drop-down list.
28. Programming - display web page clock and JS built-in objects (built-in support classes) Date
28.2. Built-in support for class Array
29. Learn to use your browser's F12
Programming-Window object's open and close methods
Programming - Popup Message Box and Confirmation Box
Programming - Setting the current window as the top level window
Programming-window's history object (class)
Programming - Setting the URL on the browser address bar
-Introduction
-Complex JSON objects
The -eval function
-DOM-spliced html way to set the table's tbody

1.1. what isJavaScriptWhat's the point?

JavaScript is a scripting language that runs on the browser. It is abbreviated as JS.

JavaScript was developed by Brandon Eich of NetScape (the father of JavaScript) and was originally called LiveScript.

The advent of LiveScript made the browser more lively and not just a static page. Pages are more interactive.


At some point in history, SUN and Netscape had a partnership between them and SUN changed the name of LiveScript to JavaScript.

Although the name JavaScript has "Java" in it, it has nothing to do with Java, but has similar syntax.
They run in different locations, Java runs in the JVM, JavaScript runs in the browser's memory.

JavaScript programs do not need to be compiled manually by our programmers, after writing the source code, the browser will directly open the interpretation and execution.
The "target program" of JavaScript is saved in the form of ordinary text, and such languages are called "scripting languages".

The target program of Java exists in the form of .class, which cannot be opened by a text editor and is not a scripting language.

Netscape was acquired by America Online in 1998.

Netscape is best known for the Navigator browser: the Navigator browser.

LiveScript came about, initially as a customized language for the Navigator browser, with no support for other browsers.

When the Navigator browser became very widely used, Microsoft got scared, so Microsoft put together a team in the shortest possible time and
began to develop a scripting language that only supported Internet Explorer, called JScript.

The era when JavaScript and JScript coexisted was painful for programmers, because programmers had to write two sets of programs.
In this situation, a non-profit organization came forward, called ECMA organization (European Computer Society)
ECMA created the standard ECMA-262 based on JavaScript, called ECMA-Script.

Modern javascript and jscript implement the ECMA-Script specification. (javascript and jscript are unified.)

Later you will learn a technology called JSP, JSP and JS what is the difference?
JSP : JavaServer Pages (belonging to the Java language, running in the JVM)
JS : JavaScript (running on the browser.)

1., CSS, JavaSript three relations

CSS and JavaScript for HTML

CSS is like the cosmetics of HTML. It modifies the HTML page, sets the style of certain elements in the HTML page, and makes the HTML page look better.
JavaScript makes the page able to move, more vivid, and the page more interactive.

2. How to embed JavaScript code in HTML?

Three ways

The first way:
/< tag ... Event Handle = "js code" />

Second way: the script block way
<script type="text/javascript">
js code
</script>

Third way:
Introduce an external standalone js file (recommended)

<!doctype html>
<html>
	<head>
		<title>The first way to embed JS code in HTML</title>
	</head>
	<body>
		
		<! --
1.The function to be realized:
The user clicks the following button to bring up a message box.

It is an event-driven programming language that relies on events to drive and then execute the appropriate program.
There are many events in JS, one of them is called: mouse click (word: click).
And any event will correspond to an event handle, the event handle is an attribute of the HTML tag.
The event handle is written as an attribute of the HTML tag. Event handles are written by adding an on in front of the event word (e.g., the event handle for a mouse click is onclick).

3.οnclick="js code", what is the principle of implementation?
When the page is opened, the js code will not be executed, just register this JS code to the button click event. When the button click event occurs, registered in the onclick after the js code will be automatically called by the browser.

4. How to use js code to popup message box?
In js there is a built-in object called window (all lowercase), can be used directly, window represents the browser object.

The window object has a function called: alert, the usage is: ("message"); so you can pop up the window.

You can use single quotes or double quotes for strings.

A semicolon may or may not be used after the end of a statement in.
-->
		<input type="button" value="hello" onclick="('hello')"/>


		<! --
οnclick='("hello")'
If the outside is single quotes, the inside should be double quotes
-->
		<input type="button" value="hello" onclick='("hello jscode")'/>


		<! --three pop-ups in a row-->
		<input type="button" value="hello" onclick="('hello zhangsan')
													('hello lisi')
													('hello wangwu')"/>

		<! --window.can be omitted from the text -- >!
		<input type="button" value="hello" onclick="alert('hello zhangsan')
													alert('hello lisi')
													alert('hello wangwu')"/>

	</body>
</html>

<!doctype html>
<html>
	<head>
		<title>The second way to embed JS code in HTML</title>
	</head>
	<body>

		<! --This button will be executed first, then the following javaScript code -->
		<input type="button" value="I'm a button." />


		<! --
The second way: the script block approach
<script type="text/javascript">
js code
</script>

javaScript's script block can appear multiple times in the whole code (in a page), there is no requirement.
There is no requirement as to where the javaScript script block appears in the entire code, it can be above <!doctype html>
-->
		<script type="text/javascript">
			/*
The program exposed in the script block is executed when the page is opened and follows a top-down order, line by line (no events are required for this code to execute).

*/
			window.alert("Hello World!");
			
			//alert function blocks the loading of the entire HTML page.
			//Click the OK button in the pop-up window to finish the execution of the line before proceeding to the next statement
			window.alert("Hello	JavaScript!");

			//js code single line comments

			/*
Multi-line comments in js code
*/

		</script>

	</body>
</html>

html comments:
<! ---->

css comments:
To be written in style
<style type="text/css">
/* */
</style>

JavaScript comments:
To be written in the script
<script type="text/javascript">
// Single line comments
/* Multi-line comments */
</script>.

java comment:
// Single line comments
/* Multi-line comments */
/**
* javadoc comments, where the comment information will be parsed and extracted by the tool to generate the help file
*/ /* javadoc comments.
*/

<!doctype html>
<html>
	<head>
		<title>The third way to embed JS code in HTML</title>
	</head>
	<body>
		<! -- introduce external standalone js file (recommended) -- >.

		<! -- Introduce js script files where needed -- >.
		<! --When an external standalone js file is introduced, the code in the js file is executed sequentially line by line in top-down order -- >.
		<script type="text/javascript" src="js/"></script>

		<! --
The same js file can be brought in multiple times, but in practice this is rarely needed in development
<script type="text/javascript" src="js/"></script>

Note: this does not work
<script type="text/javascript" src="js/" />
-->


		<script type="text/javascript" src="js/">
			//Code written between here will not be executed
			//("Test");
		</script>


		<! --
The second way of embedding JS code in HTML in a script block and the third way can be written together:

<script type="text/javascript" src="js/"></script>

<script type="text/javascript">
("hello");
</script> <script type="text/javascript"> ("hello");
-->

	</body>
</html>

identifiers and keywords of the

JS identifier naming rules and specifications refer to java
naming rules (syntactically specified):
1. must consist of numbers, letters, underscores, dollar signs
2. Can not start with a number
3. Strictly case-sensitive
4. Can not use keywords as identifiers
5. Theoretically there is no length limit
Naming specifications:
1. Class names and interface names are capitalized with the first letter, followed by the first letter of each letter capitalized
2. method names and variable names initial lowercase, followed by each word initial capital letters
3. Constant names are required to be all capitalized, and words are separated by an underscore.
4. Hump naming
5. See the name to know the meaning

4. About variables in JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>About variables in JS</title>
	</head>
	<body>
		
		<script type="text/javascript">
		/*
Review variables in java:
How are variables defined/declared in?
Data type Variable name.
Example:
int i;
int i; double d;
boolean flag.
How do I assign a value to a variable in
Assignment is done using the "=" operator (the right side of the "=" operator is executed first, and the result of the execution on the right is assigned to the variable on the left)
variable name = value.
Example:
i = 10; d = 3.14; i = 10
i = 10; d = 3.14; flag = false;
flag = false.
The language is a strongly typed language, how is strongly typed understood?
The java language exists in the compilation stage, suppose there is code: int i;
Then there is a feature in Java that:
The data type of the variable i is determined at the compilation stage of the java program, and the data type of the variable i is int at the compilation stage.
Then this variable to the final memory release, has been int type, it is impossible to change to other types.

int i = 10; double d = i; i = 10
double d = i.
This line of code says to declare a new variable d, of type double, and pass the value held in the i variable to d. The i variable is still of type int.
i is still of type int.

i = "abc"; This line of code will report an error when compiled because the data type of the i variable is of type int, and you can't assign a string to i.

java requires that whatever type a variable is of when it is declared, it will always be of that type later on, immutable.
Forcing the data type of a variable to be fixed at compile time is called strongly typed language.

Variables in javascript?
How to declare a variable?
var variable-name.
How to assign a value to a variable?
variable name = value.
javascript is a weakly typed language, there is no compilation phase, and a variable can be assigned whatever value it wants.
var i = 100; i = false; var i = 100
i = false.
i = "abc"; i = new Object(); i = new Object()
i = new Object(); i = 3.14;
i = 3.14.

Key point: javascript is a weakly typed programming language. 0
*/
		
		// In JS, when a variable is not manually assigned a value, the system assigns undefined by default.
		//undefined is a concrete value in JS.
		var i;
		window.alert("i =" + i);
		
		alert(undefined);
		var k = undefined;
		alert("k = " + k);
		
		// A variable is not declared/defined, it's just a ?
		// alert(age); Syntax error: age is not defined (variable age doesn't exist, can't be written this way)
		
		var a, b, c = 200;
	    alert("a = " + a); //a=undefined
     	alert("b = " + b); //b=undefined
 		alert("c = " + c); //c=200
		   
		a = false;
		alert(a); 
		   
		a = "abc";
		alert(a); 
		   
		a = 1.2;
		alert(a);
		 
		</script>
		   
	</body>
</html>

function of a preliminary

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS Functions Preliminary</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
function in a java language:
Equivalent to methods in the java language, a function is a piece of code that can be reused.
Functions generally accomplish a specific function.

2. Review methods in java?
[list of modifiers] return value type method name (formal parameter list) {
method body; }
}

Example:
public static boolean login(String username,String password){
...
return true; }
}

boolean loginSuccess = login("admin", "123");

The variable in is a weak type, so how should the function be defined?
Syntax format:
The first way:
function function name (formal parameter list) {
function body; }
}

Second way:
function name = function(formal argument list){
function body; }
}

Functions in JS don't need to specify the return value type, they return whatever type they want.
*/
		   
			function sum(a,b){
				//a and b are both local variables, they are both formal parameters (a and b are variable names, variable names are arbitrary)
				window.alert(a+b);
			}
			
		    // Functions that must be called in order to be executed.
		    //sum(10, 20);
			
		    // Define the function sayHello
		    sayHello = function(username){
				window.alert("hello " + username);
		    }
		   
		   //calling a function
		   //sayHello("zhangsan");
		   
		</script>
		
			<! --Use event handles in conjunction with script blocks and call functions in script blocks from within event handles -->.
			<input type="button" value="hello" onclick="sayHello('jack');" /> 
			<input type="button" value="Calculate the sum of 10 and 20" onclick="sum(10, 20);" />
			
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS Functions Preliminaries</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
Methods in java have an overloading mechanism, can functions in JS be overloaded?
JS function in the call, there is no restriction on the type of parameters, and the number of parameters is also not limited, JS is so arbitrary (weak type)

The meaning of overloading:
Same method or function name, different formal parameters (number, type, order).
Functions in JS don't need to be overloaded.
*/
		   function sum(a, b){
			   return a + b;
		   }
		   
		   // Call the function sum
		   var retValue = sum(1, 2);
		   alert(retValue);
		   
		   var retValue2 = sum("jack"); // jack is assigned to variable a, variable b is assigned undefined by default.
		   alert(retValue2); // jackundefined
		   
		   var retValue3 = sum();
		   alert(retValue3); // NaN (NaN is a concrete value which means not a number. Not a Number)
		   
		   var retValue4 = sum(1, 2, 3);
		   alert("Results =" + retValue4); // Result = 3 (the third 3 is missing)
		   
		   
		    /*
In JS, function names cannot be renamed. When a function is renamed, the later declared function will overwrite the previously declared function with the same name.
*/
		   function test1(username){
			   alert("test1");
		   }
		   
		   function test1(){
			   alert("test1 test1");
		   }
		   
		   test1("lisi"); // This calls the second test1() function.
		   
		</script>
		
	</body>
</html>

6. Local and Global Variables

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Setting the tbody of a table</title>
	</head>
	<body>
		<script type="text/jscript">
			/*
Global variables:
Variables declared outside the function body are global variables, which have a life cycle:
They are declared when the browser is opened and destroyed when the browser is closed, and are used sparingly.
Because global variables will always be in the browser's memory, consuming memory space.
Use local variables as much as you can.
Local variables:
Variables declared in the body of a function, including the formal parameter of a function, are local variables.
The life cycle of a local variable is:
When the function starts executing, the memory space of the local variable is opened, and after the function finishes executing, the memory space of the local variable is released.
Local variables have a short life cycle.
*/
		   
		   // Global variables
		   var i = 100;
		   
		   function accessI(){
			   // The access is to a global variable
			   alert("i = " + i);
		   }
		   accessI();
		   
		   
		   // Global variables
		   var username = "jack";
		   function accessUsername(){
			   // Local variables
			   var username = "lisi";
			   // Proximity principle: accessing local variables
			   alert("username = " + username);
		   }
		   // Calling Functions
		   accessUsername();
		   // Accessing global variables
		   alert("username = " + username);
		   
		   
		   function accessAge(){
			   var age = 20;
			   alert("Age = " + age);
		   }
		   
		   accessAge();
		   
		   // Report an error (syntax is wrong, can't call a local variable)
		   // alert("age = " + age);
		   
		   
		   // The following syntax is strange.
		   function myfun(){
			   // When a variable is declared without the var keyword, it is a global variable regardless of where it was declared.
			   myname = "dujubin";
		   }
		   
		   myfun();// Access Functions
		   
		   alert("myname = " + myname); // myname = dujubin
		   
		</script>
	</body>
</html>

7. Data types

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Data types in JS</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
1. Although variables in JS do not need to specify the data type when declared, but in the assignment, each data still has a type, so
Here also need to learn what data types JS includes?
The data types in JS are: primitive types, reference types.
Primitive types: Undefined, Number, String, Boolean, Null
Reference types: Object and subclasses of Object.

Specification (ECMAScript specification), after ES6, and based on the above six types in addition to adding a new type: Symbol

There is an operator called typeof, which allows you to dynamically retrieve the data type of a variable during the runtime of a program.
The syntax of the typeof operator:
typeof Variable name
The result of the typeof operator is one of the following six strings: note that the strings are all lowercase.
"undefined"
"number"
"string"
"boolean"
"object"
"function"

4. In JS to compare strings are equal or not using "==" to complete. No equals.
*/
		   
		   // Sum, requiring that the future data types of variables a and b must be numeric and nothing else.
		   // Because the sum function is defined below to accomplish the sum of two numbers.
		   function sum(a, b){
			   if(typeof a == "number" && typeof b == "number"){
				   return a + b;
			   }
			   alert(a + "," + b + "It has to be all for numbers!");
		   }
		   
		   // Someone else calls the sum function you wrote above.
		   var retValue = sum(false, "abc");
		   alert(retValue); // No return value, assign default value undefined
		   
		   var retValue2 = sum(1, 2);
		   alert(retValue2); // 3
		   
		  
		   
		   var i;
		   alert(typeof i); // "undefined"
		  
		   var k = 10;
		   alert(typeof k); // "number"
		  
		   var f = "abc";
		   alert(typeof f); // "string"
		  
		   var d = null;
		   alert(typeof d); // "object" null is of type Null, but the typeof operator results in "object" (unexplained, it's a bug).
		  
		   var flag = false;
		   alert(typeof flag); // "boolean"
		  
		   var obj = new Object();
		   alert(typeof obj); // "object"
		  
		   // sayHello is a function.
		   function sayHello(){
			  
		   }
		   alert(typeof sayHello); // "function"
		   
		</script>
	</body>
</html>

typology

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Undefined type</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
The Undefined type has only one value, and that value is undefined.
When a variable is not manually assigned a value, the system assigns the value undefined by default.
Alternatively, a variable can be manually assigned the value undefined.
*/
		   var i; // undefined
		   var k = undefined; // undefined
		   
		   alert(i == k); // true
		   
		   var y = "undefined"; // "undefined" is a string
		   alert(y == k); // false
		   
		</script>
	</body>
</html>

typology

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Number type</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
What values are included in types? (java uses 6 types of byte short int long float double to represent numbers, js uses only one Number)
-1 0 1 2 2.3 3.14 100 .... NaN Infinity
Integer, decimal, positive, negative, not a number, infinity all belong to Number type.
() : A result of true means it is not a number, a result of false means it is a number.
() function
() function
() function (Math is a math class, math class, there is a function called ceil (), the role of the upward rounding (greater than or equal to their smallest integer))
*/
		   
		   var v1 = 1;
		   var v2 = 3.14;
		   var v3 = -100;
		   var v4 = NaN;
		   var v5 = Infinity;
		   
		   // "number"
		   alert(typeof v1);
		   alert(typeof v2);
		   alert(typeof v3);
		   alert(typeof v4);
		   alert(typeof v5);
		   
		   // About NaN (means Not a Number, not a number, but of type Number)
		   // When is the result a NaN?
		   // The result is supposed to be a number, but when it's not, it's NaN.
		   var a = 100;
		   var b = "The Chinese.";
		   // The division sign should obviously result in a number, but the operation results in a number that is not a number, so the result is NaN.
		   alert(a / b); 
		   
		   var e = "abc";
		   var f = 10;
		   alert(e + f); //"abc10" (if there is a string on either side of the + sign, it will do string splicing, not addition)
		   
		   // Infinity (when the divisor is 0, the result is infinity)
		   alert(10 / 0);
		   
		   // Think: 10 / 3 = ?
		   alert(10 / 3); // 3.3333333333333335
		   
		   
		   
		   // What about the isNaN function?
		   // Usage: isNaN(data), true means not a number, false means a number.
		   // isNaN : is Not a Number 
		   function sum(a, b){
			   if(isNaN(a) || isNaN(b)){
				   alert("Those involved in arithmetic must be numbers!");
				   return;
			   }
			   return a + b;
		   }
		   sum(100, "abc"); // The numbers involved in the operation must be numeric!
		   alert(sum(100, 200)); //300
		   
		   // parseInt(): automatically converts a string to a number and takes integer digits.
		   alert(parseInt("3.9999")); // 3
		   alert(parseInt(3.9999)); // 3
		   
		   // parseFloat(): automatically converts a string to a number.
		   alert(parseFloat("3.14") + 1); // 4.14
		   alert(parseFloat("3.2") + 1); // 4.2
		   
		   // ()
		   alert(Math.ceil("2.1")); // 3
		   
		   
		</script>
	</body>
</html>

typology

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Boolean type</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
Boolean types always have only two values: true and false (this is the same as in java).
2. In Boolean type there is a function called: Boolean().
Syntax format:
Boolean(data)
Boolean() function is used to convert non-boolean type to boolean type.
*/
		   
		   /*
if(boolean type)
If the parentheses are not boolean, the function Boolean() is automatically called to convert the non-boolean type to a boolean type
Usage:
Boolean("yes")-->true
Boolean("no") --->false

Regularity: "yes" will be converted to true, "no" will be converted to false.
alert(Boolean(1)); // true
alert(Boolean(0)); // false
alert(Boolean("")); // false
alert(Boolean("abc")); // true
alert(Boolean(null)); // false
alert(Boolean(NaN)); // false
alert(Boolean(undefined)); // false
alert(Boolean(Infinity)); // true
*/
		   
		   var username = "";//User name cannot be empty
		   //var username = "jack"; welcome jack
		   
		   if(username){
				alert("Welcome." + username);
		   }else{
		   		alert("Username can't be empty!");
		   }
		   
		   /*
if(Boolean(username)){
alert("Welcome" + username);
}else{
alert("Username can't be null!") ;
}
*/
		  
		   
		   /*
dead loop
while(10 / 3){
alert("hehe");
}
*/
		   
		   for(var i = 0; i < 10; i++){
			   alert("i = " + i);
		   }
		   
		   
		   
		   // The Null type has only one value, null.
		   alert(typeof null); // Note: typeof null is "object".
			
			
		</script>

	</body>
</html>

typology

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*
String type:
1. String in JS can use single quotes or double quotes.
var s1 = 'abcdef';
var s2 = 'test';
2.In JS, how to create a string object?
Two ways:
The first one: var s = "abc";
The second (using JS's built-in support class String): var s2 = new String("abc");
Note that: String is a built-in class, can be used directly, String's parent class is Object.
3. Whether a small String or a large String, their properties and functions are common.
4. About the common properties and functions of the type String?
Common properties:
length Get the length of the string
Common functions:
indexOf Get the index of the first occurrence of the specified string in the current string.
lastIndexOf Get the index of the last occurrence of the specified string in the current string.
replace Replace
substr intercepts the substring
substring Intercept substring
toLowerCase Convert to lower case
toUpperCase Convert to uppercase
split split string
*/split
		   
		   // small string (of primitive type String)
		   var x = "king";
		   alert(typeof x); // "string"
		   
		   // Big String (of type Object)
		   var y = new String("abc");
		   alert(typeof y); // "object"
		   
		   
		   // Whether it's a small string or a large String, their properties and functions are common.
		   
		   // the length attribute of the string, get the length of the string
		   alert(x.length); // 4
		   alert(y.length); // 3
		   
		   // string indexOf function, get the index of the first occurrence of the specified string in the current string
		   alert("".indexOf("http")); // 0
		   alert("".indexOf("https")); // -1
		   
		   // Determine if a string contains a certain substring?
		   alert("".indexOf("https") >= 0 ? "Contains" : "Does not contain"); // Not included
		   
		   
		   // replace function (note: only the first one is replaced)
		   alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
		   
		   // Continuing to call the replace method replaces the second one.
		   // To replace them all you need to use regular expressions (more on that later).
		   alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value
		   
		   
		   // Exam point: often asked the difference between substr and substring?
		   // substr(startIndex, length) subscript from 0
		   alert("abcdefxyz".substr(2,4)); //cdef
		   
		   // substring(startIndex, endIndex) Note: endIndex is not included.
		   alert("abcdefxyz".substring(2,4)); //cd
		
		</script>
	</body>
</html>

You can view the help file

在这里插入图片描述

typology

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Object type</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
Object type:
Type is a superclass of all types, customized to any type, inheriting Object by default.

What attributes does a class include?
The prototype attribute (commonly used, mainly this one): serves to dynamically extend attributes and functions to the class.
constructor attribute.

What functions are included in a class?
toString()
valueOf()
toLocaleString()

4. Classes defined in JS inherit Object by default, and inherit all the properties and functions of the Object class.
In other words, your own class has a prototype attribute.

5. In JS, how to define the class? How to new object?
Define the syntax of the class:
The first way:
function class name (formal parameter) {

}
Second way:
Class name = function(formal parameter){

}

Syntax for creating objects:
new constructor name(real parameter); // Constructor name and class name are the same.
*/
		   function sayHello(){}
		   
		   // Call sayHello as a normal function.
		   sayHello();
		   
		   // This means that sayHello is created as a class.
		   var obj = new sayHello(); // obj is a reference that holds a memory address to an object on the heap.
		   
		   
		   // Define a student class
		   function Student(){
			   alert("Student.....");
		   }
		   
		   // Called as a normal function
		   Student();
		   
		   // Create objects as classes
		   var stu = new Student();
		   alert(stu); // [object Object]
		   
		   // You can distinguish between a function and a class by lower-casing the first letter of the function name and capitalizing the first letter of the class name.
		   
		   
		   
		   
		   // The definition of a class in JS is also the definition of a constructor.
		   // Class definition and constructor definition are done together in JS.
		   function User(a, b, c){ // a b c is a formal parameter, which is a local variable.
			   // Declare properties (this represents the current object)
			   // The User class has three attributes: sno/sname/sage.
			   this.sno = a;
			   this.sname = b;
			   this.sage = c;
		   }
		   
		   // Create objects
		   var u1 = new User(111, "zhangsan", 30);
		   // Accessing the properties of an object
		   alert(u1.sno);
		   alert(u1.sname);
		   alert(u1.sage);
		   
		   var u2 = new User(222, "jackson", 55);
		   alert(u2.sno);
		   alert(u2.sname);
		   alert(u2.sage);
		   
		   // To access an object's properties, you can also use this syntax
		   alert(u2["sno"]);
		   alert(u2["sname"]);
		   alert(u2["sage"]);
		   
		   
		   
		   
		   // Another syntax for defining classes
		   /*
		   Emp = function(a, b){
			    = a;
			    = b;
		   }
		   */
		  
		  Emp = function(ename,sal){
			  // Properties
			  this.ename = ename;
			  this.sal = sal;
		  }
		  
		  var e1 = new Emp("SMITH", 800);
		  alert(e1["ename"] + "," + e1.sal);
		  
		   
		   
		   
		   // Another example
		   Product = function(pno,pname,price){
			   // Properties
			   this.pno = pno;
			   this.pname = pname;
			   this.price = price;
			   // Functions
			   this.getPrice = function(){
				   return this.price;
			   }
		   }
		   
		   var xigua = new Product(111, "Watermelon.", 4.0);
		   var pri = xigua.getPrice();
		   alert(pri); // 4.0
		   
		   
		   
		   
		   // Classes can be dynamically extended with properties and functions via the prototype attribute.
		   //Means that after the class is written, you want to add new attributes/functions to the class, so that you can use the attribute prototype.
		   
		   Product.prototype.getPname = function(){
			   return this.pname;
		   }
		   
		   // Call the late-extended getPname() function
		   var pname = xigua.getPname();
		   alert(pname);

			// Extend String with a function
		   String.prototype.suiyi = function(){
			   alert("This is a function that extends the String type called suiyi.");
		   }
		   
		   "abc".suiyi();
		   
		</script>
	</body>
</html>


<!--
	javaHow languages define classes，How to create an object？（strong type）
		public class User{
			private String username;
			private String password;
			
			public User(){
				
			}
			
			public User(String username,String password){
				 = username;
				 = password;
			}
			
		}
		
		User user = new User();
		User user = new User("lisi","123");
		
	JSHow languages define classes，How to create an object？（weak type）
		User = function(username,password){
			 = username;
			 = password;
		}
		
		var u = new User();
		var u = new User("zhangsan");
		var u = new User("zhangsan","123");
-->

What is the difference between the three values NaN undefined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>null NaN undefined What is the difference between these three values?</title>
	</head>
	<body>
		<script type="text/javascript">
			
			// null NaN undefined Data type inconsistency.
			alert(typeof null); // "object"
			alert(typeof NaN); // "number"
			alert(typeof undefined); // "undefined"
			
			// null and undefined are equivalent.
			alert(null == NaN); // false
			alert(null == undefined); // true
			alert(undefined == NaN); // false
		
			
			
			// There are two special operators in JS.
			// == (equivalence operator: only determine if values are equal)
			// ==== (equality operator: determines both whether the values are equal and whether the data types are equal)
			alert(null === NaN); // false
			alert(null === undefined); // false
			alert(undefined === NaN); // false
			
			// == is an equivalence operator
			alert(1 == true); // true
			alert(1 === true); // false
			
		</script>

	</body>
</html>

The common events and two ways to register events for the

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS common events</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
Common events in JS:

blur loses focus
focus

click mouse click
dblclick Double mouse click (doubleclick)

keydown Keyboard down
keyup Keyboard up

mousedown Mouse down
mouseover Mouse over
mousemove Mouse move
mouseout mouseout
mouseup mouseup

reset Form reset
submit Submit

change The selected item in the drop-down list is changed, or the content of the text box is changed.
select text is selected
load The page is loaded (occurs after all the elements in the entire HTML page have been loaded).

Any event corresponds to an event handle, which is added to the event before on.
The event handle, onXXX, appears in the position of a tag's attribute. (Event handles exist as attributes)
*/
		   
		   // For the current program, the sayHello function is called a callback function.
		   // Characteristics of a callback function: you write the code for the function, but it's not your responsibility to call the function, it's the responsibility of the other program to call the function.
		   function sayHello(){
			   alert("hello js!");
		   }
		   
		   /*
Callback function mechanism is also available in java:
public class MyClass{

public static void main(String[] args){
// The active call to the run() method, standing in for the run() method is called a forward call.
run();
}

// Look at this method from the perspective of the writer of the run method, and call the run method a callback function.
public static void run(){
("run...") ;
}
}
*/
		   
		</script>
		
		
		<! --The first way to register events: using event handles directly in the label -- >!
		<! --
The meaning of the following code is:
Register the sayHello function to the button and wait for the click event to occur before the function is called by the browser.
We call this function a callback function.
-->
		<input type="button" value="hello" onclick="sayHello()"/>
		
		
		
		
		<! --The second way to register an event -->
		
		<input type="button" value="hello2" id="mybtn" />
		
		<input type="button" value="hello3" id="mybtn1" />
		
		<input type="button" value="hello4" id="mybtn2" />
		
		<script type="text/javascript">
		   // The second way to register events is to use pure JS code to accomplish event registration.
		   
		   	function doSome(){
				alert("do some!");
			}
			
		   // The first step: first get the button object (document is all lowercase, built-in object, can be used directly, document on behalf of the entire HTML page)
		   //Through the getElementById(...) method of document object (get element by id), return a button object. method of the document object (get element by id), return a button object
		   var btnObj = document.getElementById("mybtn");
		   
		   // Step 2: Assign a value to the onclick property of the button object (here by means of a function call).
		   // Note: Never add parentheses. doSome() represents the return value, and the function will be executed immediately; doSome represents the function
		   // = doSome();----> If you write it this way, you'll get a popup if you don't press the button.
		   // This line of code registers the callback function doSome to the click event.
		   btnObj.onclick = doSome; 
		   
		   //This concludes the second approach
		   
		   // The above functions can be replaced by anonymous functions.
		   var mybtn1 = document.getElementById("mybtn1");
		   // This function has no name, it's called an anonymous function, and it's also a callback function.
		   // This function is only registered when the page is opened and is not called until the click event occurs.
		   mybtn1.onclick = function(){ 
			   alert("test.........."); 
		   }
		   
		   // One line of code to write the second way (this will be used for the second way in the future)
		   document.getElementById("mybtn2").onclick = function(){
			   alert("test22222222.........");
		   }
		   
		</script>
		
		
	</body>
</html>

Order of code execution (load event)

Preliminary:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS code execution order</title>
	</head>
	
	<! -- When does the load event occur? It occurs after all the elements of the page have been loaded -- >
	<body onload="ready()">
		
		<! --
This is written in the wrong order
When the page opens, it executes from top to bottom.

< script type="text/javascript">
Step 1: Get the node object by id
Returns null (because the element has not been loaded into memory by the time the code is executed here)
var btn = ("btn");

Step 2: Bind an event to the node object.
= function(){
alert("hello js");
}

</script>

<input type="button" value="hello" />

-->

		<! --
How to solve the above problem?
1. Write the button in front
2. Use load event
The ready() function executes after the load event occurs;
When does the load event occur?
The load event fires after the page is loaded (after all elements of the page are loaded).
-->
		<script type="text/javascript">
			
		   function ready(){
			   var btn = document.getElementById("btn");
			   btn.onclick = function(){
			   	alert("hello js");
			   }
		   }
		   
		</script>
		
		<input type="button" value="hello" id="btn" />
		
	</body>
</html>

Eventually: if the sequence is written as above, the second way of event registration is written according to the following code

The code after ---- is written in this way ----

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS code execution order</title>
	</head>
	<body>
		
		<! --
<body οnlοad="ready()"> don't put onload here anymore

<script type="text/javascript">

= ready; not = ready() This is the return value of the function Refer to the second way of registering an event.

function ready(){
var btn = ("btn"); var btn = ("btn"); = function(){
= function(){
alert("hello js");
}
}

</script>

<input type="button" value="hello" />
-->
	
		<! --Simplifying with anonymous functions again-->
		<script type="text/javascript">
			// During page load, the a function is registered to the load event.
			// After the page is loaded, the load event occurs, and the callback function a is executed.
			
			// During the execution of callback function a, it registers function b with the click event.
			// The b function is called and executed when a click event occurs on the node.
			
			window.onload = function(){ // This callback function is called a
				document.getElementById("btn").onclick = function(){ // This callback function is called b
					alert("hello js..........");
				}
			}
			
		</script>
		
		<input type="button" value="hello" id="btn" />
		
	</body>
</html>

Code to set the properties of the node (load event)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					var mytext = document.getElementById("mytext");
					// Any attribute in a node object that has a "."
					mytext.type = "checkbox";
				}
			}
		</script>
		
		<! --
How do I change a text box to a checkbox?
I.e. change text to checkbox
First add ids to the textbox and button, then look at the code above
-->
		<input type="text" id="mytext"/>
		
		<input type="button" value="Changing a text box to a check box" id="btn"/>
		
		<! --Summary: a node can have any attribute: node's id.attribute = "..." to set -- >.
		
	</body>
</html>

Code to capture the enter key (keydown event)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS code to capture the enter key</title>
	</head>
	<body>
		<! --
What do you mean by capturing the enter key?
Sometimes in a web page, the user fills in the information and instead of clicking on the login button, he presses the enter key (pressing enter also logs him in)
How to capture this enter key?
To capture the enter key in the textbox/password box, use the keydown event
-->
		<script type="text/javascript">
			window.onload = function(){
				var usernameElt = document.getElementById("username");
				/*
Pressing a random key on the keyboard triggers the keydown event:
= function(){
alert(111);
}
*/
			  
				/*
Our task is: to get the key pressed by the user, and each key on the keyboard has a corresponding key value, i.e., to get the value of the key
The Enter key has a value of 13; the ESC key has a value of 27.
In the browser, when the keydown event occurs, the browser will be the current event object (keydown event object) as a formal parameter passed to the following function, to call the following callback function.
event is just a formal parameter name, write a/b/c... It's fine to write a/b/c..., but for the sake of program readability, it's better to write event
= function(event){}

When an event occurs, the browser creates a new current event object and calls the callback function (passing the current event object to the function's formal parameter).

= function(){ alert(111); }---> will new the current event object to pass to the callback function, but there is no formal parameter accepted

= function(a){ alert(a); } [object KeyboardEvent] this is the current event object

= function(a,b){ alert(b); } undefined because the current object is passed to a, b has nothing

= function(a,b,c){ alert(c); } undefined


= function(event){
//Get the key value of Enter key is 13; ESC key is 27.
// For Keyboard Event Objects, there is a keyCode property to get the key value.
alert(); }
}
*/alert(); }
			    
				usernameElt.onkeydown = function(event){
				  if(event.keyCode === 13){
					  alert("Validation in progress ....");
				  }
			    }	
				
			}
			
		</script>
		
		<input type="text" id="username"/>
		
	</body>
</html>

The void operator of the

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS's void operator</title>
	</head>
	<body>
		
		<! --JS has a lot of operators, just talk about void -- >
page top
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		<! --Implement a function that preserves the style of a hyperlink while executing a piece of JS code when the user clicks on the hyperlink, but the page can't jump yet -->.
		<! --

<a href="..." οnclick="('test code')"> Both retain the style of the hyperlink, while the user clicks on the hyperlink to execute a piece of JS code, but the page can not jump yet. </a>.
In the above code, the page jumps to... What is written
href="" stands for the current path, it will jump to the current page
To prevent the page from jumping, you need to make the ... What's written disappears

Method: Using the void() operator
Syntax of the void operator:
void(expression)
Principle of operation: executes the expression, but does not return any result.

But writing it like this: href="void(0)" doesn't work either, it skips over void(0) as if it were some path.
Write it like this:
href="javascript:void(0)"
where javascript: is used to tell the browser that a piece of JS code follows.
The javascript: cannot be omitted in the following program.

Note: void (what is written here is not unique, but something/expression must be written)

href="javascript:void(0)" After writing this, the page will not jump, because void(expression) will not return any result after executing the expression.

-->
		
		<a href="javascript:void(0)" onclick="('test code')">Both retain the style of the hyperlink, while the user clicks on the hyperlink to execute a piece of JS code, but the page can not jump.</a>


		<br><br><br>
		
	</body>
</html>

Mouse over a hyperlink and sometimes you'll see javascript:void(0) in the bottom left corner

在这里插入图片描述

control statements and JS arrays.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS control statements</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
JS control statements:
1, if
2, switch

3, while
4, do ... while...
5, for loop

6、break
7、continue

8, for...in statement (understand)
9, with statement (understand)

The first 7 and java use the same, only the 8th and 9th
*/
		   
		   // Creating JS arrays (JS arrays can be any type of element. The number of elements in the array is arbitrary, and the size of the array will be expanded automatically).
		   var arr = [false,true,1,2,"abc",3.14];  
		   
		   // Traverse the array for loop
		   for(var i = 0; i < arr.length; i++){
			   alert(arr[i]);
		   }
		   
		   
		   
		   
		   // First use of the for.in statement: with arrays
		   for(var i in arr){//i is the subscript of an element of the arr array.
			   //alert(i); output 0 1 2 3 4 5
			   alert(arr[i]); // Output array elements
		   }
		 
		   
		   // The second use of the for...in statement: you can iterate through the properties of an object.
		   //User class
		   User = function(username,password){
			   this.username = username;
			   this.password = password;
		   }
		   
		   var u = new User("Zhang San", "444");
		   alert(u.username + "," + u.password);//Outputs URL,444
		   alert(u["username"] + "," + u["password"]);//Outputs URL,444
		   
		   //Property name-->shuXingMing
		   for(var shuXingMing in u){
			   
			   //alert(shuXingMing); output username password
			   //alert(typeof shuXingMing); output string string
			   
			   //alert(); output undefined undefined
			   alert(u[shuXingMing]);//shuXingMing is a string, no need to add double quotes, output: Zhang San 444
		   }
		   
		   
		   Usage of //with
		   /*
alert();
alert();
Both have u. Using with, you can leave out u as follows:
*/
		  
		   with(u){
			   alert(username + "," + password);
		   }
		   
		</script>
		
	</body>
</html>

<!--
javaarrays：
	public class Test{
		public static void main(String[] args){
			int[] arr = {1,2,3,4,5,6};
			int[] arr2 = new int[5]; // tantamount：int[] arr2 = {0,0,0,0,0};
			String[] arr3 = {"a","b","c"};
			String[] arr4 = new String[3]; // tantamount：String[] arr4 = {null,null,null};
		}
	}
-->

Includes three pieces: ECMAScript, DOM, BOM

ECMAScript: The Core Syntax of JavaScript

DOM Programming: Processing Web Content
It is through JavaScript to manipulate the dom node in HTML, DOM has a specification, the specification is developed by W3C.
Document Object Model


BOM Programming: It is the operation of the browser itself.
Browser Object Model
For example: forward, backward, address bar, close window, pop-up window, etc.
As browsers are made by different manufacturers, there is a lack of specification for all BOMs, and generally there is only one default industry specification.


JavaScript includes three major blocks:
ECMAScript: the core syntax of JS (ES specification / ECMA-262 standard)

DOM: Document Object Model (Document Object Model: the process of adding, deleting and changing nodes in the web page)
HTML documents are treated as a DOM tree.
An HTML document has a head and a body, and in the head and body there are different tags labeled with different ids.

The //DOM programming representation of an element object is obtained by its id
var domObj = ("id");

BOM: Browser Object Model (BOM)
Close the browser window, open a new browser window, back, forward, browser address bar on the address, etc.
are all BOM programming.

What is the difference and connection between DOM and BOM?
The top level object of BOM is: window
The top-level object of DOM is: document.
Actually BOM includes DOM! (The web page is on the browser)

<script type="text/javascript">;
= function(){

//actually ("btn") is ("btn")
// omitted window.----> BOM is including DOM
var btnElt = ("btn");
alert(btnElt); // object HTMLInputElement

}
</script>

<input type="button" value="hello" />

在这里插入图片描述

Programming - Getting the value of a text box

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM Programming - Getting the value of a text box</title>
	</head>
	<body>

		<! --Click the button to get what's filled in the text box -- >!
		<script type="text/javascript">
			window.onload = function(){
				var btnElt = document.getElementById("btn");// Get the btn node
				btnElt.onclick = function(){

					//.value property to get the content of the text box
					var usernameElt = document.getElementById("username");// Get the username node
					var username = usernameElt.value;//Get the value of the text box
					alert(username);
				
					// One line in place of the three above
					//alert(("username").value);
				 
					//.value="..." You can also change its value
					//("username").value = "zhangsan";
			  }
		  }
		</script>
		
		<input type="text" id="username" />
		<input type="button" value="Get the value of the text box" id="btn"/> 


		<hr>

		
		<! --Case: There are two text boxes, and clicking on the button of the first text box can set the content of the first text box to the second text box -->.
		<script type="text/javascript">
		
		window.onload = function(){
			document.getElementById("btn1").onclick = function(){
				document.getElementById("text2").value = document.getElementById("text1").value;
			}
		}
		
		</script>
		
		<input type="text" id="text1"> <! --First text box-->.
		<input type="button" value="Get the value of text1 and set it to text2." id="btn1"> <! --First button-->!
		<br>
		<input type="text" id="text2"> <! -- second text box -- >!
		
		
		<! --blur event: loss of focus event -- >.
		<! --οnblur="Execute this code when focus is lost" Focus is the blinking cursor -->.
		<! --This in the following code represents the current input node object, which is the value attribute of this node object. -->
		<! --The following kind also gets the value of the text box -->!
		<input type="text" onblur="alert()" />
				
	</body>
</html>

Programming-innerHTML and innerText manipulate divs and spans

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM Programming - innerHTML and innerText manipulation div and span</title>
		
		<! --Use the id selector to style the div first -- >!
		<style type="text/css">
			#div1{
				background-color: aquamarine;
				width: 300px;
				height: 300px;
				border: 1px black solid;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>

	</head>
	<body>
		
		<! --
What is the difference between innerText and innerHTML attributes?
Similarity: both set the content inside the element.
Difference:
innerHTML interprets and executes the "string" that follows as a piece of HTML code.
innerText, even if it is followed by a piece of HTML code, just treats it as a normal string.
-->
		
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					// Set the content of the div
					
					// The first step: get div object
					var divElt = document.getElementById("div1");
					
					// Step 2: Use innerHTML attribute/innerText attribute to set the content inside the element.
					
					/*
= "Write stuff/HTML code ---> execute and show the effect";
= "Regardless of whether the writing is HTML code or not, it is just treated as plain text and not executed and shown to effect";
*/
					//  = "fjdkslajfkdlsajkfldsjaklfds";
					divElt.innerHTML = "<font color='red'> The username cannot be empty! </font>";
					// = "<font color='red'> Username cannot be empty! </font>";;
				}
			}
		</script>
		
		
		<! --Requirement: click button to set div's content -->.
		<input type="button" value="Setting the content in a div" id="btn" />
		
		<! --
<div > write stuff/JS code </div> This way you can set the content of the div directly
<div > In effect, the above kind of writing is writing the information here </div>
-->
		<div id="div1"></div>
		
	</body>
</html>

Programming - About Regular Expressions

Baidu if you don't know how to write a regular expression

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM Programming - About Regular Expressions</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
1. What is a regular expression, what is it?
Regular expression: Regular Expression
Regular expression is mainly used in string format matching.

2. Regular expression is actually a separate discipline, supported in the Java language, C language is also supported, javascript is also supported.
Most programming languages support regular expressions. Regular expressions were originally used in medicine to represent neural symbols and so on. Nowadays it is most used
is in the field of computer programming, as string format matching. This includes things like searching.

3. regular expression, for our javascript programming, master what content?
First: common regular expression symbols to recognize.
Second: simple regular expression to write.
Third: other people write regular expressions to be able to read.
Fourth: in javascript, how to create a regular expression object! (new object)
Fifth: in javascript, regular expression objects have what methods! (tune method)
Sixth: to be able to quickly from the network to find the regular expression they need. And test its validity.

4. common regular expression notation?
.  Matches any character except the newline character
\w matches letters or numbers or underscores or Chinese characters
\s matches any blank character
\d Matches numbers
\b matches the beginning or end of a word
^ matches the beginning of a string
$ matches the end of a string

// Match the number of times:
* Repeat zero or more times
+ Repeat one or more times
?     Repeat zero or more times
{n} Repeat n times
{n,} n or more times.
{n,m} n to m times.

// Match antonyms:
\W Match any character that is not a letter, number, underscore, or kanji.
\S Match any character that is not a blank character.
\D Match any character that is not a number
\B Match any character that is not the beginning or end of a word.
[^x] matches any character except x
[^aeiou] matches any character except the letters aeiou

The parentheses () in regular expressions have higher priority.
[1-9] Any number from 1 to 9 (the number of times is 1)
[A-Za-z0-9] Any 1 character from A-Z a-z 0-9.
[A-Za-z0-9-] Indicates any 1 character in A-Z, a-z, 0-9, - all of the above (A-Z is the interval, the last - is the minus sign)

| means or

5. Simple regular expressions to be able to write
QQ number of regular expressions: ^[1-9][0-9]{4,}$

6. others to write the regular expression to be able to read?
Email e-mail address regular: ^\w+([-+.] \w+)*@\w+([-.] \w+)*\. \w+([-.] \w+)*$
^
\w+
([-+.] \w+)*
@
\w+
([-.] \w+)*
\..
\w+
([-.] \w+)*
$

7. How to create a regular expression object and how to call the methods of a regular expression object?
The first way to create it:
var regExp = /regular-expression/[flags];
The second way of creation: using the built-in support class RegExp
var regExp = new RegExp("RegularExpression",["flags"]);

About flags (flags may or may not be present):
g: global match
i: ignore case matching
m: multi-line search matching (m was not supported until after the ES specification was developed)
When preceded by a regular expression, m cannot be used. Only when preceded by a normal string, m can be used.

The test() method of the regular expression object?
true / false = regular-expression-object.test(user-filled string).
true : String format matching succeeded
false: String format matching failed
*/
		   
		   
			window.onload = function(){
			   // Bind click to the button
			   document.getElementById("btn").onclick = function(){
				   var email = document.getElementById("email").value;
				   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				   var ok = emailRegExp.test(email);
				   if(ok){
						// Legal
						document.getElementById("emailError").innerText = "Legitimate e-mail address.";
				   }else{
					   // Illegal
					   document.getElementById("emailError").innerText = "Illegal e-mail address.";
				   }
			   }
			   
			   
			   // Make the span message disappear when the textbox gets focus.
			   //bind focus to the text box (get focus)
			   document.getElementById("email").onfocus = function(){
				   document.getElementById("emailError").innerText = "";
			   }
			   
		   }
		   
		</script>
		
		<! --Click the button to verify that the e-mail address entered is in the correct format -->.
		<input type="text" id="email" />
		
		<! --Use span to output a message prompting whether the mailbox is legitimate -->.
		<span id="emailError" style="color: red; font-size: 12px;"></span>
		
		<br>
		<input type="button" value="Verify Email" id="btn" />
	
	</body>
</html>

在这里插入图片描述

Programming - trim function to remove whitespace before and after the string

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Remove whitespace from strings trim</title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					// Get username
					var username = document.getElementById("username").value;
					// Remove whitespace before and after (this is a function of the string String)
					username = username.trim();
					// Testing
					alert("--->" + username + "<----");
				}
			}
			
			
			// Low versions of Internet Explorer do not support the trim() function for strings.
			// You can extend the String class yourself with a brand new trim() function using the prototype attribute!
			String.prototype.trim = function(){
				/*
alert("Extend the trim method");;
After you extend the function, the trim you use later is your own extended function, and you no longer use the original trim function.
I.e. you can use the prototype attribute to rewrite code/functions that have already been written.
*/
			   
			    /*
Remove whitespace from the current string
The this in the current method represents the current string.
Use the replace method of the String class:
replace(xxx,yyyy);----> replace xxx with yyyy
(leading blank,"").replace(trailing blank,"");
Use regular expressions for leading and trailing blanks:
Regular expression writing: /regular-expression/
Preceding whitespace: /^\s+/
Backspace: /\s+$/

(/^\s+/,"").replace(/\s+$/,"");
Use replace only once: ///.replace(/\s+$/,"").
/regular-expressions/flags
flags=g global match
/^\s+ or \s+$/g
*/
				return this.replace(/^\s+|\s+$/g, "");
			}
		
		</script>
		
		<! --Requirement: when pressing the button, get the username and remove the whitespace before and after -- >.
		<input type="text" id="username" />
		<input type="button" value="Get User Name" id="btn" />
	
	</body>
</html>

Programming-Form Validation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Form Validation</title>
		
		<! -- Step 3: Set the style of the span: tag selector -- >!
		<style type="text/css">
			span {
				color: red;
				font-size: 12px;
			}
		</style>

	</head>
	<body>
		
		<! --
Requirements: Form Validation
(1) The username must not be empty
(2) The user name must be between 6-14 digits
(3) User name can only have numbers and letters, can not contain other symbols (regular expression)
(4) Password and confirmation of the same password, e-mail address is legitimate.
(5) unified loss of focus verification
(6) error message uniformly prompted in the span tag, and requires font size 12, red.
(7) the text box to get focus again, clear the error message, if the data in the text box is not legal requirements to clear the value of the text box.
(8) the final form of all items are legal before submission
-->
		
		<! --The form validation is not rigorous enough, some features are not implemented -->.
		
		<script type="text/javascript">
			// Step 4: Harmonize loss of focus validation
			// Step 5: Username
			window.onload = function(){
				
			   // Get the username span tag.
			   var usernameErrorSpan = document.getElementById("usernameError");// Step 6
			   
			   var usernameElt = document.getElementById("username");
			   // Bind the blur event to the username textbox.
			   usernameElt.onblur = function(){
				   // Get username
				   var username = usernameElt.value;
				   // Remove whitespace before and after
				   username = username.trim();
				   // Determine if the username is empty
				   /*
First way:
if(username){
// means username is not an empty string
alert("username = " + username);
}else{
// means username is the empty string
alert("username is the empty string"); }else{ // means username is empty.
}
*/
				   // The second way: if( == 0){}
				   // Third way.
				   if(username === ""){
					   // Username is empty
					   usernameErrorSpan.innerText = "User name cannot be empty.";
				   }else{
					   // Username is not empty (step 8)
					   // Continue judging length [6-14]
					   if(username.length < 6 || username.length > 14){
						   // Illegal username length
						   usernameErrorSpan.innerText = "The username must be between [6-14] in length.";
					   }else{
						   // Username length is legal
						   // Continue to determine if it contains special symbols
						   var regExp = /^[A-Za-z0-9]+$/;
						   var ok = regExp.test(username);
						   if(ok){
							   // The username is finally legitimate
						   }else{
							   // Usernames with special symbols
							   usernameErrorSpan.innerText = "User names can only consist of numbers and letters.";
						   }
					   }

				   }
			   }
			   
			   /*
Step Seven:
1. text box input value error, delete valuie
2. Cursor back to the text box, span error message disappears
*/
			   // Bind the get-focus event to the username textbox.
			   usernameElt.onfocus = function(){
				   // Clear illegal values
				   if(usernameErrorSpan.innerText != ""){
					   usernameElt.value = "";   
				   }
				   
				   // Clear the span
				   usernameErrorSpan.innerText = "";
			   }
			   
			   
		
			   
			   // Get the span tag for the password error alert (step 10)
			   var pwdErrorSpan = document.getElementById("pwdError");
			   
			   // Step 9: Password and Confirm Password
			   // Get the confirmation box object
			   var userpwd2Elt = document.getElementById("userpwd2");
			   // Bind the blur event
			   userpwd2Elt.onblur = function(){
				   // Get Password and Confirm Password
				   var userpwdElt = document.getElementById("userpwd");
				   var userpwd = userpwdElt.value;
				   var userpwd2 = userpwd2Elt.value;
				   if(userpwd != userpwd2){
					   // Inconsistent passwords (step 10)
					   pwdErrorSpan.innerText = "The passwords don't match.";
				   }else{
					   // Consistent passwords
				   }
			   }
			   
			   // Step 11 (same as step 7)
			   // Bind the focus event
			   userpwd2Elt.onfocus = function(){
				   if(pwdErrorSpan.innerText != ""){
					   userpwd2Elt.value = "";
				   }
				   pwdErrorSpan.innerText = "";
			   }
			   
			   
			   
			   // Get the email span (step 13)
			   var emailSpan = document.getElementById("emailError");
			   
			   // Step 12.
			   // Bind the email to the blur event.
			   var emailElt = document.getElementById("email");
			   emailElt.onblur = function(){
				   // Get email
				   var email = emailElt.value;
				   
				   //email can be null/blank before and after it is left blank
				   
				   // Write the regularity of the email
				   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				   var ok = emailRegExp.test(email);
				   if(ok){
					   // Legal
				   }else{
					   // Illegal (step 13)
					   emailSpan.innerText = "Illegal e-mail address.";
				   }
			   }
			   
			   // Step 14: same as steps 7 and 11
			   // Bind focus to emailElt.
			   emailElt.onfocus = function(){
				   if(emailSpan.innerText != ""){
					   emailElt.value = "";
				   }
				   emailSpan.innerText = "";
			   }
			   
			   
			   //Step 15: All items in the final form are legal before submission
			   //Step 15.2: Bind mouse click event to submit button
			   var submitBtnElt = document.getElementById("submitBtn");
			   submitBtn.onclick = function(){
				   /*
Step 15 of 5.
The following if(all items of the form are legal){

}
All items on the form are legal How do I write this?
None of the three span error messages
However, if you don't write anything at the beginning, all three span error messages will be missing.
Solution:
First click on the text box, i.e. focus; then make the cursor disappear, i.e. blur;
This will show the span error message: can't be empty!
There is a corresponding method to replace the above manual operation:
.focus()
.blur()
*/
				   // Trigger a blur for username blur for userpwd2 blur for email blur
				   // No manual work, use pure JS code to trigger events.
				   usernameElt.focus();
				   usernameElt.blur();
				   
				   userpwd2Elt.focus();
				   userpwd2Elt.blur();
				   
				   emailElt.focus();
				   emailElt.blur();
				   
				   
				   // When all form items are legal, submit the form (step 15.3).
				   if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
					   // Step 15, step 4, submit the form, use the submit method of the form object, add an id to the form tag
					   
					   // Get the form object
					   var userFormElt = document.getElementById("userForm");
					   
					   // You can set the action here, or not.
					   userFormElt.action = "http://localhost:8080/jd/save";
					   
					   // Submit the form
					   userFormElt.submit();
				   }
			   }
			}
			
		</script>
		
		<! -- Step 1: First draw a form: this form submission should use post, here for detection, so use get -- >.
		<! --Step 2: Use span to write the error message after the box, without using a div, which occupies a separate line -->.
		
		<! --
Step 15 4 modified this form
< form action= "http://localhost:8080/jd/save" method="get">
-->
		<form id="userForm" method="get">

user ID<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
			<br>
cryptographic<input type="password" name="userpwd" id="userpwd"/>
			<br>
Confirm Password<input type="password" id="userpwd2" /><! --No submission required, name is not required -->.<span id="pwdError"></span><br>
			<br>
inbox<input type="text" name="email" id="email" /><span id="emailError"></span><br>
			<br>
			
			<! --
Step 15 1: First change the button submit with submit function to button
But this will not be able to submit, then add the id to the button and install the mouse click event
< input type="submit" value="register" />
-->
		    <input type="button" value="enrollment" id="submitBtn"/> 
			<input type="reset" value="reprovision" />

		</form>
		
		
	</body>
</html>

Programming - Checkbox Selection and Deselection

View W3School offline manual.chm
JavaScript--->HTML DOM--->DOM Reference--->HTML Objects---> <input> checkbox

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Checking and unchecking checkboxes in full</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
= function(){
var firstChk = ("firstChk");
= function(){

Get the checked state of the first checkbox (the checkbox object is a checkbox object)
The checkbox object has one property: checked
= true; the checkbox is checked
= false; the checkbox is unchecked

alert();


//(To get the remaining three checkboxes) get all elements according to name
//name the same, the return is the same name of the three elements, this time the return is an array / elements
var aihaos = ("aihao"); if( == true){
if( == true){
//select all
for(var i= 0; i <; i++){
aihaos[i].checked = true;
}
}else{
//cancel full selection
for(var i= 0; i <; i++){
aihaos[i].checked = false;
}
}
}
}
*/
		   
		   // Simplify the above code
		   	window.onload = function(){
				
				var aihaos = document.getElementsByName("aihao");//get all checkboxes except the first one
				var firstChk = document.getElementById("firstChk");//Get the first checkbox
				firstChk.onclick = function(){//Execute the following function when the first checkbox is clicked
					   for(var i= 0; i <aihaos.length; i++){//All checkboxes are checked.
						   aihaos[i].checked = firstChk.checked;
					   }
				}
				
				
				
				// Another requirement: when all three checkboxes below are checked, the first checkbox is automatically checked.
				//i.e. the first checkbox is checked when the total number and the selected number are equal.

				var all = aihaos.length;//Get the number of all checkboxes (except the first one)
				
				// Iterate over the array of aihaos obtained above.
				for(var i = 0; i < aihaos.length; i++){
					// The first loop registers the click event and binds the callback function to each checkbox.
					//assume (office)<input type="checkbox" name="aihao" value="smoke" οnclick="alert(callback function)" />cigarette smoking
					// Then execute the callback function when a checkbox is selected.
					aihaos[i].onclick = function(){
						var checkedCount = 0;// Record the number of checkboxes that are checked
						
						// The second loop is to determine how many checkboxes are checked.
						for(var i = 0; i < aihaos.length; i++){
							if(aihaos[i].checked == true){
								checkedCount++;
							}
						}
						
						/*
if(all == checkedCount){
= true; }else{if(all == checkedCount){
}else{
= false; }else{
}
Simplify this code:
*/
						firstChk.checked = (all == checkedCount);

					}
				}
				
		    }
			
		</script>
		
		<! --Requirement: click the first checkbox, the following three checkboxes are all selected; do not click, uncheck all -->!
		<input type="checkbox" id="firstChk"/>
		<br>
		<input type="checkbox" name="aihao" value="smoke" />cigarette smoking
<br>
		<input type="checkbox" name="aihao" value="drink" />drink (alcohol)
<br>
		<input type="checkbox" name="aihao" value="tt" />scald

</body>
</html>

Programming - Get the value of the selected item in the drop-down list.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Get the value of the selected item in the drop-down list.</title>
	</head>
	<body>
		
		<! --
Requirement: If Hebei Province is selected, get its value 001.
Using the change event (drop-down list selection changes, or text box content changes), add the onchange event handle

The first way to write it:
<select οnchange="alert()">
<option value=""> --please select province--</option>
<option value="001"> Hebei Province</option>
<option value="002"> Henan Province</option>
<option value="003">Shandong Province</option> <option value="002">Henan Province</option; <option value="002">Hebei Province</option
<option value="004"> Shanxi Province</option>
</select>
-->
		
		<! --The second way of writing -->
		
		<script type="text/javascript">
			window.onload = function(){
				var provinceListElt = document.getElementById("provinceList");
				provinceListElt.onchange = function(){
					// Get the value of the selected item
					alert(provinceListElt.value);
				}
			}
		</script>
		
		<select id="provinceList">
			<option value="">-Please select province-</option>
			<option value="001">Hebei Province</option>
			<option value="002">Henan</option>
			<option value="003">Shandong Province</option>
			<option value="004">Shanxi Province</option>
		</select>
		
	</body>
</html>

<! --
What it actually does is: when selecting a region, based on the drop-down list, select the province first, then the city within the province... (this feature is not currently possible)
The relationship between province and city is 1-to-many
Province table t_province
id pcode pname
----------------------------
1 001 Hebei Province
2 002 Henan Province
3 003 Shandong Province
4 004 Shanxi Province

City table t_city
id ccode cname pcode(fk)
----------------------------------------------
1 101 Shijiazhuang 001
2 102 Baoding 001
3 103 Xingtai 001
4 104 Chengde 001
5 105 Zhangjiakou 001
6 106 Handan 001
7 107 Hengshui 001

The front-end user selects the assumption of Hebei Province, then you must get the pcode of Hebei Province, get 001
Then send 001 to submit to the server, the server bottom executes a SQL statement:
select * from t_city where pcode = '001';

Returns a List collection, List<City> cityList.

cityList responds to the browser, which is parsing the cityList collection into a new drop-down list.
-->

28. Programming - display web page clock and JS built-in objects (built-in support classes) Date

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Show Web Clock</title>
	</head>
	<body>
		
		<script type="text/javascript">
			// first learn JS built-in support class: Date class, used to get the time/date //
			//Get the current time of the system
			var nowTime = new Date();
			// Output the current time of the system
			//(nowTime);Sat Feb 19 2022 15:44:03 GMT+0800 (CST)
			// The last output format is not understandable, another way to convert the date format with the local language environment.
			nowTime = nowTime.toLocaleString();
		    document.write(nowTime);// 2022/2/19 15:45:15
			
			//javascript line breaks can't be written directly inside <br>
		    document.write("<br>");
			
			//If you are still not satisfied with the above format. You can get the year, month and day, and set your own format.
		    var t = new Date();
			//If getYear() is used, then only 22 years will appear in 2022.
		    var year = t.getFullYear();	// Returns year information in full format.
		    var month = t.getMonth(); // Months are: 0-11
			// var dayOfWeek = (); get day of week (0-6)
		    var day = t.getDate(); // Get day information.
		    document.write(year + "Year." + (month+1) + "Moon." + day + "Day.");
			
			document.write("<br>");
			
		   /*
Focus:How to get the number of milliseconds? (Total number of milliseconds from January 1, 1970 00:00:00 000 to the current system time)
var times = ();
(times);
Milliseconds are usually used as timestamps. (timestamp)
*/
		   document.write(new Date().getTime());
		   
		</script>
		
		
		
		
		<script type="text/javascript">
			
			function displayTime(){
				var time = new Date();
				var strTime = time.toLocaleString();
				document.getElementById("timeDiv").innerHTML = strTime;
			}


			
			/*
The (code,millisec) method calls a function or computes an expression at the specified period (in milliseconds).
code:The function to be called or the string of code to be executed.
millisec: the time in milliseconds between periodic executions or calls to code.
return value: a value that can be passed to () to cancel the periodic execution of the code.
The setInterval() method will keep calling the function until () is called or the window is closed.
*/	
				
			// call displayTime() function every 1 second
			function start(){
				// Starting at the end of this line of code, the displayTime() function will be called every 1000 milliseconds without interruption.
				v = window.setInterval("displayTime()", 1000);	
			}
			
			function stop(){
				window.clearInterval(v);
			}
			
		</script>
		
		<br>
		
		<input type="button" value="Display system time" onclick="start();"/>
		<input type="button" value="System time stop" onclick="stop();" />
		
		<! --Display the time on the div as soon as the button is clicked-->!
		<div id="timeDiv"></div>

	</body>
</html>

28.2. Built-in support for class Array

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Built-in support for class Array</title>
	</head>
	<body>
		
		<script type="text/javascript">
			// Create an array of length 0.
// Create an array of length 0
var arr = []; alert(); 0
alert(); 0

// Arbitrary data types
var arr2 = [1,2,3,false, "abc",3.14]; 6 // Create an array of length 0.
alert(); 6

// Does the subscript go out of bounds?
arr2[7] = "test"; // No, auto-expansion.

("<br>");

// Iterate over
for(var i = 0; i < ; i++){
(arr2[i] + "<br>");
}


// Another way to create an object of an array
var a = new Array(); alert(); 0
alert(); 0

var a2 = new Array(3); // 3 is the length.
alert(); 3

var a3 = new Array(3,2); // 3,2 are the elements in the array, not the length. alert(); // 2 is the length.
alert(); // 2
*/alert(); // 2
		   
			
			
		   var a = [1,2,3,9];
		   var str = a.join("-");
		   alert(str); // "1-2-3-9"
		   
		   // add an element to the end of the array (length of the array + 1)
		   a.push(10);
		   alert(a.join("-"));//1-2-3-9-10
		   
		   // Eject the end of the array (length of the array - 1)
		   var endElt = a.pop();
		   alert(endElt); //10
		   alert(a.join("-")); //1-2-3-9
		   
		   // Note: arrays in JS can automatically emulate stack data structures: LIFO, FIFO.
		   // push stack
		   // pop stack
		   
		   // Invert the array.
		   a.reverse();
		   alert(a.join("-"));//9-3-2-1

		</script>
		
	</body>
</html>

29. Learn to use your browser's F12

Programming-Window object's open and close methods

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM Programming-open and close</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
1, BOM programming, window object is the top-level object, representing the browser window.
2, window has open and close methods to open and close the window.
()
()
*/   
		</script>
		
		<input type="button" value="Open Baidu (new window)" onclick="('');" />
		
		<input type="button" value="Open Baidu (current window)" onclick="('', '_self');" />
		
		<input type="button" value="Open Baidu (new window)" onclick="('', '_blank');" />
		
		<input type="button" value="Open Baidu (parent window)" onclick="('', '_parent');" />
		
		<input type="button" value="Open Baidu (top window)" onclick="('', '_top');" />
		
		<input type="button" value="Open Form Validation"  onclick="('002-BOM Programming-open and')"/>

		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM Programming-open and close</title>
	</head>
	<body>
		<! --interacts with the last line of code in the program above -- >
		<input type="button" value="Close the current window" onclick="();" />
	</body>
</html>

Programming - Popup Message Box and Confirmation Box

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Pop-up message box and confirmation box</title>
	</head>
	<body>
		<! --
() popup message box
() pops up a confirmation box
-->
		
		<script type="text/javascript">
			function del(){
				/*
Confirmation box
var ok = ("Pro, confirm delete data?") ;
//alert(ok);
if(ok){
alert("delete data ....") ;
}
*/
			    if(window.confirm("Pro, confirm deletion of data?")){
			    	alert("delete data ....");
			    }
			}
		</script>
		
		<! --Delete operations are always preceded by first getting confirmation from the user. -->
		<input type="button" value="Pop-up confirmation box (delete)" onclick="del();" />
		
		<input type="button" value="pop-up message box" onclick="('Message box!')" />
	
		
	</body>
</html>

Programming - Setting the current window as the top level window

在这里插入图片描述

004-Current-Window-Set-Top-Window.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Set the current window as the top-level window</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
If this current window is not the top-level window, set the current window as the top-level window
004 is the top-level window, and a page 005 is nested in 004, set 005 as the top-level window
*/	
		</script>
		
		<! --
How do I get a 005 page nested within a 004 page?
Using an inline frame iframe
-->
		<iframe src="" width="500px" height="500px"></iframe>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>child-window</title>
	</head>
	<body>
Page 005
<script type="text/javascript">
			//If the current window is not the top window, set the current window as the top window.
			// Set page 005 as the top-level window with the button
			
			function setTop(){
				//window stands for the current window, the current browser page 005.
				// is the top window of the current window 004 window
				//Indicates the current window, window 005.
				if(window.top != window.self){
					//Set the location address of the top-level window to address 005
					window.top.location = window.self.location;
				}
			}
		</script>
		
		<input type="button" value="If the current window is not the top window, set the current window as the top window." onclick="setTop()" />
	</body>
</html>

在这里插入图片描述

Programming-window's history object (class)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>006-history object (class)</title>
	</head>
	<body>
		<! --Demonstrate the forward and back buttons on your browser -->!
		
		<a href="">Page 007</a>
		
		<! --Forward, from page 006, to page 007;
First click the link above to reach page 007, then click the back button on page 007 to return to page 006, then press the forward button to reach page 007
-->
		<input type="button" value="advance" onclick="(1)" />
	
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>007-history object (class)</title>
	</head>
	<body>
		007 Page!
		
		<! --
Demonstrate the back button on your browser to go back from page 007 to page 006
Two methods:
()
(-1)
-->
		
		<! --Run 006, click on the 007 link to reach the 007 page, click on the back button to return to the 006 page -->!
		<input type="button" value="be back" onclick="()"/>
		
		<input type="button" value="be back" onclick="(-1)"/>
		
	</body>
</html>

在这里插入图片描述

Programming - Setting the URL on the browser address bar

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Setting the URL on the browser's address bar</title>
	</head>
	<body>
		
		<script type="text/javascript">
			function goBaidu(){
				// First get the address bar object
				var locationObj = window.location;			
				//Set the URL of the address bar
				locationObj.href = "";
			
				// Write the above two steps together
				// = "";
				
				//href can be omitted
				// = "";
				
				// It's okay to write it like this
				// = "";
				//href can also be omitted
				// = "";
			
			}
		</script>
		
		<input type="button" value="Baidu" onclick="goBaidu()" />
		
	</body>
</html>

<! --
To summarize, what are the ways to send requests to the server through the browser?
1, the submission of the form form (can be get, can also be post)
2, hyperlink (get request) <a href="http://localhost:8080/oa/save?username=zhangsan&password=123"> users can only click on this hyperlink </a>
3, =url;
4,=url;
5, ("url")
6, directly in the browser address bar, enter the URL, and then enter (get request) (this can also be entered manually, the submission of data can also become dynamic.)

All of the above request methods can carry data to the server, only the data submitted through the form is dynamic.
-->

-Introduction

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>001</title>
	</head>
	<body>
		
		<script type="text/javascript">
			/*
1, what is JSON and what is it used for?
JavaScript Object Notation (JavaScript Object Notation), referred to as JSON.(Data Exchange Format)
JSON main role is: a standard data exchange format.
(Currently, JSON is very popular and is used in more than 90% of the systems where system A exchanges data with system B.)
(For example: C language and data exchange between Java)
2, JSON is a standard lightweight data exchange format. Characterized by:
Small size, easy to parse.
3, in the actual development of two data exchange format, the most used, one of which is JSON, the other is XML.
XML volume is large, parsing trouble, but has its advantages: grammatical rigor.
(Usually the bank-related systems for data exchange between the words will use XML.)
4, JSON syntax format:
var jsonObj = {
"PropertyName" : PropertyValue, "PropertyName" : PropertyValue, "PropertyValue" : PropertyValue
"PropertyName" : PropertyValue, "PropertyName" : PropertyValue, "PropertyName" : PropertyValue
"propertyName" : propertyValue, "propertyName" : propertyValue, "propertyName" : propertyValue
"propertyName" : propertyValue, "propertyName" : propertyValue, "propertyName" : propertyValue
....
}.
*/
		   
		   // Create JSON objects (JSON can also be referred to as untyped objects. Lightweight and lightweight. Small size. Easy to parse.)
		    var studentObj = {
				"sno" : "110",
				"sname" : "Zhang San",
				"sex" : "Male."
			};
			
			// Accessing JSON object properties
			alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
			
			
			
			// When you weren't using JSON before, you defined classes, created objects, and accessed object properties.
			Student = function(sno,sname,sex){
				this.sno = sno;
				this.sname = sname;
				this.sex = sex;
			}
			var stu = new Student("111","Li Si.","Male.");
			alert(stu.sno + "," + stu.sname + "," + stu.sex);
			
			
			
			
			// JSON arrays
			var students = [
				//Three JSON objects
				{"sno":"110","sname":"Zhang San","sex":"Male."},
				{"sno":"120","sname":"Li Si.","sex":"Male."},
				{"sno":"130","sname":"Wang Wu","sex":"Male."}
			];
			
			// traversal (JSON parsing is simple, it's all about traversal)
			for(var i = 0; i < students.length; i++){
				var stuObj = students[i];
				alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
			}
			
		</script>

	</body>
</html>

XML Introduction:

<?xml version="1.0" encoding="GBK"?>

<! --
HTML and XML have a father: SGML (Standard Generalized Markup Language.)
HTML does mostly page presentation: so the syntax is loose. It's very casual.
XML mainly does data storage and data description: so the syntax is quite strict.
-->
<students>
	<student sno="110">
		<sname>John Doe</sname>
		<sex>male</sex>
	</student>
	<student sno="120">
		<sname>the fourth child in the family</sname>
		<sex>male</sex>
	</student>
	<student sno="130">
		<sname>Wang May (1905-1975), Mao *'s fifth wife</sname>
		<sex>male</sex>
	</student>
</students>

-Complex JSON objects

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>More complex JSON objects</title>
	</head>
	<body>
		
		<script type="text/javascript">
			var user = {
				"usercode" : 110,
				"username" : "Zhang San",
				"sex" : true,
				"address" : {// The home address address can be a JSON object.
					"city" : "Beijing.",
					"street" : "Daxing District",
					"zipcode" : "12212121",
				},
				"aihao" : ["smoke","drink","tt"] //Hobby is an array
			};
			
			// Name of the visitor and city of residence
			alert(user.username + "reside in." + user.address.city);
			
			/*
Please design your own data in JSON format, this JSON format can describe the information of each student in the whole class, and the total number of people information.
*/
		    var jsonData = {
				"total" : 3,
				"students" : [
					{"name":"zhangsan","birth":"1980-10-20"},
					{"name":"lisi","birth":"1981-10-20"},
					{"name":"wangwu","birth":"1982-10-20"}
				]
			};
			
		</script>
		
	</body>
</html>

The -eval function

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>eval function</title>
	</head>
	<body>
		
		<script type="text/javascript">
			The eval function of the //window object does the following: it interprets and executes the string as a piece of JS code.
		    window.eval("var i = 100;");
		    alert("i = " + i); // i = 100
			
			
			/*
java connect to the database, query the data, the data in the java program to splice into JSON format "string", the json format string response to the browser!
That is, java response to the browser is only a "JSON format string", not a json object.
You can use the eval function to convert a json string into a json object.
*/
		    var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //This is the json "string" sent by the java program.
			window.eval("var jsonObj = " + fromJava);
		   
		    // Accessing json objects
		    alert(jsonObj.name + "," + jsonObj.password); // Fetching data on the front end.
			
			//JSON with eval function, in order to truly realize the back-end and front-end data exchange
			
			
			
		   /*
Interview Question:
In JS: What is the difference between [] and {}?
[] is an array.
{} is JSON.

Arrays in java: int[] arr = {1,2,3,4,5};
Arrays in JS: var arr = [1,2,3,4,5];
JSON: var jsonObj = {"email" : "zhangsan@", "age":25};
*/
		  
		  
		   var json = {
			   "username" : "zhangsan"
		   };
		   
		   // Accessing properties of json objects in JS (first way)
		   alert(json.username);
		   
		   // Accessing properties of json objects in JS (second way)
		   alert(json["username"]);
			
		</script>
		
		<! --
JSON is an industry standard for data exchange formats.
JSON exists in JS as a JS object.
-->.
		
	</body>
</html>

-DOM-spliced html way to set the table's tbody

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Setting the tbody of a table</title>
	</head>
	<body>
		
		<script type="text/javascript">
			// There's all this json data
			var data = {
				"total" : 4,
				"emps" : [//JSON array, which makes the JSON object
					{"empno":7369,"ename":"SMITH","sal":800.0},
					{"empno":7361,"ename":"SMITH2","sal":1800.0},
					{"empno":7360,"ename":"SMITH3","sal":2800.0},
					{"empno":7362,"ename":"SMITH4","sal":3800.0}
				]
			};
			
			// You want to display the data in a table.
			window.onload = function(){
				var displayBtnElt = document.getElementById("displayBtn");
				displayBtnElt.onclick = function(){
					var emps = data.emps;
					var html = "";
					for(var i = 0; i < emps.length; i++){
						var emp = emps[i];
						html += "<tr>";
						html += "<td>"+emp.empno+"</td>";
						html += "<td>"+emp.ename+"</td>";
						html += "<td>"+emp.sal+"</td>";
						html += "</tr>";
					}
					document.getElementById("emptbody").innerHTML = html;
					document.getElementById("count").innerHTML = data.total;
				}
			}
			
		</script>
		
		<! -- later development is:
Through the underlying java language jdbc to check out the data inside the database.
After checking out sent to the browser, the browser will be converted to json format string json object.
Put the json object data in the form

This program is the meaning of this
-->
		<! --After pressing this button, put the data from the JSON above into tbody -- >!
		<input type="button" value="Show Employee Information List" id="displayBtn" />
			
		<h2>Employee Information List</h2>
		<hr>
		<! --Draw the table first-->!
		<table border="1px" width="50%">
			<tr>
				<th>Employee Number</th>
				<th>Employee Name</th>
				<th>Employee payroll</th>
			</tr>
			<tbody id="emptbody">
                <!-- 
					<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				<tr>
					<td>7369</td>
					<td>SMITH</td>
					<td>800</td>
				</tr>
				-->
			</tbody>
		</table>

in sum<span id="count">0</span>item count (of a consignment etc)

</body>
</html>

Note: The article is partially reprinted from Power Node