First, the introduction of JavaScript:<!--the third way to introduce javascript: Outside the chain, recommended--><!--if as a reference when the code in the tag is invalid--><script src= ". /vscode/js/hello.js ">//The JS code written here is invalid </script><!--the second way to introduce javascript: inline, part of the recommended--><script>// The code here is useful for alert (' Hello World, again ') </script>6. Action Element properties: <script> window.onload = function () {//get var Odiv = document.getElementById (' div01 '); var OA = document. getElementById (' link01 ')//single-missing attribute value var sId = odiv.id; alert (SID);
Write attribute value, also called set attribute value ODiv.style.color = ' red '; oDiv.style.fontSize = ' 30px ';
Operation class attribute, class attribute name to write className oa.classname = ' sty02 ';
Action element Package Contents//Read contents var sTr = oa.innerhtml; var sTr2 = odiv.innerhtml; alert (STR); Modify content, write content oa.innerhtml = ' Change text '; odiv.innerhtml = ' <a href = ' http://www.itcast.cn ' > Gen China </a> ' odiv.innerhtml = ' <ul><li> become a list </li><li> becomes a list </li><li> becomes a list </li></ul> '} </script> <body> <div Id= "DIV01" > This is still a div</div> <a href= "#" class= "Tay01" id= "link01" > This one link </a> </body>
6. Click event: <script> window.onload = function () {var obtn = document.getElementById (' btn '); var odiv = Document.geteleme Ntbyid (' div01 '); function Fnchange () {Overwrites the following anonymous function Obtn.onclick = function () {oDiv.style.width = ' 300px '; oDiv.style.height = ' 300px '; oDi V.style.background = ' Gold ';
}//Click event Correlation function//Obtn.onclick = Fnchange;
} </script> <body> <input type= "button" value= "Change Element" id= "BTN" > <div id= "div01" > This is a div</div > </body>
7. Array: <script>//The first method of creating an array var aList01 = new Array (three-way);
The second way to create an array: the direct amount of var aList02 = [' A ', ' B ', ' C ', ' d ']//Gets the number of array members var ilen = alist02.length; Alert (Ilen)
Action an array of one member of alert (alist02[2]);
Add the member Alist02.push (' E ') alert (aList02) after the array;
Delete Member Alist02.pop ()//alert (aList02) after array
Reverses the array alist02.reverse (); alert (aList02);
Converts an array to a string var sTr = Alist02.join ('-'); var sTr2 = Alist02.join ("); alert (STR); alert (STR2);
var aList03 = [' A ', ' B ', ' C ', ' d ', ' e ', ' A ', ' B ']; Add or remove members in the array//from 4th (' E ') to delete, delete two, get abcdb alist03.splice (4,2); alert (aList03);
Delete from fourth, delete one, add ' e ', ' f ' two elements Alist03.splice (4,1, ' e ', ' f '); alert (aList03);
Gets the index value of the first occurrence of a member in an array var aList04 = [' A ', ' B ', ' C ', ' d ', ' e ', ' A ', ' B ', ' B ', ' A ', ' C ']; var ipost = alist04.indexof (' C '); alert (ipost); </script>
8. Loop (for): <script> var alist = [' A ', ' B ', ' C ', ' d ', ' e ', ' F ']; var ilen = alist.length; Traverse for (var i = 0;i<ilen;i++) {alert (alist[i]);} var aList01 = [' A ', ' B ',, ' a ', ' C ', ' d ', ' B ', ' e ', ' F ']; var aList02 = []; Go to Heavy for (Var i=0;i<alist01.length;i++) {if (Alist01.indexof (Alist01[i]) ==i) {Alist02.push (alist01[i]);}} alert ( ALIST02); </script>
9. Load the array into the page: <script> window.onload = function () {var olist = document.getElementById (' list ');
var alist = [' Seven Dragon Ball ', ' Gundam ', ' Fire Shadow ', ' Sea thief ', ' death ', ' Lu Xiu ', ']; var sTr = '; Traversing array contents, stored in an empty string for (var i = 0;i<alist.length;i++) {sTr + = ' <li> ' + alist[i] + ' </li> '}//replace page content olist.i nnerhtml = STr; } </script>
10. String inversion: <script> var sTr1 = ' afuiajflasjfl230893482 ';
var sTr2 = Str1.split ("). Reverse (). Join ('); alert (STR2); </script>
11. String: <script> var iNum01 = 12; var sNum01 = ' 12 '; var sNum02 = ' 26 '; var sNum03 = ' 88.90 '; ' + ' symbol two times if it is a number, do the addition operation, if there is a string, do string concatenation operation alert (INUM01 + 10); Alert (iNum01 + sNum01);
The parseint method converts the integer string to an integer, and if the string is a decimal, the decimal is removed by the alert (parseint (SNUM02) + iNum01); Alert (parseint (SNUM03) + iNum01);
Parsefloat converts a decimal string to a decimal alert (parsefloat (SNUM03) + iNum01); Converts a string to an array of var sTr = ' 2018-06-14 '; var alist = str.split ('-') var aList2 = Str.split ('); alert (alist); alert (ALIST2);
var sTr2 = ' jdfafka11hk2332akfh '; var iPos = str2.indexof (' 888 '); alert (IPos); Tangent string, starting from 11, to 16 end var STR3 = str2.substring (11,16); alert (STR3); If you don't write the end, cut it straight to the end. var sTr4 = str2.substring (11); alert (STR4); </script>
12. Timer (setinterval): <script> function Fnmalert () {
Alert (' Go to bed! ');
}//Fnmalert ();
Create a timer that executes only once//the first parameter is the function name to invoke, the second parameter is the interval time, the unit is milliseconds, we do not have to write units//setTimeout (fnmalert,2000); var OTimer01 = setTimeout (fnmalert,2000);
Turn off the timer//cleartimeout (OTIMER01) that executes only once;
Create a timer that executes repeatedly var OTimer02 = setinterval (fnmalert,2000); Close the repeatedly executed Timer//clearinterval (OTIMER02); </script>
-----------------
<style>. box{width:200px; height:200px; background:gold; margin-left:10px; position:fixed; top:100px; left:0 px } </style> <script> window.onload = function () {var odiv = document.getElementById (' box '); var ileft = 0; function Fnmove () {ileft + = 3; oDiv.style.left = ileft + ' px ';}//For (var i = 0;i < 19;i++) {//Fnmove ();//} Setint Erval (fnmove,30); } </script> <body> <div class= "box" id= "box" ></div> </body>
13. Variable definition field: <script>//define global variable var iNum01 = 12;
function Fnmyalert () {
Define local variable var iNum02 = 24; Call global variable alert (' function inside popup: ' +inum01);
Call local variable alert (' function inside popup: ' +inum02); Modify the global variable INUM01 = 13 inside the function;
Alert (' Function inside popup: ' +inum01);
When a variable is defined inside a function, if it is not used once, it becomes global variable iNum03 = 48;
}
Fnmyalert (); Outside the function call global variable alert (' Outside the function popup: ' +inum01);
Alert (' Outside the function pops up: ' +inum03 ');
Alert (' Outside the function pops up: ' +inum02 '); </script>
14. Closed Function: Functions Fnwrap () {
function Fntouzi () {alert (' Pro, please pay attention to our new product! ‘); } Fntouzi (); } fnwrap (); Abbreviated Mode 1: ~function () {
function Fntouzi () {alert (' Pro, please pay attention to our new product! ‘); } Fntouzi (); }(); Abbreviated mode 2:;! function () {
function Fntouzi () {alert (' Pro, please pay attention to our new product! ‘); } Fntouzi (); }();
15.
JavaScript Basics Summary
