JavaScript

JavaScript

• 作用: 给页面添加动态效果

• 语言特点:

  • 属于脚本语言,不需要编译,直接由浏览器解析执行
  • 属于弱类型语言
  • 基于面向对象的语言
  • 安全性强: JS语言只允许访问浏览器内部的数据,浏览器以外的数据禁止访问.
  • 交互性强: 因为JS语言是嵌入到HTML页面中 直接和用户面对面进行交互.

• 编程语言包括: 变量,数据类型,运算符,各种语句,方法,面向对象

变量

• JS语言属于弱类型语言, 声明变量的时候不需要指定类型

• 通过let或var关键字声明变量

  • let声明的变量作用域和java语言类型

  • var声明的变量 作用域相当于java中的全局变量,可以在页面中任何地方调用

  • 举例:

    • java:
      
      for(int i=0;i<10;i++){
      	int j=i+1;
      }
      int x = i+j;   //i和j都超出了作用域 编译报错 
      JavaScript:
      
      for(let i=0;i<10;i++){
      	let j=i+1;	    
      }
      let x = i+j;  //不报错 但是访问不到i和j 因为超出了作用域
      
      for(var i=0;i<10;i++){
      	var j=i+1;	    
      }
      var x = i+j;   //不报错 并且可以访问i和j的值 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17

数据类型

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

运算符

• 算术运算符: + - * / %
  • JS 除法运算会自动根据结果转成整数或小数
    • java: int x =5 ; int y =2; int z = x/y; z=2
    • JS ; let x = 5; let y = 2; let z = x/y; z=2.5 x=6 z=3
• 关系运算符: > < >= <= != 和==, “===”
  • ==: 先统一等号两边变量的类型 再比较值, “666”==666 true
  • ===: 先比较类型, 类型相同之后再比较值, “666”===666 false
• 逻辑运算符: && || ! 只支持短路与和短路或
• 赋值运算符: = += -= *= /= %=
• 三目运算符: 条件?值1:值2

各种语句

• if else
• for
• while
• switch case

如何在html页面中添加JS代码

• 和CSS一样有三种引入方式:
  • 内联: 在标签的事件属性中添加js代码, 当事件触发时执行
    • 事件: 系统给提供的一系列时间点
    • 点击事件: 当用户点击某个元素时触发的时间点
  • 内部: 在html页面中的任意位置添加script标签,在标签体内写js代码
  • 外部: 在单独的JS文件中写JS代码, 在html页面中通过script标签引入并执行

方法

• Java: public 返回值类型 方法名(参数列表){方法体}

• JS: function 方法名(参数列表){方法体}

• 常见的四种方法:

  • 无参无返回值
  • 有参无返回值
  • 无参有返回值
  • 有参有返回值

• JS中三种定义方法的方式:

  • function 方法名(参数列表){方法体}
  • let 方法名 = function(参数列表){方法体}
  • let 方法名 = new Function(“参数1”,“参数2”…,“方法体”);

NaN

• Not a Number: 不是一个数 , NaN和任何数值进行任何运算得到的结果都是NaN
• JavaScript中进行减乘除运算时会自动将变量转成数值类型,如果不是数值则会转成NaN
• isNaN(变量) 判断变量是否是NaN 返回值为布尔值 true代表是NaN false不是NaN

和页面相关的方法

• 通过选择器查找页面中的元素对象

  let 元素对象 = document.querySelector(“选择器”);

• 获取或修改元素的文本内容

  元素对象.innerText = “xxx”; 修改元素的文本内容

  元素对象.innerText 获取元素的文本内容

• 获取或修改控件的值 (控件:文本框,密码框,单选,多选,下拉选等)

  控件对象.value=“xxxx”; 修改控件的值

  控件对象.value 获取控件的值

JavaScript中对象分类

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

BOM浏览器对象模型

• window对象: 该对象中的属性和方法称为全局属性和全局方法, 访问的时候可以省略掉window.

• window对象中常见方法:

  • isNaN() 判断变量是否是NaN
  • parseInt() 将字符串或小数转成整数 “28.5”->28 28.5->28
  • parseFloat() 将字符串转成整数或小数 “25”->25 “25.8”->25.8
  • alert(“xxx”) 弹出提示框
  • confirm(“xxx”) 弹出确认框
  • prompt(“xxx”) 弹出文本框
  • let timer = setInterval(方法,时间间隔) 开启定时器
  • clearInterval(timer); 停止定时器
  • setTimeout(方法,时间间隔); 开启只执行一次的定时器

• window对象中常用的属性

  • location 位置
    • location.href 获取或修改浏览器的请求地址
    • location.reload(); 浏览器重新加载(刷新)
  • history 历史
    • history.length 得到历史页面数量
    • history.back(); 返回上一页面
    • history.forward(); 前往下一页面

DOM文档对象模型

• 包含页面相关的内容

1. 通过选择器查找页面中的元素对象

   let 元素对象 = document.querySelector(“选择器”);

2. 获取或修改元素的文本内容

   元素对象.innerText = “xxx”; 修改元素的文本内容

   元素对象.innerText 获取元素的文本内容

