Blogger Information
Blog 33
fans 1
comment 0
visits 22007
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js脚本基础
冰雪琉璃
Original
671 people have browsed it

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);
      31. // 推荐声明时直接初始化
      32. let price = 99;
      33. price = 199;
      34. // 2. 常量,常量通常全大写,多个单词之间使用下划线
      35. // 因为常量不能被更新,所以声明时必须赋值(初始化)
      36. const GENDER = "female";
      37. // gender = "male";
      38. console.log(GENDER);
      39. // 3 标识符
      40. // 字母,数字,下划线,$,并且禁止数字开头, 123abc, abc@123,
      41. // 严格区分大小写
      42. let a = 10;
      43. let A = 20;
      44. console.log(a, A);
      45. // 不能使用保留字或关键字
      46. let let1 = "abc";
      47. console.log(let1);
      48. // 4. 命名方案
      49. // 驼峰式: userName, unitPrice
      50. // 帕斯卡式: UserName, UnitPrice, 大驼峰式,用在类/构造函数
      51. // 蛇形式: user_name, unit_price
      52. // 匈牙利式: 将数据类型放在变量的最后前.
      53. const oBtn = document.querySelector("button");
      54. console.log(oBtn);
      55. const aNumbers = [1, 2,3];
      56. console.log(Array.isArray(aNumbers));
      57. console.table(Array.isArray(aNumbers));
      58. console.log(Array.isArray(aNumbers));
      59. </script>
      60. </body>
      61. </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. }
  7. // 如果不希望函数提升,必须先声明再使用,用匿名函数
  8. let sum =function (a,b) {
  9. return a + b;
  10. };
  11. console.log(sum(1,6));
  12. </script>
  13. </body>
  14. </html>
  15. ```
  16. 10.函数的参数与返回值
  17. ```html
  18. <!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));
  7. sum = function (a, b, c, d) {
  8. return a + b + c + d;
  9. };
  10. console.log(sum(1, 2, 3, 4));
  11. // 返回多个值,使用数组或对象
  12. function getUser() {
  13. return [10, "admin", "admin@php.cn"];
  14. }
  15. function getUser() {
  16. return { id: 10, username: "admin", email: "admin@php.cn" };
  17. // }
  18. // console.table(getUser());
  19. ```


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事件,如果声明则会覆盖上一个想要执行党的语句。
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