1, Static and dynamic web pages
1. Description of dynamic web pages
HTML and CSS realize the display of static web pages, text, tables, pictures and hyperlinks, and can be beautified;
But what if we want to register, chat, publish papers and other functions? How can information present different contents according to different users?
javaScrip is used to realize the interaction between browser users and background servers. The industry calls such web pages dynamic web pages and such websites dynamic web sites.
Static websites can only be viewed, and the content seen by different visitors is consistent and cannot be changed; Dynamic websites can read and write data, and the content displays different information according to different visitors.
2. How do web pages interact with the backend?
What is the software architecture of dynamic websites?
When a user accesses a page, the page triggers an event, creates an XHR object, makes an ajax request, requests access to the server side, the request is intercepted and processed by the web middleware, and is received by the controller in the control layer framework springmvc. The controller requests the service of the business layer spring framework, the service requests the mapper mapping of the persistence layer mybatis framework, and the mapper accesses the database. After operating the database, the result is returned. Mybatis is encapsulated into a java object and returned to the service. The service returns the java object to the controller. The controller converts the java object into a json string and then returns it to the browser. The browser returns it to the caller XHR. XHR calls the callback method callback. Callback parses the json string to get the data to be displayed, It is processed by javascript and finally echoed to the page.
It can be seen that the calling process is very complex, across networks, across domains, multiple servers, and many technology applications. Who is the initiator of all this? Who makes all this possible is javascript, which realizes the user's request and response, realizes the dynamic display of data, and makes the early static website move towards a dynamic website.
2, JS
1. JS overview
JavaScript is one of the three languages that web front-end developers must learn:
- HTML defines the content of a web page H5
- CSS specifies the layout of the web page CSS3
- JavaScript to achieve website interaction ES6
2. Explain
js is a weakly typed language. Like other languages, it has its own syntax, data types, expressions, arithmetic operators and so on. Is an object-based and event driven scripting language, which is usually used to improve the interaction between web pages and users.
Object based: it can not only create objects, but also use existing objects. JS has no concept of class and no compilation process. It is to explain and execute at the same time.
Event driven: in JS, in most cases, events trigger the execution of driver functions to realize specific functions. (for example, click div to replace the content with time. When the mouse slides over the element, the element will flip dynamically.)
Scripting language: a small program embedded in the client browser in the network front-end development environment
3. Features and advantages
characteristic:
(1)JS is a literal language, which directly executes the source code
It is a process of interpretation and execution without compilation (unlike Java, which needs to be compiled into a class file in advance and then run)
(2)JS is a weakly typed language without strict data types
Advantages:
(1) Good interactivity
(2) Certain security (JS is mandatory. You can't access anything other than the browser, but only the browser and the resources inside the browser)
(3) Cross platform (Java language is cross platform because of virtual machines). JS can be executed wherever there is a browser
3, How to introduce JS into HTML
1. Introduction case of js
Method 1: introduce js in the < body > line through the script tag, and the corresponding operation pop-up box will be displayed in the body
Method 2: embed js in the < head > line through the script tag, and open the browser in the head line to automatically pop up the pop-up box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test js Introduction to</title>
<!--2, stay HTML embed js，Writing 2: internal js -->
<script>
alert(100);/*Play 100*/
confirm();/*Click the OK pop-up box*/
prompt("Please enter age");/*Click the input box*/
</script>
</head>
<body>
<!-- 1,js Make the web page move. Writing method 1: in line js
js Is an object-based event driven scripting language
Time driven refers to adding various trigger methods to different elements of a web page
onclick Yes, click ondbclick Yes, double click onmouseenter Is mouse entry onmouseleave Is the mouse out
alter Popup prompt Input box confim Confirmation box-->
<!-- Click the pop-up box -->
<a href="#" onclick="alert(10); "> click the pop-up box</a>
<a href="#" onclick="prompt(); "> click the input box</a>
<a href="#" onclick="confirm(); "> click the OK box</a>
<!-- Double click the pop-up box -->
<a href="#" ondblclick="alert(10); "> double click the pop-up box</a>
<!-- Mouse in pop-up box -->
<a href="#" onmouseenter="alert(10); "> mouse in pop-up box</a>
<!-- Mouse out pop-up box -->
<a href="#" onmouseleave="alert(10); "> draw the pop-up box with the mouse</a>
</body>
</html>
effect:
2. Introduce js code or js file through Script tag
1. Import js code:
<head>
<meta charset="utf-8"/>
<script>/* JS code */
function fn(){
alert("JS The first method of introduction");
}
</script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
2. Import js file:
Step 1: Create 1 JS file
function fn(){
alert("JS The second introduction method of");
}
The second step is to introduce files into html
<head> <meta charset="utf-8"/> <script src="1.js"> </script> </head> <body> <div id="div1" onclick="fn();">Hello JavaScript</div> </body>
Note: do not import js code and js file through a script tag at the same time, which will cause the code not to execute! For example:
<script src="demo1.js">
alert("Ha ha ha ha...");//The code will not execute!!
</script>
4, JS syntax
1. Notes
Single line//
Multiline / * xxx*/
2. Basic data type
1) number numeric type. In JS, there is only one numeric type, floating-point type. When necessary, data type conversion will be carried out automatically. For example, floating-point type and integer type will be converted automatically during display and processing.
2) String string type. In JS, string is the basic data type. String literals are enclosed in single or double quotation marks.
3) boolean type. The value is true or false.
4) Null, there is only one value, which is null. Represents a null or nonexistent object.
5) Undefined. Only one value is undefined. Indicates that the variable has no initialization value.
3. js complex data type
Functions, arrays, objects (custom objects, built-in objects, DOM objects, BOM objects...)
4. js variable
In JS, a variable is declared through the var keyword. The declared variable is type insensitive and can point to any data type.
5. js operator
The operators in JS are roughly the same as those in Java
Note: why html does not execute js statements:
- If there are any incorrect comments, the whole html will not be executed
- Semicolons are used to separate JavaScript {statements. Usually we add a semicolon at the end of each executable statement. Another use of semicolons is to write multiple statements on a line. In JavaScript ， it is optional to end a statement with a semicolon. But if you want to write multiple statements on one line, you must add.
Common operator tests:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test js Data type for</title>
<!-- stay HTML Embedded in JS code -->
<script>
/* 2. js Operator of */
//Finding the large value of two numbers by ternary operator
var j=10;
var k=20;
alert( j < k ? k : j );
//== ===
alert(1==1); //Ratio, true
alert(1===1); //Ratio type and value, true
alert(1==='1');//Ratio type and value, false
// %/ find the single and ten digits of 25
var g=25;
alert( g%10 );//%Remainder, single digit
alert( g/10 ); //2.5
// ++ --
var h = 10;
h = h++ ;
alert(h); //10
/* java What is the difference between the following two lines of code?
byte d = 1;
d = d+1; //An error is reported and must be forced
d += 1; //Solution, automatic type conversion
*/
/* 1. js It is a weakly typed language and has no strict data types, including number string boolean null undefined */
var a = 10;//number type
a = 1.1; //number type
a = "hello js" ; //string type
a = 'hello js' ; //string type
a = true ; //boolean type
a = null ; //null type
alert(a);
var b ; alert(b); //undefined
var c = 1.1 + 1.9 ; //+For summation
alert(c); //Automatic type conversion
alert("c"+c); //+Used to spell strings
//Variable exchange value -- end to end
var d = 1;
var e = "hello" ;
var f = d;
d=e;
e=f;
alert(d +","+e);
</script>
</head>
<body>
</body>
</html>typeof operator: used to return the data type of variable or expression:
var i = 3; console.log(typeof i);//number i=true; console.log(typeof i);//boolean i="hello"; console.log(typeof i);//string console.log(typeof 123+"abc");//Find the type before splicing numberabc console.log(typeof (123+"abc"));//Splice first and then find the type string
6. JS statement (process control structure)
The usage of statements in JS and Java is also roughly the same
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test JS sentence</title>
<!-- stay HTML embed JS Code use script-->
<script>
//5. Circulation structure
//5.3 how many days can it take to output 100 million half of each day on the console? f12 check
var f =0;
var g=100000000;
while(g>1){
g=g/2;//Spend half a day
f++;//When will the statistical days be spent
}
console.log(f);
//5.1 output the results on the console. Use f12 to see 1 ~ 10 of the console output
for(var i = 1;i<11;i++){
console.log(i);
}
//5.2 output the results on the console. Use f12 to see the sum of 1 ~ 10 output by the console
var sum =0;
for(var i = 1;i<11;i++){
sum+=i;
}
console.log(sum);
//4. Pop up the day of the week according to the number entered by the user
/* var d =prompt("Please enter the day of the week "); the default is String type*/
//Use parseInt to convert the default String type to number type
var d =parseInt(prompt("What day is today"));
switch(d){
case 1:alert("Today is Monday ");break;
case 2:alert("Today is Tuesday");break;
case 3:alert("Today is Wednesday");break;
case 4:alert("Today is Thursday");break;
case 5:alert("Today is Friday");break;
case 6:alert("Today is Saturday");break;
case 7:alert("Today is Saturday");break;
}
//3. Judge normal and leap years
var b1=prompt("Please enter the year:");
if((b1%4==0 && b1%100!=0) || b1%400==0){
alert("This is a leap year!");
}else{
alert("This is a normal year!");
}
//2. Receive the score entered by the user and judge the grade of the score
var b=prompt("Please enter your grade:");
if(b>=80 &&b<=100){
alert("excellent");
}else if(b>=60 && b<80){
alert("secondary");
}else if(b<60 && b>=0){
alert("fail,");
}else{
alert("Input error!");
}
// 1. Enter a number and judge
var a=prompt("Please enter a number");//The browser receives user input for judgment
if(a>10){
alert(1);
}else{
alert(0);
}
</script>
</head>
<body>
</body>
</html>
7. JS array
JS array is used to store multiple types of values in a single variable (actually a container).
Arrays in JS can store, for example, numeric values, strings, Boolean values, undefined, null, objects, functions, etc.
be careful:
(1) Any data type can be stored in JS array
(2) The array length in JS can be changed