search

博客列表 >JavaScript 初体验

JavaScript 初体验

周Sir-BLOG
周Sir-BLOG原创
2020年08月13日 19:01:44565浏览

1、JavaScript的引入方式

  • 引入方式1：将JavaScript代码放入一对 <script></script> 标签中。
  1.     <h2>JavaScript的引入方式1</h2>
  2.     <script>
  3.         document.querySelector("h2").style.color="red";
  4.     </script>
  • 引入方式2：通过script标签的src属性将外部的js脚本引入到当前页面中（实现js脚本的共享。）
  1.     <h2>JavaScript的引入方式2</h2>
  2.     <script src="my.js"></script>
  1. # my.js
  2.     document.querySelector("h2").style.color="red"

2、JavaScript的（延迟与异步）加载

  • JavaScript的延迟加载

在script标签的src属性后面加 defer 关键字
defer: 延迟加载,等当前的html文档全部渲染结束,再加载js脚本

  1.     <h2>JavaScript的延迟加载</h2>
  2.     <script src="my.js" defer></script>

加上 defer 等于在页面完全在入后再执行，实际作用不大，html是由上而下逐行执行，只需要将 <script></script> 标签放到最后（</body>前）即可。

如果脚本执行需要延迟加载，请注意两点：
1、不要在defer型的脚本程序段中调用document.write命令，因为document.write将产生直接输出效果。
2、而且，不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

  • JavaScript的异步加载

在script标签的src属性后面加 async 关键字
async: 异步加载: 执行JS脚本,并不会暂停对当前HTML文档的解析

  1.     <h2>JavaScript的异步加载</h2>
  2.     <script src="my.js" async></script>

3、JavaScript变量的定义

  • 变量的声明
  1.     // 块作用域
  2.       var username1 = "A";
  3.     // 方法作用域
  4.       let username2 = "B";
  5.     // 方法作用域（相对于PHP常量，一旦赋值就无法改变了）
  6.       const username3 = "C";
  • 变量初始化与更新/赋值
  1.       //var username; // js变量如果未初始化, 默认用undefined初始化
  2.       var username = "朱老师"; // 用自定义的值进行初始化
  4.       // 更新/赋值(不应该加声明关键字)
  5.       username = "Peter Zhu";
  7.       console.log(username);

  • JavaScript与php的一点区别
    1、php与JavaScript变量均区分大小写
    2、php中函数的命名不区分大小写,js中区分大小写的

    4、JavaScript的数据类型与访问方式

  • 原始类型

No 数据类型 说明
1 number 数值
2 string 字符串
3 bool 布尔 
  1.     // 1、number 数值
  2.     var grade = 88;
  3.     // 2、string 字符串
  4.     var username = "peter";
  5.     // 3、boolean: 布尔
  6.     var flag = false;
  8.     // 类型检查 typeof
  9.       console.log(typeof grade, typeof username, typeof flag);
  11.     // 输出结果：number string boolean
  • 特殊类型
No 数据类型 说明
4 null 空对象
5 undefined 未定义
6 boolean 对象(包含函数function/数组array) 
  1.       // 4、null 空对象
  2.       var title = null;
  3.       // 5、undefined 未定义
  4.       var role = undefined;
  5.       // 6、对象 object (包含函数`function`/数组`array`)
  6.       var student = { id: 1, name: "admin", email: "admin@php.cn",course :[88,98,85]};

5、JavaScript数组的定义与访问

  • 数组的定义（索引数组）
  1.     var arr1 = new Array(1,2,3,4);
  2.     console.log(arr1);
  4.     var arr2 = Array(1,2,3,4);
  5.     console.log(arr2);
  7.     var arr3 = [1,2,3,4];
  8.     console.log(arr3);
  11.     var arr4 = new Array();
  12.     arr4[0]=1;
  13.     arr4[1]=2;
  14.     arr4[2]=3;
  15.     arr4[3]=4;
  16.     console.log(arr4);
  18.     var arr5 = Array();
  19.     arr5[0]=1;
  20.     arr5[1]=2;
  21.     arr5[2]=3;
  22.     arr5[3]=4;
  23.     console.log(arr5);
  25.     var arr6 = [];
  26.     arr6[0]=1;
  27.     arr6[1]=2;
  28.     arr6[2]=3;
  29.     arr6[3]=4;
  30.     console.log(arr6);
  • 数组的定义（关联数组）

