js引用 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>js写到哪里？</title>
  8.     <style>
  9.         .active {
  10.             color: red;
  11.             background-color: yellow;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 前端通用的脚本语言 -->
  17.     <h2>www.php.cn</h2>
  19.     <!-- 1.内联脚本 -->
  20.     <button onclick="document.querySelector('h2').classList.toggle('active');">Button1</button>
  22.     <!-- 2.内部脚本 -->
  23.     <button onclick="activeTitle(this)">Button2</button>
  25.     <!-- <script>
  26.         function activeTitle(){
  27.             document.querySelector('h2').classList.toggle('active');
  28.         }
  29.     </script> -->
  31.     <!-- 3.外部脚本 -->
  32.     <script src="outer.js"></script>
  34.     <!-- 1.内联脚本：事件属性
  35.     2.内部脚本：script标签中
  36.     3.外部脚本：script:src 属性中 -->
  37. </body>
  38. </html>

效果图

变量与常量 代码

  2.         // 1.变量
  3.         // 声明
  4.         let userName;
  5.         console.log(userName);
  6.         // 声明时并初始化（第一次赋值）
  7.         let itemName = "手机";
  8.         console.log(itemName);
  9.         // 更新
  10.         userName = "天蓬老师";
  11.         console.log(userName);
  12.         //2.常量
  13.         // 声明时必须初始化
  14.         const unitPrice = 3699;
  15.         // unitPrice = 2222;
  16.         const APP_NAME = "在线商城";
  18.         // 3.标识符
  19.         // 字母，数字，下划线，$，但是不能数字开头
  20.         // 严格区分大小写，userName,username不是同一个
  21.         // 不得使用关键字与可保留字
  22.         // 4.命名方案
  23.         // 驼峰式：userName
  24.         // 帕斯卡：UserName,也叫大驼峰
  25.         // 匈牙利：oBtn,_sex,_salary
  27.         // js中推荐全部使用驼峰式

效果图

变量类型与类型转换 代码

  1.         // 1.原始类型：字符串，数值，布尔，undefined,null
  2.         let email = "admin@php.cn";
  3.         console.log(email,typeof email);
  4.         let price = 8899;
  5.         console.log(price, typeof price);
  6.         let isEmpty = false;
  7.         console.log(isEmpty,typeof isEmpty);
  8.         let num;
  9.         console.log(num);
  10.         let o = null;
  11.         console.log(o,typeof null);
  12.         if(o==null) console.log("null");
  14.         // 2.引用类型：数组，对象，函数
  15.         //数组
  16.         let arr = [100,"手机",6699];
  17.         console.log(arr);
  18.         // console.log(arr instanceof Array);
  19.         // console.log(arr instanceof Object);
  20.         console.log(Array.isArray(arr));//判定是否为数组
  22.         //对象
  23.         let items = {
  24.             id:100,
  25.             name:"手机",
  26.             price:6699
  27.         };
  28.         console.log(items);
  29.         console.table(items);
  30.         console.log(items instanceof Object);
  32.         function show(){}
  33.         console.log(show instanceof Function);
  34.         console.log(typeof show);
  36.         // 通常只有相同类型的数据在一起运算，它的结果才有意义
  37.         console.log(100+100);
  38.         // "+":字符串运算中表示连接，此时会自动的触发类型转换
  39.         console.log(100+"100");
  41.         // "==":非严格匹配，只检查值，而不检查类型
  42.         console.log(100 == "100");
  44.         // "===":严格匹配，必须值与类型全部相同才返回true
  45.         console.log(100==="100");
  47.         // 平时应该用"==="

效果图

函数提升与重写 代码

  2.         // 声明，会自动提升到顶部
  3.         console.log(getName("天蓬老师"));
  4.         // 声明
  5.         function getName(name){
  6.             return "Welcome to " + name;
  8.             // console.log(1);
  9.         }
  10.         // 调用
  11.         console.log(getName("天蓬老师"));
  12.         function getName(name){
  13.             return "欢迎 " + name;
  14.         }
  16.         // // 1.函数声明提升
  17.         // console.log(sum(1,2));
  18.         // // 使用匿名函数/函数表达式
  19.         // let sum = function (a,b){
  20.         //     return a + b;
  21.         // }
  22.         // 2.函数可以被重写
  23.         const sum = function(a,b){
  24.             return a + b;
  25.         }
  26.         // sum = function(a,b){
  27.         //     return a + b+10;
  28.         // }
  29.         console.log(sum(1,2));
  31.         // 将函数做为值，赋给一个常量

效果图

函数参数与返回值 代码

  2.         let sum = function(a,b){
  3.             return a + b;
  4.         }
  5.         console.log(sum(1,2));
  6.         console.log(sum(1));
  8.         // 默认参数
  9.         sum = function (a,b = 2){
  10.             return a + b;
  11.         }
  12.         console.log(sum(1));
  13.         sum = function (a,b,c,d){
  14.             return a + b + c + d;
  15.         }
  16.         console.log(sum(1,2,3,4));
  18.         // ...归内参数，简化函数的参数声明
  19.         sum = function (...arr) {
  20.             console.log(arr);
  21.             return arr.reduce(function(p,c){
  22.                 return p + c;
  23.             });
  24.         }
  25.         console.log(sum(1,2,3,4,5));
  28.         let params = [10,20,30,40,50];
  29.         console.log(params);
  30.         // ...扩展参数，简化函数的调用参数
  31.         console.log(sum(...params));
  33.         console.log("-------------")
  34.         sum = function(){
  35.             console.log(arguments);
  36.             console.log(...arguments);
  37.             // 类数组：类似数组其实是对象
  38.             // 属性为从0递增的正整数，且有legth属性
  40.             // return a + b + c + d;
  41.             // console.log(Array.from(arguments));
  42.             // return Array.from(arguments).reduce(function(p,c){
  43.             //     return p + c;
  44.             // })
  45.             console.log(Array.of(...arguments));
  46.             return Array.of(...arguments).reduce(function(p,c){
  47.                 return p + c;
  48.             });
  49.         }
  50.         console.log(sum(...params));
  52.         // ------------------------
  53.         // 函数都是单值返回，如果想返回多个值，将结果封装到数组或对象中
  54.         let getItems = function() {
  55.             return [100,"手机",666];
  56.         }
  57.         console.log(getItems());
  58.         getItems = function() {
  59.             return {id:100, name:"手机", price:666};
  60.         }
  61.         console.log(getItems());

效果图

高阶函数 代码

  1.         // 高阶函数：使用函数为参数或者将函数做为返回值的函数
  3.         // 1.回调函数
  4.         document.addEventListener('click',function(){
  5.             alert("Hello World~~");
  6.         })
  8.         // 2.偏函数: 简化了声明时的参数声明
  9.         let sum = function(a,b) {
  10.             return function(c,d) {
  11.                 return a + b + c + d;
  12.             }
  13.         }
  15.         let f1 = sum(1,2);
  16.         console.log(f1(3,4));
  18.         // 3.柯里化
  19.         sum = function(a) {
  20.             return function(b) {
  21.                 return function(c) {
  22.                     return function(d) {
  23.                         return a + b + c + d;
  24.                     };
  25.                 };
  26.             };
  27.         }
  29.         // 简化了调用参数
  30.         let res = sum(10)(20)(30)(40);
  31.         console.log(res);
  33.         // 4.纯函数
  34.         // 完全独于调用上下文，返回值只能受到传入的参数影响
  35.         function getDate(){
  36.             return Date.now();
  37.         }
  38.         console.log(getDate());
  39.         //下面是纯函数
  40.         function add(a,b){
  41.             console.log(a + b);
  42.         }
  43.         add(1,2);

效果图

箭头函数 代码

  1.         let sum = function(a, b)  {
  2.             return a + b;
  3.         }
  4.         console.log(sum(1, 2));
  5.         // 箭头函数用来简化 "匿名函数" 的声明
  6.         sum = (a, b)=>{
  7.             return a + b;
  8.         }
  9.         console.log(sum(1, 2));
  10.         // 如果函数体只有一条语句，可不写return
  11.         sum = (a, b)=> a + b;
  12.         console.log(sum(10, 20));
  13.         // 如果只有一个参数，连小括号都可以不用了
  14.         let tips = str => console.log(str);
  15.         tips("欢迎新同学");
  16.         // 如果没有参数，小括号不能省略
  17.         tips = ()=> console.log("Success");
  18.         tips();
  19.         // 1.箭头函数没有原型属性prototype,不能当构造函数用
  20.         // 2.箭头函数中的this，始终与它的上下文绑定

效果图

作用域与闭包 代码

  1.         // js 三种作用域：全局，函数， 块
  3.         // 1.全局作用域
  4.         let site = "php中文网";
  5.         console.log(site);
  7.         // 2.函数作用域
  8.         function getSite(){
  9.             // 私有变量
  10.             let domain = "www.php.cn";
  11.             return site + domain;
  12.         }
  13.         // console.log(domain);
  14.         console.log(getSite());
  16.         // 3.块作用域
  17.         {
  18.             let a = 1;
  19.             const B = "Hello";
  20.             var c = 2;//var 不支持块作用域功能
  21.         }
  22.         // console.log(a,B);
  23.         // console.log(c);
  25.         // 4.闭包
  26.         // 自由变量: 即不是函数参数变量也不是私有变量，存在于函数调用上下文中（函数外）
  27.         // 闭包：能够访问自由变量的函数，所以理论上讲，任何函数都是闭够包
  28.         let num = 100;
  29.         function add(a, b){
  30.             // a,b: 参数变量
  31.             // t: 私有变量
  32.             // num: 自由变量
  33.             let t = 0;
  34.             return t + a + b + num;
  35.         }
  37.         function a() {
  38.             let n = 100;
  39.             // 这个返回的子函数就是闭包
  40.             return function() {
  41.                 return n;
  42.             };
  43.         }
  44.         // console.log(n);
  45.         console.log(a()());
  47.         function f1() {
  48.             let a = 1;
  49.             // a 相对于f1是私有变量，但是相对于返回的匿名函数就是一个自由变量
  50.             return function () {
  51.                 return a++;
  52.             };
  53.         }
  55.         let f2 = f1();
  56.         console.log(f2());
  57.         console.log(f2());
  59.         // 闭包会保存私有变量，一般不用

效果图

立即执行函数 代码

  1.         // 立即执行函数：IIFE
  2.         function sum(a, b){
  3.             console.log(a + b);
  4.         }
  5.         sum(10,20);
  7.         // 立即执行：声明完直接调用
  8.         (function (a, b){
  9.             console.log(a + b);
  10.         })(10,20)
  12.         // 在远古时代，js不支持块作用域（现在用let来支持块作用域）
  13.         // IIFE模拟块作用域
  14.         // if(true) {
  15.         //     var b = 888;
  16.         // }
  17.         // (function (){
  18.         //     if(true) {
  19.         //         var b = 888;
  20.         //     }
  21.         // })
  22.         // console.log(b);
  24.         let module = (function(name,email){
  25.             return {
  26.                 getEmail: () => "Email:" + email,
  27.                 getName: () => "Name:" + name,
  28.             };
  29.         })("amdin","admin@php.cn");
  31.         console.log(module);
  32.         console.log(module.getName());
  33.         console.log(module.getEmail());

效果图

总结

js引用：

  • 内联脚本：事件属性
  • 内部脚本：script标签中
  • 外部脚本：script:src 属性中

变量与常量：

  • 变量： let userName;
  • 常量： const APP_NAME = “在线商城”;
  • 标识符： 1.字母，数字，下划线，$，但是不能数字开头 2.严格区分大小写，userName,username不是同一个 3.不得使用关键字与可保留字
  • 命名方案：1.驼峰式：userName 2.帕斯卡：UserName,也叫大驼峰 3.匈牙利：oBtn,_sex,_salary 4.js中推荐全部使用驼峰式

变量类型与类型转换：

  • 原始类型：字符串，数值，布尔，undefined,null
  • 引用类型：数组，对象，函数 （1.通常只有相同类型的数据在一起运算，它的结果才有意义 2.”==”:非严格匹配，只检查值，而不检查类型;”===”:严格匹配，必须值与类型全部相同才返回true;平时应该用”===”）

函数提升与重写:

  • 函数声明提升,会自动提升到顶部
  • 函数可以被重写
  • 将函数做为值，赋给一个常量来解决函数声明提升和函数可以被重写问题

函数参数与返回值：

  • 默认参数：function (a,b = 2){ return a + b;}
  • …归内参数，简化函数的参数声明：function (…arr) {}
  • …扩展参数，简化函数的调用参数：console.log(sum(…params));
  • 函数都是单值返回，如果想返回多个值，将结果封装到数组或对象中

高阶函数：使用函数为参数或者将函数做为返回值的函数

  • 回调函数：document.addEventListener(‘click’,function(){ alert(“Hello World~~”);})
  • 偏函数: 简化了声明时的参数声明
  • 柯里化：简化了调用参数
  • 纯函数：完全独于调用上下文，返回值只能受到传入的参数影响

箭头函数：

  • 箭头函数用来简化 “匿名函数” 的声明
  • 如果函数体只有一条语句，可不写return
  • 如果只有一个参数，连小括号都可以不用了
  • 如果没有参数，小括号不能省略
  • 箭头函数没有原型属性prototype,不能当构造函数用
  • 箭头函数中的this，始终与它的上下文绑定

三种作用域：

  • 全局，函数， 块

自由变量:

  • 即不是函数参数变量也不是私有变量，存在于函数调用上下文中（函数外）

闭包：

  • 能够访问自由变量的函数，所以理论上讲，任何函数都是闭够包

立即执行函数：

  • 声明完直接调用 (function (a, b){console.log(a + b);})(10,20)
  • 在远古时代，js的var不支持块作用域（现在用let来支持块作用域）
  • IIFE模拟块作用域

更多相关文章

  1. shell脚本专题(05)：传参
  2. flex容器中的四个属性的功能，参数，以及作用
  3. “优化都不懂，你还想做机器学习？”
  4. 面试题：人工神经网络中为什么ReLu要好过于tanh和sigmoid？
  5. 函数节流你应该知道的那点事，建议收藏！
  6. 函数节流你应该知道的那点事
  7. python之函数的基本使用
  8. flex容器属性的功能，参数，以及作用
  9. 3.24实例演示flex容器中的四个属性的功能，参数，以及作用

随机推荐

  1. PHP实现数据分页显示详细操作
  2. php和java的优势
  3. 什么是php扩展
  4. 在php中get和post区别
  5. php header的作用
  6. 什么是php工厂模式
  7. php join的用法
  8. php中define的用法
  9. asp与php网站优缺点
  10. php保留两位小数的方法