JS Knowledge dot Mess stew

Modify the property element. style. = value document.getElementById (' box '). style.width= ' 200px ';

Property operation mode
1,. The
Element. Property name
If the attribute is a single attribute, the dot operator is not available, and will also error: When the point Operation property, the following can only be followed by the real property name, not with the variable name
If you want to use the dot operator to get a property with a cross bar, first remove the bar and then capitalize the first letter that follows the bar
2, [] the
If the property with a bar, using [] the way to manipulate the property: [] Operation of the property, the inside can put the property name and variable name, if put the property name, then add quotation marks, if you put the variable name, it does not need to add quotation marks

Properties: Some of the characteristics of an element

1, the system comes with the property
* Type, ID, style, value, SRC
2. Attributes added by yourself btn.kaivon= ' name ';
* Custom attributes, which are not in the system, we added ourselves
* The system comes with attributes that don't meet our needs and give a property that you add yourself

Inputs[i].index=i; //Add a custom property to each button, with their corresponding index values

The value of the form: element. Value

Gets the attribute class: With the element. ClassName

Gets all the contents of a label pair (including sub-tag pairs): element, InnerHTML

Address: href (connected address) and SRC (address of image):href and src take the absolute address, not the value in the attribute; Remember not to take the value of href and src to judge

If the element is not loaded, the object JS gets is null so the JI code is placed in window.onload=function () {}

Definition of a function

Function name (parameter) {
You can use this parameter here
And here's the code that you want to reuse.
}

function call function name (parameter);

function expression:

var variable =function (parameter) {

The code to execute
}

function expression invocation: variables (parameters)

anonymous functions a function without a name

* Anonymous function can not be directly declared, will be error
*
* How to use anonymous functions
* When an anonymous function appears in the form of an assignment, and it is called by the event
Event Window.onload Assignment =
event = anonymous function
Window.onload=function () {
Alert (1);
}

Break: Stop all remaining loops

Continue: Stop this cycle

Return: Returns, lets the function stop execution, it can only be used within the function

Function parameters: The function is passed to the data inside the function, so that the data can be used in the function, and multiple words are separated by commas.

Arguments object: Represents all the Arguments collection (class array) This set also has a length, which represents the number of arguments it can only be used within a function

function result return value: return

Returns the return result, and return, the code is no longer executed, the function ends; no return undefined;

Scope The global variable is a property under window, declared outside the function

Local Variables and local functions can only be used where they are declared, but not in other places.

functions (function declarations, not function calls) can be nested, and nested functions (local functions) can access the contents of the parent function

The child object looks up the variables for all the parent objects first-level. Therefore, all variables of the parent object are visible to the child object, and vice versa.

JS will parse the function or variable in advance.

Steps

1, first find the Var, function (Declaration of functions) keywords and parameters

2, if found Var (declared variables, parameters), he will be assigned a undefined. If we find the function, it will take the whole thing.

3, put the found things to the corresponding scope of the beginning of the position

4. Progressive Code Execution

Note: The function expression is not pre-parsed, so it can only be declared and then called before the call is placed in front of the declaration (or it will be an error)

Life cycle

The time at which a variable or function exists in the corresponding scope

function finished, local variables end of life

Page closed, global variables end of life

Closed Package

function nesting function, the child function accesses the variable of the parent function, it produces a closure environment

The function of closure: 1, the function can be used outside the local variables and local functions, 2, in the loop to find the corresponding I value

Its maximum usefulness is two, one of the previously mentioned variables that can read the inside of a function, and the other is to keep the values of these variables in memory at all times.

Garbage collection mechanism

Variables exist in memory, and when the variables are used, they are not used anywhere else and are cleared to free up memory. The garbage collection mechanism is periodically executed at a fixed time.

string concatenation:+ when there is a string on either side of the plus sign, it is the meaning of the string concatenation

* If syntax
* IF (judging condition) {
* When the judging condition is set up, execute the code here
*}else if (judging condition 1) {
* When the headline condition 1 is set up, execute the code here
*}else if (judging condition 2) {
* When judging Condition 2 is established, execute the code here
*}else{
* When the above conditions are not true, execute the code here
* }
When a condition is met, the code will only go through the contents of the curly braces that meet the conditions. None of the rest will go.

Array Length Property

document.getElementById (id name)

Queryselector (CSS selector)
* Use CSS selector to get an element
* It gets to only one element, if there is repetition, then it only takes the first one
*
* Subject
* Document gets elements from the entire documentation
* Parent gets elements from parent

