JavaScript

JavaScript

作用: 负责给页面添加动态效果.
语言特点:
属于弱类型语言:
java: String name = “tom”; int age=18; name=30; 报错
javascript: let name=“tom”; let age=18; name=30; 不会报错
属于脚本语言,不需要编译直接解析执行.
基于面向对象
安全性强: JS语言只能访问浏览器内部的数据,浏览器以外的程序或磁盘中的数据禁止访问.
交互性强: 因为JS语言是嵌入在html页面中的语言, 随着页面一起传递到客户端,运行在客户端的语言,离用户更近一些,java语言是运行在服务器的语言, 所以JS语言交互性更强

如何在html语言中添加js语言

• 内联: 在标签的事件属性中添加js代码, 当事件触发时执行 .
  • 事件: 系统给提供的特定时间点.
  • 点击事件: 在用户点击元素时触发的时间点

    <!--onclick点击事件 alert() 弹出提示框-->
    <input type="button" value="按钮" onclick="alert('内联成功!')">

• 内部:在html页面中任意位置添加script标签,在标签体内写JS代码

    <script>
    console.log("内部引入成功!")
    </script>

• 外部:在单独的js文件中写js代码, 在html 页面中通过script标签的src属性引入

  <!--外部引入  不能在标签体内写js代码-->
    <script scr="my.js"></script>

变量、数据类型、运算符、各种语句、方法、面向对象

变量:

• JavaScript属于弱类型语言
  • java: String name = “tom”; int age=18; name=30; 报错
  • javascript: let name=“tom”; let age=18; name=30; 不会报错
• let和var关键字的区别
  • 使用let声明的变量, 作用域和Java语言一样
  • 使用var声明的变量, 相当于声明的是一个全局变量
  • 举例:

   java:
      for(int i=0;i<10;i++){
      int y=i+1;
      }  
      int z = y-i;// 报错: i超出了作用域
      
JavaScript:
      for(let i=0;i<10;i++){
      let y=i+1;
     }
     let z = y-i; //不会报错,但是y和i 是访问不到的
     for(var i=0;i<10;i++){
     var y=i+1;
}
     var z = y-i; //y和i是可以访问的

数据类型

• javaSccript中只有引用类型(对象类型)
• 常见的对象类型
  • number: 数值类型, 相当于java中所有数值类型的总和
  • string: 字符串 , 可以用单引号或双引号修饰 ‘tom’ “tom”
  • boolean: 布尔值 , true/false
  • undefined: 未定义 ,当变量只声明不赋值时,变量的类型为未定义
  • 获取变量类型的方式: typeof 变量

运算符

• 算术运算符: ±*/%, JS除法会自动根据结果转换整数还是小数
  • java: int x=5; int y = 2; x/y = 2;
  • js: let x = 5; let y = 2; x/y = 2.5;
• 关系运算符: > < >= <= != = = 和===
  • ==: 先统一等号两边的类型,再比较值 “666”==666 true
  • ===: 先比较类型,类型相同之后再比较值 “666”==666 false
• 逻辑运算符: && ,|| , !
• 三目运算符: 条件?值1:值2

各种语句

• if else
• while
• do while
• for
• switch case

方法

• Java: public 返回值类型 方法名(参数列表){方法体}
• JS: function 方法名(参数列表){方法体}
• 常见的四种方法:
  • 无参无返回值
  • 无参有返回值
  • 有参无返回值
  • 有参有返回值
• 声明方法的三种方式:
  1、function 方法名(参数列表){方法体}

 //1. 无参返回值
  function f1(){
      console.log("f1")
  }
  f1()//调用

  //2.有参数无返回值
  function f2(name,age){
      console.log(name+":"+age)
  }
  f2("张三",18)

  //3.无参有返回值
  function f3(){
      return "我是返回值";
  }
  let info=f3()
  console.log(info)

  //4.有参有返回值
  function f4(x,y){
      return x*y;
  }
  let result=f4(5,8)
  console.log(result)

2、let 方法名 = function(参数列表){方法体}

let f5=function (name,age){
      console.log(name+":"+age)
  }
  f5("小美",16)

3、let 方法名 = new Function(“参数1”,“参数2”,“方法体”);

let f6=new Function("name","age","console.log(name+':'+age)")
  f6("李四",34)

  let f7=new Function("name","age","console.log(name+':'+age)")
  f7("王二",66)

NaN

• Not a Nnmber : 不是数
• isNaN(变量) 判断变量是否是NaN , true代表是NaN , false代表不是NaN

JavaScript中的对象分类

• 内置对象: number, string, boolean等
• BOM: Browser Object Model 浏览器对象模型, 包含和浏览器相关的内容
• DOM: Document Object Model 文档对象模型, 文档指html标签, 包含和页面相关内容

BOM浏览器对象模型

• 包含和浏览器相关内容
• window对象: 该对象的属性和方法称为全局属性和全局方法, 访问时可以省略掉window.

Windows对象中常见的方法

