Native JavaScript First article

The history of JS

In the 1995 of the last century, Netscape was the most famous first generation Internet company in the Web era with its navigator browser.

Because Netscape wanted to be able to add some dynamic effects to the static HTML page, it was called Brendan Eich, the man who designed the JavaScript language within two weeks. You're right, this guy only took 10 days.

Why is it called JavaScript? The reason is that the Java language is very prosperous, so Netscape wants to borrow Java's fame to promote, but in fact, JavaScript in addition to the syntax is a bit like Java, the rest of the part basically does not matter.

JavaScript version compatibility

JavaScript language is designed in 10 days, although the language of the designer level is very NB, but who also jiabuzhu "time tight, task heavy", so, JavaScript has a lot of design flaws, we will slowly talk about later.

In addition, the latest version of the ECMAScript 6 standard (ES6) has been officially released in June 2015, as JavaScript's standard--ecmascript is evolving, so speaking of JavaScript versions, It actually means that it implements which version of the ECMAScript standard.

Since the browser at the time of release to determine the version of JavaScript, plus a lot of users are still using IE6 this ancient browser, which led you to write JavaScript, to take care of the old users, not to come up with the latest ES6 standard write, otherwise, The old user's browser is unable to run the new version of the JavaScript code.

The composition of JS

ECMAScript

ECMAScript is a standard.

Since Netscape developed JavaScript, a year later, Microsoft emulated JavaScript to develop JScript, and in order for JavaScript to become a global standard, several companies joined the ECMA (European computer manufacturers Association) organizations have customized the JavaScript language standard, known as the ECMAScript standard.

So simply put, ECMAScript is a language standard, and JavaScript is a ECMAScript standard for Netscape.

So why not just make JavaScript a standard? Because JavaScript is a registered trademark of Netscape.

But most of the time, we still use the word JavaScript. If you encounter the word ECMAScript, simply replace it with JavaScript.

Dom

Dom:document Object Model. Document Object model, behind which we will have a special course to explain DOM operations

Bom

Bom:browser Object Model. Browser object model, behind which we will also specialize in BOM operations

Features of JavaScript

(1), a scripting language for explanatory execution.

Like other scripting languages, JavaScript is an explanatory language that provides a very convenient development process. JavaScript has a very similar syntactic structure to C, C + +, and Java. But before use, unlike these languages need to be compiled first, but in the process of running the program is interpreted row by line. JavaScript is combined with the HTML identity to make it easier for users to work with.

(2), an object-based scripting language.

It can also be seen as an object-oriented language, which means that JavaScript can use the objects 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.

(3), a simple weakly typed scripting language.

Its simplicity is mainly reflected in: First, JavaScript is a simple and compact design based on Java basic statements and control flow, which makes it a good transition for users to learn Java or other C language programming languages, and for programmers with C language programming skills, JavaScript is also easy to get started with, and second, its variable type is weakly typed and does not use strict data types.

(4), a relatively safe scripting language.

JavaScript, as a security language, is not allowed to access local hard disks, and cannot store data on the server, modify and delete network documents, and only browse or dynamically interact with the browser. So as to effectively prevent the loss of data or illegal access to the system.

(5), an event-driven scripting language.

JavaScript responds to the user in an event-driven manner. An action that occurs in a Web page (Web page) that performs an action, called an event. For example, pressing the mouse, moving a window, selecting a menu, and so on can be considered an event. When an event occurs, it is possible to cause the corresponding event response to execute some corresponding script, which is called "event-driven".

(6), a cross-platform scripting language.

JavaScript relies on the browser itself, regardless of the operating environment, as long as the computer can run the browser, and support JavaScript browser, it can be executed correctly, thus realizing the "write once, go around the world" dream.

As a result, JavaScript is a new description language that can be embedded in HTML files. The JavaScript language can respond to consumer demand events (such as form input) without the need for any network to transmit data back and forth. So when a user enters a data, this data is not passed through to the server (server) processing and then back to the process, and directly can be processed by the client application.

3. JavaScript pros and cons

(1), The advantages of javascript:

<1>. JavaScript reduces network transmission.

