JS detailed Getting Started tutorial (top)

First, let's look at the DOM level and compatibility:

It seems that there are 0 levels in the DOM before, in fact, the DOM0 standard does not exist. The DOM has 1, 2, and 33 levels. The DOM1 level consists of two modules (Dom Core and Dom HTML), where the DOM core specifies how to map an XML-based document structure to simplify access and manipulation of any part of the document. Dom HTML modules are expanded on the basis of the DOM core, adding objects and methods for HTML. Based on the original DOM, the DOM2 class also expands the subdivision modules such as view and user interface events, scopes, traversal (methods of iterating DOM documents), and adds support for CSS (cascading style Sheets, cascading style sheets) through the object interface. The DOM3 class extends the DOM further, introducing a way to load and save documents in a uniform way – defined in DOM load and save (DOM load and save) modules, and new methods for validating documents – defined in the DOM validation (DOM Validation) module.

One or six types of data

JavaScript is a weak data type, what are the characteristics of this weak data type? Take a look at the following example:

JavaScript has a total of 6 data types, of which five primitive types (base types), one object type (reference type).

Reference type:

object, including the object type, array type, date type, regexp type, function type.

Basic type:

Number, String, Boolean, null, undefined.

Types of conversions and detections:

(1) Implicit conversion: skillfully use + 、-、 = = Rule conversion type

num-0 so you can convert a string to a number

Example: "17"-7//10

num+ "" To convert a number to a string

Example: "17" +7//177

Type is the same, with = = to detect equality, type is different, try type conversion and comparison, some of the rules are:

null==undefined equal

Number==string Turn number

boolean==? Turn number

Object==number|string trying to convert an object to a basic type

Other: False

For example:
Note: = = = is the absolute meaning, only the type and the value are equal will be established.

More:

(2) Type detection

Detection methods: typeof, Instanceof, Object.prototype.toString, constructor, duck type

typeof and Instanceof are more commonly used, among which typeof is more suitable for the judgment of function object and basic type, instanceof is often applied to judging object type, and its judgment is based on the prototype chain. For example:

typeof//"number"

typeof Ture//"Boolean"

typeof (undefined)//"undefined"

typeof new Object ()//"Object"

typeof [+]//"Object"

typeof NAN//"undefined"

typeof function//"function"

typeof null//"Object"

Note: Historically, the null type = = = ' null ', but many sites have no way of normal access, and later decided that null is returned by object. So typeof null=== "Object"//true

Note: Object type detection between different window or IFRAME cannot use instanceof!

More:

Ii. Expressions and operators

Expression type: original expression, initialization expression, function expression, property access expression, call expression, object creation expression.

Initialization expressions: New Array (UP), [+], etc.

