search

博客列表 >JAVASCRIPT基础学习

JAVASCRIPT基础学习

零龙
零龙原创
2020年08月18日 07:14:32558浏览

JAVASCRIPT基础学习

示例标注：

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11.     //   var age = 88; 
  12.     //   var username = '曹操';
  13.     //   var flag  =false;
  14.     //   console.log(typeof age,typeof username,typeof flag);
  15.     //   var title =null;
  16.     //   console.log(typeof title);
  17.     //   var role =undefined;
  18.     //   console.log(typeof role);
  19.     //   console.log(null===role);
  20.     //   console.log(null==='null');
  21.     //   console.log(null + 100);
  22.     //   console.log(undefined + 100);
  23.     //   //NaN: Not a Number ,非数值
  24.     //   console.log(isNaN(undefined));
  25.     //   console.log(isNaN(username));
  26.     //3.对象：object array,function
  27.     //数值
  29.       var fruits =['watermelon','apple','orange','peach','pear'];
  30.     //  console.log(fruits);
  31.     //  console.log(fruits[1]);
  32.     //  //数组类型
  33.     //  console.log(typeof fruits);
  34.     //  //数组长度
  35.     //  console.log(fruits.length);
  36.     //  //判断数组
  37.     //  console.log(Array.isArray(fruits));
  38.     //  //遍历数组
  39.     //  for(var i= 0 ; i<fruits.length;i++)
  40.     //  {
  41.     //      console.log(fruits[i]);
  42.     //  }
  43.     //  //forEach 遍历数组
  44.     //  fruits.forEach(function(item,key){
  45.     //      console.log('i:',key,'item',item);
  46.     //  });
  47.     //  //forEach 简化遍历数组
  48.     // fruits.forEach((item,key)=>console.log('i:',key,'item:',item));
  49.     // console.log(fruits.slice(0,3));
  50.     //slice 取出部分元素参数1：数组位置，参数2：数组个数
  52.     //splice(); 实现对数组元素的增删改,
  53.     // console.log(fruits.splice(0,2));
  54.     // console.log(fruits);
  55.     //删除后返回删除的数组
  56.     // console.log(fruits.splice(4,0,'mango','pineapple'));
  57.     // console.log(fruits);
  58.     //从第二个位置添加到数组数值。参数1：添加的位置，参数2：增加的位置，参数3：增加的数值
  59.     // console.log(fruits.splice(1,3,'mengo','pineapple','plum'));
  60.     // console.log(fruits);
  61.     //更换数组第3个位置的数值。参数1：位置，参数2：更改的数量，参数3：更改的值
  63.     //对象：object
  64.     //js中的数组===> 类似 php 索引数组
  65.     //js中的对象 ===>类似 php 关联数组
  66.     var student ={
  67.           id:1,
  68.           name:'admin',
  69.           email:'admin@php.cn',
  70.           course:[1,2,3,4],
  71.           scroe:
  72.           {
  73.               php:90,
  74.               js:60,
  75.               css:70,
  76.           },
  77.           "my scroe":[0,4,6],
  78.     };
  79.     // console.log(student);
  80.     // //console.table(student);
  81.     // // 对象成员的访问，使用点语法
  82.     // console.log(student.scroe.css);//访问对象中的scroe中的css
  83.     // console.log(student.email); //访问对象中的email
  84.     // console.log(student.course[2]);//访问对象中的数组
  85.     // console.log(student["my scroe"][1]);//访问对象中的字符数组
  87.     //变量对象
  88.     // for(key in student)
  89.     // {
  90.     //    console.log(student[key]);
  91.     //    if(student[key] instanceof Array)
  92.     //    {
  93.     //        for(value in student[key])
  94.     //        {
  95.     //            console.log(student[key][value]);
  96.     //        }
  97.     //    }
  98.     // }
  99.     //获取对象所有属性组成的数组
  100.     //object.keys(obj)返回对象所有属性组成的数组
  101.     // var keys = Object.keys(student);
  102.     // console.log(keys);
  103.     // //根据键名遍历，
  104.     // keys.forEach(function(item)
  105.     // {
  106.     //       console.log(this[item]);
  107.     // },student);
  108.     //将对象转换成为数组后输出数组，
  109.     //keys.forEach(函数,数组)
  110.     //item键名属性名
  113.     //函数
  115.     function f1(a,b)
  116.     {
  117.         console.log(a+b);
  118.     }
  119.     f1(1,2);
  120.     var f2 = function(a,b)
  121.     {
  122.         console.log(a+b);
  123.     };
  124.     f2(100,50);
  126.     (function(a,b)
  127.     {
  128.        console.log(a + b);
  129.     })(200,100);
  131.     (function(a,b)
  132.     {
  133.        console.log(a+b);
  134.     }(300,500));
  136.     +function(a,b)
  137.     {
  138.        console.log(a+b);
  139.     }(600,500);
  141.     !function(a,b)
  142.     {
  143.        console.log(a+b);
  144.     }(900,500);   
  145.     </script>
  147. </body>
  148. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>流程控制</title>
  7. </head>
  8. <body>
  9.     <ul>
  10.         <li>item</li>
  11.         <li>item</li>
  12.         <li>item</li>
  13.     </ul>
  14.     <ul>
  15.         <li>item</li>
  16.         <li>item</li>
  17.         <li>item</li>
  18.     </ul>
  19. </body>
  20. <script>
  21.        var age = 28;
  22.     //    //单分支
  23.     //    if(age >= 50) console.log('不想奋斗了，累了');
  24.     //    //多分支
  25.     //    else console.log('加油！，中年');
  27.        age = 39 ;
  29.     //    if(age > 18 && age < 20 ) console.log('没车没房');
  30.     //    else if(age > 20 && age < 30) console.log('奋斗中,买车买房！');
  31.     //    else if(age > 30 && age < 40) console.log('有孩子，有老婆，没有钱');
  32.     //    else if(age > 40 && age < 50) console.log('有房，有车，有钱');
  33.     //    else console.log('安享晚年！');
  35.     //    switch (true)
  36.     //    {
  37.     //        case age > 20 && age < 30:
  38.     //        console.log('奋斗中,买车买房！');
  39.     //        break;
  40.     //        case age > 30 && age < 40:
  41.     //        console.log('有孩子，有老婆，没有钱');
  42.     //        break;
  43.     //        case age > 40 && age < 50:
  44.     //        console.log('有房，有车，有钱');
  45.     //        break;
  46.     //        default:
  47.     //        console.log('安享晚年！');
  48.     //    }
  50.     var lis =document.querySelectorAll("ul:first-of-type li");
  52.     for(var i = 0; i < lis.length; i++)
  53.     {
  54.             lis[i].style.color = "red";
  55.     }
  57.     var lis =document.querySelectorAll("ul:last-of-type li");
  58.     var i = 0;
  59.     while(i<lis.length)
  60.     {
  61.           lis[i].style.color = "green";
  62.            i++;
  63.     }
  65.     var lis =document.querySelectorAll("ul:last-of-type li");
  66.     var i = 0;
  67.     do
  68.     {
  69.           lis[i].style.background = "green";
  70.           lis[i].style.color ="blue";
  71.           i++;
  73.     }
  74.     while(i<lis.length)
  75. </script>
  76. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>js对象的序列化JSON格式的字符串</title>
  7. </head>
  8. <body>
  9.     <script>
  11.         //JSON： javascript object notation(js 对象表示法)
  12.         //JSON:  2006年成为国家标准，并成为代表结构化数据的通用的格式
  13.         //JSON： 借用了**js对象字面量**的语法规格，但并非JS对象，也并非只是JS才用JSON
  14.         //JSON： 独立于任何编程语言，几乎所有编程语言都提供了访问JSON数据的API接口
  15.         //JSON： 尽管与JS并无直接关系，但JSON在JS代码中应用最广泛
  16.         //2.JSON 语法
  17.         //JOSN 支持三种数据类型：简单值，对象，数组
  18.         //简单值：
  19.         // 数值：'250','3.14'
  20.         // 字符串： '"hello World"'，必须使用双引号作为定界符
  21.         // 布尔值：'true'，'false'
  22.         // 空值： 'null'
  23.         // 注意：不支持'undefined'
  25.         var person = {
  26.             name:"admin",
  27.             age:30,
  28.             isMarried:true,
  29.             course:{
  30.                 name:"javascript",
  31.                 grade:99,
  32.             },
  33.             getName:function(){
  34.                 return this.name;
  35.             },
  36.             hobby:undefined,
  37.             toString:function()
  38.             {
  39.                 return "继承属性";
  40.             },
  41.         };
  42.         //将js对象转为json格式的字符串
  43.         var jsonStr =JSON.stringify(person);
  44.         //传入第二参数数组，对输出的结果进行限制
  45.         var jsonStr =JSON.stringify(person,["name","age"]);
  46.         //对JSON进行过滤
  47.         //如果第二个参数是一个回调，可以进行动态过滤
  48.          var jsonStr =JSON.stringify(person,function(key,value){
  49.             switch(key)
  50.             {
  51.                 case 'age':
  52.                 return '年龄是秘密不能随便问';
  53.                 case 'isMarried':
  54.                 return undefined;
  55.                 //必须要有default, 才可以输出其他未处理的属性
  56.                 default:
  57.                 return value;
  58.             }
  59.          });
  60.         //json中没有方法，undefined也没有
  61.         console.log(jsonStr);
  62.     </script>
  63. </body>
  64. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <ul>
  10.         <li></li>
  11.         <li></li>
  12.         <li></li>
  13.     </ul>
  14.     <script>
  15.        var str =
  16.          '{\
  17.             "name" : "曹操",\
  18.             "age" : 28,\
  19.             "sex" : "男"\
  20.           }';
  21.     var obj = JSON.parse(str);
  23.     console.log(obj);
  24.     //遍历JSON使用 for(key in JSON对象)
  25.     for(key in obj)
  26.     {
  27.         console.log(obj[key]);
  28.     }
  29.     var li1 = document.querySelector("li:first-of-type");
  30.      li1.innerHTML =obj.name;
  31.     var li2 = document.querySelector("li:nth-of-type(2)");
  32.      li2.innerHTML =obj.age;
  33.     var li3 = document.querySelector("li:last-of-type");
  34.      li3.innerHTML =obj.sex;
  35.     </script>
  36. </body>
  37. </html>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>jSON转js对象2</title>
  8. </head>
  9. <body>
  10.     <script>
  11.        var jsonStr =
  12.          '{\
  13.            "name" : "曹操",\
  14.             "age" : 28,\
  15.             "sex" : "男",\
  16.             "isMarried" : true,\
  17.             "course" : {"name":"javascript","grade":99}\
  18.           }';
  19.         var obj = JSON.parse(jsonStr,function(key,value)
  20.         {
  21.              if(key === "isMarried")
  22.              {
  23.                  return "本人已经成家，有事烧纸";
  24.              }
  25.              return value;
  26.         });    
  27.         //控制台打印结果
  29.         var person = 
  30.         {
  31.           name:obj.name,
  32.           age:obj.age,
  33.           sex:obj.sex,
  34.           couresName:obj.course.name,
  35.           couresGrade:obj.course.grade,
  36.         };
  38.         var ul = document.createElement("ul");
  39.         var res= "";
  40.         for(var key in person)
  41.         {
  42.             res += "<li>" + person[key] + "</li>";
  44.         }
  46.         ul.innerHTML = res;
  47.         document.body.append(ul);
  48.     </script>
  49. </body>
  50. </html>

总结：跟着老师学习了javascript.也跟着老师写了一遍。还需要多写多练习。加油！！

上一条：JS制作轮播图下一条：composer.json的编写使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多