Before the advent of user-side scripting languages such as JavaScript, traditional data submission and validation work was carried out over the network to the server by the client browser. If the amount of data is large, this is an intangible waste to the resources of the network and the server. With JavaScript, data validation can be done on the client.

<2>. JavaScript makes it easy to manipulate HTML objects.

JavaScript makes it easy to manipulate objects on various pages, and users can use JavaScript to control the appearance, state, and even operation of individual elements in the page, and JavaScript can "customize" the browser to the user's needs, making the page more friendly.

<3>. JavaScript supports distributed operations.

JavaScript enables multiple tasks to be done on the client side, without the need for network and server involvement, to support distributed operations and processing.

(2), JavaScript limitations:

<1> browser vendors have different levels of JavaScript support.

There are many browsers on the internet, such as Firefox, Internet Explorer, opera, and so on, but the degree to which each browser supports JavaScript is different, and when browsers browse a home page with JavaScript scripts, Because of the slightly different support for JavaScript, the effect will be a certain gap, and sometimes can not even show.

<2>. " Web Security "Some of the functionality of JavaScript is sacrificed.

When you set a design goal for JavaScript to "web security," you need to sacrifice some JavaScript functionality. As a result, pure JavaScript will not be able to open, read, and save files on the user's computer. The only information that it has access to is the information in the Web home page that the JavaScript embeds, in short, JavaScript will only exist in its own little World-web home page.

How JS is introduced

Introduction of JS code in a pair of script tags

In this way, the JS code and HTML code can be written in the same file, but note: It is best to write the JS code after the body, the loading order of the document is loaded from top to bottom, first the page content rendered, and then join the user interaction, so the user experience will be greatly enhanced.

Example code:

<html lang= "en" >

<head>

<Meta charset= "UTF-8"/>

<title>js Foundation </title>

</Head>

<body>

</Body>

<!--script is best placed after the body to handle interactive events until the content is displayed--

<script type= "Text/javascript" >

Warning Box

Alert (' Network error! ');

</Script>

</HTML>

The effect of opening with a browser is as follows:

Introduction of external JS code

We can write the JS code in a file with the suffix. js, and then introduce this JS file into the HTML document.

Operation Steps:

Create a directory folder for example JS, and then create a JS file with a suffix of. js in this folder, for example, called index.js;

Writes the path to the JS file in src in the script tag.

Example code:

<!doctype html>

<html lang= "en" >

<head>

<Meta charset= "UTF-8"/>

<title>js Foundation </title>

</Head>

<body>

</Body>

<!--script is best placed after the body to handle interactive events until the content is displayed--

<!--the second way: introduction of JS file--

<script src= "js/index.js" type= "Text/javascript" >

</Script>

</HTML>

Alert statement

We noticed that we used a statement above: alert (' Network error! ');. This is an alert statement that pops a cue box in the browser.

The variables in JS

What is a variable?

The variable is first a container that can be used to hold the data, and the data stored in the container can change. For example: I have a basin that can be loaded with sand, water, and food. This basin can be regarded as a variable, in which the water, sand, grain is stored in the variable value.

In life, we use paper to record and save information, and in computers we use variables to store information. The concept of variables is basically the same as the equation variables in junior algebra, but in computer programs, variables can be not only numbers, but also arbitrary data types.

How do I define a variable?

Use the keyword var + variable name + = (Assignment number) + value +; You can define a variable.

Example code: Define a variable:

var a = 12;

The above code defines a variable a, and the value stored in the variable is the number 12.

Naming rules for variables

Variables in JavaScript are represented by a variable name, which is a combination of uppercase and lowercase English, numeric, $, and _, and cannot begin with a number. The variable name cannot be a JavaScript keyword, such as if, while, and so on. Declare a variable with a var statement, such as:

var A; The variable A is declared, at this point the value of a is undefinedvar $b = 1; Declare the variable $b, at the same time assign value to $b, at this time $b value is 1var s_007 = ' 007 '; S_007 is a string var Answer =true; Answer is a Boolean value of Truevar t = null; The value of T is null

The variable name can also be Chinese, but because of the poor compatibility of Chinese, do not use Chinese as the variable name.

Variable Naming conventions:

Type prefix

Capitalize first letter