• alert(“xxx”) 弹出提示框
• confirm(“xxxx”) 弹出确认框
• prompt(“xxx”) 弹出文本框
• parseInt() 将字符串或小数转成整数
• parseFloat() 将字符串转成整数或小数
• isNaN() 判断变量是否是NaN
• console.log() 浏览器控制台输出
• let timer = setInterval(方法,时间间隔) 定时器
• clearInterval(timer) 停止定时器
• setTimeout(方法,时间间隔) 只执行一次的定时器

<h1>0</h1>
<h2>0</h2>
<script>
    //开启定时器 每隔一秒 调用一次f方法
    setInterval(f,1000);
    let count=0;
    function f() {
        count++;
        let h=document.querySelector("h1");
        h.innerText=count;
    }

    //匿名方式开启定时器
    let x=0;
    let timer=setInterval(function (){

        x++;
        let h = document.querySelector("h2");
        h.innerText = x;
        if (x > 50) {
            //停止定时器
            clearInterval(timer)
        }
    },100)

    //开启只执行一次的定时器
    setInterval(function (){
        x=50;
    },3000)
</script>

Windows对象中常见的属性

• location 位置
  • location.href 获取或修改浏览器的请求地址
  • location.reload() 刷新页面
  • location.search 获取浏览器地址栏中的参数
• history 历史(指当前浏览器页卡的历史, 关闭后则清除)
  • history.length 历史页面数量
  • history.back() 返回上一页面
  • history.forward() 前往下一页面
  • history.go(n) n是正值前进 负值后退 0代表刷新

DOM文档对象模型

• 和页面相关内容
• 通过元素的id获取元素对象
  let 元素对象 = document.getElementById(“元素id”);
• 通过CSS中接触到的选择器获取元素对象
  let 元素对象 = document.querySelector(“选择器”);
• 获取和修改元素的文本内容
  元素对象.innerText; //获取
  元素对象.innerText=“xxx”; //修改
• 获取和修改表单中的控件的值
  控件.value //获取
  控件.value=“xxx” //修改
• 创建元素对象
  let 元素对象 = document.createElement(“标签名”);
• 添加元素对象
  document.body.appendChild(元素对象);
• 给元素的属性赋值
  元素对象.src = “…/b.jpg”;
  元素对象.属性=“值”;

JavaScript中自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义对象</title>
</head>
<body>
<table border="1">
  <caption>商品列表</caption>
  <tr>
    <th>商品名</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
</table>
<script>
    //定义一个空的Person对象
    function Person() {
    }

    //实例化一个Person对象
    let p1 = new Person();
    //动态添加属性
    p1.name = "张三";
    p1.age = 18;
    //动态添加方法
    p1.run = function () {
        console.log("我叫" + this.name + "今年" + this.age + "岁")
    }
    p1.run();

    //直接实例化
    let p2 = {};
    p2.name = "李白";
    p2.age = 20;
    p2.run = function () {
        console.log("大河之剑天上来")
    }
    p2.run();

    //实例化自带属性和方法的对象
    let p3 =
        {
            name: "刘备",
            age: 30,
            run: function () {
                alert(this.name + ":" + this.age)
            }
        }
    p3.run()

    //通过自定义对象封装数据
    let arr =
        [
            {name: "小米手机", price: "3000", count: 900},
            {name: "华为手机", price: "3000", count: 400},
            {name: "苹果手机", price: "3000", count: 600},
            {name: "魅族手机", price: "3000", count: 800},
        ]

    //把数组中商品信息展示到页面中
    //item表示arr中的所有信息
    for (let item of arr) {
        let tr = document.createElement("tr");
        let nameTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let countTd = document.createElement("td");
        nameTd.innerText=item.name;
        priceTd.innerText=item.price;
        countTd.innerText=item.count;
        tr.append(nameTd, priceTd, countTd);
        let table = document.querySelector("table")
        table.append(tr);
    }
</script>
</body>
</html>

前端MVC设计模式

• MVC设计模式:实际上就是把前端实现一个业务功能的代码划分为3部分

• Model : 模型 , 指数据模型 对应的是从服务器获取到数据的部分代码.

• View: 视图 , 指页面部分代码

• Controller: 控制器, 把数据模型的内容 展示到页面中的过程称为控制器部分

• 前端MVC设计模式的弊端: 需要在Controller部分 频繁进行DOM操作(遍历查找元素过程)会影响效率, 从而影响用户的体验度

VUE框架

• VUE框架是基于MVVM设计模式的前端框架.
• 工作原理: Vue框架中的Vue对象是MVVM设计模式中的VM视图模型, 此对象负责将页面中改变的元素和data里面的变量进行绑定, 初始化时,变量的值是什么页面就显示成什么, 并且Vue对象会一直监听着data里面变量值得改变, 当值发生改变时,会自动找到与其绑定的元素并且让元素跟着发生改变,改变元素的过程是不需要程序员参与的, 从而提高了开发效率, 由于这个过程不需要频繁的进行DOM操作(遍历查找元素) 从而提高了执行效率.

