JavaScript_js value-CSDN博客

本文链接：https://blog.csdn.net/aiheshuicxy/article/details/128137038

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的值

数据类型

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文档对象模型

包含页面相关的内容

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

let 元素对象 = document.querySelector(“选择器”);
获取或修改元素的文本内容

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

元素对象.innerText 获取元素的文本内容
获取或修改控件的值 (控件:文本框,密码框,单选,多选,下拉选等)

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

控件对象.value 获取控件的值
创建元素对象的方法

let 变量 = document.createElement(“标签名”);
添加到某一个元素里面

元素对象.append(新元素)
获取页面中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>Title</title>
</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>

安装Vue插件-提示代码

File->Settings->Plugins

在这里插入图片描述

Vue相关指令

{{变量}}: 插值,

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

v-text=“变量”;

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

v-html=“变量”;

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--{{变量}}插值,让当前位置的文本内容和变量进行绑定-->
    {{info}}
    <p>{{info}}</p>
    <!--v-text="变量" 让元素的文本内容和变量进行绑定-->
    <p v-text="info"></p>
    <!--v-html="变量" 让元素的标签内容和变量进行绑定-->
    <p v-html="info"></p>
</div>
<!--从本地引入vue.js框架文件-->
<script src="js/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            info: "文本相关指令测试<b>加粗标签</b>"
        }
    })
</script>
</body>
</html>

v-bind:属性和变量绑定

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    {{msg}}
    <!--:属性名="变量" 让某个属性的值和变量进行绑定-->
    <input type="text" :value="msg">
    <!--属性绑定的复杂写法,如果没有安装vue插件会报错,
    在错误上面alt+回车进行修复-->
    <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>

v-model:双向绑定

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

v-on: 添加点击事件

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

猜数字练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>