js不能直接定义关联数组（这点比较奇葩）

  1.       var k = ["name", "age", "sex"];
  2.       var v = ["peter", 38, "男"];
  3.       var arr = new Array();
  4.       for (var i = 0; i < k.length; i++) {
  5.         arr[k[i]] = v[i];
  6.       }
  8.       console.log(Array.isArray(arr)); //输出:true
  9.       console.log(arr);  //输出关联数组
  • 判断数组类型方法
  1.         //定义一个数组；
  2.         var arr = ["苹果","香蕉","雪梨","西瓜"];
  4.         //js中数组也属于对象，判断类型不能使用typeof
  5.         console.log(typeof arr);  //输出:object
  7.         //Array.isArray()可以正确判断是否数组类型
  8.         console.log(Array.isArray(arr)); //输出:true

  • 数组的访问

    按索引位置及键名访问

  1.  var arr = [1,2,3,4];
  2. console.log(arr[2]); 输出：3
  4. var arr1 = [];
  5. arr1["name"] = "admin";
  6. arr1["mail"] = "admin@php.cn";
  8. console.log(arr["name"]); //输出：admin
  9. console.log(arr["mail"]); //输出：admin@php.cn
  • 数组的遍历
  1.         var arr = ["小明","小李","小美","小丽","小黑","小文"]
  3.         //for
  4.         for (let i = 0; i < arr.length; i++) {
  5.             document.write(i  + "=>" + arr[i])
  6.             document.write("<br>")
  7.         }
  9.         document.write("<hr>")
  11.         //forEach (匿名函数)
  12.         arr.forEach(function (item,key) {
  13.             document.write(key + "=>" + item);
  14.             document.write("<br>")
  15.         });
  17.         document.write("<hr>")
  19.         //forEach (匿名函数简写)
  20.         arr.forEach((item,key) => {
  21.             document.write(key + "=>" + item);
  22.             document.write("<br>")
  23.         });
  25.         document.write("<hr>")
  28.         //for..in..
  29.         for (key in arr) {
  30.             document.write(key + "=>" + arr[key]);
  31.             document.write("<br>")
  32.         }

遍历的方法有很多，还有（for…of…)这里这是做了入门了解,具体使用方法区别需要在后期实战中去理解。

6、使用 splice() 实现对数组元素的新增,删除,替换

  1.     var arr = ["小明","小李","小美","小丽","小黑","小文"]
  3.     // splice(索引位置,删除几个) -返回被删除的元素
  5.     //删除(删除小丽)
  6.     document.write(arr.splice(3,1));  //输出:小丽
  7.     document.write("<br>"); 
  8.     document.write(arr);  //输出:小明,小李,小美,小黑,小文
  10.     document.write("<Hr>"); 
  12.     //更新(更新小明和小李)
  13.     document.write(arr.splice(0,2,"明明","老李"));  //输出:小明,小李
  14.     document.write("<br>");
  15.     document.write(arr);  //输出:明明,老李,小美,小黑,小文
  17.     document.write("<Hr>"); 
  19.     //添加(小明和小李)
  20.     document.write(arr.splice(0,0,"xiaomin","xiaoli"));  //输出:""
  21.     document.write("<br>");
  22.     document.write(arr);  //输出:xiaomin,xiaoli,明明,老李,小美,小黑,小文

7、javascript函数

  2.   // 命名函数
  3.   function sum1(a, b) {
  4.     document.write(a + b);
  5.   }
  7.   sum1(11, 2);  //输出:13
  9.   document.write("<hr>");
  11.   // 匿名函数
  12.   var sum2 = function (a, b) {
  13.     document.write(a + b);
  14.   };
  15.   sum2(12, 18);//输出:30
  17.   document.write("<hr>");
  19.   // IIFE:立即调用函数
  20.   // 将函数的声明与调用合并
  21.   (function (a, b) {
  22.     document.write(a + b);
  23.   })(100, 80); //输出:190

