[JavaScript Learning Series] (1) -- JavaScript language Overview

Document directory

• I. What is JavaScript?
• Ii. Start of JavaScript programming
• Iii. Implementation basics of JavaScript
• Iv. Summary of this Chapter

From the beginning of college, I began to learn how to create web pages and began to access Javascript. Now I just feel that JavaScript is a simple scripting language, and most of the Javascript we use is just a simple application background, later, when I checked some materials, I felt that we had taken a lot of detours. Maybe many times we only needed a short JavaScript code to implement things, but we still couldn't find a solution. The [JavaScript Learning Series] mainly records your JavaScript learning journey in detail. If someone in the same path wants to learn JavaScript as soon as possible, you can find your answers from this series of teaching materials.

In this chapter, we will first warm up and mainly introduce:

[JavaScript Learning Series] (1) -- JavaScript language Overview

Javascript is currently the most widely used client scripting language for Web application developers. It can be used not only to develop interactive web pages, more importantly, it combines HTML, XML, Java Applet, Flash, and other powerful web objects. It is a distributed application that developers can quickly generate on the Internet or intranet.

I. What is JavaScript?

Before learning a new language, application developers are interested in "What is it ?" "What can it do ?" And other issues, rather than "How to Develop ?" So let's first introduce what Javascript is.

1.1 features of JavaScript

Javascript is a client scripting language based on object and event-driven and relatively secure. It is mainly used to create dynamic pages with strong interactivity and has the following features:

1. Object-based: javascript can implement required functions through DOM (document structure model) and its own objects and operation methods.

2. event-driven: javascript uses event-driven methods to respond to Keyboard Events, mouse events, and browser window events and perform specified operations.

3. explanatory language: JavaScript does not need to be compiled by a special compiler. Instead, the HTML document embedded in the Javascript script is interpreted by the browser line by line during loading, greatly saving the time for data interaction between the client and the server.

4. Real-time: javascript can directly respond to client events without going through the server, and update the target page with the processing results in real time.

5. Dynamic: javascript provides simple and efficient language processes, flexibly processes various methods and attributes of objects, and responds to document page events in a timely manner to achieve interactive and dynamic pages.

6. cross-platform: The correct running of JavaScript scripts depends on the browser, but is irrelevant to the specific operating system. As long as the client has a browser that supports JavaScript scripts, the running results of JavaScript scripts can be correctly reflected on the client browser platform.

7. Easy development and use: the basic structure of JavaScript is similar to that of C language. It adopts the small program segment programming method and provides a simple development platform and convenient development process, it can be embedded in the HTML document for the browser to explain and execute, while the Javascript variable type is weak type, use is not strict.

8. relatively secure: javascript is a client script that is interpreted and executed in a browser. It does not allow access to local hard disks, and cannot store data on servers. It does not allow modification or deletion of network documents. It can only implement information browsing or dynamic interaction through a browser, this effectively prevents data loss.

To sum up, JavaScript is a script description language with strong vitality and potential for development. It can be directly embedded into HTML documents for the browser to explain and execute and directly respond to client events, for example, verify the validity of the data form, call the corresponding processing method, return the processing result quickly, and update the page to achieve web interaction and dynamic requirements, and hand over most of the work to the client for processing, minimizes the resource consumption of web servers.

1.2 What Can JavaScript do?

Because of its high efficiency and powerful functions, JavaScript scripts have been widely used in such aspects as form Data Validity verification, webpage special effects, interactive menus, dynamic pages, and numerical calculation, even a web browser-based UNIX-like operating system JS/Unix that is fully written using JavaScript and a Chinese input method that can be used without installation have even occurred. The Javascript script programming capability cannot be underestimated! The following describes common functions of javascript:

1. Validity verification of form data

The Javascript script language can effectively verify the validity of the data in the form submitted by the client. If the data is valid, perform the next operation. Otherwise, an error message is returned.

2. webpage Special Effects

Using JavaScript scripting language and Dom and CSS, you can create colorful webpage effects, such as flame-like Flashing Text and text rotation around the cursor.

3. Interactive menu

You can use JavaScript scripts to create interactive menus with dynamic effects, which is comparable to the single-phase navigation menu created by flash.

4. Dynamic Pages

Using JavaScript scripts, you can access all element objects on a web page and use the object method to access and modify its attributes to achieve dynamic page effects. Typical applications include webpage-based Tetris and poker games.

5. Numerical Calculation

The Javascript script uses the data type as an object and provides rich operation methods for JavaScript to be used for numerical computation.

Ii. Start of JavaScript programming