* Queryselectorall (CSS selector)
* Get a set of elements through the CSS selector
* It gets a set of elements, it's also an array of classes
*
* Subject
* Document gets a set of elements from the entire page
* Parent gets a set of elements from the parent down

For loop:

for (conditional initialization; condition judgment; condition change) {
Repeat the code here when the condition is set (true)
}

First step: Conditional initialization

Step Two: Conditional judgment

Step three: Take the code in curly braces

Fourth Step: Condition Change

Second cycle: Second step, third step, fourth step

The for in is used to traverse the data in the object:

for (var variable name in object) {
* Attribute name in Variable name object (key)
* Value for Object [property name] Property name
* }

While: Conditional loop

* For number of cycles
* While conditional loop, which is typically used in nested elements, or with nested data

* This
* refers to the current object
* keywords, cannot be used as variable name
* Can only read, cannot write. Its value can only be used, cannot be modified
*
* 1, in the function of external use
* This is point to window
* 2. Use within function
* 1, the function is called directly
* This points to window
* 2, is called by the event, and is in the form of an assignment
* This point is, who called the function, that this is pointing to WHO
*
* Who called the function, and that this is pointing to WHO

JS simple data type:String number (occurs when Nan operation fails, Nan is not equal to Nan) Boolean Undefined(undefined: only A undefined; declares a variable, but does not assign a value to it, it is undefined) Null(null: null only)

JS Complex data type:object (Key-value pair: key:value), Action: Object. Property

detection data type: tyleof (data)

* System-defined data type typeof the data type returned
* String string
* Number number
* Boolean Boolean
* Undefine undefined
* Null Object
* Object Object

Function typeof result

Everything you get from the page is a string.

Data type conversions

JS supports converting any data type to the following types
* Digital
* String
* Boolean value
* It makes no sense to turn the object into these three kinds of data, because any data type can be placed inside the object

Explicit data-type conversions

Number (the value to convert)  　　Convert any type to digital    Undefined:nan    null:0 string: (null is 0; pure number is A number, not pure as Nan) 、、、 parseint () parsefloat (): begins with a space or a number (otherwise, Nan) to start searching until a non-digit is encountered to stop;

String (the value to convert): enclose the quotation marks

Boolean (value to convert): undefined and null, number 0 and Nan, empty string is False

IsNaN (): Detection number It will first turn the parameter with the number () method, the string of pure numbers or the data return false

implicit data-type conversions: at the time of operation, JS internally converts the data into the type of operation

There is no string on either side of the plus sign, that is, the addition operation in mathematics, which turns true into a number, and the string is converted to a string.

A minus is a mathematical subtraction that turns both sides into numbers.

The difference between an array and an object:

An array represents a collection of ordered data, whereas an object represents a collection of unordered data. If the order of the data is important, use an array, or you will use the object. Another difference between an array and an object is that the data for the array does not have a name, and the object's data has a name.

The "name" in the object is unique, and many times I use objects to remove duplicate data.


Ternary operator

A?b:c
* If the value of a is true, return B, otherwise return C

Switch

Grammar
* SWITCH (variable) {
* Case Value:
* When this value is the same as the value of the variable, the code will go here
* BREAK; Stop the following code to continue execution
* Case Value:
* When this value is the same as the value of the variable, the code will go here
* BREAK; Stop the following code to continue execution
* Case Value:
* When this value is the same as the value of the variable, the code will go here
* BREAK; Stop the following code to continue execution
* Default:
* When the above variables are not satisfied, the code will be executed here
* }

Timer: A method built into JS

Execute a specified code every once in a while or for a period of time

SetInterval (function () {
* This code will be executed every once in a while
*}, Time)

Settimeou (function () {
* When the time arrives, the code will be executed here.
*}, time);
If the function is written outside, it is called here only with the name of the write function, not parentheses

The This in the timer is pointing to the window because the timer is a method on the window, so this is pointing to the window

Clear timer: clearinterval (timer);

Clearinterval (return value of the timer)

The principle of motion
* Constantly in the timer to modify the attributes of the element, modify the completion of the results and then re-assigned to the element

* The problem of exercise
* 1, if each time step if and the target value does not multiply, can not reach the target value
* Solution: Change the judging condition to be greater than or equal to
* 2, if the user clicks the Start button continuously, the speed will be more and more fast
* Reason: The user constantly go to click the button session will repeatedly open multiple timers, resulting in speed accumulation
* FIX: When clicking on the first timer to clear it

JS Knowledge dot Mess stew