8、javascript流程控制

  1.   let age = 21;
  3.   //if单分支
  4.   if (age < 30) {
  5.     document.write("努力学习吧骚年！");
  6.   }
  8.   document.write("<hr>");
  10.   //if..else..双分支
  11.   if (age < 30) {
  12.     document.write("努力学习吧骚年！");
  13.   } else {
  14.     document.write("努力赚钱吧大叔！");
  15.   }
  17.   document.write("<hr>");
  19.   //if...else if...else多分支
  20.   if (age < 30) {
  21.     document.write("努力学习吧骚年！");
  22.   } else if (age >= 30 && age < 50) {
  23.     document.write("努力赚钱吧大叔！");
  24.   } else {
  25.     document.write("能养老了吗大爷！");
  26.   }
  29.   document.write("<hr>");
  31.   //switch多分支
  32.   switch (age!==null) {
  33.     case age < 30:
  34.       document.write("努力学习吧骚年！");
  35.       break;
  36.     case age >= 30 && age < 50:
  37.       document.write("努力赚钱吧大叔！");
  38.       break;
  39.     default:
  40.       document.write("能养老了吗大爷！");
  41.       break;
  42.   }

9. JSON

1. JSON 是什么

  • JSON: JavaScript Object Notation(JS 对象表示法)
  • JSON: 2006 年成为国际标准,并成为表示结构化数据的通用的格式
  • JSON 借用了JS 对象字面量的语法规则,但并非 JS 对象,也并非只是 JS 才用 JSON
  • JSON 独立于任何编程语言, 几乎所有编程语言都提供了访问 JSON 数据的 API 接口
  • 尽管 JSON 与 JS 并无直接关系,但 JSON 在 JS 代码中应用最广泛

2. JSON 语法

JOSN 支持三种数据类型: 简单值, 对象, 数组

2.1 简单值

  • 数值: 150, 3.24

  • 字符串: "Hello World!",必须使用双引号做为定界符

  • 布尔值: true, false

  • 空值: null

注意: 不支持undefined

示例（js对象转为json字符串及过滤）

  1.     var users = {
  2.         id:       23,
  3.         name:     "admin",
  4.         email:    "admin@php.cn",
  5.         isadmin:  true,
  6.         class1:    function(){return 'php:12期'},
  7.         like:     ["踢球","游泳"],
  8.         contacts: {father:"ad",mom:"min"},
  9.     }
  11.     //JSON.stringify()将js对象转为json格式的字符串
  12.     var jsonStr = JSON.stringify(users);
  13.     document.write(jsonStr) ;
  15.     document.write("<hr>") ;
  17.     // 可以传入第二个参数（数组），对输出的结果进行过滤（例如只输出name和email)
  18.     jsonStr = JSON.stringify(users, ["name", "email"]);
  19.     document.write(jsonStr) ;
  21.     document.write("<hr>") ;
  23.     // 第二个参数也可以是一个回调，可以进行动态过滤
  24.     // 比如将isadmin的值为true时，过滤为管理员
  25.     jsonStr = JSON.stringify(users, function (key, value) {
  26.         if(key=='isadmin' && value==true){
  27.             return  '管理员';            
  28.         }
  29.        return value;
  30.     });
  31.     document.write(jsonStr) ;

示例（json字符串转为js对象及过滤）

  1.       // 1、json字符串如下
  2.       var jsonStr = '{"id": "23","name": "admin","email": "admin@php.cn","isadmin": "true"}';
  4.       // 2、将json字符串转为js对象
  5.       // var obj = JSON.parse(jsonStr)
  6.       //也可以使用匿名函数进行过滤输出（将isadmin为true输出为管理员）
  7.       var obj = JSON.parse(jsonStr, function (key, value) {
  8.         if(key=="isadmin" && value=="true"){
  9.             return '管理员';            
  10.         }
  11.         //必须加下以下语句,否则无输出
  12.        return value;
  13.       });
  15.        // 3、创建HTML元素<ul>
  16.         var ul = document.createElement("ul");
  18.        // 4、循环obj对象得到数据放到HTML元素<li>中并保存到res变量
  19.         var res = "";
  20.         for (var key in obj) {
  21.             res += "<li>" + obj[key] + "</li>";
  22.         }
  24.         // 5、在HTML元素<ul>中添加列表项目
  25.         ul.innerHTML = res;
  26.         document.body.appendChild(ul);

上一条：js常用类型，流程控制，json相关使用-js-37课8.11下一条：使用Ajax-Json-POST请求，做一个数据表进行用户信息验证-js-38课8.12
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多