1.0 variable

If a variable is declared outside the function, it’s a global variable and if it’s declared inside the function, it’s a local variable

If you place the value in quotes, the rest of the value is treated as a string and cascaded:

var x = 3 + 5 + "8";
Copy the code

If you go from left to right, you get 88

2.0 the operator

2.1 Arithmetic operators

2.2 Assignment operators

2.3 Comparison operators

2.4 Logical operators

2.5 Type operators (for detection)

3.0 Data Types

JavaScript variables can hold multiple data types: numbers, string values, arrays, objects, and so on:

var length = 7; Var lastName = "Gates"; Var cars = ["Porsche", "Volvo", "BMW"]; Var x = {firstName:"Bill", lastName:"Gates"}; / / objectCopy the code

String values: Enclosed in single and double quotation marks. Values: numbers 1 2 3 Integer or decimal Boolean values :true(true) or false(false) Arrays are written in square brackets [] objects are written in curly brackets {}

Undefined In JavaScript, a variable that has no value and whose value is Undefined. Typeof also returns undefined.

Null in JavaScript, Null is “nothing”. It’s seen as something that doesn’t exist. Unfortunately, in JavaScript, null’s data type is an object.

Undefined has the same value as Null, but not the same type:

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true
Copy the code

4.0 the function

Function toCelsius(Fahrenheit) {return (5/9) * (Fahrenheit); } document.getelementById ("demo"). InnerHTML = toCelsius(77); // Call parameter passingCopy the code

5.0 the Object Object

Objects have properties and method values written as name: value pairs (names and values are separated by colons). JavaScript objects are containers of named values. Name: Value pairs (in JavaScript objects) are called properties.

Var person(name) = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};Copy the code

5.1 Two Ways to Access object properties

objectName.propertyName
Copy the code

objectName["propertyName"]
Copy the code

Add attributes to an object

<! DOCTYPE HTML >< HTML >< body> <h1>JavaScript object constructor </h1> <p id="demo"></p> <script> // Person object constructor function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; Var myFriend = new Person("Bill", "Gates", 62, "blue"); var myBrother = new Person("Steve", "Jobs", 56, "green"); // Add nationality to the first object myfriend.nationality = "English"; Document.getelementbyid ("demo"). InnerHTML = "My friend is "+ myFriend. </script> </body> </html>Copy the code

5.2 Object Access Methods

You typically describe fullName() as a method on a Person object and fullName as an attribute.

The fullName attribute is executed as a function when called through ().

This example accesses the fullName() method of the person object:

name = person.fullName();
Copy the code

If you access the fullName attribute without using (), the function definition is returned:

name = person.fullName;
Copy the code

Add a new method

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}
Copy the code

The value of the changeName() function name is assigned to the lastName attribute of Person.

myMother.changeName("Jobs");
Copy the code

5.3 Using Object literals (this is the simplest way to create objects)

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:62,
    eyeColor:"blue"
};
Copy the code

5.4 the for… In circulation

JavaScript for… The IN statement traverses the properties of the object.

grammar

For (variable in object) {code to execute}Copy the code

for… The code block in the IN loop executes once for each attribute.

Properties of the loop object:

var person = {fname:"Bill", lname:"Gates", age:62}; 

for (x in person) {
    txt += person[x];
}
Copy the code

Result :Bill Gates 62

5.5 This Keyword

In JavaScript, the thing called this refers to the object that owns the JavaScript code.

The value of this, when used in a function, is the object that “owns” the function.

Note that this is not a variable. It’s the key word. You cannot change the value of this.

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}
Copy the code

5.6 Adding and Deleting Attributes

<! DOCTYPE HTML > < HTML > <body> <h1>JavaScript object properties </h1> <p> You can add new properties to existing objects. </p> <p id="demo"></p> <script> var person = { firstname:"Bill", lastname:"Gates", age:62, eyecolor:"blue" }; person.nationality = "English"; Document.getelementbyid ("demo").innerhtml = Person.firstName + "is" + Person.nationality + "."; </script> </body> </html>Copy the code

Delete keyword removes properties from objects: The DELETE keyword does not delete inherited properties, but if you delete a stereotype property, it affects all objects inherited from the stereotype.

<! DOCTYPE HTML > < HTML > <body> <h1>JavaScript object properties </h1> <p> You can delete object properties. </p> <p id="demo"></p> <script> var person = { firstname:"Bill", lastname:"Gates", age:62, eyecolor:"blue" }; delete person.age; //delete keyword deletes an attribute from an object:  document.getElementById("demo").innerHTML = person.firstname + " is " + person.age + " years old."; </script> </body> </html>Copy the code

5.7 Object Accessors (Getters and Setters)

ECMAScript 5 (2009) introduced getters and setters.

Getters and setters allow you to define object accessors (properties to be evaluated). This example uses the lang attribute to get the value of the language attribute.

JavaScript Getter (get keywords)

This example uses the lang attribute to get the value of the language attribute.

Var person = {firstName: "Bill", lastName: "Gates", language: "en", get lang() {return this. Language; }}; // Use getter to display data from the object: document.getelementById ("demo").innerhtml = person.lang;Copy the code

JavaScript setters (set keywords)

This example uses the lang property to set the value of the language property.

The instance

