Before learning the basic use of HTML and CSS, today we begin to learn how to use JavaScript.
What is JavaScriptJavaScript is a scripting language that is Object-based (objects) and event-driven (driven) and has security performance. It is used in conjunction with HTML Hypertext Markup Language, Java scripting language (Java applet) to link multiple objects in a single Web page, interacting with web customers. Thus can develop the client's application and so on;
Has the following basic characteristics:
scripting language
JavaScript is a scripting language that implements programming in the form of a small program segment. Like other scripting languages, JavaScript is also an explanatory language that provides an easy development process. Its basic structure form and C, C + +, VB, Delphi very similar. But unlike these languages, it needs to be compiled and interpreted on a row-by-line basis in the course of a program's operation. It is combined with the HTML identity to facilitate the user's use of the operation.
Object-based language
JavaScript is an object-based language that can be viewed as an object-oriented one. This means that it can use the objects that it has created. Therefore, many functions can be derived from the interaction of the methods of the objects in the scripting environment with the script.
Simplicity of
The simplicity of JavaScript is mainly reflected in the following: First, it is a simple and compact design based on Java basic statements and control flow, which is a very good transition for learning java. Second, its variable type is weakly typed and does not use strict data types.
Security
JavaScript is a security language that does not allow access to local hard disks, does not store data on the server, does not allow modification and deletion of network documents, and can only be browsed or dynamically interacted through a browser. So as to effectively prevent the loss of data.
Dynamic nature
JavaScript is dynamic, and it can respond directly to user or customer input without having to go through a Web service program. It responds to the user in an event-driven manner. Event-driven refers to the action that occurs when an action is performed on the home page, called an event. For example, pressing the mouse, moving the window, selecting a menu, and so on can be considered as events. When an event occurs, a corresponding event response may be caused.
Platform-based
JavaScript is dependent on the browser itself, regardless of the operating environment, as long as the browser can run the computer, and support JavaScript browser can be executed correctly. Thus realized the "write once, traveled the world" dream. In fact, the best thing about JavaScript is that you can do a lot of things with very small programs. No need to have a high-performance computer, software only need a word processing software and a browser, without Web server channel, through their own computer can do all things
Based on the above explanation, let's write a JavaScript program first.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>This is a small JavaScript program</title> <Scriptlanguage= "JavaScript">Alert ('This is a small JavaScript program') </Script></Head><Body></Body></HTML>
As you can see from the above example, JavaScript is like the HTML identity language, and the JavaScript program code is a text that can be browsed by word-processing software that appears in the HTML-related area of the description page. JavaScript code by <script Language = "javascript" >...</Script> description. JavaScript scripts can be added between the identity <script Language = "JavaScript" >...</Script>.
JavaScript basic Data typeThe JavaScript scripting language, like other languages, has its own basic data types, expressions and arithmetic operators, and the basic framework structure of the program. JavaScript provides four basic data types for handling numbers and text, while variables provide the place where information is stored, and expressions can accomplish more sophisticated information processing.
1. Basic Data typeThere are four basic data types in javascript: numeric values (integers and real numbers), string literals (characters or values enclosed in "or"), Boolean (with True or false representations), and null values. The data in the basic type of JavaScript can be either constant or variable. Since JavaScript uses a weakly typed form, a variable or constant of a data does not have to be declared first, but rather the type of its data when it is used or assigned. Of course, you can declare the type of the data first, by automatically stating its data type when the value is assigned.
2. ConstantsIntegral type constant
JavaScript constants are often called literal constants, which are data that cannot be changed. Its integer constants can represent their values using 16, octal, and decimal.
Real-type constants
A solid constant is represented by an integer part plus a fractional part, such as 12.32, 193.98. Can be expressed using scientific or standard methods: 5E7, 4E5, etc. Boolean Boolean constants have only two states: TRUE or false. It is mainly used to describe or represent a state or a flag to illustrate the operation process. It is not the same as C + +, where C + + can represent its state with 1 or 0, and JavaScript can only indicate its state with true or false.
Character-type constants
One or several characters enclosed in single quotation marks (') or double quotation marks ("). such as "This was a book of JavaScript", "3245", "ewrt234234" and so on. There is a null value NULL in the null JavaScript, which means nothing. If you attempt to reference a variable that is not defined, a null value is returned. Special characters, like C, have special characters that are not displayed in JavaScript, beginning with a backslash (/). Commonly referred to as control characters.
3. VariablesThe main function of a variable is to access data and provide a container for storing information. For variables, you must specify the name of the variable, the type of the variable, the declaration of the variable, and the scope of the variable.
Name of the variable
The name of the variable in JavaScript is very similar to its computer language, so here are two points to note:
Types of variables in JavaScript, variables can be declared with the command var: for example, var name= ' WHOISLCJ '; in JavaScript, a variable can be declared without a declaration and, when used, the type of the variable according to the type of the data: for example, Name= ' WHOISLCJ '
Declaration of variables and their scope
JavaScript variables can be declared before use and can be assigned a value. Declare the variable by using the var keyword. The biggest benefit of declaring a variable is the ability to find errors in the code in a timely manner, because JavaScript is dynamically compiled, and dynamic compilation is not easy to find errors in code, especially in terms of variable naming. There is another importance to variables-that is, the scope of the variable. There are also global variables and local variables in JavaScript. Global variables are defined outside of all function bodies and scoped to the entire function, while local variables are defined within the body of the function and are visible only to the function, but not to other functions.
Expressions and Operators 1, expressionsAfter the variables are defined, they can be assigned, changed, calculated, and so on, which is often called a call expression to complete, it can be said that it is a set of variables, constants, Boolean and operators, so the expression can be divided into arithmetic expressions, string expressions, assignment expressions and Boolean expressions, etc.
2. OperatorsA sequence of symbols that the operator completes, with arithmetic operators in JavaScript, such as +,-, *,/, and so on, with comparison operators such as! =, = =, and so on; There are logical Boolean operators like! (inversion), |, | |; There are string operations such as +, + = and so on.
To illustrate
<script language= "JavaScript" >document.write ("<div><p>" +name+ "</p></div>"); varx, y; X=5; Y=10; functionPlus (x, y) {returnx+y; } varPlusresult =Plus (x, y); if(plusresult>15) {document.write ("<div><p>x+y>" + 15+ "</p></div>"); }Else{document.write ("<div><p>x+y=" + plusresult+ "</p></div>"); }</script>JavaScript program composition
JavaScript scripting language is composed of control statements, functions, objects, methods, properties, and so on to achieve programming.
One, program control flowIf condition statement
For Loop statement
While loop
Break and Continue statements
Take a comprehensive example to illustrate
<script language= "JavaScript" >varMaxCount = 5; varList =NewArray (); if(MaxCount >= 5) { for(vari = 0; i < MaxCount; i++) {List.push (i); } while(List.length > 0) { vartemp =List.pop (); document.write ("<div><p></p>temp=" + temp + "</p></div>"); Switch(temp) { Case0: document.write ("<div><p></p> First line </p></div>"); Break; Case1: document.write ("<div><p></p> second line </p></div>"); Break; Case2: document.write ("<div><p></p> Third line </p></div>"); Break; Case3: document.write ("<div><p></p> Line Fourth </p></div>"); Break; Case4: document.write ("<div><p></p> Line Fifth </p></div>"); Break; } } }</script>Second, function
Functions provide a very convenient ability for program designers. Usually when a complex programming is performed, the program is always divided into relatively independent parts based on the functions to be completed, and each part is written with a function. Thus, the parts are fully independent, the task is single, the procedure is clear, easy to read and easy to maintain. JavaScript functions can encapsulate modules that may be used more than once in a program. A program that can be invoked as an event-driven result. This enables a function to associate it with the event driver. This is a place that is not like other languages.
1. JavaScript function definition
Function name (argument, variable) { Description
2. Formal parameters in functions
In the definition of a function, we see that the function name has a parameter table, which may be one or several variables. So how do you determine the number of parameter variables? In JavaScript, you can pass arguments. Length to check the number of parameters.
<script language= "JavaScript" > function dealData (Srcdata, desdata) { var Number = arguments.length; return Srcdata + desdata; } </script>1. Basic Concepts
JavaScript is an object-based (object-based) language. This differs from Java in that Java is an object-oriented language. The basic feature of object-based is the use of event-driven (Event-driven). It is in the context of the use of the shape interface, so that all input changes to simplify. Usually the action of a mouse or hotkey is called an event, and the action of a sequence of programs triggered by a mouse or hotkey is called event Driver. Instead of handlers or functions for events, we call them event handlers (Handler).
2. Event handlers
The handling of object events in JavaScript is usually performed by functions. The basic format is the same as the function, and all the functions described earlier can be used as event handlers. The format is as follows:
function event handler name (parameter table) {
}3. Event-driven
Events in JavaScript event-driven events are caused by the action of a mouse or hotkey. It mainly has the following events:
(1) Click event onclick
The OnClick event occurs when the user clicks the mouse button. The event handler or code specified by the onclick is invoked to execute.
<script language= "JavaScript" > function submituserdata () { }</script> <input type= "Submit" onclick= "Submituserdata ()"/>(2) OnChange Change Event
This event occurs when the input character value of the text or Texturea element is changed, and the event is raised when an option state changes in the Select table item.
<Scriptlanguage= "JavaScript"> functiondestextareachanged () {varUsertextarea=document.getElementById ("Userdes"); varUserdesdiv=document.getElementById ("Userdesdiv"); Userdesdiv.innerhtml="<div><p>" +Usertextarea.value+ "</p></div>"; }</Script><Div><textareaname= "Userdes"ID= "Userdes"cols= " the"rows= " the"style= "Margin-top:5pt"onchange= "destextareachanged ()"/></textarea></Div><DivID= "Userdesdiv"></Div>
(3) Select Event Onselect
The event is raised when the text in the text or textarea object is highlighted.
(4) Get focus event onfocus
This event is generated when the user clicks the text or textarea and the Select object. The object becomes the foreground object at this point.
(5) Loss of focus onblur
When the text object or the TextArea object and the Select object no longer have focus and fall back to the background, the file is raised, and the Onfocas event is a corresponding relationship.
(6) Loading file onload
This event is generated when the document is loaded. The effect of onload is to detect the value of a cookie when it is first loaded, and assign it a variable so that it can be used by the source code.
(7) Uninstalling files OnUnload
The OnUnload event is raised when the Web page exits, and the status of the cookie can be updated.
Summarize:Learn the basics of JavaScript today. Learn more about JavaScript at a later moment.
JavaScript Basics of Hybrid app development
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
