JavaScript学习----1.基础篇
1.JavaScript简介：
JavaScript是一种基于对象和时间驱动的，并具有安全性能的脚本语言。可以用来向HTML页面中添加交互行为；解释性语言，边执行边解释。总而言之：JavaScript能跨平台，跨浏览器驱动网页，与用户交互。
2.JavaScript的基础编程：
2.1JavaScript的四种输出方式：
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title> 5 javascript的四种输出方式： 6 </title> 7 <script> 8 //1.弹窗输出（浏览器事件）： 9 alert("Hello world!"); 10 11 //2.控制台输出（文档对象事件）： 12 console.log("Hello!"); 13 14 //3.输出到网页上（HTML语言） 15 document.write("啦啦啦~"); 16 17 //4.输出到控制台,错误示例 id2没定义 18 //document.getElementById("id2").innerHTML='1'; 19 </script> 20 </head> 21 <body> 22 23 <div id="id2"></div> 24 25 <h1 id="id1"> 26 哈哈哈！ 27 </h1> 28 29 <script> 30 document.getElementById("id2").innerHTML='第四种获得方式'; 31 </script> 32 33 </body> 34 </html>
2.2数据类型：
Number：JavaScript不区分整数型和浮点型，统一用number表示；
（NaN：不是数，当无法计算结果时用NaN表示）；
（Infinity：表示无限大）；
String：单引号或者双引号括起来的任意文本；
Boolean：true / false；
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>数据类型</title> 5 6 <script> 7 var a=1; 8 var b=0.2; 9 var c=true; 10 var d="hello"; 11 var array=new Array(); 12 document.write("<h1>"+typeof(a)+"</h1>"+"</br>"); 13 document.write(typeof(b)+"</br>"); 14 document.write(typeof(c)+"</br>"); 15 document.write(typeof(d)+"</br>"); 16 document.write(typeof(array)+"</br>"); 17 18 </script> 19 </head> 20 <body> 21 22 23 </body> 24 </html>
String对象：charAt (int)，空格不作为计数的内容。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <script> 5 var str="hello world!"; 6 document.write(str.charAt(6)+"不计数空格"); 7 document.write("<br>"); 8 document.write(str.indexOf("w")+"从0开始"); 9 document.write("<br>"); 10 document.write(str.length); 11 document.write("<br>"); 12 document.write(str.substring(2,8)); 13 document.write("<br>"); 14 document.write(str.split(" ")); 15 </script> 16 </head> 17 <body> 18 </body> 19 </html>
数组的测试：
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>Title</title> 5 6 <script> 7 var array=new Array(5); 8 array[0]="苹果"; 9 array[1]=1; 10 array[2]=2.1; 11 array[3]=true; 12 array[4]=4; 13 14 console.log(array[0]); 15 16 </script> 17 18 </head> 19 <body> 20 21 </body> 22 </html>
函数的编写：parseInt(" str")-->字符转化成数字；
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function study(){ for(var i=0;i<3;i++){ document.write(i+"<br>"); } } function study2(num){ for(var i=0;i<num;i++){ document.write(i+"<br>"); } } // parseInt（"a"）,将字符串转化为数字 function study3(a,b){ aa=parseInt(a); bb=parseInt(b); return aa+bb; } var a=prompt("请输入加数1","1"); var b=prompt("请输入加数2","2"); c=study3(a,b); document.write("所加结果为："+c+"<br>"); </script> </head> <body> <input type="button" onclick="study2(prompt('请输入循环次数'))" value="点击我出现循环效果"> </body> </html>
加载事件测试：
<head> <meta charset="UTF-8"> <title>Title</title> <script> function f(){ document.write("成功进入该页面！"); } </script> </head> <body onload="f()"> </body> </html>
一个操作数组的综合示例：
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <!--//1.创建一个string对象--> 5 <!--//2.通过split分割为数组--> 6 <!--//3.修改数组元素的值--> 7 <!--//4.打印查看--> 8 <script> 9 //1.定义一个字符串 10 var str="苹果,香蕉,草莓,西瓜,樱桃"; 11 //2，字符串转成数组 12 var array=str.split(","); 13 document.write(array[0]+"<br>"); 14 document.write(array[1]+"<br>"); 15 document.write(array[2]+"<br>"); 16 document.write(array[3]+"<br>"); 17 document.write(array[4]+"<br>"); 18 //3.修改数组元素 19 array[0]="苹果的霸霸"; 20 document.write(array[0]+"<br>"); 21 //4.排序 22 var a="1,5,3,6,8,0"; 23 var array=a.split(","); 24 document.write(array); 25 array.sort(); 26 document.write("<br>"); 27 document.write(array[5]+"<br>"); 28 console.log(array); 29 //5.数组后面追加元素 30 array.push(5); 31 document.write(array[6]); 32 </script> 33 34 35 </head> 36 <body> 37 38 </body> 39 </html>