var person = { firstName: "Bill", lastName : "Gates", language : "", set lang(lang) { this.language = lang; }}; // Use setters to set object properties: person.lang = "en"; // Display data from the object: document.getelementById ("demo").innerhtml = person.language;Copy the code

Object instance

<! DOCTYPE HTML >< HTML >< body> <h1>JavaScript </h1> <p id="demo"></p> <script> function Person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } var myFriend = new Person("Bill", "Gates", 62, "blue"); var myBrother = new Person("Steve", "Jobs", 56, "green"); document.getElementById("demo").innerHTML = "My friend is " + myFriend.age + ". My brother is " + myBrother.age; </script> </body> </html>Copy the code

5.8 Prototype Inheritance

All JavaScript objects inherit properties and methods from stereotypes.

The Date object inherits from date.prototype. Array objects inherit from array. prototype. The Person object inherits from Person.prototype.

Object. Prototype is at the top of the prototype inheritance chain:

Date objects, array objects, and Person objects all inherit from Object.Prototype.

5.9 Using the Prototype Attribute

The JavaScript Prototype property allows you to add new properties to the object constructor:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
Copy the code

The JavaScript Prototype property also allows you to add new methods to the object constructor:

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};
Copy the code

6.0 HTML event

The onclick attribute

<button onclick=' document.getelementById ("demo").innerhtml =Date()'> </button>Copy the code

7.0 String Methods

JavaScript calculates position from zero.

7.1 Length Property Returns the length of a string

Var TXT = "ABCDEFGHIJKLMNOPQRSTUVWXYZ (26 English letters)"; var sln = txt.length;Copy the code

The results of 26

7.2 Finding A String in a String

The indexOf() method returns the index (position) of the first occurrence of the specified text in the string:

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
Copy the code

The results of 17

The lastIndexOf() method returns the index of the last occurrence of the specified text in the string:

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
Copy the code

The results of 51

Both methods accept a second parameter as the starting location for retrieval.

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);
Copy the code

Counting backwards from index position 18 to the end of the string gives 51

var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);
Copy the code

Count backwards from index position 50 to the end of the string, resulting in 17

8.0 Digital Methods

ToString () returns a value as a string; toString() returns a string value that contains rounded exponential numbers. ToFixed () returns a string value that contains a number specifying a decimal number: toFixed(2) is great for handling money. ToPrecision () returns a string value that contains a number of specified length: valueOf() returns a value with a value: These three JavaScript methods can be used to convert a variable to a number:

Number() method parseInt() method parseFloat() method

Numeric properties cannot be used for variables Numeric properties belong to a JavaScript numeric object wrapper named number.

These attributes can only be accessed as number.max_value.

Use mynumber. MAX_VALUE, where myNumber is a variable, expression, or value, to return undefined:

var x = 6; var y = x.MAX_VALUE; // y becomes undefinedCopy the code

9.0 Array methods

The JavaScript method toString() converts an array to a comma-separated string of array values.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
Copy the code

The result of Banana, Orange, Apple, Mango

The join() method can also combine all array elements into a single string.

It behaves like toString(), but you can also specify delimiters:

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
Copy the code

The result is Banana * Orange * Apple * Mango

10 Array sort

The sort() method sorts arrays alphabetically:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();  
Copy the code

The result for the Apple, Banana, Mango, and Orange

The reverse() method reverses the elements in the array.

var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); Fruit.reverse ();Copy the code

The result for the Orange, Mango, Banana, Apple

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

JavaScript note 1

1.0 variable

2.0 the operator

2.1 Arithmetic operators

2.2 Assignment operators

2.3 Comparison operators

2.4 Logical operators

2.5 Type operators (for detection)

3.0 Data Types

4.0 the function

5.0 the Object Object

5.1 Two Ways to Access object properties

5.2 Object Access Methods

Add a new method

5.3 Using Object literals (this is the simplest way to create objects)

5.4 the for… In circulation

5.5 This Keyword

5.6 Adding and Deleting Attributes

5.7 Object Accessors (Getters and Setters)

5.8 Prototype Inheritance

5.9 Using the Prototype Attribute

6.0 HTML event

7.0 String Methods

7.1 Length Property Returns the length of a string

7.2 Finding A String in a String

8.0 Digital Methods

9.0 Array methods

10 Array sort

JavaScript note 1

1.0 variable

2.0 the operator

2.1 Arithmetic operators

2.2 Assignment operators

2.3 Comparison operators

2.4 Logical operators

2.5 Type operators (for detection)

3.0 Data Types

4.0 the function

5.0 the Object Object

5.1 Two Ways to Access object properties

5.2 Object Access Methods

Add a new method

5.3 Using Object literals (this is the simplest way to create objects)

5.4 the for… In circulation

5.5 This Keyword

5.6 Adding and Deleting Attributes

5.7 Object Accessors (Getters and Setters)

5.8 Prototype Inheritance

5.9 Using the Prototype Attribute

6.0 HTML event

7.0 String Methods

7.1 Length Property Returns the length of a string

7.2 Finding A String in a String

8.0 Digital Methods

9.0 Array methods

10 Array sort

Related Posts

Template Engine Implementation Principles (Vue)

Chrome is reminding you again that it’s time to upgrade HTTPS

Vue.js source code learning – data driven