JAVASCRIPT基础学习

示例标注：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    //   var age = 88; 
    //   var username = '曹操';
    //   var flag  =false;
    //   console.log(typeof age,typeof username,typeof flag);
    //   var title =null;
    //   console.log(typeof title);
    //   var role =undefined;
    //   console.log(typeof role);
    //   console.log(null===role);
    //   console.log(null==='null');
    //   console.log(null + 100);
    //   console.log(undefined + 100);
    //   //NaN: Not a Number ,非数值
    //   console.log(isNaN(undefined));
    //   console.log(isNaN(username));
    //3.对象：object array,function
    //数值
      var fruits =['watermelon','apple','orange','peach','pear'];
    //  console.log(fruits);
    //  console.log(fruits[1]);
    //  //数组类型
    //  console.log(typeof fruits);
    //  //数组长度
    //  console.log(fruits.length);
    //  //判断数组
    //  console.log(Array.isArray(fruits));
    //  //遍历数组
    //  for(var i= 0 ; i<fruits.length;i++)
    //  {
    //      console.log(fruits[i]);
    //  }
    //  //forEach 遍历数组
    //  fruits.forEach(function(item,key){
    //      console.log('i:',key,'item',item);
    //  });
    //  //forEach 简化遍历数组
    // fruits.forEach((item,key)=>console.log('i:',key,'item:',item));
    // console.log(fruits.slice(0,3));
    //slice 取出部分元素参数1：数组位置，参数2：数组个数
    //splice(); 实现对数组元素的增删改,
    // console.log(fruits.splice(0,2));
    // console.log(fruits);
    //删除后返回删除的数组
    // console.log(fruits.splice(4,0,'mango','pineapple'));
    // console.log(fruits);
    //从第二个位置添加到数组数值。参数1：添加的位置，参数2：增加的位置，参数3：增加的数值
    // console.log(fruits.splice(1,3,'mengo','pineapple','plum'));
    // console.log(fruits);
    //更换数组第3个位置的数值。参数1：位置，参数2：更改的数量，参数3：更改的值
    //对象：object
    //js中的数组===> 类似 php 索引数组
    //js中的对象 ===>类似 php 关联数组
    var student ={
          id:1,
          name:'admin',
          email:'admin@php.cn',
          course:[1,2,3,4],
          scroe:
          {
              php:90,
              js:60,
              css:70,
          },
          "my scroe":[0,4,6],
    };
    // console.log(student);
    // //console.table(student);
    // // 对象成员的访问，使用点语法
    // console.log(student.scroe.css);//访问对象中的scroe中的css
    // console.log(student.email); //访问对象中的email
    // console.log(student.course[2]);//访问对象中的数组
    // console.log(student["my scroe"][1]);//访问对象中的字符数组
    //变量对象
    // for(key in student)
    // {
    //    console.log(student[key]);
    //    if(student[key] instanceof Array)
    //    {
    //        for(value in student[key])
    //        {
    //            console.log(student[key][value]);
    //        }
    //    }
    // }
    //获取对象所有属性组成的数组
    //object.keys(obj)返回对象所有属性组成的数组
    // var keys = Object.keys(student);
    // console.log(keys);
    // //根据键名遍历，
    // keys.forEach(function(item)
    // {
    //       console.log(this[item]);
    // },student);
    //将对象转换成为数组后输出数组，
    //keys.forEach(函数,数组)
    //item键名属性名
    //函数
    function f1(a,b)
    {
        console.log(a+b);
    }
    f1(1,2);
    var f2 = function(a,b)
    {
        console.log(a+b);
    };
    f2(100,50);
    (function(a,b)
    {
       console.log(a + b);
    })(200,100);
    (function(a,b)
    {
       console.log(a+b);
    }(300,500));
    +function(a,b)
    {
       console.log(a+b);
    }(600,500);
    !function(a,b)
    {
       console.log(a+b);
    }(900,500);   
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程控制</title>
</head>
<body>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</body>
<script>
       var age = 28;
    //    //单分支
    //    if(age >= 50) console.log('不想奋斗了，累了');
    //    //多分支
    //    else console.log('加油！，中年');
       age = 39 ;
    //    if(age > 18 && age < 20 ) console.log('没车没房');
    //    else if(age > 20 && age < 30) console.log('奋斗中,买车买房！');
    //    else if(age > 30 && age < 40) console.log('有孩子，有老婆，没有钱');
    //    else if(age > 40 && age < 50) console.log('有房，有车，有钱');
    //    else console.log('安享晚年！');
    //    switch (true)
    //    {
    //        case age > 20 && age < 30:
    //        console.log('奋斗中,买车买房！');
    //        break;
    //        case age > 30 && age < 40:
    //        console.log('有孩子，有老婆，没有钱');
    //        break;
    //        case age > 40 && age < 50:
    //        console.log('有房，有车，有钱');
    //        break;
    //        default:
    //        console.log('安享晚年！');
    //    }
    var lis =document.querySelectorAll("ul:first-of-type li");
    for(var i = 0; i < lis.length; i++)
    {
            lis[i].style.color = "red";
    }
    var lis =document.querySelectorAll("ul:last-of-type li");
    var i = 0;
    while(i<lis.length)
    {
          lis[i].style.color = "green";
           i++;
    }
    var lis =document.querySelectorAll("ul:last-of-type li");
    var i = 0;
    do
    {
          lis[i].style.background = "green";
          lis[i].style.color ="blue";
          i++;
    }
    while(i<lis.length)
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js对象的序列化JSON格式的字符串</title>
</head>
<body>
    <script>
        //JSON： javascript object notation(js 对象表示法)
        //JSON:  2006年成为国家标准，并成为代表结构化数据的通用的格式
        //JSON： 借用了**js对象字面量**的语法规格，但并非JS对象，也并非只是JS才用JSON
        //JSON： 独立于任何编程语言，几乎所有编程语言都提供了访问JSON数据的API接口
        //JSON： 尽管与JS并无直接关系，但JSON在JS代码中应用最广泛
        //2.JSON 语法
        //JOSN 支持三种数据类型：简单值，对象，数组
        //简单值：
        // 数值：'250','3.14'
        // 字符串： '"hello World"'，必须使用双引号作为定界符
        // 布尔值：'true'，'false'
        // 空值： 'null'
        // 注意：不支持'undefined'
        var person = {
            name:"admin",
            age:30,
            isMarried:true,
            course:{
                name:"javascript",
                grade:99,
            },
            getName:function(){
                return this.name;
            },
            hobby:undefined,
            toString:function()
            {
                return "继承属性";
            },
        };
        //将js对象转为json格式的字符串
        var jsonStr =JSON.stringify(person);
        //传入第二参数数组，对输出的结果进行限制
        var jsonStr =JSON.stringify(person,["name","age"]);
        //对JSON进行过滤
        //如果第二个参数是一个回调，可以进行动态过滤
         var jsonStr =JSON.stringify(person,function(key,value){
            switch(key)
            {
                case 'age':
                return '年龄是秘密不能随便问';
                case 'isMarried':
                return undefined;
                //必须要有default, 才可以输出其他未处理的属性
                default:
                return value;
            }
         });
        //json中没有方法，undefined也没有
        console.log(jsonStr);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
       var str =
         '{\
            "name" : "曹操",\
            "age" : 28,\
            "sex" : "男"\
          }';
    var obj = JSON.parse(str);
    console.log(obj);
    //遍历JSON使用 for(key in JSON对象)
    for(key in obj)
    {
        console.log(obj[key]);
    }
    var li1 = document.querySelector("li:first-of-type");
     li1.innerHTML =obj.name;
    var li2 = document.querySelector("li:nth-of-type(2)");
     li2.innerHTML =obj.age;
    var li3 = document.querySelector("li:last-of-type");
     li3.innerHTML =obj.sex;
    </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jSON转js对象2</title>
</head>
<body>
    <script>
       var jsonStr =
         '{\
           "name" : "曹操",\
            "age" : 28,\
            "sex" : "男",\
            "isMarried" : true,\
            "course" : {"name":"javascript","grade":99}\
          }';
        var obj = JSON.parse(jsonStr,function(key,value)
        {
             if(key === "isMarried")
             {
                 return "本人已经成家，有事烧纸";
             }
             return value;
        });    
        //控制台打印结果
        var person = 
        {
          name:obj.name,
          age:obj.age,
          sex:obj.sex,
          couresName:obj.course.name,
          couresGrade:obj.course.grade,
        };
        var ul = document.createElement("ul");
        var res= "";
        for(var key in person)
        {
            res += "<li>" + person[key] + "</li>";
        }
        ul.innerHTML = res;
        document.body.append(ul);
    </script>
</body>
</html>