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