JavaScript scripts have become a hot language for Web application development and become the first choice for client scripts. The network is filled with various JavaScript scripts to implement different functions, however, users may not understand how JavaScript scripts are interpreted and executed by browsers, or how to write their own JavaScript scripts to achieve the desired results. This section describes the basics of JavaScript scripting.

2.1 "Hello World" program

The learning of any new language begins with "Hello World", and JavaScript is no exception. The Code is as follows:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> Hello World </title> <br/> </pead> </P> <p> <body> <br/> <br/> <center> <br/> <script language = "JavaScript" type = "text/JavaScript"> <br /> Document. Write ("Hello world! "); <Br/> </SCRIPT> <br/> </center> <br/> </body> <br/> </ptml> <br/>

Save as helloworld.html. Click it to view the hello World page! Information.

2.2 Javascript script programming steps

Javascript script programming is generally divided into the following steps:

1. Select the Javascript script language editor to edit the script code;

2. embed the Javascript script code into the HTML document;

3. Select a browser that supports JavaScript scripts to browse the HTML document;

4. if an error occurs, check and correct the source code, and then browse again. This process is repeated until the code is correct;

5. handle cases where JavaScript scripts are not supported.

Because Javascript script code is embedded in HTML documents and interpreted and executed by the browser, developing Javascript script code does not require a special programming environment, you only need a common text editor and a browser that supports JavaScript scripts. How can you select the Javascript script editor?

2.3 select the Javascript script editor

