web前端——js（变量，函数，对象，事件操作）

目录

变量

函数

js内建函数（内置）

对象

对象的基本使用

事件操作

---

javascript 被称之为披着面向对象的皮的【函数式】编程语言

变量

variable，变量就是一个容器，用来代表数据在程序内部执行的。  

声明变量的格式：
    关键字 变量名 = 值;
    关键字：
      var   表示当前声明的变量是一个全局变量
      let   表示当前声明的变量是一个局部变量
      const 表示当前声明的变量是一个不可改变值的常量
   

只需要在变量首次出现的时候，添加关键字即可。如果变量首次出现时，没有添加关键字，则当前变量会默认作为全局变量。

函数

函数声明格式有3种：
// 1. 普通函数
function 函数名(形参1,形参2,形参3,....){
    // 函数代表的代码段
}

// 2. 匿名函数
var 函数名 = function(形参1,形参2,形参3,....){
    // 函数代表的代码段
}

// 3. 箭头函数

[新版本的js里面出现的新型语法，是匿名函数的新写法]
var 函数名 = (形参1,形参2,形参3,....)=>{
    // 函数代表的代码段
}

例：//var add = (x,y)=>{
        //     console.log(x+y)
        // }

js内建函数（内置）

parseInt()    把数据转换成数值类型中的整数
parseFloat()  把数据转换成数值类型的浮点数
alert()   弹出一个警告框
isNaN()   判断一个数据是否是NaN

confirm()       弹出一个确认框
prompt()        弹出一个输入确认框

setInterval(func, ms)   定时器[多次]，定时执行指定代码段
clearInterval()         删除指定的定时器
setTimeout(func, ms)    定时器[一次]，定时执行指定代码段
clearTimeout()          删除指定的定时器
eval()          内置语法解析器，把字符串当成代码进行执行
decodeURI()     对url地址中的中文进行解码处理
encodeURI()     对url地址中的中文进行编码处理
close()         关闭浏览器窗口
open()          新建一个浏览器窗口
atob()          使用base64编码对数据进行解码处理
btoa()          使用base64编码对数据进行编码处理

对象

 声明构造函数， 通过构造函数来创建对象

在构造函数中同时写入对象的属性和方法

    #构造函数
    function humen(name="匿名对象",age=0){
        this.name = name;
        this.age = age;
        this.say = function(){
            console.log("代码")
        }
    }
    #调用函数生成对象
    var xiaoming = new humen("小明，18");
    
    #查看属性和调用对象方法
    console.log(xiaoming);
    xiaoming.say();

对象的基本使用

  // 给对象追加属性,修改属性值
    xiaoming.name = "小明";

    // 给对象追加方法
    xiaoming.say = function(){
        console.log(`我叫${this.name},我今年${this.age}岁!`);
    }

    console.log(xiaoming);

    // 访问对象的属性
    console.log(xiaoming.name);
    // 访问对象的方法
    xiaoming.say();

事件操作

event, 所谓的事件,其实就是用户与浏览器之间的一次交互过程.
js中提供了大量的事件操作给开发者, 在用户发生事件操作以后,进行反馈,响应.通过自定义代码实现，实践操作主要为被动响应
事件的操作都是一样的,只是里面的代码因为事件的不同,而执行的时间不同.

鼠标事件
    click     点击事件
    mouseover 鼠标滑过

    dblclick  双击事件
    mouseout  鼠标离开
    mouseup   鼠标松开
    mousedown 鼠标按下

表单事件
    blur   失去焦点
    focus  获取焦点
    change 值改变
    select 在文本框中选择文本时
    submit 表单提交
窗口事件
    onload   页面加载完成以后自动触发当前事件

键盘事件
    keydown  键盘按下
    keyup    键盘松开
    onkeypress 按下并松开
    
在js中使用事件时,有两种事件操作的写法，@事件名 和 v-on:事件名
例如:给一个元素绑定点击事件则是 onclick...，@事件是vue框架的事件使用方法

#声明变量    
    let hide = document.querySelector("#hide");  
    let show = document.querySelector("#show");
    let box = document.querySelector(".box");

#对变量绑定事件，并自定义响应函数    
    hide.onclick = function(){
         box.style.display = "none";
    }
     show.onclick =function(){
        box.style.display = "block"
    }
    let timer = null;
    hide.onclick = function(){
        let opacity = parseFloat(getComputedStyle(box)