javascript基础知识
一、基本的数据类型
基本的数据类型有五类：1、string类型 2、boolean类型 3、number类型 4、undefined类型 5、null类型
二、复杂的数据类型 ——对象（三个子类）
1、function 函数 2、Array 数组 3、object 对象
三、typeof与数据类型
1、typeof是一元运算符
2、两种写法：typeof 数据，typeof(数据)
3、返回的是全小写的字符串。可以用来检验没有申明的变量，返回undefined且不报错
对应关系：
string:"string"
boolean:"boolean"
number:"number"
undefined:"undefined"
函数："function"
其余都为"object"(null、Array、狭义的object)
四、显式数据类型转换
1、Boolean(XX)
5个会转为false的值：0,null,undefined,NAN,空字符串
2、数值
number(XX): true ->1；空字符串、false、null ->0；undefined ->NAN;对象先toString
parseInt(XX):第二个参数可选（进制）
parseFloat(XX)：只解析十进制
3、字符串
XX.toString():第一个参数可选，表示进制。undefined、null无法用此方法
string():在toString的基础上加上null->"null",undefined->"undefined"
五、隐式数据类型转换
一元运算符、逻辑运算符、数学运算符、比较运算符
六、变量
1、命名规则：由数字、字母、下划线、$符号组成；不允许数字开头、关键字、保留字；大小写敏感、驼峰命名法更清楚表达语义
七、基本语句
1、if(){}
2、switch(){case "banana":...break;}
3、return只能在函数内
4、循环语句：
for、for-in、while、do-while、label(用于跳转程序的任意位置)、break跳出代码块或者循环、continue终止本轮循环并进入下一轮
八、练习题
1、
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>0529</title> <script type="text/javascript" src="./js/jquery.min.js"></script> <style> *{ padding:0;margin:0; } .container{ //max-width: 800px; margin:20px auto; padding:0 20px; //background:red; } .data-container{ //margin:0 100px; text-align: center; } textarea{ width:100%; } input{ width:100%; } .btn{ display:block; text-align:center; background:#e5e5e5; color:#000; cursor: pointer; } </style> </head> <body> <div class="container" > <div class="data-container"> <p>请输入数组或者默认数组</p> <div><textarea placeholder="['100px','abc'-6,[],-98765,34,-2,0,'300', ,function(){alert(1);},null,document,[],true,'200px'-30,'23.45元',5,Number('abc'),function(){alert(3);},'xyz'-90]" class="curArray" rows="5" type="text"></textarea></div> <div><a class="btn" onclick="searchResult()">查看结果</a></div> <div><label>数组中包含的数字</label></div> <div><input class="numbers" name="numbers"/></div> <div><label>可以转换成数字的值</label></div> <div><input type="text" name="hasNumber" class="hasNumber"/></div> <div><label>转换后的最大值</label></div> <div><input class="max" name="max"/></div> <div><label>数组中NAN的位置</label></div> <div><input type="text" class="nanPosition" name="nanPosition"/></div> </div> </div> </body> </html> <script type="text/javascript"> function searchResult(){ console.log(typeof(123)); console.log($(".curArray").val()); var curArray=$(".curArray").val()?$(".curArray").val():['100px','abc'-6,[],-98765,34,-2,0,'300', ,function(){alert(1);},null,document,[],true,'200px'-30,'23.45元',5,Number('abc'),function(){alert(3);},'xyz'-90]; var arr=new Array; var arr1=new Array; var arr2=new Array; arr=curArray; for(var i=0;i<arr.length;i++){ if(typeof(arr[i])==="number"&&(!isNaN(arr[i]))){ arr1.push(arr[i]); } } console.log(arr1); $(".numbers").val(arr1.join(",")); //可以转化为数字的值 console.log(arr); for(var j=0;j<arr.length;j++){ if(parseFloat(arr[j]) || (parseFloat(arr[j])===0) ){ arr2.push(arr[j]); } } console.log(arr2); $(".hasNumber").val(arr2.join(",")); //转化后的最大值 var max; for(var i=0;i<arr2.length;i++){ if(max>arr2[i]){ max=max; }else{ max=arr2[i]; } } $(".max").val(max); //数组中NaN的位置 var NaNPos=new Array; for(var i=0;i<arr.length;i++){ if(typeof(arr[i])==="number" && (isNaN(arr[i])) ){ NaNPos.push(i); } } $(".nanPosition").val(NaNPos.join(",")); } </script>
<!DOCTYPE html> <html> <head> <title>学生分档</title> <script type="text/javascript" src="./js/jquery.min.js"></script> </head> <body> <div class="container"> <p>计算的结果为：<span class="result"></span></p> </div> <script type="text/javascript"> function getGrade(x){ var grade; if((x>=0)&&(x<=10)){ grade="10等生"; }else if((x>=11)&&(x<=20)){ grade="9等生"; }else if((x>=21)&&(x<=30)){ grade="8等生"; }else if((x>=31)&&(x<=40)){ grade="7等生"; }else if((x>=41)&&(x<=50)){ grade="6等生"; }else if((x>=51)&&(x<=60)){ grade="5等生"; }else if((x>=61)&&(x<=70)){ grade="4等生"; }else if((x>=71)&&(x<=80)){ grade="3等生"; }else if((x>=81)&&(x<=90)){ grade="2等生"; }else if((x>=91)&&(x<=100)){ grade="1等生"; } return grade; } function getGrade2(score){ var grade; switch(true){ case score>=0&&score<10: // alert('不及格'); grade="10等生" break; case score>11&&score<=20: //alert('及格'); grade="9等生" break; case score>21&&score<=30: //alert('良好'); grade="8等生" break case score>31&&score<=40: //alert('优秀'); grade="7等生" break; case score>41&&score<=50: //alert('优秀'); grade="6等生" break; case score>41&&score<=50: //alert('优秀'); grade="5等生" break; case score>51&&score<=60: //alert('优秀'); grade="4等生" break; case score>61&&score<=70: //alert('优秀'); grade="3等生" break; case score>71&&score<=80: //alert('优秀'); grade="2等生" break; case score>81&&score<=90: //alert('优秀'); grade="1等生" break; default: grade='输入不合法'; } return grade; } $("body").click(function(){ //getGrade2(cursurelt); if(cursurelt>=0){ //$(".result").html(getGrade(cursurelt)); console.log(getGrade2(cursurelt)); $(".result").html(getGrade2(cursurelt)); } }); </script> </body> </html>
