Java Script 基础

Java Script组成

ECMAScript：解释器、翻译 //核心 几乎没有兼容问题
DOM：赋予了js操作html能力 document 有一些操作不兼容
BOM：操作浏览器 window 没有兼容问题（完全不兼容）

变量类型

六种基本数据类型：nember、string、boolean、function、object、undefined
一个变量应该只存一种类型的数据

 var a=12;
        alert(typeof a);  //nember
        a='sfvss';
        alert(typeof a);  //string
        a=true;
        alert(typeof a);  //boolean
        a=function(){
            alert('aaaa');
        }
        alert(typeof a);  //function
        a=document;
        alert(typeof a);  //object
        var b;
        alert(typeof b);  //undefined
                          //1.没有定义
                          //2.定义了但没给东西

数据类型的变化：

var a='1230dfsf45';NaN
alert(parseInt(a));

var a='3.5';
alert(parseInt(a));   //只可以转为整数
alert(parseFloat(b)); //整数小数可以转换

隐式类型转换

var a=5;
var b='5';
        alert(a==b);  //true  先转换类型，然后比较
        alert(a===b); //false 不转换类型，直接比
        var a='12';
        var b='5';
        alert(a+b); // 125  //1.字符串连接    2.数字相加    
        alert(a-b); // 7   //数字相加

输出结果1230 数据类型number 当转换时遇见字母便不再转换
NaN

var a='abc';
        alert(parseInt(a));
 输出结果：
NaN    //非数字
 var a=parseInt('abc');
        var b=parseInt('abc')；
        alert(a==b)；

   结果：![在这里插入图片描述](https://img-blog.csdnimg.cn/20200707151246835.png)

所以NaN不等于NaN

var a=parseInt('abc');
        alert(isNaN(a));

输出结果为true isNaN（)为判断NaN的函数

求和

<script>
 window.onload=function(){
            var oTxt1=document.getElementById('txt1');
            var oTxt2=document.getElementById('txt2');
            var oBtn1=document.getElementById('btn1');
            oBtn1.onclick=function(){
                //alert(parseInt( oTxt1.value)+parseInt( oTxt2.value));   当输入错误时不会报错
                var n1=parseInt(oTxt1.value);
                var n2=parseInt(oTxt2.value);
                if(isNaN(n1)){
                    alert('您输入的第一个数字有误');
                }
                else if(isNaN(n2))
                {
                    alert('您输入的第二个数字有误');
                }
                else{
                    alert(n1+n2);
            }
        }
    </script>
<input id="txt1" type="text">
    <input id="txt2" type="text">
    <input id="btn1" type="button" value="求和">

结果：

变量的作用域和闭包

<script>
        var a;   //全局变量  
        function aaa(){
            a=12;
            var b=15;  //局部变量
        }
        function bbb(){
            alert(a);
            alert(b); //无法输出
        }
        aaa();
        bbb();
    </script>

闭包
子函数可以使用父函数的局部变量。

function ccc(){          //父函数
            var c=15;
            function ddd(){ //子函数
                alert(c);
            }
            ddd();
        }
        ccc();

命名规范

• 可读性-------能看懂

• 规范性-------符合规则
  匈牙利命名法

• 类型前缀

• 首字母大写 //便于区分
  
  运算符
  
  隔行变色

<script>
        window.onload=function(){
            var aLi=document.getElementsByTagName('li');
            for (var i =0;i<aLi.length;i++){
                if(i%2==0){
                    aLi[i].style.background='gray';
                }
                else{
                    aLi[i].style.background='';
                }
            }
        }
    </script>
    <ul>
    。。。。
    </ul>

秒转时间

var a=159;
        alert(parseInt(a/60)+'分'+a%60+'秒');  //直接a/60会得到小数

程序流程控制

？：三目运算

 a=12;
        a%2==0?alert('双'):alert('单')  //单

break 跳出所有循环
continue 跳过当前循环

Json

var json={a:12,b:5,c:'abc'}; //储存数据
        json.b++;
        alert(json.b);  //6

for in循环
数组：佛如（var i in arr）{。。} 不常使用

var json={a:12,b:5,c:'abc',m:55};
        for(var i in json){
            alert(i+'='+json[i]);
        }