To compile Javascript script code, you can select a common text editor, such as Windows notepad、ultraedit. you only need the editor to save the edited code as HTML document (.html, htm, etc.

Although professional web development tools such as Dreamweaver and Microsoft FrontPage integrate the development environment of JavaScript scripts, I still recommend that Javascript script developers use the most basic text editor in their initial stages, for example, notepad and ultraedit are developed to focus on the Javascript scripting language rather than the development environment.

At the same time, if an error occurs in the script code, you can use the editor to open the source file (.html#.htm or. JS) and save the modification, and then use the browser to browse again. repeat this process until no error occurs.

2.4 introduce Javascript script code to HTML documents

There are 4 standard methods to embed Javascript scripts into HTML documents:

1. The code is included in the <SCRIPT> and </SCRIPT> tag pairs and then embedded into the HTML document;

2. Use the src attribute marked by <SCRIPT> to link external Javascript script files;

3. Use JavaScript pseudo URL address for introduction;

4. Introduction through the HTML document time processing program;

The following describes several standard introduction methods for JavaScript scripts:

[1] use <SCRIPT> and </SCRIPT> to mark

In the previous source code, except for the content between the <SCRIPT> and </SCRIPT> tag pairs, these are the most basic HTML code, the <SCRIPT> and </SCRIPT> labels can be used to encapsulate Javascript script code in HTML documents:

Document. Write ("Hello world! ");

When the browser loads HTML documents embedded with JavaScript scripts, It can automatically identify the Start mark and result mark of Javascript script code, the code in the process is explained according to the method of interpreting the Javascript script code. Then, the result is returned to the HTML document and displayed in the browser window.

Let's take a look at the following code:

<Script language = "JavaScript" type = "text/JavaScript"> <br/> document. Write ("Hello world! "); <Br/> </SCRIPT>

First, the <SCRIPT> and </SCRIPT> flag encapsulate the Javascript script code, tell the code in the browser as the Javascript script code, and then call the write () of the Document Object () method To write a string to an HTML document.

The following describes the attributes of the <SCRIPT> tag:

• Language attribute: Specifies the script language and version of the encapsulated code, including Perl, VBScript, and JScript. The default value is JavaScript;
• Type attribute: specifies the type of script code inserted between the <SCRIPT> and </SCRIPT> tag pairs;
• Src attribute: Used to embed the content of an external script file into the current document. External script files written using JavaScript scripts must be used. JS is an extension and does not contain any content in both the <SCRIPT> and </SCRIPT> labels. As follows:
• <Script language = "JavaScript" type = "text/JavaScript" src = "1.js"> </SCRIPT>

[2] using the src attribute marked by <SCRIPT>

Modify <SCRIPT> </SCRIPT> in the HTML document:

<Script language = "JavaScript" type = "text/JavaScript" src = "1.js"> </SCRIPT>

Edit the following code in the text editor and save it as 1.js:

Document. Write ("Hello world! ");

When you run the modified page, the result is the same as the previous one, and the output is Hello world!

[3] using JavaScript pseudo URL

In most browsers that support JavaScript scripts, Javascript script code can be introduced through the Javascript pseudo url call statement. The common format of a pseudo URL address is as follows:

Javascript: Alert ("Hello world! ")

Generally, it starts with "javascript:", followed by the Operation to be executed. The following code demonstrates how to use a pseudo URL address to introduce JavaScript code:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> JavaScript pseudo URL introduction </title> <br/> </pead> </P> <p> <body> <br/> <center> <br/> <form name = "myform"> </P> <p> <input type = text name = "mytext" value = "click" onclick = "javascript: alert ('mouse clicked ') "> <br/> </form> <br/> </center> <br/> </body> <br/> </ptml> <br/>

When you view the page in a browser, click the text box to bring up a warning dialog box.

[4] introduction through HTML document event handler

When developing Web applications, developers can set different event processors for HTML documents, generally, you can set the attributes of an HTML element to reference a script (which can be a simple action or function). Attributes generally start with "on", such as moving the mouse over onmousemove.

The following program demonstrates how to use JavaScript scripts to respond to button-click events:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> Sample page </title> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> function clickme () <br/> {<br/> alert ("click the button "); <br/>}< br/> // --> </MCE: SCRIPT> <br/> </pead> </P> <p> <body> <br/> <center> <br/> <p> sample Javascript script code introduced through the document event handler: </P> <br/> <form name = "myform"> <br/> <input type = button name = "mybutton" value = "click" onclick = "clickme "() "> <br/> </form> <br/> </center> <br/> </body> <br/> </ptml> <br/>

After the program is running, click the mouse button on the original page to display the warning dialog box "The mouse has been clicked.

2.5 insert Javascript script code location

Javascript script code can be stored in any location required by HTML documents. Generally, javascript script code can be placed between

[1]

The Javascript script code placed between

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> Sample page </title> <br/> <SCRIPT type =" text/JavaScript "> <br/> // script statement <br/> </SCRIPT> <br/> </pead> </P> <p> <body> <br/> </body> <br/> </ptml>

[2] <body> and </body> are placed between tag pairs.

If you need to run a Javascript script to generate webpage content when loading the page, you should place the script code between the <body> and </body> MARK pairs, you can write multiple independent script codes as needed and combine them with HTML code. The following is the basic document structure:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> Sample page </title> <br/> </pead> <br/> <body> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> // script statement <br/> // --> </MCE: SCRIPT> </P> <p> <MCE: script Type = "text/JavaScript"> <! -- <Br/> // script statement <br/> // --> </MCE: SCRIPT> <br/> </body> <br/> </ptml> <br/>

[3] place two tag pairs in a hybrid manner

If you need to load the script code in advance to respond to user events and use the script to generate page content during page loading, you can combine the above two methods: The following is the basic document structure:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> Sample page </title> <br/> <MCE: Script Type =" text/JavaScript "> <! -- <Br/> // script statement <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> // script statement <br/> // --> </MCE: SCRIPT> <br/> </body> <br/> </ptml> <br/>

The location where Javascript script code is embedded in the HTML document depends on its actual functional requirements. The HTML document of the embedded script is edited.

2.6 handle cases where JavaScript scripts are not supported

The client browser does not support the following three possibilities for the current Javascript script:

• The client browser does not support any JavaScript scripts;
• The JavaScript scripts supported by the client browser are different from the objects, attributes, or methods supported by the versions used by the script code;
• For the sake of security, the client has set the browser's support for JavaScript scripts to prohibit

To sum up the above three cases, the browser cannot interpret the correct results of the current script. If no relevant processing is performed when writing the script code, A warning box is displayed for the document with the script in the browser. You can use either of the following methods.

• Use <! -- And --> direct blocking of tag pairs: This method is used <! -- And --> flag encapsulate the JavaScript code, telling the browser to skip the script if it does not support it. If it supports the script code, the tag pair is automatically skipped, achieve the purpose of hiding the script code if the browser does not support it.
• Use the <NoScript> and </NoScript> flag to give the prompt information.

Iii. Implementation basics of JavaScript

Through the previous study, we learned that ecmascript is the cornerstone of JavaScript scripts, but it is not the only part that deserves special attention during Javascript script development. In fact, a complete Javascript script should contain the following three parts:

• Ecmascript core: provides core script capabilities for different host environments;
• Dom (Document Object Model): Specifies the application interface for accessing HTML and XML;
• BOM (Browser object model): provides objects and methods for interaction between browser windows independent of content.

Iv. Summary of this Chapter

This chapter mainly introduces the basic knowledge of JavaScript scripts and demonstrates how to write your own "Hello world !" Program, taking into account the differences between JavaScript and browser versions and proposing corresponding programming strategies; describes the implementation basis of the Javascript script language, at the same time, you must differentiate the differences between JavaScript, JScript, and VBScript, as well as the similarities and differences between JavaScript, Java, and Java Applet concepts.

So far, our JavaScript entry is over. The subsequent sections will detail the basics of JavaScript language.