JaveScript变量的简介及其变量的简单使用(JS知识点归纳一)

变量简介

“变量是一个容器”

为什么要有变量?

  程序的执行过程中,会使用到许多的数据(用户输入的内容,动态效果的运动数据等),当这些数据需要重复在多个地方使用的时候,就需要一个容器存储。

  例如,当你想要去喝饮水机的水的时候,就需要一个杯子。这样子饮水机的水和杯子里面的水就是一样的水。

  对于水来说,杯子就是容器,如果将水比喻为数据的话,那么变量就是数据的容器。

  所以,变量的作用,就是让某些数据可以在多个地方进行访问。

变量的使用

“要先确保有一个杯子,才可以去使用他”

  1.变量的声明

    一个变量在使用之前,必须先进行声明操作。

  2.JS的语言特性

    -->   弱类型

    -->   动态类型

    -->   基于对象的客户端脚本语言

  名词解释:

    1>  JS是弱类型语言:意味着变量中可以保存的数据的类型是不限制的(杯子里面是任何的液体),并且允许变量类型的隐式转换操作。

    2>  JS是动态类型语言:动态指的是变量的类型是在JS解析器运行时确定变量类型,简单来说,就是运动代码时,变量当前保存的是什么样子的类型,那么变量就是什么类型的。

    3>  JS是基于对象的语言:意味着JS原生语法不支持面向对象(但是可以通过操作实现面向对象)。

    4>  脚本语言:脚本语言也称之为是解释性语言,意味着代码在执行前不需要进行单独的编译操作,直接通过解析器运行就可以。

  3.命名规范

    1>>   变量名可以是由 ¥  —   英文字母  数字  组成的。但是开头不能是数字。

    2>>   严格区分大小写

    3>>   不能包含空格和特殊的字符。

    4>>   不能使用JS关键字和保留字

    5>>   两个推荐

      1.有意义的命名方式--根据具体保存的数据含义进行设置变量名

      2.变量名使用多个单词组合时,使用驼峰命名法(CamelCase)

  4.语法

    单个变量的声明方式

var num;

 

    多个变量的声明方式

var num, str;

    当声明多个变量的时候,推荐使用多个变量的命名方式。

  5.赋值

    第一步: 先声明一个变量

var num;

    第二步:使用 = 操作,对一个变量进行赋值(让变量 保存一个值)

num = 100

    声明多个变量的赋值操作

var num = 100 , str = “abc”;

  6.初始化操作

    实际上就是将变量的声明和赋值同时设置

    当我们在声明变量的时候就已经确定要保存的值,就可以使用变量的初始化

var num = 100

  7.赋值与初始化的区别

     在程序执行的时候,赋值操作具有返回值,返回值为当前的赋值;

var num;
num = 100//返回值是100

 

    在程序执行的时候,初始化操作是没有返回值的。

  8. 变量未声明与声明未赋值

    -->  变量为未声明时候会出现  (ReferenceError)引用错误

    当程序出现报错之后,会停止后续代码的执行,所以一定要进行声明,再使用

    -->  使用typeof可以防止报错的产生

      typeof操作符用于数据类型检测,当使用typeof检测一个未声明的变量类型的时候会得到“undefined”,不会出现报错。

    -->  变量声明未赋值

      变量声明未赋值,得到的结果是”undefined“

  

 

资源下载链接为: https://pan.quark.cn/s/d9ef5828b597 在本文中,我们将探讨如何通过 Vue.js 实现个带有动画效果的“回到顶部”功能。Vue.js款用于构建用户界面的流行 JavaScript 框架,其组件化和响应式设计让实现这种交互功能变得十分便捷。 首先,我们来分析 HTML 代码。在这个示例中,存在个 ID 为 back-to-top 的 div 元素,其中包含两个 span 标签,分别显示“回到”和“顶部”文字。该 div 元素绑定了 Vue.js 的 @click 事件处理器 backToTop,用于处理点击事件,同时还绑定了 v-show 指令来控制按钮的显示与隐藏。v-cloak 指令的作用是在 Vue 实例渲染完成之前隐藏该元素,避免出现闪烁现象。 CSS 部分(backTop.css)主要负责样式设计。它首先清除了些默认的边距和填充,对 html 和 body 进行了全屏布局,并设置了相对定位。.back-to-top 类则定义了“回到顶部”按钮的样式,包括其位置、圆角、阴影、填充以及悬停时背景颜色的变化。此外,与 v-cloak 相关的 CSS 确保在 Vue 实例加载过程中隐藏该元素。每个 .page 类代表个页面,每个页面的高度设置为 400px,用于模拟多页面的滚动效果。 接下来是 JavaScript 部分(backTop.js)。在这里,我们创建了个 Vue 实例。实例的 el 属性指定 Vue 将挂载到的 DOM 元素(#back-to-top)。data 对象中包含三个属性:backTopShow 用于控制按钮的显示状态;backTopAllow 用于防止用户快速连续点击;backSeconds 定义了回到顶部所需的时间;showPx 则规定了滚动多少像素后显示“回到顶部”按钮。 在 V
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值