Property access expression: Var o={x:1}; o.x;o[' x]

Call expression: Func ()

Object creation expression: new object;

Operator: Comma ",", Delet, in, new, this

Comma usage: A, b

such as: Var val= (+/-)

Delet usage: delet obj.x

such as: Var obj={x:1};

obj.x; 1

Delet obj.x

obj.x; Undefined

Note: Starting with IE9, the new configurable tag can be delet if the value of this element is true. When an object is created, the value of the default configurable property is true.

In usage: window.x=1;

' X ' in window; True

More:

Third, the statement

The statements are: block, Var, try catch, function, for...in, with

Block

Note: There is no block-level scope in JS. Therefore, the scope of the variable defined in the For loop is expanded. The variable defined inside the for loop can still be accessed after the for loop.

Try catch:

function

function declaration:

FD (); True

function fd () {...}

function expression:

var fe=function () {...}

Note: The function declaration takes effect before execution, so it is also possible to call the function before the function. However, the function expression does not take effect before execution, so it cannot be advanced.

For...in:

var p;

var obj={x:1,y:2}

For (p in obj) {...}

Attention:

The traversal order of the for...in is indeterminate, except that each element of the traversal is traversed by the output, but not necessarily in the order in which it is defined. Also, when enumerable is false, it cannot be traversed with for...in. In addition, for...in is affected by the prototype chain when traversing object properties.

Strict mode:

Strict mode is a special operating mode that fixes some of the language deficiencies, provides more robust error checking, and enhances security. The strict mode is up-compatible.

The difference between strict mode and normal mode:

① is not allowed with, error (syntax errors) if used

② non-declared variables are not allowed to be assigned

③arguments into a static copy of the parameter

④delete parameter, function name error
⑤delete properties that are not configurable will also be error-

⑥ object literal repeating property name error

⑦ Block octal literals

⑧eval, arguments becomes a keyword, cannot be used as a variable, function name

Iv. objects

The object contains a series of properties that are unordered. Each property has a string key and the corresponding value.

Data properties: Configurable, enumerable, writable, value

Accessor properties: Configurable, enumerable, get, set, accessor properties cannot be defined directly, and object must be used. Definedproperty () to define.

Creating objects

The first is the use of the new operator followed by the object constructor ,

As shown below:

var person = new Object (); Person.name = "Nicholas"; person.age = 29;

This method should pay attention to the problem of the prototype chain:

In particular, not all objects will inherit object:

Another way is to use object literal notation.

var person = {Name: "Nicholas", age:29};

In addition, when you use object literal syntax, if you leave the curly braces blank, you can define an object that contains only the default properties and methods, such as:

var person = {}; Same as New Object ()

Person.name = "Nicholas"; person.age = 29;

Property manipulation

Property operations include: Read-write Object properties, property exceptions, delete properties, detect properties, enum properties

Property Exception:

To delete a property:

Detection properties:

Use the hasOwnProperty () method to determine whether an object has a property, and use the propertyIsEnumerable () method to determine whether a property can be enumerated.

Extensible Tags:

Design Patterns

① Factory mode

function Createperson (name, age, Job) {

var o = new Object ();

O.name = name;

O.age = age;

O.job = job;

O.sayname = function () {

alert (this.name);

};

return o;

}

var person1 = Createperson ("Winty", "Software Engineer");

var person2 = Createperson ("Luckywinty", "Student");

② constructor Mode

function person (name, age, Job) {

THIS.name = name;

This.age = age;

This.job = job;

This.sayname = function () {

alert (this.name);

};

}

var person1 = new Person ("Winty", "Software Engineer");

var person2 = new Person ("Luckywinty", "Student");

③ prototype mode

function person () {}

Person.prototype.name = "Winty";

Person.prototype.age = 29;

Person.prototype.job = "Software Engineer";

Person.prototype.sayName = function () {

alert (this.name);

};

var person1 = new Person ();

Person1.sayname (); "Winty"

var person2 = new Person ();

Person2.sayname (); "Winty"

Alert (Person1.sayname = = Person2.sayname); True

④ combination using constructor mode and prototype mode

function person (name, age, Job) {

THIS.name = name;

This.age = age;

This.job = job;

This.friends = ["Shelby", "Court"];

}

Person.prototype = {

Constructor:person,

Sayname:function () {

alert (this.name);

}

}

var person1 = new Person ("Winty", "Software Engineer");

var person2 = new Person ("Luckywinty", "Student");

Person1.friends.push ("Van");

alert (person1.friends); "Shelby,count,van"

alert (person2.friends); "Shelby,count"

Alert (person1.friends = = = Person2.friends); False

Alert (Person1.sayname = = = Person2.sayname); True

⑤ Dynamic Prototyping Mode

function person (name, age, Job) {

THIS.name = name;

This.age = age;

This.job = job;

if (typeof this.sayname! = "function") {

Person.prototype.sayName = function () {

alert (this.name);

};

}

}

var friend = new Person ("Winty", "Software Engineer");

Friend.sayname ();

⑥: Parasitic constructor mode

function person (name, age, Job) {

var o = new Object ();

O.name = name;

O.age = age;

O.job = job;

O.sayname = function () {

alert (this.name);

};

return o;

}

var friend = new Person ("Winty", "Software Engineer");

Friend.sayname (); "Winty"

⑦ Secure Structural function mode

The so-called secure object refers to the absence of a public property, and its method does not refer to the object of this. Secure objects are best suited for use in some secure environments where this and new are prohibited, or when data is being altered by other applications, such as mashup programs. The secure constructor follows a pattern similar to the parasitic constructor, but has a difference of two points: one is that the instance method of the newly created object does not refer to this, and the second is not to call the constructor with the new operator. The preceding person constructor can be rewritten as follows, as required by the secure constructor.

function person (name, age, Job) {

var o = new Object ();

O.sayname = function () {

alert (name);

};

return o;

}

----NOT to be continued

Welcome to my personal subscription number: Life on the front

Reprint please specify the source!

JS detailed Getting Started tutorial (top)