js introduced way:
1, the way embedded js: writing function js code directly within the script tag in the page.
<script type="text/javascript">alert('hello')</script>
2, the formula is introduced outreach js: relative path so as to bring local file js achieve H5, CSS, JS separated.
<script type="text/javascript" src="hello.js"></script>
js basic syntax:
Define a variable: var keyword is case sensitive.
There are a = 123;
Operation using js properties:
. 1 <Script type = "text / JavaScript"> 2 the window.onload = function () { . 3 // to contact tag by obtaining a tag id . 4 var oDiv = document.getElementById ( 'DIV1' );
var = oInput01 Document. the getElementById ( 'Input01');
var aLi = documentsgetElementsByTagName ( 'Li'); // Get a set of tags, may be determined by a subscript which use specific use 5 // target tag style attribute rewriting . 6 oDiv.style = .color 'Red' ;
aLi [2] .style.backgroundColor = 'Blue'; . 7 var = oInput01.value val01; // Get the value of the input box
9 oDiv.className = 'box02'; // class attributes operation , pay attention to the wording to be written in class className
10 oDiv.href = '1.css'; // file for the introduction of the new style
. 11}
12 is </ Script>
Square brackets may also be used to manipulate the properties: oDiv.style [attr] = 'red';
Above function () {} is the function js written form.
Write a custom function: function change02 () { oDiv.className = 'sty02'; }
You can use the function return return function results, you can use only a simple return end of the function operation.
window.onload make the page finished loading before loading the contents, note the order when writing code.
Anonymous function:
. 1 oDiv.onclick = myalert; 2 function myalert () { . 3 Alert ( 'Hello!' ); . 4 } . 5 . 6 / * anonymous functions to simplify the code, the optimization step 7 above code rewritten into anonymous subroutines. * / . 8 . 9 oDiv.onclick = function () { 10 Alert ( 'Hello!' ); . 11 }
Function parameter passing:
. 1 changestyle ( 'the fontSize', '50px' ); 2 . 3 function changestyle (Styl, Val) { // is preresolved Oh . 4 oDiv.style [Styl] = Val; . 5 }
This will function in fontsize pass styl, will pass 50px val.
JS function of pre-resolved:
1 Alert (A); // no error but will pop undefined, equivalent to the declared unassigned. 2 // Alert (c); tools being given in (c not declared) . 3 var A = 123 ; . 4 . 5 myalert (); // use the function before defined functions does not pop undefine, will function as js preresolved . . 6 . 7 function myalert () { . 8 Alert ( 'Hello!' ); . 9 }
Encounter function, function declarations and definitions will all advance js loaded, so you can call the function before the function definition.
The conditional statement format function: if {}, multiple conditional statement: if {} else if {} or switch (true) {case: true: *****; break; default: ****;}
Function for loop: for (initial value; condition; change value) {} ***;
var ARR = [1,2,3,4,3,4,5,7,4,5,7,3,9,5,6 ]; var arr2 = []; for ( var I = 0; I < arr.length; I ++) // to circulate within the range of the entire array, implemented using a weight to achieve the effect of cyclic { IF (aRr.indexOf (ARR [I]) == I) // returns the element first appears through indexOf position come weight { aRr2.push (ARR [I]); // will not be repeated a new element into the empty array } }
JS the array operations:
Create an array: var aRr1 = new Array (1,2,3, 'abc'), or var aRr2 = [1,2,3, 'abc'] multidimensional array using nested [[arrays 1], [2 Array], [array 3]];
Seeking array length: aRr.length
Get array subscript elements: aRr [n] aRr1 [n] [n]..
String concatenation: sTr = aRr.join ( "-") using - spaced elements, the result is an array type stitching.
From the end of the additional elements: aRr.push (val)
Delete the last element: aRr.pop ()
From the head insertion elements: aRr.unshift (0)
Delete header element: aRr.shift ()
Reverse elements: aRr.reverse ()
Returns the elements of the first to appear: aRr.indexOf (val)
M start deleting elements from n elements containing n: aRr.splice (n, m)
Remove from the deletion position after the refilling into several elements: aRr.splice (n, m, 'val1', 'val2', .........)
JS in numeric and string operations:
+ When the operation performed, if the value of two variables, the normal mathematical operation, if a variable is numeric string type, length operations performed string concatenation operator.
Character value calculation may be converted into a digital value of the line: parseInt (sTr) parseFloat (sTr),
The first n characters of the string: sTr.charAt (0)
Get a character string index positions: sTr.indexOf ( 'str'), does not return -1;
Intercepting position to a string of m n elements: sTr.substring (n, m), before and after the package does not include, the default is not written to the tail;
Turn capital: sTr.toUpperCase ();
Small letter: sTr.toLowerCase ();
NaN values returned from the operation:
NaN即Not a Number，
In the case of numeric characters is converted to a mixed value that is the beginning of the conversion result of the character is NaN, at the beginning of the digital-digital conversion is only partially removed after the character.
IsNaN determined using digital character, returns false, not rigorous.
Simple Calculator Case:
window.onload = function(){ var oInput01 = document.getElementById('input01'); var oInput02 = document.getElementById('input02'); var oBtn = document.getElementById('btn'); var oFuhao = document.getElementById('fuhao'); oBtn.onclick = function(){ var num01 = oInput01.value; var num02 = oInput02.value; var fuhao = oFuhao.value; if(num01 == "" || num02 == "" ) { Alert ( 'input box can not be empty. 1' ); return ; } IF (isNaN (num01) || isNaN (num02)) { Alert ( 'Enter a ! digital ' ); return ; } Switch (Fuhao) { Case ' the Add ': // there is no implicit conversion, if a digital' number 'in the character string. Alert ((parseFloat (num01) * 100 + parseFloat (num02) * 100) / 100); BREAK ; Case 'Subtract' :*100-parseFloat(num02)*100)/100); break; case 'multiply': alert(((parseFloat(num01)*100)*(parseFloat(num02)*100))/10000); break; case 'divide': alert(((parseFloat(num01)*100)/(parseFloat(num02)*100))/10000); break; } } }
<h1>计算器</h1>
<input type="text" name="" id="input01">
<select id="fuhao">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">*</option>
<option value="divide">/</option>
</select>
<input type="text" name="" id="input02">
<input type="button" name="" value="点击计算" id="btn">