3. 获取或修改控件的值 (控件:文本框,密码框,单选,多选,下拉选等)

   控件对象.value=“xxxx”; 修改控件的值

   控件对象.value 获取控件的值

4. 创建元素对象的方法

   let 变量 = document.createElement(“标签名”);

5. 添加到某一个元素里面

   元素对象.append(新元素)

6. 获取页面中body的方式

   document.body

前端M,V,C设计模式

• MVC设计模式是将实现一个前端业务功能的所有代码划分为三部分

• Model: 模型, 指数据模型, 对应的代码是和数据相关的代码

• View: 视图, 指页面相关代码, 对应的是页面中标签相关的代码

• Controller:控制器, 把Model显示到View中的过程代码称为控制器

• 前端MVC设计模式中, 在Controller部分将数据显示到页面中,需要频繁的进行DOM相关操作(查找元素/创建元素等), 浪费资源, 前端的MVVM设计模式可以解决此问题

前端M,V,VM设计模式

• MVVM设计模式是将实现一个前端业务功能的所有代码划分为三部分
• Model: 模型, 指数据模型, 对应的代码是和数据相关的代码
• View: 视图, 指页面相关代码, 对应的是页面中标签相关的代码
• VM:ViewModel视图模型, 赋值将页面中可能发生改变的元素和某一个变量在内存中进行绑定,并且会不断地监听变量值的改变, 当变量的值发生改变时,可以直接从内存中的对应关系里面找到对应的页面元素, 这样就不用每次遍历查找元素了

VUE

• VUE是目前最流行的前端框架, 基于MVVM设计模式

• VUE框架两种用法:

  • 多页面应用, 在html页面中引入vue.js框架文件
  • 单页面应用,通过脚手架的方式使用VUE框架

• 如何引入vue.js框架文件?

  • 两种方式:

    • 从CDN服务器引入框架文件

      准备框架的网址:

      • Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

      • unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js

      • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

      

    • 把框架文件下载到本地后再引入

      

测试Vue是否成功

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
  <h1>{{info}}h1>
div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script>
  /*Vue对象相当于是MVVM设计模式中的VM视图模型
  * 该对象负责将页面中的元素和某个变量进行绑定,并且Vue会在内存中不断监听着
  * 变量值的改变,当变量值发生改变时Vue框架会自动找到页面中的元素
  * 让其跟着发生改变*/
let v = new Vue({
  el:"body>div",  //element元素, 写一个选择器用来设置Vue框架的管理范围
  data:{ //data里面定义和页面相关的变量,定义完之后Vue会对变量进行监听
    info:"Hello Vue!"
  }
})
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

安装Vue插件-提示代码

File->Settings->Plugins

Vue相关指令

{{变量}}: 插值,

让当前位置的文本内容和变量进行绑定

v-text=“变量”;

让元素的文本内容和变量进行绑定

v-html=“变量”;

让元素的标签内容和变量进行绑定

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    {变量}}插值,让当前位置的文本内容和变量进行绑定-->
    {{info}}
    <p>{{info}}p>
    
    <p v-text="info">p>
    
    <p v-html="info">p>
div>

<script src="js/vue.min.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            info: "文本相关指令测试加粗标签"
        }
    })
script>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

v-bind:属性和变量绑定

v-bind: 属性名=“变量”; :属性名=“变量”; 让元素的某个属性的值和变量进行绑定

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    {{msg}}
    
    <input type="text" :value="msg">
    
    <input type="text" v-bind:value="msg">
    <a :href="url">超链接a>
    <img :src="imgUrl" alt="">
div>
<script src="js/vue.min.js">script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            msg: "属性绑定测试",
            url:"http://www.baidu.com",
            imgUrl:"a.jpg"
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

v-model:双向绑定

v-model=“变量”; 让控件的值和变量进行双向绑定,
双向绑定: 控件的值和变量进行绑定, 变量发生改变时控件的值跟着变, 同时控件的值发生改变时变量也会跟这变

v-on: 添加点击事件

v-on:事件名=“方法”; 简写: @事件名=“方法”; 让元素的某个事件和Vue中的方法进行绑定

猜数字练习

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    <input type="text" v-model="num" placeholder="请输入1-100之间的整数">
    <input type="button" value="猜一猜" @click="f()">
    <h1>{{result}}h1>
div>
<script src="js/vue.min.js">script>
<script>
    //得到1-100之间的随机整数
    let x = parseInt(Math.random()*100)+1;

    let v = new Vue({
        el: "body>div",
        data: {
            result: "",
            num: ""
        },
        methods: {
            f() {
                if (v.num>x){
                    v.result="猜大了!";
                }else if(v.num<x){
                    v.result="猜小了!";
                }else{
                    v.result="恭喜你猜对了!";
                }
            }
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

v-for=“变量 in 数组”; 循环遍历指令,

遍历的同时生成当前元素, 用法类似于Java的新循环

v-if=“变量” ; 让元素是否显示和变量进行绑定, true显示, false不显示(删除元素)

v-else 让元素的显示状态和上面v-if的状态取反

v-show=“变量”;让元素是否显示和变量进行绑定, true显示, false不显示(隐藏元素)

ElementUI框架

官网地址: element.eleme.cn或者输入https://element.eleme.cn/#/zh-CN