JavaScript；
Why have JavaScript?
Because every operation of the user is to interact with the server, and when an undesired operation is accidentally performed
It is impossible to roll back, so that the user has to perform the operation again, which makes the user experience poor.
what is it?
JavaScript is a scripting language. It is a language developed by Netscape. It is a scripting language that runs on browsers.
It's just by the name of Java, not by Sun.
The language was originally designed to solve the problem of user registration.
effect;
Using JavaScript to ... manipulate ... HTML tags can improve user experience.
Such as;...because when the user registers, if the input is wrong, all need to be re-entered, which is not conducive to the user's experience
Therefore, it is also possible to limit the scope of user input through JavaScript,
Help users avoid typing errors.
◆Note; can be set by regular expression
Syntax; /^regular &/i --- i is case insensitive
Classification;
1.ECMA_JavaScript is a basic JavaScript syntax
2.BOM_JavaScript is a browser-oriented JavaScript script programming
3.DOM_JavaScript is a JavaScript script programming for page (user experience)
★★★Note; the event top-level object in JavaScript is window
The top-level object of a normal object is Object
★ heavy ★ heavy ★ Note; 1. The method name cannot be the same as the keyword. If there is no response, try changing the name.
2. Pay attention to capitalization
----------------------------------------------JS—— Regular expression------------------------------------------------ ---------------
JavaScript regular expressions;
JavaScript regular expressions and Java regular expression notation are common
[Regular expressions in basically all languages are common]
JavaScirpt regular expression syntax;
/^regular$/^is a start identifier
$ is a closing identifier
and to use /xx/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓ＥＣＭＡ——ＪＳ↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Define JavaScript way in HTML;
1. External introduction; define a file with a .jsp or .js suffix externally,
Write JavaScript code in JS files, like external introduction of CSS
2. Internal definition; used in <head></head> tags in HTML documents
<script></script> tag, write JavaScript code inside the tag
-------------------------------------------------- --Features--------------------------------------------------------- ----------------
JavaScript features;
1. Weakly typed languages are not sensitive to data types, [because there is only one var keyword to define data]
2. Interpreted language, which runs directly in the browser,
------- And · · · · · needs to be compiled like Java, [so it is run in order. 】
3. A cross-platform, cross-language scripting language, [can be used in PHP, C#, Java, etc.]
4. The language that runs in the browser, defined or referenced in HTML text.
5. Based on event-driven languages
6. Is an object-based language
7. The file suffix is .js/.jsp
-------------------------------------------------- ---type of data--------------------------------------------- ----------------
JavaScript data type; var a = 5;
There is only one 〓【 var 】〓 keyword to define the type of data (variable),
Determine what type it is by the content of the data (variable).
...so it is a weakly typed language.
JavaScript data types;
boolean ----- true | false
String ----- string | character
Number ----- number
undifined ----- 空 | null
Object ----- custom object | JavaScript provided object
◆Note; in JavaScript Number type, if you want to perform a decimal point operation,
You need to convert, otherwise it will default to a rounding operation
Because in JavaScript there is no floating point type
〓 Note; A, [ 0 ] is false
[non-0] is true, negative numbers are also
B. [null/empty] is false
[non-empty] is true
C 、 【undifined】 则 是 false
[non-undefined] is true
-------------------------------------------------Types of Convert ------------------------------------------------- ---------------
Because in JavaScript there is no floating point type
type conversion;
1.parseFloat() converts a numeric value of type Number into a decimal point value
2.parseInt() can convert a string to an integer type,
★Note; only convert the start of the number string that can be converted
-------------------------------------------------- Operator------------------------------------------------ -------------
JavaScript operator;
Arithmetic operators; + - * / & ^ |
Logical operators; || && ! [There is no single | & in JavaScript]
Comparison operators; > < >= <= !=
Ternary operator; (expression)? x:y;
------------------------------------ -------------Judgment statement----------------------------------- ----------------------------
1.if
if---else
if---else if...
if---else if...---else
2.switch---case
The case in switch can make String, judgment statement, number
▲ Note; what type is written in switch() if the return in case is what type.
For example; case is a judgment statement, then in switch(), a value of boolean type is written
-------------------------------- -------------------cycle------------------------------ ------------------------------
1.while{}
2.do{ }while
3.for(){}
4.for--in
5.with(object)
▲for--in is forEach in Java,
Mainly used to traverse objects and arrays in JavaScript,
1. Traverse the array;
Traversing an array in JavaScript is to traverse the subscript of each element
2. Traverse the object;
In JavaScript, it traverses the property type of each object,
So it is used when traversing the object; the object [ x ] can get the value
▲with(object) is a predefined one, you can use this when you need to call N methods of this object
----------------------- ------------------- Definitions of functions and objects ---------------------------- ------------------------------------
Functions and objects... in JavaScript are defined using the function() keyword.
the way the function is defined;
1.function x(){} ----- no parameters
2.function x(a,b){} ----- with parameters
the way the object is defined;
1.function x(){} ---- no parameters
2.function x(a,b){} ---- with parameters
3.var v = function (){} --- with or without parameters
4. var v = new Object() --- Defined by the base class, directly v. attribute = value
5.var v = { : } --- used between attributes, separated attribute assignment is : is also a json format
〓 Note; objects and functions are defined in a similar way, but a method or an object depends on how to call
1. Function name () This is the function
2.new function name() This is the object
3. You can get the attribute value of the object through object.[attribute type];
◆◆◆Note; the formal parameters in JavaScript do not need to write var, otherwise an error will be reported
In JavaScript there is this keyword
JavaScript_Function_Introduce；
In JavaScript there is...no...function overloading...nor...variable parameters.
Therefore, if a function with the same name is defined in JavaScript, the latter function will overwrite the former function.
While there are no variable parameters in JavaScript,
・・・But an array of...arguments objects... is provided to get the number of formal parameters passed in
And the number of actual parameters and formal parameters passed in by the function in JavaScript
Not the same, no error
Objects commonly used in JavaScript;
1.String ....
2.Number ....
3.Boolean ....
4.Date setInterval() setTimeOut()
5.Math round()....
6. Array;
way of definition;
var v = new Array(10);
var v = [xx,xx,xx];
Features; JavaScript arrays can store any type, and the length is arbitrary,
Even if the length is specified, if the length exceeds the specified length, no error will be reported.
And an extension is made automatically.
prototype；
The prototype is a property that all objects will have.
Role; is an extension to the functionality of an object
such as arrays
Array.prototype.Extension method name = function (){ } ■■■■■■↓↓↓↓↓↓BOM——JS↓↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■
BOM_JavaScript；
what is it?
Browser Object Model is a browser object model.
effect;
BOM is for browser operation.
For example, when the user clicks on a certain part of a page, it will go back to the previous page, etc. . . . .
BOMs operate on objects.
-------------------------------------------------- Elements of BOM--------------------------------------------------------- --------------
elements in the BOM;
1. Popup (event)
---alert() popup (prompt)
---confirm() confirmation popup
---prompt() input popup
2. Timing
id setInterval(x,time) === How long to execute once, execute N times, and return an id value
clearInterveal(id) === clear time timing
id setTimeOut(x,time) === execute multiple times, only execute once, return an id value
clearTimeOut(id) === clear time timing
3.history
--- History object;
Can be used as forward and backward, and record
--- back() previous history record
--- forward() go to the previous history record
=== go(num) Specify the numerical value to describe the history of entry, negative number means go back, positive number means advance,
——————No response if the number of open pages is exceeded
4.navagator
--- Navigation object;
Generally used for compatibility issues,
Because some browser versions do not support certain HTML tags
---appVersion
5.location
--- local object;
Local page refresh, jump, etc. . . . . .
---href= specify the address
---reload() refresh this page
6.Screen
---Screen object
---availHeight gets the height of the screen, excluding the taskbar
---avaiWidth gets the width of the screen, excluding the taskbar
---height gets the height of the screen, including the taskbar
---width Get the width of the screen, including the taskbar
7.Domcument；
--- is a norm.
●●● The BOM acts on the browser based on the above elements and user operations.
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓ＤＯＭ——ＪＳ↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
DOM_JavaScript；
what is it?
1.Document Object Model Document Object Model.
2. The process of manipulating the HTML structure is called DOM programming.
3.DOM is a hierarchical structure.
effect;
1. It acts on the page of the browser, and acts on the page of the browser according to the user's operation.
2. The DOM operates according to events.
▲ DOM is an idea and specification for manipulating HTML structure.
▲ DOM is a specification of a layered structure, so the HTML document structure is defined as a tree,
And each element (tag) is a node of this DOM
------------------------------------------------DOM node Classification------------------------------------------------- -----------------
DOM node classification;
Node base class node
|--- Element element node (label)
|--- Comment Comment node (label)
|--- Text text node (content)
|--- Attr attribute node (label)
★★★Note; space wrapping is also an element
----------------------------------------- --------DOM node acquisition method-------------------------------------- ----------------------------
DOM gets the method of node;
1.document.getElementById("id")
--- Get the node (label) with this id
2.document.getElementsByClassName("className")
--- Get all the nodes (labels) of this class attribute [array]
3.document.getElementsByName("name")
--- Get all nodes with this name attribute [array]
4.document.getElementsByTagName("TagName")
--- Get all nodes with this label name [array]
5.document.all()
---Get all nodes of this document [array]
6.document.forms()
---Get all nodes of all form forms in this document [array]
7.document.images()
---Get all the pictures of this document [array]
------------------------------------------------DOM node relation------------------------------------------------- -----------------
DOM node relationship;
1. Parent relationship;
Node parentNode() --- get the parent node
2. Brotherhood;
Node nextSubling() --- next sibling node
Node previousSubling() --- previous sibling node
3. Child relationship;
Node childNodes() --- Get all child nodes [array]
Node firstChild() --- first child node
Node lastChild() --- the last child node
------------------------------------------------DOM increase Delete ------------------------------------------------- -----------------
Node.createElement("nodeName") ----- Create a node
Node .appendChild() adds child nodes, ----- is added to the last one.
Node.setAttribute("Attr.name","price") ----- set attribute
Node.removeChild("node") ----- remove node
------------------------------------------------DOMOther method------------------------------------------------- -----------------
1.Node nodeName() ----- node name
2.Node nodeType() ----- node type [number]
3.Node nodeValue() ----- The value of the node
Node .value Get the text content of the node
Node .innerHTML sets the text content of the node
Why have JavaScript?
Because every operation of the user is to interact with the server, and when an undesired operation is accidentally performed
It is impossible to roll back, so that the user has to perform the operation again, which makes the user experience poor.
what is it?
JavaScript is a scripting language. It is a language developed by Netscape. It is a scripting language that runs on browsers.
It's just by the name of Java, not by Sun.
The language was originally designed to solve the problem of user registration.
effect;
Using JavaScript to ... manipulate ... HTML tags can improve user experience.
Such as;...because when the user registers, if the input is wrong, all need to be re-entered, which is not conducive to the user's experience
Therefore, it is also possible to limit the scope of user input through JavaScript,
Help users avoid typing errors.
◆Note; can be set by regular expression
Syntax; /^regular &/i --- i is case insensitive
Classification;
1.ECMA_JavaScript is a basic JavaScript syntax
2.BOM_JavaScript is a browser-oriented JavaScript script programming
3.DOM_JavaScript is a JavaScript script programming for page (user experience)
★★★Note; the event top-level object in JavaScript is window
The top-level object of a normal object is Object
★ heavy ★ heavy ★ Note; 1. The method name cannot be the same as the keyword. If there is no response, try changing the name.
2. Pay attention to capitalization
----------------------------------------------JS—— Regular expression------------------------------------------------ ---------------
JavaScript regular expressions;
JavaScript regular expressions and Java regular expression notation are common
[Regular expressions in basically all languages are common]
JavaScirpt regular expression syntax;
/^regular$/^is a start identifier
$ is a closing identifier
and to use /xx/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓ＥＣＭＡ——ＪＳ↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Define JavaScript way in HTML;
1. External introduction; define a file with a .jsp or .js suffix externally,
Write JavaScript code in JS files, like external introduction of CSS
2. Internal definition; used in <head></head> tags in HTML documents
<script></script> tag, write JavaScript code inside the tag
-------------------------------------------------- --Features--------------------------------------------------------- ----------------
JavaScript features;
1. Weakly typed languages are not sensitive to data types, [because there is only one var keyword to define data]
2. Interpreted language, which runs directly in the browser,
------- And · · · · · needs to be compiled like Java, [so it is run in order. 】
3. A cross-platform, cross-language scripting language, [can be used in PHP, C#, Java, etc.]
4. The language that runs in the browser, defined or referenced in HTML text.
5. Based on event-driven languages
6. Is an object-based language
7. The file suffix is .js/.jsp
-------------------------------------------------- ---type of data--------------------------------------------- ----------------
JavaScript data type; var a = 5;
There is only one 〓【 var 】〓 keyword to define the type of data (variable),
Determine what type it is by the content of the data (variable).
...so it is a weakly typed language.
JavaScript data types;
boolean ----- true | false
String ----- string | character
Number ----- number
undifined ----- 空 | null
Object ----- custom object | JavaScript provided object
◆Note; in JavaScript Number type, if you want to perform a decimal point operation,
You need to convert, otherwise it will default to a rounding operation
Because in JavaScript there is no floating point type
〓 Note; A, [ 0 ] is false
[non-0] is true, negative numbers are also
B. [null/empty] is false
[non-empty] is true
C 、 【undifined】 则 是 false
[non-undefined] is true
-------------------------------------------------Types of Convert ------------------------------------------------- ---------------
Because in JavaScript there is no floating point type
type conversion;
1.parseFloat() converts a numeric value of type Number into a decimal point value
2.parseInt() can convert a string to an integer type,
★Note; only convert the start of the number string that can be converted
-------------------------------------------------- Operator------------------------------------------------ -------------
JavaScript operator;
Arithmetic operators; + - * / & ^ |
Logical operators; || && ! [There is no single | & in JavaScript]
Comparison operators; > < >= <= !=
Ternary operator; (expression)? x:y;
------------------------------------ -------------Judgment statement----------------------------------- ----------------------------
1.if
if---else
if---else if...
if---else if...---else
2.switch---case
The case in switch can make String, judgment statement, number
▲ Note; what type is written in switch() if the return in case is what type.
For example; case is a judgment statement, then in switch(), a value of boolean type is written
-------------------------------- -------------------cycle------------------------------ ------------------------------
1.while{}
2.do{ }while
3.for(){}
4.for--in
5.with(object)
▲for--in is forEach in Java,
Mainly used to traverse objects and arrays in JavaScript,
1. Traverse the array;
Traversing an array in JavaScript is to traverse the subscript of each element
2. Traverse the object;
In JavaScript, it traverses the property type of each object,
So it is used when traversing the object; the object [ x ] can get the value
▲with(object) is a predefined one, you can use this when you need to call N methods of this object
----------------------- ------------------- Definitions of functions and objects ---------------------------- ------------------------------------
Functions and objects... in JavaScript are defined using the function() keyword.
the way the function is defined;
1.function x(){} ----- no parameters
2.function x(a,b){} ----- with parameters
the way the object is defined;
1.function x(){} ---- no parameters
2.function x(a,b){} ---- with parameters
3.var v = function (){} --- with or without parameters
4. var v = new Object() --- Defined by the base class, directly v. attribute = value
5.var v = { : } --- used between attributes, separated attribute assignment is : is also a json format
〓 Note; objects and functions are defined in a similar way, but a method or an object depends on how to call
1. Function name () This is the function
2.new function name() This is the object
3. You can get the attribute value of the object through object.[attribute type];
◆◆◆Note; the formal parameters in JavaScript do not need to write var, otherwise an error will be reported
In JavaScript there is this keyword
JavaScript_Function_Introduce；
In JavaScript there is...no...function overloading...nor...variable parameters.
Therefore, if a function with the same name is defined in JavaScript, the latter function will overwrite the former function.
While there are no variable parameters in JavaScript,
・・・But an array of...arguments objects... is provided to get the number of formal parameters passed in
And the number of actual parameters and formal parameters passed in by the function in JavaScript
Not the same, no error
Objects commonly used in JavaScript;
1.String ....
2.Number ....
3.Boolean ....
4.Date setInterval() setTimeOut()
5.Math round()....
6. Array;
way of definition;
var v = new Array(10);
var v = [xx,xx,xx];
Features; JavaScript arrays can store any type, and the length is arbitrary,
Even if the length is specified, if the length exceeds the specified length, no error will be reported.
And an extension is made automatically.
prototype；
The prototype is a property that all objects will have.
Role; is an extension to the functionality of an object
such as arrays
Array.prototype.Extension method name = function (){ } ■■■■■■↓↓↓↓↓↓BOM——JS↓↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■ ■■■■■■■■■■■■■■■■■■■■■■
BOM_JavaScript；
what is it?
Browser Object Model is a browser object model.
effect;
BOM is for browser operation.
For example, when the user clicks on a certain part of a page, it will go back to the previous page, etc. . . . .
BOMs operate on objects.
-------------------------------------------------- Elements of BOM--------------------------------------------------------- --------------
elements in the BOM;
1. Popup (event)
---alert() popup (prompt)
---confirm() confirmation popup
---prompt() input popup
2. Timing
id setInterval(x,time) === How long to execute once, execute N times, and return an id value
clearInterveal(id) === clear time timing
id setTimeOut(x,time) === execute multiple times, only execute once, return an id value
clearTimeOut(id) === clear time timing
3.history
--- History object;
Can be used as forward and backward, and record
--- back() previous history record
--- forward() go to the previous history record
=== go(num) Specify the numerical value to describe the history of entry, negative number means go back, positive number means advance,
——————No response if the number of open pages is exceeded
4.navagator
--- Navigation object;
Generally used for compatibility issues,
Because some browser versions do not support certain HTML tags
---appVersion
5.location
--- local object;
Local page refresh, jump, etc. . . . . .
---href= specify the address
---reload() refresh this page
6.Screen
---Screen object
---availHeight gets the height of the screen, excluding the taskbar
---avaiWidth gets the width of the screen, excluding the taskbar
---height gets the height of the screen, including the taskbar
---width Get the width of the screen, including the taskbar
7.Domcument；
--- is a norm.
●●● The BOM acts on the browser based on the above elements and user operations.
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■↓↓↓↓↓↓ＤＯＭ——ＪＳ↓↓↓↓↓↓↓↓■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
DOM_JavaScript；
what is it?
1.Document Object Model Document Object Model.
2. The process of manipulating the HTML structure is called DOM programming.
3.DOM is a hierarchical structure.
effect;
1. It acts on the page of the browser, and acts on the page of the browser according to the user's operation.
2. The DOM operates according to events.
▲ DOM is an idea and specification for manipulating HTML structure.
▲ DOM is a specification of a layered structure, so the HTML document structure is defined as a tree,
And each element (tag) is a node of this DOM
------------------------------------------------DOM node Classification------------------------------------------------- -----------------
DOM node classification;
Node base class node
|--- Element element node (label)
|--- Comment Comment node (label)
|--- Text text node (content)
|--- Attr attribute node (label)
★★★Note; space wrapping is also an element
----------------------------------------- --------DOM node acquisition method-------------------------------------- ----------------------------
DOM gets the method of node;
1.document.getElementById("id")
--- Get the node (label) with this id
2.document.getElementsByClassName("className")
--- Get all the nodes (labels) of this class attribute [array]
3.document.getElementsByName("name")
--- Get all nodes with this name attribute [array]
4.document.getElementsByTagName("TagName")
--- Get all nodes with this label name [array]
5.document.all()
---Get all nodes of this document [array]
6.document.forms()
---Get all nodes of all form forms in this document [array]
7.document.images()
---Get all the pictures of this document [array]
------------------------------------------------DOM node relation------------------------------------------------- -----------------
DOM node relationship;
1. Parent relationship;
Node parentNode() --- get the parent node
2. Brotherhood;
Node nextSubling() --- next sibling node
Node previousSubling() --- previous sibling node
3. Child relationship;
Node childNodes() --- Get all child nodes [array]
Node firstChild() --- first child node
Node lastChild() --- the last child node
------------------------------------------------DOM increase Delete ------------------------------------------------- -----------------
Node.createElement("nodeName") ----- Create a node
Node .appendChild() adds child nodes, ----- is added to the last one.
Node.setAttribute("Attr.name","price") ----- set attribute
Node.removeChild("node") ----- remove node
------------------------------------------------DOMOther method------------------------------------------------- -----------------
1.Node nodeName() ----- node name
2.Node nodeType() ----- node type [number]
3.Node nodeValue() ----- The value of the node
Node .value Get the text content of the node
Node .innerHTML sets the text content of the node
Add a function name to the event, you can use this to represent the current