引入前端 三方框架的两种方式:

1、把框架文件下载到本地,复制到自己的工程中进行引入

<script src="vue.min.js"></script>//vue.min.js为本地文件
<script>

2、从CDN服务器直接引入到自己工程.

<!--引入网络版的Vue框架 Vue插件才会正常工作-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js">
</script>

Vue常用指令

• {{变量}} : 插值, 让此处的文本内容和变量进行绑定 ,不需要依赖某个标签存在

{{info}}
<h1>{{info}}</h1>

• v-text=“变量”: 让元素的文本内容和变量进行绑定, 需要依赖标签

 <!--v-text 让元素的文本内容和变量进行绑定,必须依赖某个标签-->
  <p v-text="info"></p>
  <script>
  new Vue({
    el:"div",
    data:{
      info:"文本测试"
    }
  })
</script>

• v-html=“变量”: 让元素的标签内容和变量进行绑定
• v-bind:属性名=“变量” , 让元素的某个属性的值和变量进行绑定 , 简写可以把v-bind去掉

<input type="text" v-bind:value="info">//可以去掉v-bind
<script>
    new Vue({
        el: "div",
        data: {
            info: "属性绑定"
            }
    })
</script>

• v-model=“变量”: 让控件的value属性和某个变量进行双向绑定, 双向绑定: 变量会影响页面显示的内容,页面元素的内容改变也会影响变量, 当需要从代码中获取控件的值时使用双向绑定

<input type="text" v-model="info">
  {{info}}
    <h1>注册表单</h1>
    <form action="">
        用户名:<input type="text" v-model="user.username"><br>
        密码:<input type="password" v-model="user.password"><br>
    </form>
</div>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js">
</script>
<script>
  let v=new Vue({
    el:"div",
    data:{
      info:"双向绑定",
        user:{
          username:"",
            password:""
        }
    }
  })

• v-on:事件名=“方法”, 绑定元素的事件, 方法需要声明在Vue对象里面的methods属性里面, 简写是@事件名=“方法”
  • @click 点击事件
  • @change 值改变事件
  • @blur 失去焦点事件

<input type="button" value="按钮2" v-on:click="f()">
<script>
  let v=new Vue({
    methods:{
      f:function (){
        console.log("按钮点击了!");
      }
    }
  })
</script>

• v-for="(变量,i) in 数组变量"; 让元素的显示数量和数组进行绑定, 同时遍历数组中的每一个对象,变量代表的是数组中的 每一个对象, i代表的是当前遍历的下标

<tr v-for="(car,i) in arr"><!--car是遍历数组自己定义的对象  i为编号,可有可无-->
        <td>{{i + 1}}</td>
        <td>{{car.name}}</td>
        <td>{{car.price}}</td>
        <td>{{car.type}}</td>
    </tr>
<script>
    let v = new Vue({
        el: "table",
        data: {
            arr: [
                {name: "五菱宏光", price: 88888, type: "神车"},
                {name: "特斯拉", price: 500000, type: "轿车"},
                {name: "兰博基尼", price: 2888888, type: "跑车"}
            ]
        }
    })
</script>

• v-if=“变量”, 元素的显示状态和变量进行绑定, true显示,false不显示(删除元素)，v-show 也是让元素的显示状态和变量进行绑定,true显示 false不显示(通过样式隐藏了元素)
• v-else和v-if指令结合使用, 显示状态和v-if的元素取反
• v-show=“变量”,元素的显示状态和变量进行绑定, true显示,false不显示(通过样式隐藏了元素), 需要元素需要频繁切换显示状态使用v-show的执行效率会高于v-if

<div>
  <!-- v-if="变量" 让元素是否显示和变量进行绑定,true显示 false不显示(直接删除了元素)-->
  <h1 v-if="isVisible">刘德华</h1>
  <!-- v-else 与 v-if结合使用,结果与上方相反-->
  <h1 v-else>张学友</h1>
  <hr>
  <!--v-show 也是让元素的显示状态和变量进行绑定,true显示 false不显示(通过样式隐藏了元素)-->
  <h2 v-show="isVisible">郭富城</h2>
</div>
<script>
  let v=new Vue({
    el:"div",
    data:{
      isVisible:true
    }
  })
</script>

idea中安装Vue插件

• File->Settings->Plugins 搜索Vue , 安装完之后重启idea

idea中添加自定义模板代码

• File->Editor->Live Templates

idea中安装element插件

• 先得到element.jar 文件
• File->Settings->Plugins->找到element.jar文件->点击右上角的齿轮按钮->Install Plugin from Disk , 最后重启idea即可

使用axios发送请求的常用方法

get用于获取数据

axios.get(url).then(function (response) {
    vue.product=response.data
})

delete用于删除数据

axios.delete(url).then(function (response) {
    vue.product=response.data
})

update用于修改数据

axios.update(url,{}).then(function (response) {
    vue.product=response.data
})

post用于发送数据

axios.post(url,{}).then(function (response) {
    vue.product=response.data
})