search

博客列表 >js脚本基础

js脚本基础

冰雪琉璃
冰雪琉璃原创
2021年04月14日 09:22:58670浏览

JS的引用方式

1.内部引用

  1. 外部引用

    适用情况

  • 内部引用适用与当前html中
  • 外部引用适用与多个页面js脚本的配对，如果代码较多或者使要求引入多个html共享则使用外部引用

    用处

  • 外部引用可以将多个js脚本写到一个页面中，从而实现多个页面的交互。可以优化代码。
  • 内部引用由于是将js直接写到htnl文档中则有利于检查元素，从而更快的实现元素的设置。
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>引用方式</title>
    6.   <!-- src指向外部js的路径代码 -->
    7.   <script type="text/javascript" src="script/js"></script>
    8. </head>
    9. <body>
    10. <!-- script标签中写入当前html的脚本 -->
    11.   <script type="text/javascript"></script>
    12. </body>
    13. </html>

    js加载方式

  1. defer

  2. async

    两者的不同

    1. defer可以实现html与js同步加载，它不会中断html的解析，直到html的dom加载完成才执行，有执行先后顺序之分。
    2. async只关注js脚本的下载只实现了下载js与解析html得同步，没有执行得先后之分

      控制台打印得方式

      1.console.log()
      2.console.table()
    3. console.dir()

    4. console.error()
      5.console.assert()

      1. html
      2. <!DOCTYPE html>
      3. <html lang="en">
      4. <head>
      5. <meta charset="UTF-8">
      6. <title>Document</title>
      7. </head>
      8. <body>
      9. <script type="text/javascript">
      10. const user={
      11. id:1,
      12. name:"小红",
      13. sex:"femal"
      14. }
      15. console.log(user);
      16. console.table(user);
      17. console.dir(user);
      18. console.info(user);
      19. // 出错提示
      20. console.error("不好意思参数出错了");
      21. //断言
      22. console.assert(10>5,"出错了");
      23. console.assert(10<5,"出错了");
      24. </script>
      25. </body>
      26. </html>


      常量与变量

      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>变量与常量</title>
      8. </head>
      9. <body>
      10. <button>Btn</button>
      11. <script>
      12. // 传统的方式，在es6之前没有常量
      13. //   "peter@php.cn": 字面量,直接量
      14. //   变量: 数据共享,重复使用
      15. let email = "admin@php.cn";
      16. console.log(email);
      17. console.log(email);
      18. console.log(email);
      19. //   1. 变量
      20. // 声明
      21. let userName;
      22. console.log(userName); // undefined
      23. // 第一次赋值: 初始化
      24. userName = "天蓬老师";
      25. console.log(userName);
      26. // 第二次赋值: 更新,修改
      27. userName = "灭绝老师";
      28. console.log(userName);
      29. userName = null;
      30. console.log(userName);
      32. //   推荐声明时直接初始化
      33. let price = 99;
      34. price = 199;
      36. // 2. 常量,常量通常全大写，多个单词之间使用下划线
      37. //   因为常量不能被更新,所以声明时必须赋值(初始化)
      38. const GENDER = "female";
      39. //   gender = "male";
      40. console.log(GENDER);
      42. // 3 标识符
      43. // 字母，数字，下划线，$,并且禁止数字开头, 123abc, abc@123,
      44. // 严格区分大小写
      46. let a = 10;
      47. let A = 20;
      48. console.log(a, A);
      50. // 不能使用保留字或关键字
      52. let let1 = "abc";
      53. console.log(let1);
      55. // 4. 命名方案
      56. // 驼峰式: userName, unitPrice
      57. // 帕斯卡式: UserName, UnitPrice, 大驼峰式,用在类/构造函数
      58. // 蛇形式: user_name, unit_price
      59. // 匈牙利式: 将数据类型放在变量的最后前.
      60. const oBtn = document.querySelector("button");
      61. console.log(oBtn);
      62. const aNumbers = [1, 2,3];
      63. console.log(Array.isArray(aNumbers));
      64. console.table(Array.isArray(aNumbers));
      65. console.log(Array.isArray(aNumbers));
      66. </script>
      67. </body>
      68. </html>

      总结：

  3. Array.isArray() 用来判断一个数是否为数组
  4. undefind是表示声明了一个变量但是没有赋值
  5. null表示声明了变量但是赋值为空值。

    基本数据类型和引用数据类型

  6. 基本数据类型：

    • string, number,null boolean, undefined,
    • boolean有两个值分别是true和false。
    1. 引用数据类型
    • object，Array,function,
      3.类型判断
    • typeof()

    1. 判断结果
      typeof(number):number
      typeof(string):string
      typeof(true or false):boolean
      typeof(null)：object
      typeof(undefined):undefined
      5.类型转化：

      • 数字类型转化：Number()
      • 字符串类型转化：String()
      • 布尔类型转化：Boolean()
      • 将值转化为整数型：parseInt()
      • 将值转化为浮点型：parseFloat()
      1. 特殊值
      • Number()类型转化中对于不算数字的值返回NaN
      • Boolean(1):true,Boolean(0):false

      • Number(false);//0
        Number(true);//1
        Number(undefined);//NaN
        Number(null);//0
        7 ‘===’与’==’的区别

        • ‘==’表示非严格判断，只判断值本身但是不判断值的类型

        • ‘==’表示严格判断，即对值判断也对值得类型判断
          8 函数调用和添加属性

          1. function getName(){
          2. getName.userName="Anno";
          3. console.log(getName.userName);
          4. }

          9.函数提升和重写
          ```html
          <!DOCTYPE html>
          <html lang="zh-CN">
          <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>函数提升与重写</title></title>
          </head>
          <body>
          <script>
          // 声明
          function getName(name) {
          return “welcome to: “ + name;
          }

          // 调用,按名
          console.log(getName(‘Anne’));

        // 函数允许重写
        function getName(name) {

        1.   return "欢迎: " + name;

        }

  1.     //   调用语句写到了函数声明语句之前
  2.       console.log(sum(1,6));
  3.       // 1. 命名函数声明提升
  4.       function sum(a,b) {
  5.         return a + b;
  6.     }
  8.     //   如果不希望函数提升,必须先声明再使用，用匿名函数
  9.     let sum =function (a,b) {
  10.           return a + b;
  11.       };
  13.       console.log(sum(1,6));
  14.       </script>
  15.       </body>
  16.       </html>
  17.    ```
  18.    10.函数的参数与返回值
  19.    ```html
  20.    <!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>函数的参数与返回值</title>
</head>
<body>
<script>
// 函数都是单值返回
// 必选参数
let sum = function (a, b) {
console.log(a, b);//1 2
return a + b;//3
};
console.log(sum(1, 2));

  1.   // 默认参数
  2.    sum = function (a, b = 10) {
  3.     return a + b;
  4.    };
  5.    //1表示a值
  6.    console.log(sum(1));
  8.     sum = function (a, b, c, d) {
  9.       return a + b + c + d;
  10.      };
  11.     console.log(sum(1, 2, 3, 4));
  13.   // 返回多个值,使用数组或对象
  14.   function getUser() {
  15.     return [10, "admin", "admin@php.cn"];
  16.   }
  18.   function getUser() {
  19.    return { id: 10, username: "admin", email: "admin@php.cn" };
  20.   // }
  21.   // console.table(getUser());
  22.    ```


