Home > Developer > Web Develop
JS Reference table
A reference to a variable
<script>
var n=10; m = 10; Global variables
function A () {
var x = 10; Local variables
b = 10;//global variable
}
</script>
Defining variables (weakly-typed VAR definitions)
var string = "Hello";//String
var int = 10;//number
var flag = True;//boolean
var array = [Three ways to define 1,2,3,4];//array
var array1 = new Array ("Hello", "like", "tzy");
var array2 = new Array ();//new Array (length)
Array2[0] = 10;
ARRAY2[1] = 10;
ARRAY2[2] = 10;
A two-dimensional array adds 7 inner arrays to the outer array, with each inner array being 2 lengths
var arr = new Array ();
for (Var i=0;i<arr.length;i++) {
Creates an array of length 2 and adds it to arr
var Temparr = new Array (2);
Arr[i] = Temparr;
}
Arr[0][0] = "Sunday";
ARR[0][1] = "Sunday";
var n = null;//null
var r;//not defined after assignment
R = 10;
R = null;//Assign R value to null clears the value of R before
Output of the file
<p id = pid>hello</p>
<script>
document.write ("document.getElementById ("pid"). innerhtml= "Hello"; Change the output text inside the label with the PID ID
</script>
document.write ("
JS Event
Note: Function names may not include event names
OnClick Stand-alone event
OnMouseOver Mouse over Event
onMouseOut Mouse Out Event
OnChange text content Change event//select drop-down box value change when option is changed
OnSelect text box event in unsolved case
onfocus Cursor Aggregation Events
OnBlur Move Cursor Event
OnLoad Web Page Load Event
OnUnload Closing page Events
Adding a listener using a handle
Method name does not add () call is method object such as function demo () {}
AddEventListener ("Listener event in string form not added: Click", demo| | ' Demo () ' | | or direct anonymous function () {});
RemoveEventListener ("Listener event in string form not added: Click", demo| | ' Demo () ' | | or direct anonymous function () {});
Exception handling
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Exception Handling </title>
<script>
Function Demo () {
Attempt to throw an exception
try {
alert (str);//str is empty
}catch (Err) {
alert (ERR);
}
}
Demo ();
function Demo1 () {
var e = document.getElementById ("TXT"). Value;
try{
if (e== "") {
Throw "You did not enter text";//Custom exception
}
}catch (Err) {
alert (ERR);
}
}
</script>
<body>
<form>
<input type= "text" id= "TXT" >
<input type= "button" onclick= "Demo1 ()" value= "button" >
</form>
</body>
Various statement Reference statement cases
Operator
Arithmetic operator: +,-,*,/,%,++,--;(+ + in the first operation in the assignment, + + after the assignment in the operation)
Assignment operator: +=,-=,=,*=,/=,%=;
String manipulation: (+ stitching string)
Comparison operators: ==,===,!=,!==,>,<,>=,<=;("10" and 10== are true) (= = = Required type is also the same as before is false)
Logical operators: &&,| |,!,
Conditional operator (tri-wood operator): x<10? "? Execute ":"? Execution ";
Jsdom object (actually using the object point method) (refer to DOM)
When the page is loaded, the viewer creates a Document object model of the page (Docunment object)
Can change HTML elements, attributes, CSS styles, events
Use ID to find HTML element: <p id= "pid" >hello</p> var nv = document.getElementById ("pid");
Use the tag to find the HTML element:<p>hello</p> var NV = document.getelementsbytagname ("P")//This will look for the P tag, and if it is multiple p tags select the first one
Find HTML elements by name: <p name= "pn" >hello</p> document.getelementsbyname ("pn");
Modify element content: nv.innerhtml = "world";//Modify label contents (text and Text fields use no effect)
<textarea id= "Txtresult" cols= "ten" rows= "value=" "AAA" ></textarea>
document.getElementById ("Txtresult"). Value = "Value to be modified";
This method allows you to modify the contents of the Text field (buttons and no value are not worth the use of tags)
Change HTML properties: <a href= "http://www.baidu.com" id= "aid" >hello</a>
(change address) Docunment.getelementbyid ("Aid"). href= "http://www.qq.com";
Combining Jsdom Object Case study
(Modify the SRC attribute of the image to change the picture)
(Modify various CSS styles) Docunment.getelementbyid ("id"). style.color= "Blue";
Jsbom object reference BOM Usage table
Window object
window.open ("http://www.baidu.com", "open page name",
"Height=200,width=200,top=100,left=100,
Toolbar=no,menubar=no ") open page (three parameters 1, url 2, HTMLName, 3style)
Window.close (); Close page
Screen object (Fit) (contains user-related onscreen information)
document.write ("Available height" +screen.availheight+ "usable width" +screen.availwidth);
document.write ("Height" +screen.height+ "width" +screen.width);
Location object (used to get the current page URL and redirect the viewer to a new page)
Window.location.hostname; Returns the domain name of the web host
Location.pathname; Returns the path and file name of the current page
Location.port; return to Web Port
Location.href; Returns the address of the current page
Location.protocol; Returns the Web protocol used
Location.assign () method to load a new document
History Object (contains a collection of reader histories (URLs))
History.back () is the same as clicking the Back button in the viewer
History.forward () the same as clicking the button in the viewer
History.go () Go to a page in history
JS Object
To create an object method
People = new object ();//Create Object
People.name = "Zhang San";
People.age = "15";
document.write (People.name+people.age);
People = {name: "Five", Age: "30"};
document.write (People.name+people.age);
Creating an object from a function
function people (Name,age) {
THIS.name = name;
This.age = age;
}
son = new People ("Zhang 1", 25);
document.write (People.name+people.age);
Prototype can add properties and methods to an object
Common methods
IsNaN (input)//Determines whether input is a number, not a number, or IsNaN returns True, which is a built-in method
A type. parseint ()//modify a type to be of type int (also parsefloat double, etc.)
Some methods of math
Math.random ()//random number (from [0,1)) can * several increase
Math.ceil ()//Upward rounding
Math.floor ()//Down rounding
Math.Round ()//rounding
Math.min ()//Minimum value
Math.max ()//maximum value
Math.Abs ()//absolute value
Math.pow (x, y)//Returns the y power of X;
R.tofixed (2)//reserved 2 decimal places, R is double type;
Some methods of string
String.Replace (' MMP ', ' * ')//search string MMP modified to * (replace)
String.IndexOf (' mmp ') = = -1//look for a string that has no MMP, (have returned its position) if not then return-1;
String.match (' MMP ') matches the MMP string if there is a print MMP if it does not return null;
String.touppercase and toLowerCase all converted to uppercase and converted to lowercase
arr = String.Split (",")//used, each loaded into an array;
Some methods of arrays
arr1 = Arr.concat (ARR2);//arr array merge arr2 array loaded in ARR1
Arr.reverse ()//array inversion;
Arr.push ("qwe")//Append qwe element at the end of the array
Arr.sort (Mysort);//array sort Mysort for methods note that no () and quotation marks are the object of the method (can also be written as "Mysort ()")
function Mysort (A, b) {
return a-B; ascending (default)
return b-a; descending
}
Some methods of date
var date = new Date (); Create a time to display the current event
Date.getfullyear ();//Get Current year
Date.getmonth (+1); Get the current month must be +1
Date.getdate (); Get the current day
Date.gettime ();//Gets the number of milliseconds for the current time
Date.gethours ();//Get Current hour
Date.getminutes ();//Get current minute
Date.getseconds ();//Gets the current number of seconds
Note minutes and seconds at less than 10 when the print is a number, lot better need method settings
var endtime=new date ("2018/1/1,0:00:00")//Set Countdown end time (custom time)
Date.setfullyear (2010,1,1); set time
Alert (date.tolocalestring ());//output box shows current time converted to time string format
function JM () {//Codec test will username and decode the value of the
var address = "Http://www.baidu.com?username= ' Jay Chou '"
Coding
var R1 = Window.encodeuri (address);
Alert (R1);
Decoding
var r2 = Window.decodeuri (r1);
alert (R2);
}
<input type= "button" onclick= "Testargument (1,2,3,4,5)" value= "Arguments test"/><br/><br/>
<input type= "button" onclick= "Testeval ()" value= "eval test"/><br/><br/>
function Testargument () {//no formal parameter, but the foreground can pass in the parameters (developers do not need to explicitly specify the parameter name, you can access them)
Alert (arguments[2]);
}
function Testeval () {//eval Test (evaluates the contents of eval () in parentheses) executes str inside code alert output 123 in parentheses
var str = "alert (123)";
eval (str);
}
Eval Simple case
<input type= "button" onclick= "Addcal (this.value)" value= "1"/>
<input type= "button" onclick= "Addcal (this.value)" value= "2"/>
<input type= "button" onclick= "Addcal (this.value)" value= "3"/>
<input type= "button" onclick= "Addcal (this.value)" value= "4"/>
<input type= "button" onclick= "Addcal (this.value)" value= "+"/>
<input type= "button" onclick= "Addcal (this.value)" value= "-"/>
<input type= "button" onclick= "Addcal (this.value)" value= "="/><br/>
<input id= "equal" style= "width:210px;" />
Function Addcal (val) {//is passed in the value of the input tag
var result = document.getElementById ("equal"). value;//take out the contents of the input box
if (val = = "=") {
Executes the string inside the input box
var finalres = eval (result);//You can operate on a string
document.getElementById ("equal"). Value = finalres;//Modify the contents of the input box
}else{
Result + = val;//stitching string
document.getElementById ("equal"). Value = result;//Modify the contents of the input box
}
}
Common regular
var regex = new RegExp ("\\w{3,6}$", "G");//define a regular expression: a combination of 3 to 6 digits or letters
Regex.test (val)//Determine if the regular is satisfied
String.Replace (/mmp/gi, "*"); Regular g represents global, I ignores case
Citation method
External reference JS
JS file inside the direct function method name parameter {
code block
}
such as: JS file
function Hello () {
Alert (' Hello,china ');
}
HTML file:
<script type= "Text/javascript" language= "JavaScript" src= "Js/testjs.js" charset= "gb2312″></script>
CharSet Modify the current HTML read JS format
<input type= "button" value= "The second introduction method" Onclick= "Hello ()"/><br/><br/>
Internal Reference JS
<script>
function method Name (parameter) {code block}
</script>
Such as:
HTML file:
<script>
function Hello1 () {
Alert (' Hello,china ');
}
</script>
<input type= "button" value= "Second introduction mode" onclick= "Hello1 ()"/><br/><br/>
Inline type
<input type= "button" value= "inline" onclick= "window.alert (' Hello world! ')" />
JS Reference table
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
