JavaScript for the front-end base

Source: Internet
Author: User
Tags arithmetic arithmetic operators function definition logical operators numeric value script tag

JavaScript Overview of JavaScript history
    • 1992 Nombas developed the embedded scripting language for C-minus-minus (c--), which was originally bound to Cenvi software, and renamed it Scriptease (the language that the client executes).
    • Netscape (Netscape) received Nombas's philosophy, (Brendan Eich) developed a set of Netscape scripting languages in its Navigator livescript 2.0 product. Sun and Netscape were done together, and then renamed JavaScript.
    • Microsoft then emulated a JavaScript clone called JScript in its IE3.0 product.
    • To unify the three, the ECMA ( European Computer Manufacturing Association) defines the ECMA-262 specification. The International Organization for Standardization (ISO/IEC) also adopted ECMAScript as the standard (iso/iec-16262). Since then, Web browsers have struggled (albeit with varying degrees of success and failure) to ECMAScript as the basis for JAVASCRIPT implementations.
    • ECMA-262 is the official name of the JavaScript standard.
ECMAScript
Year Name Describe
1997 ECMAScript 1 First version
1998 ECMAScript 2 Version change
1999 ECMAScript 3

To add a regular expression

Add Try/catch

ECMAScript 4 Not published
2009 ECMAScript 5

Add "strict mode" strict modes

Add JSON support

2011 ECMAScript 5.1 Version change
2015 ECMAScript 6 adding classes and modules
2016 ECMAScript 7

Increase the exponential operator (* *)

Increase Array.prototype.includes

Note: ES6 means ECMAScript 6.

Although ECMAScript is an important standard, it is not the only part of JavaScript, and certainly not the only one that is standardized. In fact, a complete JavaScript implementation is made up of the following 3 different parts:

    • Core (ECMAScript)
    • Document Object Model (DOM) Documents object models (consolidated js,css,html)
    • Browser object models (BOM) Broswer object Model (integrated JS and browser)

Simply put, ECMAScript describes the content of the JavaScript language itself.

JavaScript is a scripting language
JavaScript is a lightweight programming language.

JavaScript is a programmatic code that can be inserted into an HTML page.

When JavaScript is inserted into an HTML page, it can be performed by all modern browsers.

JavaScript is easy to learn.

how JavaScript is introducedwrite code inside the script tag
< Script >  // Write your JS code here </ Script >

Introduction of additional JS files
<src= "Myscript.js"></script>  
JavaScript Language SpecificationComments (Comments are the mother of code)
// This is a single-line comment /* This is a multi-line comment */

Terminator

The statements in JavaScript are terminated with a semicolon (;).

JavaScript Language BasicsVariable Declaration
    1. The variable name of JavaScript can be composed of _, number, letter, $, and cannot begin with a number.
    2. declaring variables using var variable names; The format to declare
      var name = "Alex"; var age = 18;

Attention:

Variable names are case-sensitive.

Camel-named rules are recommended.

Reserved words cannot be used as variable names.

Abstract Boolean byte Char Classconst Debugger Double enumexportextendsfinal float Gotoimplementsimport int Interface Long Nativepackageprivateprotectedpublic  Short staticsupersynchronizedthrowstransientvolatile reserved word list
Reserved Words

JavaScript data types

JavaScript has a dynamic type

var x;  // at this point x is undefined var x = 1;  // at this point x is the number var x = "Alex"  //

Number Type

JavaScript does not differentiate between integral and floating-point types, there is only one numeric type.

var a = 12.34; var b =; var c = 123e5;  // 12300000 var d = 123e-5;  // 0.00123  

There is also a Nan, which indicates that it is not a number.

Common methods:

parseint ("123")  //  return 123parseint ("ABC")  //  return Nan,nan property is a special value that represents a non-numeric value. This property is used to indicate that a value is not a number. parsefloat ("123.456")  //  return to 123.456

String

var a = "Hello"  var b = "world;var c = a + B; String Stitching Console.log (c);  Get HelloWorld

Common methods:

Method Description
. length return length
. Trim () Remove whitespace
. Trimleft () Remove the left margin
. TrimRight () Remove the blank on the right
. CharAt (N) Returns the nth character
. concat (value, ...) Stitching
. indexOf (substring, start) Sub-sequence position
. substring (from, to) Get sub-sequences by index
. Slice (start, end) Slice
. toLowerCase () Lowercase
. toUpperCase () Capital
. Split (delimiter, limit) Segmentation

Splicing strings generally use "+"

>> stop does not swap both if start is less than 0, then the cut starts at the end of the string, starting at the beginning of the first (including the character at that position) if stop is less than 0, then cutting the ABS from the end of the string forward (stop) character end (does not contain the position character)

Boolean type

The difference between python,true and false is lowercase.

var true ; var false;

"" (empty string), 0, null, undefined, Nan are all false.

Array

Similar to the list in Python.

var a = [123, "ABC"];console.log (a[1]);  // output "ABC"

Common methods:

