Learn about JavaScript (2)-some concepts to understand

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.