11.归并参数
-rest语法,将所有参数压到一个数组中来简化参数的获取过程
-实例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>归并参数</title>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. sum=function(...arr){
  10.   let t=0;
  11.   for(let i=0;i<arr.length;i++){
  12.     t+=arr[i];
  13.   }
  14.   return t;
  15. }
  16. console.log(sum(1,2,3,4,5,6));
  17.    </script>
  18.  </body>
  19. </html>

12.高阶函数

  1. 概念：
    -高阶函数: 使用函数为参数或者将函数作为返回的函数
    1. let sum=function(a,b){
    2.     return function(c,d){
    3.       return a+b+c+d;
    4.     };
    5.    };
    6.    let f1=sum(1,2);
    7.    // 1与2分别代表c和d。
    8.    console.log(typeof(f1));
    9.    // 3与43分别代表a与b。
    10.    console.log(f1(3,43));
    13.回调函数
    1.概念：
    -回调函数：函数作为参数
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>回调函数</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9.       function demo(f) {
    10.       console.log(f);//function
    11.       return function () {
    12.         return "abc";
    13.       };
    14.     }
    15.     let a = demo(function () {});
    16.     console.log(a);
    17.     console.log(a());//abc
    18.  </script>
    19. </body>
    20. </html>
    14.箭头函数：
    1. 匿名函数可以用箭头函数来简化。
      2.如果使用了this关键字就不可以用箭头函数。
      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>箭头函数</title>
      8. </head>
      9. <body>
      10. <script>
      11. let sum = function (a, b) {
      12.  return a + b;
      13. };
      14. let sum=function(a,b){
      15.  return a+b;
      16. }
      17. console.log(sum(1,6));
      18. //匿名函数，可以使用箭头函数来简化。
      19. sum =(a,b)=>{
      20. return a+b;
      21. }
      22. console.log(sum(1,2));
      23. </script>
      24. </body>
      25. </html>
      15.立即执行函数
      1.立即执行函数: 声明调用二合一, 声明后直接执行
      1. (function (a, b) {
      2.  console.log(a + b);//700
      3.  //a,b分别代表100，600
      4. })(100, 600);
      16.addEventListener以及onclick的区别。
      1.前者可以在同一个元素中声明多个。并且按顺序执行相应的语句。
      2.后者不同在一个元素中声明两个或者两个以上onclick事件，如果声明则会覆盖上一个想要执行党的语句。
上一条：类的声明，实例化，静态成员，扩展；trait的用处和重名的解决方案下一条：js基础知识：变量作用域与闭包，以及类与类的继承
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多