Method Description
. length The size of the array
. push (Ele) Trailing append Element
. Pop () Gets the trailing element
. Unshift (Ele) Head Insert Element
. Shift () Removing elements from the head
. Slice (start, end) Slice
. Reverse () Reverse
. Join (SEQ) Concatenate array elements into a string
. concat (Val, ...) Connection array
. Sort () Sort

Attention:

/* If no parameters are passed when the sort method is called, the elements in the array are sorted alphabetically, more precisely, by the order in which the characters are encoded. To do this, you should first convert the elements of the array to a string, if necessary, for comparison. If you want to sort by other criteria, you need to provide a comparison function that compares two values and returns a number that describes the relative order of the two values. The comparison function should have two parameters A and B, whose return value is as follows: If A is less than B, a value less than 0 is returned if a should appear before B in the sorted array. If a equals B, 0 is returned. If a is greater than B, a value greater than 0 is returned.  */ /// implement a sort function according to the above rules:function  sortnumber (a  , b) {  Return A- B}//  Call the sort method to pass in the defined sorting function.  Stringobj.sort (sortnumber) questions about sort
Sort Method

The elements in the array can be traversed in the following ways:

var a = [ten, +, +];  for (var i=0;i<a.length;i++) {  console.log (i);}

null and undefined
    • Null indicates that the value is empty and is generally used when a variable needs to be specified or emptied, such as name=null;
    • Undefined indicates that when a variable is declared but not initialized, the default value of the variable is undefined. There is also the undefined that is returned when the function has no definite return value.

Null means that the value of the variable is empty, and undefined means that only the variable is declared, but it has not been assigned a value.

Still don't understand, right!

Type query
typeof "ABC"  //  "string" Return is a string typeofnull  //  "Object" returns is an object typeof true  // "Boolean" Return is a Boolean value typeof // "Number" returns a numeric

typeof is a unary operator (like ++,--,! ,-the unary operator), is not a function, nor is it a statement.

Calling the TypeOf operator on a variable or value returns one of the following values:

    • Undefined-If the variable is of type undefined
    • Boolean-If the variable is of type Boolean
    • Number-If the variable is of type number
    • String-If the variable is of type string
    • Object-If the variable is a reference type or a Null type

Operator arithmetic operators
+ - * / % ++ --

comparison Operators
> >= < <= = = = = = = =!==

Attention:

1 = = "1"  //  True does not compare type, compare value 1 = = = "1"  //  false  compare type and value

logical Operators
&& (and, with)  | | (or, OR)      ! (non)

Assignment Operators
= += -= *= /=

Process ControlIf-else
var a = 10; // declaring a variable if (A > 5) {  Console.log ("yes");} Else {  Console.log ("no");} // if the a>5 outputs Yes, otherwise no

If-else If-else
var a = 10; // Define a variable if (A > 5) {  Console.log ("a > 5");} Else if (A < 5) {  Console.log ("A < 5");} Else {  Console.log ("a = 5");} // if A>5 // or A<5 . // otherwise a=5

Switch

The case clause in switch usually adds a break statement, or the program continues to execute the statements in the subsequent case.

For while ternary arithmetic function function definition

The functions in JavaScript are very similar to those in Python, but the way they are defined is somewhat different.

Arguments

Output:

Global variables and local variables for functions

Local Variables :

A variable declared inside a JavaScript function (using VAR) is a local variable, so it can only be accessed inside the function (the scope of the variable is inside the function). As soon as the function is complete, the local variable is deleted.

Global variables:

Variables declared outside of a function are global variables, and all scripts and functions on a Web page can access it.

Variable life cycle:

The lifetime of JavaScript variables begins at the time they are declared.

Local variables are deleted after the function is run.

Global variables are deleted after the page is closed.

Scope

First, find the variable inside the function, find the outer function to find it, and find the outermost layer gradually.

A few examples:

1.

2.

3. Closures

Lexical analysis

In JavaScript, the lexical analysis is performed at the moment the function is called.

The process of lexical analysis:

When a function is called, an active object is formed first: Avtive object (AO), and analyzes the following 3 aspects:

1: function parameter, if any, assigns this parameter to AO, and the value is undefined. If not, no action is made.
2: Function local variable, if there is a value with the same name on the AO, no action is done. If not, the variable is assigned to AO, and the value is undefined.
3: function declaration, if there is on the AO, the object on the AO will be overwritten. If not, no action is made.

Inside the function, either use a parameter or use a local variable to find it on the AO.

See two examples:

The second question:

Built-in objects and methods

All things in JavaScript are objects: strings, numbers, arrays, dates, and so on. In JavaScript, objects are data that owns properties and methods.

We have learned about the basic data types, the number object in JavaScript, the string object, the array object, and so on.

Note the difference between var S1 = "abc" and var s2 = new String ("abc"): TypeOf S1--string and typeof S2--Object

Custom Objects

Similar to (in some respects) a dictionary data type in Python

Iterate through the contents of the object:

Things are not that simple ...

To create an object:

Extended:

Date Object

Create a Date Object

Method of the Date object:

Practice:

Write the code to export the current date as "2017-12-27 11:11 Wednesday" format.

Detailed Date object method: Point Me

JSON object RegExp Object

Extended Reading

Math Object

JavaScript for the front-end base

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.