JavaScript

基础语法

• 与Java基本类似

函数(方法)

• 在js中, 方法的调用, 或者说查找, 只需要方法名即可, 不需要写 (), 例 :

• //checkUserName 是方法名
  document.querySelector('#username').addEventListener('blur', checkUserName)
  

• 在执行场景, 需要加括号

• document.querySelector('form').addEventListener('submit', (even) => {
      if (!checkUserName() || !checkPhone()) {
          alert('数据不合法!')
          even.preventDefault()
      }
  })
  

具名函数

• 有些情况可以省略function , 比如Vue的methods中 . 若省略, 则看是否有括号, 对象无括号, 方法有括号

• <script>
      // 具名函数
      function add1(a, b) {
      	return a + b;
      }
  
      let sum = add1(10, 10);
      alert(sum);
  </script>    
  

匿名函数

• 有些情况可以省略function

• <script>
      //匿名函数
      let add2 = function (a, b) {
          return a + b;
      }
  
  	alert(add2(10, 20));
  </script>    
  

箭头函数

• <script>
      //箭头函数(匿名函数)
      let add3 = (a, b) => {
          return a + b;
      }
      
      alert(add3(10, 30));
  </script>  
  

立即执行函数

• <script>
      //立即执行函数(无需调用,直接执行)
      ((a, b) => { alert(a + b) })(10, 40)
  </script>  
  

对象

自定义对象

• 代码示例 : 只有大括号

• <script>
      //自定义对象
      var user = {
          name: "Tom",
          age: 10,
          gender: "男",
          sing: function(){
               console.log("悠悠的唱着最炫的民族风~");
           }
      }
  
      console.log(user.name);
      user.eat();
  <script>
  

数组

1. 定义数组

   • <script>
         //1. 定义数组
         let arr = [1, 2, 3, 4, 5]
     </script>
     

2. 数组属性 - length

   • <script>
         //2. 数组属性 - length
         for (let i = 0; i < arr.length; i++) {
             console.log(arr[i]);
     
         };
     
     	console.log('=========');
     </script>
     

3. 数组方法 - forEach , map, push , pop , unshift , shift , splice

   • <script>
         // 遍历数组
         arr.forEach((item) => console.log(item));
         console.log('=========');
     
         //遍历对数组中每一个元素进行修改处理
         let newArr = arr.map((item) => { return item + 10 });
         newArr.forEach((item) => console.log(item));
         console.log('=========');
     
         //头部增删
         arr.push('a','b');
         console.log(arr);
         arr.pop()
         console.log(arr);
         console.log('=========');
     
         //尾部增删
         arr.unshift('c','d');
         console.log(arr);
         arr.shift()
         console.log(arr);
         console.log('=========');
     
         //指定位置删除
         arr.splice(2,3)
         console.log(arr);
     </script>
     

String

1. 创建字符串

   • <script>
         //创建字符串对象
         var str = 'Hello String';
     
         console.log(str);
     </script>
     

2. 字符串属性 - length

3. 字符串方法 - charAt , indexOf , trim , substring

JSON

• 概述

  • JSON对象：JS 中根据一些特殊的规定, 定义出的对象, 形似与 Java 中的 properties (规定: 当键与值都必须是String类型)

  • 规范 :

    1. 键名必须是字符串 : 注: JS 中定义的普通对象的属性名, 不是字符串, 无需加 ""
       • 键名必须用双引号包裹。
       • 键名只能包含字母、数字、下划线和连字符，不能包含空格。
    2. 值可以是以下类型 :
       • 字符串、数字、布尔值、对象、数组或 null。
       • 不能使用 JavaScript 的 undefined 或函数。
    3. 严格区分大小写：
       • 键名和值均区分大小写。

  • 代码示例 (定义json对象)

    • var userStr = '{
          "name":"Tom",
          "age":18, 
          "addr":["北京","上海","西安"]
      }';
      

