Java Review front-end article--javascript

Overview of 1.JS:
What is JS: running in the browser-side scripting language, object-based and event-driven languages, applied to the client, the browser executes the script code line by row when reading the code. For traditional programming, all code is compiled before execution.
JS uses: Use JS to enhance the user experience. Make HTML move.

2.JS Introduction Method:

(1): the page directly write JS code, JS code needs to use <SCRIPT></SCRIPT>
(2): The JS code is written into a. js file, in the HTML to introduce the JS code.
<script type= "Text/javascript" src= ". /js/check.js ">//This doesn't write anything </script>. External scripts cannot contain <script> tags.

The composition of the 3.JS:

(1)　　the core of Ecmascript:js
Basic syntax
Like Java, variables, function names, operators, and everything else are case-sensitive.
For example: The variable test and the variable test are different
Weakly typed language, you can arbitrarily change the type of the variable, the variable is weak type is different from Java and C, the variable in ECMAScript has no specific type, the variable is defined only with the var operator, you can initialize it to any value. Therefore, you can change the type of data that the variable is stored at any time (try to avoid doing so).

Example
var color = "Red";
var num =;
var visible = true;

Line code to end without semicolons, the default is line wrapping, the proposed semicolon, the best coding habit is to always add semicolons, because there is no semicolon, some browsers do not run correctly, but according to the ECMAScript standard, the following two lines of code are correct:

var test1 = "Red"
var test2 = "Blue";

Variable names can contain numbers, but cannot start with a number
Comments
Single-line comment: Start with a double slash (//)
Multiline Comment: Start with a single slash and asterisk (/*), ending with an asterisk and a single slash (*/)

JS Operator:
Unary operators: + +--consistent with Java
Logical operator:&& | | ！ Or
Arithmetic operator: +-*/% operation
+ Features: To do is splicing operation
-Features: The value is converted to a number before the subtraction operation, after the conversion is not a numeric subtraction will appear Nan
Relational operators:
> < >= <= = = =!
The difference between = = and = = =, the former compares the value, the latter not only compares the values but also compares the data types
Ternary operators
Value? Expression 1: Expression 1
If the value is true, the entire expression takes the value of expression 1, and if the value is false, the entire expression takes an expression of 2 value.
Assignment operators
*=, + =,-=,/=,%=
The above assignment operators are the same as in Java
Comma operator
var a=1, b=2;
The comma operator can perform multiple operations in a single statement
declaring variables
var keyword
var i = 10;
var i = "Wangbadan";
var i = true;
var i = null;
......

JS Flow control Statement:
If condition
Format: if (condition) {statement}else{statement}
The condition after the IF statement in Java must be a true/false value, whereas in JavaScript we describe True/false in several ways, so be aware of the differences with Java
Switch statement
While and Do-while
For loop

JS type
Original type
String: Both characters and strings are considered character types
Number: Numeric type
Boolean: Logical Type
Null
Undefined: Variable not initialized

Reference type:
The object type. The default value of the object type is null.
Type judgment:
typeof ()

Type conversions:
ToString (): Transfer to string
parseint (value): Convert to numeric type
Parsefloat (value): Convert to floating-point type
Boolean (value): Value converted to Boolean type
Number (value): The value is converted to type #

(2) Dom:document object Model document
DOM: Just load the document into memory, form a tree structure, and manipulate the tree structure to change the look of the HTML.
Document: Documents object. Represents the entire document that is loaded into memory.
Element: Elements object. Represents each element (label) in a document
Attribute: Property object. Represents an attribute on an element.
Document,element,attribute collectively referred to as node (nodes)

DOM Basic operations: 1. Get elements:
document.getElementById () Get elements by ID
Document.getelementsbyname () Get element by Name property
document.getElementsByTagName (); Get elements by tag name

2. Create the element:
Document.createelement (); Creating elements
var para=document.createelement ("P");

             document.createTextNode ();   Create a text node
                    var Node=document.createtextnode ("This is the new paragraph.") ");

              3. Adding elements:
            element.appendchild (); Add a node at the end
            element.insertbefore ();  Insert a node before an element
        4.  Delete element:
            element.removechild ();   to delete an HTML element, you must first obtain the element's parent element:
                     var Parent=document.getelementbyid ("Div1");
var Child=document.getelementbyid ("P1");
Parent.removechild (child);

                 It would be nice to be able to delete an element without referencing the parent element. But I'm sorry. The DOM needs to be clear about the element you need to delete, and its parent element. This is a common solution: find the child element that you want to delete, and then use its ParentNode property to find the parent element:
                     var Child=document.getelementbyid ("P1");
Child.parentNode.removeChild (child);

5. Modify the element:
Elementnode.setattribute (Name,value)
Parameter description
Name is required. Specifies the name of the property to set.
Value is required. Specifies the property value to set.
Description: This method sets the specified property to the specified value. If a property with the specified name does not exist, the method creates a new property.

6. Change the HTML
Change HTML content: document.getElementById (ID). innerhtml=new html
Change HTML properties: document.getElementById (ID). attribute=new value

7. Change CSS
document.getElementById (ID). style.property=new style

8. Events
Responding to HTML events
Onclick=javascript
<H1 onclick= "this.innerhtml= ' Thank you! '" > Click on the Text

HTML Event Properties
To assign the OnClick event to the button element:
<button onclick= "displaydate ()" > click here </button>

Use HTML DOM to assign events
To assign the OnClick event to the button element:
<script>
document.getElementById ("Mybtn"). Onclick=function () {displaydate ()};
</script>

　　　　(3) The Bom:browser object Model Explorer (BOM) gives JavaScript the ability to "talk" to the browser.

window: Windows object
alert (); Displays a warning box with a message and a confirmation button alert ("Text")
Confirm (); Popup A confirmation dialog box confirm ("text")
Open (); Open a new window
Prompt (); Displays the dialog box prompt ("text", "default") that prompts the user for input

To set the timing method
* SetInterval ();     : Executes an expression every few milliseconds. * SetInterval ("Change ()", 5000);
* SetTimeout ();    : How many milliseconds to execute an expression. * SetTimeout ("Change ()", 5000);
method to clear the timing clearinterval ();
(1) clearinterval (id_of_setinterval)
var int=self.setinterval ("Clock ()", 50)
Window.clearinterval (int);
(2) cleartimeout ();
Cleartimeout (settimeout_variable)
T=settimeout ("Timedcount ()", 1000)
Cleartimeout (t)
Navigator: Browser Object
Screens: Screen Objects
History: Historical object Go (); Load a specific page in the history list
Location: Path Object href: Sets or returns the full URL

Definition and creation of 4.JS functions:

　　Create
Function name (parameter) {
function body;
}
The default return value is true.
* window.onload = function () {

}
var function name = new function (parameter (body of function))
var function name = function (parameter) {
function body
}
JS function Parameter Problem: parameter no data type, when the time is not in accordance with the parameters in the method
JS function return value problem:
(1) If there is a return value you can use return
(2) There is a return value without declaring a return value type
Note: There are no method overloads that can be simulated with arguments
(3) Return undefined if no return value is returned

Java Review front-end article--javascript