JavaScript Basics of Hybrid app development

Source: Internet
Author: User
Tags control characters

Objective:

Before learning the basic use of HTML and CSS, today we begin to learn how to use JavaScript.

What is JavaScript

JavaScript 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 type

The 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 type

There 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. Constants

Integral 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. Variables

The 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:

    • Must be a valid variable, that is, the variable begins with a letter and can appear in the middle of a number such as test1, TEXT2, etc. Except for the underscore (-) as a hyphen, the variable name cannot have spaces, (+), (-), (,), or other symbols.
    • You cannot use a keyword in javascript as a variable. More than 40 class keys are defined in JavaScript, which is used internally by JavaScript and cannot be used as the name of a variable. such as Var, int, double, true cannot be the name of a variable. When you name a variable, it's best to match the meaning of the variable to the meaning it represents, lest there be an error.

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, expressions

After 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. Operators

A 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 flow
    • If 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

    • When a function is called, the variable or literal used can be passed as a variable.
    • Functions are defined by the keyword function.
    • Function Name: Defines the name of your own functions.
    • A parameter table is a value that is passed to or manipulated by a function, whose value can be a constant, variable, or other expression.
    • Invokes a function by specifying a function name (argument).
    • You must return the value using return.
    • The function name is sensitive to capitalization.

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>
Iii. event-driven and event-handling

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

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.