What is Ajax?
Ajax is a way to create an interactive Web application.
Ajax is asynchronous Javascript and XML abbreviation (asynchronous JavaScript and XML), which is just A small part of JavaScript.
Ajax generally refers to a combination of the following technologies:
- XHTML or HTML
- CSS (cascading style Sheet, cascading style sheets)
- Using JavaScript to access the DOM (Document Object model, DOC-
- XML or JSON, which is the format transferred between the server and the client
- XMLHttpRequest, which is used to fetch data from the server.
Ajax allows Web pages to be updated asynchronously by using a small amount of data exchanged in the background with the server, which means that a part of the page can be updated without reloading the entire page. (Traditional Web pages must be overloaded if you need to update the content)
Ajax success stories, Sina Weibo, Google maps and more.
Combined (Snap-together) language
JavaScript is an object-oriented (object-oriented) language. Some picky programmers think of object-based (object-based) languages.
- Object , JavaScript handles objects in a Web browser, such as Windows, forms, buttons, check boxes, and so on.
- property , in JavaScript, the document has a caption, and the form can have a check box that changes the object's properties and modifies the object.
- methods , such as the button's click (), the window's open (), the selected () of the text, the parentheses indicate that they are methods, not properties.
Combines objects, methods, and attributes, separated by dot numbers, dot syntax (dot syntax). Example: document.write (), Forms.elements.radio.click (), etc.
Introduction to DOM
The DOM (Document Object Model) expresses the HTML document in a tree structure.
In Firefox, we can see the tree structure of the Web page under DOM Inspector Add-ons, such as:
The top level of the page is included in the
JavaScript makes each item in the document tree an object, and you can use JavaScript to manipulate those objects. The standard model used to represent objects in a document is called the DOM.
Each object in the number is also referred to as a number of nodes (node ). You can use JavaScript to modify any aspect of the tree, including adding, accessing, modifying, and deleting nodes on the tree.
If the node contains an HTML tag, it is called an element node , otherwise it is a text node , and of course the element node can contain a text node.
Handling Events
Event is the action that a user performs when accessing a page. Submitting the form and moving the mouse over the image are two events.
JavaScript uses the event handler command to handle the event handler. The actions of the user on the page trigger the event handlers in the script.
The table below is the most commonly used 12 JavaScript event handlers.
Events |
What did it deal with? |
Onabort |
User terminates loading of the page |
Onblur |
The user left the object |
OnChange |
The user modified the object |
OnClick |
The user clicked on the object |
OnError |
The script encountered an error |
onfocus |
The user activated the object |
OnLoad |
Object finishes loading |
onmouseover |
Move the mouse over the object |
onmouseout |
The mouse left the object |
Onselect |
The user selects the contents of the object |
OnSubmit |
User submits the form |
OnUnload |
The user left the page |
Values and variables
Case-sensitive in JavaScript.
type |
Description |
Example |
Digital |
Any numeric value |
3.141592654 |
String |
The characters in quotation marks |
' Hello World ' |
Boolean Value (Boolean) |
True or False |
True |
Null value (NULL) |
Empty and no meaning |
|
Object |
Any value associated with the object |
|
Function |
The value returned by the function |
|
Operator
Operator (operator) is the symbol used to manipulate variables.
operator |
function |
x + y (number) |
Add x and Y |
x + y (String) |
to stitch x and Y together |
X-y |
Subtract y from X |
X * y |
Multiply X and Y |
X/Y |
Divide x by Y |
X% y |
The modulus of X and Y |
X++,++x |
Add 1 to X |
X--,--x |
Minus 1 for X. |
-X |
Inverse number of X |
Assignment and comparison
When you put a value in a variable, you assign the value to the variable, using an equal sign, for example:
Hisname = ' Tom ';
Assignment operator
Assign Value |
function |
x = y |
Set X to the value of Y |
x + = y |
Equivalent to x = x + y |
X–= y |
Equivalent to x = XY |
X *= y |
Equivalent to x = x * y |
X/= y |
Equivalent to x = y |
X%= y |
Equivalent to x = x% y |
Comparison
It is often necessary to compare the values of two variables. The complete list of comparison operators is as follows:
Compare |
function |
x = = y |
Returns True if X and Y are equal |
x = = y |
Returns True if X and Y are exactly equal |
X! = y |
Returns True if X and Y are not equal |
X!== y |
Returns True if X and Y are not exactly the same |
X > Y |
Returns True if X is greater than Y |
X >= y |
Returns True if X is greater than or equal to Y |
X < y |
Returns True if X is less than Y |
X <= y |
Returns True if X is less than or equal to Y |
X && y |
Returns true if both X and Y are true |
x | | Y |
Returns true if X or Y has one that is true |
!x |
If x is False, then return True |
Writing JavaScript-friendly HTML
Because you will use JavaScript to manipulate objects in your document, you want to write HTML in the appropriate way, making it easy for your scripts to work with HTML.
We want to write modern, standard-compliant HTML and use CSS to separate the structure of the document from its performance. JavaScript should also be placed in an external document. In this way, the modification of the site will be easy, our site will contain the following three kinds of files:
- HTML: Contains the content and structure of the page.
- CSS: Controls how the page looks and behaves.
- JavaScript: Controls the behavior of the page.
1, <div> and <span>
There are two very important range tags in HTML:<div> and <span>.
They are used to divide the content into semantic (semantic) blocks.
<div> is a block-level (Block-level) element that has a physical line-break between the front and back elements.
<span> is inline, so it can be applied to a phrase in a sentence.
2. Class and ID
In HTML, the content is separated into these meaningful blocks. Still need to identify fragments of content that need to modify their performance or behavior. The main use of this is two properties: Class and ID.
Both CSS and JavaScript can use these properties to define the appearance and behavior of the page.
class identifies the elements that may be used more than once. For example, the class of the movie theater title, Bold dark blue:
{ font: bold 14px; color: #000099;}
Each movie title on the page is surrounded by a <span> tag, such as:
< p > We ' re currently showing < span class = "Movietitle" > The Aviator</ span > and < span class = "Movietitle" > The Outlaw</ span > . </ p >
The element identified by the ID is unique to the document. If the movie theater appears only once on the page, you can create a style sheet with an ID, as follows:
{ font: bold 28px; color: #FF0000;}
When a movie theater name is displayed on the page, use the following:
<id= "Theatername">the Raven Theater Presents:</ H1 >
Learn about JavaScript (2)-some concepts to understand