Getting Started with JavaScript

Overview:

　　Javascirpt is a scripting language, is a literal translation script language, is an object-based scripting language, is a dynamic type, weak type, based on the language of the prototype, mainly for Web programming

First, what is javascript:

JavaScript is a network scripting language, has been widely used in Web application development, often used to add a variety of dynamic features of the Web page, to provide users with more smooth and beautiful browsing effect. JavaScript scripts are usually embedded in HTML to implement their own functionality.

Ii. Advantages of JavaScript

1. Dynamic Write HTML output

　　　　Use this method to dynamically add new elements to the page

Example: Dynamic on-page output current date time

JavaScript code:

New Date (). toLocaleString () + "</font></p>");

2. Responding to Events

　　　　Use events to make the page more interactive with the user and respond differently to the user's actions.

Instance: When you click a button in a webpage, a prompt dialog box pops up

HMTL Code:

<type= "button"onclick= "alert (' Hello ')"> click here  </button>

3. Change HTML content

　　　　Using JavaScript to work with HTML content is a powerful feature.

Instance: Gets the page element and changes the content of the element based on the ID name of the HTML element in the page

HTML code:

    <id= "Demo"> You do not have permission to view content </div>    <ID= "btn"  type= "button"  value  = "Sneak peek"/>

JavaScript code:

function () {    var ss = document.getElementById ("demo");   Find element    ss.innerhtml = "being built in ing ...";   Change Content }

4. Change the HTML image (Tag properties)

　　　　Users can choose different images according to their needs, often used in the picture dynamic switching

HTML code:

    <id= "image"  src= "img1.png"/>    <  ID= "btn1"  type= "button"  value= "Next" />

JavaScript code:

function () {    var ele = document.getElementById ("image");   Find element     = "Img1.png";   Change the referenced picture file this    true;   Disable button }

5. Change HTML style

　　　　Often used to change the style of HTML elements, have a strong user experience

Instance: high-brightness display when the mouse moves to the current row

HTML code:

    <ul>        <Liclass= "List">Test 1</Li>        <Liclass= "List">Test 2</Li>        <Liclass= "List">Test 3</Li>        <binclass= "List">Test 4</Li>    </ul>

JavaScript code:

    var rows = document.getelementsbyclassname ("list");      for (i = 0; i < rows.length; i++) {        functionthis. Style.backgroundcolor = ' Gray ';}         function this. Style.backgroundcolor = "white";}    }

6. Verify the input

　　　　JavaScript is often used to validate user input

Example: When a user enters a phone number and leaves a dialog box to determine if a phone number is valid

HTML code:

<id= "PhoneNumber"  onblur= ""  type= "text" />

JavaScript code:

function () {    varthis. value;     if (IsNaN (num) | | num.length!=11) {alert ("Not mobile number");}}

in short: JavaScript is a client-side scripting language that makes page plume users more interactive, involves dynamic effects, and increases the user experience.

　　

Third, JavaScript implementation basics

How do JavaScript scripts implement the effect you want to achieve? You must first understand the basic syntax of JavaScript

JavaScript scripts are object-based operations. Can be divided into three parts

ECMAScript Core: Provides core scripting capabilities for different hosting environments.

ECMAScript provides script core syntax rules that can be adapted to various hosting environments, and the ECMA-262 description of the ECMAScript language is as follows:

ECMAScript can provide core scripting capabilities for different kinds of hosting environments, so the core scripting language is defined separately from any particular host change.

ECMAScript is just a personal description that defines all the objects, properties, and methods of the scripting language, which mainly describes the following

£: syntax

£: Data type

£: Keywords

£: Reserved word

£: operator

£: Object

£: statement

　　　　　　The ECMAScript standard defines the most core of JavaScript scripts, the skeleton of a JavaScript script, the skeleton that can be extended on it, typical extensions such as the DOM (Document Object model) and the BOM (browser object model), and so on.

DOM (Document Object model): An application interface that provides access to HTML and XML.

　　　　The DOM defines the interfaces of the various parts of a document that JavaScript can manipulate, providing access to various functional parts of the document, such as documents, form, textarea, etc., and how to do so.

Example:　　　　

 <aID= "Demo"href="#">Show current Date Time</a>    <spanID= "Date"></span>    <Script>document.getElementById ("Demo"). onclick= function () {            //Display the current datetime text in a page element with an ID of "date"document.getElementById ("Date"). InnerText= Newdate.tolocalestring (); //block default browser action (web)            if(e&&e.preventdefault) {e.preventdefault (); } Else {                //how to block the default action of a function in IEWindow.event.returnValue= false; }            return false; }    </Script>

BOM (Browser object model): Provides objects and methods that are independent of the content and interact between browser windows.

　　　　The BOM defines the interface of all the functional parts of a browser that JavaScript can manipulate, providing access to the various features of the document, such as the window itself, screen features, browsing history, and how to do so.

Typically, browser-specific JavaScript extensions are considered part of the BOM, mainly including:

£: Closing, moving the browser and resizing the browser window;

£: Pop up a new browser window;

£: A target object that provides detailed information about the browser;

£: A target object that provides the details of the document loaded into the browser window;

£: Screen object that provides detailed information about the user's screen resolution;

£: provision of cookie support;

£: Add activexobject Class extension BOM, instantiate ActionX object through JavaScript;

The BOM has some de facto standards, such as window objects, navigation objects, and so on, but each browser defines or extends properties and methods for these objects.

Instance:

<href= "JavaScript:window.close ();" > Close window </a>

Getting Started with JavaScript