• JSON对象与 JS 对象的转换

  • 定义 JSON 对象时, 是定义的JSON格式的字符串, 若需要使用, 需要将该JSON格式字符串转为 JS 对象

    1. JSON字符串 ==> JS对象

       • let jsObj = JSON.parse(jsonStr);
         

    2. JS对象 ==> JSON字符串

    • let jsonStr = JSON.stringify(jsObj)
      

BOM

• 概述 : 浏览器对象模型(Browser Object Model)，允许JS与浏览器对话，JS将浏览器的各个组成部分封装为对象
• 此类对象API库
  • Window：浏览器窗口对象
    • 介绍：浏览器窗口对象
    • 获取：直接使用window，其中 window. 可以省略。
    • 属性
      • history : 返回 History 对象
      • location : 返回 Location 对象
    • 方法
      • alert()：显示带有一段消息和一个确认按钮的警告框。
      • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
      • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
      • setTimeout()：在指定的毫秒数后调用函数或计算表达式。
  • Location：地址栏对象
    • 介绍：地址栏对象。
    • 获取：使用 window.location 获取，其中 window. 可以省略。
    • 属性
      • href：设置或返回完整的URL。
  • History：历史记录对象
  • Navigator：浏览器对象
  • Screen：屏幕对象

DOM

• 概念：Document Object Model，文档对象模型.

• Document对象

  • 作用 : 解析HTML, 将网页的内容当做对象来处理. 获取到HTML标签或标签的内容, 然后修改

  • 网页中所有内容都封装在document对象中

  • 使用方法

    • document.querySelector('选择器') : 获取匹配到的第一个元素
    • document.querySelectorAll('选择器') : 获取匹配到的所有元素

  • Document对象常用属性

    • innerHTML : 获取标签内容

    • //1. 点击 “改变标题内容” 按钮，需要将div中展示的标题内容替换为 “学员成绩表”
      document.querySelector('#b1').addEventListener('click', () => {
          document.querySelector('#tb1').innerHTML = '学员成绩表'
      })
      

    • style : 获取css样式

    • //2. 点击 “改变标题颜色” 按钮，需要将div中展示的标题内容以 红色 字体展示（字体保持原有大小, 提示: 操作style属性控制css样式）
      document.querySelector("#b2").addEventListener("click", () => {
          document.querySelector('#tb1').style = 'font-size: 30px; color: red';
      })
      

事件

• 语法

  • 标签对象.addEventListener('事件类型', 事件触发执行的函数);

• <script>
      //click: 鼠标点击事件
      document.querySelector('#b2').addEventListener('click', () => {
      console.log("我被点击了...");
      })
  
      //blur: 失去焦点事件
      document.querySelector('#age').addEventListener('blur', () => {
          console.log("失去焦点...");
      })
  
      //input: 用户输入时触发
      document.querySelector('#age').addEventListener('input', () => {
          console.log("用户输入时触发...");
      })
  
      //submit: 提交表单事件
      document.querySelector('form').addEventListener('submit', () => {
          alert("表单被提交了...");
      })
  </script>
  

模块化

1. 将HTML文件中

   • <!-- type="module" : 模块化 -->
     <script type="module" src="./check.js">
         //这里面的代码抽取到了check.js 文件中
     </script>
     

2. 将项目中需要重复使用的方法抽取到一个 checkFn.js 文件中 , 然后设置该方法导出 (方法头前添加关键字 export)

   • export function checkPhone() {
         let phoneRegex = /^1[3-9]\d{9}$/;
         let phoneValue = phone.value;
         if (!phoneRegex.test(phoneValue)) {
             document.querySelector('#phone_msg').innerHTML = '错误!'
             return false;
         } else {
             document.querySelector('#phone_msg').innerHTML = ''
             return true;
         }
     }
     

3. 将 checkFn.js 引入到 check.js

   • import {
         checkName as checkUserName, //需要引入的方法名, as 为取别名
         checkPhone
     } from "./checkFn.js";