Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JAVASCRIPT基础学习
Blogger Information
Blog 56
fans 1
comment 0
visits 62294
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JAVASCRIPT基础学习
零龙
Original
559 people have browsed it

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.也跟着老师写了一遍。还需要多写多练习。加油！！

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：这些都是基础知识, 一定要多写多看
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post