Basic data type of JS

Number

Number is a numeric type, in life, we call numbers that do not have decimal places as integers, numbers with decimal places are called decimals (called floating-point numbers in a computer), and JavaScript does not distinguish between integers and floating-point numbers, and the following are valid numeric types:

var a = 123; Integer 123var a = 0.456; Floating point 0.456var a = 1.2345e3; Scientific notation represents 1.2345x1000, equivalent to 1234.5var a =-99; Negative number Nan; Nan represents not a number, and Nan is used to denote infinity when the result cannot be computed; Infinity is infinitely large, and is represented as infinity when the value exceeds the maximum value that JavaScript can represent.

Number types can be added, minus, multiplied, removed, redundant, self-increasing, and self-reducing

String

strings are arbitrary text enclosed in single quotes ' or double quotes, such as ' abc ', ' XYZ ', and so on. Note that the ' or ' itself is only a representation, not a part of the string, so the string ' abc ' only a,b,c these 3 characters.

If ' itself is also a character, then you can use "", such as "I m OK" contains the characters are I, ', M, space, o,k these 6 characters.

What if the inside of a string contains both ' and contains '? You can use the escape character \ To identify, for example:

' I\ ' m \ ' ok\ '! ';

The string content represented is: I ' m "OK"!

Escape character

' Represents an escape character, and in a computer, some special characters are given special meaning by the system, such as ' means enclosing a string. But what do you want to do with the output? We can use the transfer character as above, and add an escape character before the special character, and the computer will treat the special character as a normal string.

Boolean value

In the computer, we use the true expression condition is established, the false expression condition is not tenable. True and False are Boolean values (Bollean).

In JS, we use True to represent true, false to indicate false. The Boolean value is true and false, without a third value. Boolean values are often used in conditional judgments.

var bo1 = true;//Boolean type result True and False

typeof () Gets the data type of the variable (it can also be obtained by ypeof () without knowing the type of the variable)

Alert (typeof(BO1));

null and undefined

Null represents an "empty" value, which differs from 0 and an empty string ' ', 0 is a numeric value, ' ' represents a string of length 0, and null denotes null.

In other languages, there are also JavaScript-like null representations, such as Java, which is also used with the Null,swift Nil,python with none. However, in JavaScript, there is also a null-like undefined, which represents "undefined."

The designer of JavaScript wants NULL to represent an empty value, while undefined indicates that the value is undefined. It turns out that there is no such thing as an egg, and the difference between the two is insignificant. In most cases, we should all use NULL. Undefined is useful only when judging whether a function parameter is passed or not.

Expand the undefined type

If we do not set a value for a variable, it is undefined type;var color;

Alert (typeof color);

The operators in JS

Arithmetic operators

+ Plus

-Minus

* Multiply

/except

% Redundancy (modulo)

Assignment operators

= assigned value

+ = plus value Assignment

-= minus value assignment

*= Multiply post-assign value

/= In addition to the post-assignment value

%= post-mold assignment value

Relational operators

> Greater than

< less than

<= less than or equal to

>= greater than or equal to

= = Equals (if the left and right sides of the type are inconsistent, then implicitly converts to a consistent type before comparing)

= = = Equals (returns False if both left and right types are inconsistent)

! = does not equal (if the left and right types are inconsistent, then implicitly converts to a consistent type before comparing)

!== not equal to (no conversion type, direct comparison)

logical operators

&& and

|| Or

! Non-

The logical operator of JS

The result of the logical operation is a Boolean value, with three logical operators in JS:

&& and

|| Or

! Non-

Logic and &&

How to write: expression one && expression two. The true condition of the logic and expression is that when the expression of both right and left is set up, the whole logic and expression are established, so long as one expression is not true, the whole logical expression is false.

Logical OR | |

How to write: Expression One | | Expression Two. A logical OR expression is true if the expression is both left and right, and if one is true, the entire expression is true. The entire expression is false only if both sides of the expression are false at the same time.

Logical Non!

The writing method is:! An expression. Logic is not the result of the original expression to take the inverse operation. If the original expression is true, the returned value is false after the logical non-operation, and the expression is true after the logical non-arithmetic.

Native JavaScript First article