javascript基础学习 ——第三节 : 变量

文章目录

  • 变量
    • 1. 学习目标
    • 2.变量的概述
    • 3. 变量的含义
    • 4. 变量的基本使用
        • 4.1 变量的声明方式
        • 4.2 变量的赋值
        • 4.3 变量的初始化
        • 4.4 更新变量:
        • 4.5 声明多个变量:
        • 4.6 声明变量的特殊情况
          • 4.6.1 只声明不赋值
          • 4.6.2 不声明不赋值
          • 4.6.3 不声明直接赋值使用
        • 4.7 总结
        • 4.8 变量的使用
          • 案例1:
          • 案例2
    • 5.变量命名规范
      • 5.1规则:
      • 5.2 规范:
      • 5.3笔记
    • 6. 练习题(交换两个变量的值)

变量

1. 学习目标

能够说出变量的主要作用
能够写出变量的初始化
能够说出变量的命名规范
能够画出变量
是如何在内存中存储的
能够写出交换变量案例

2.变量的概述

目标:理解变量是计算机存储数据的“容器”

2.1.导语

用户输入的数据我们如何存储起来?
javascript基础学习 ——第三节 : 变量_第1张图片

  • 答案:变量

3. 变量的含义

变量:用大白话来说,变量就是一个装东西的盒子。通俗一点就是,变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。
javascript基础学习 ——第三节 : 变量_第2张图片
注意:变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

4. 变量的基本使用

4.1 变量的声明方式

声明(定义)变量有两部分构成:声明关键字、变量名(标识)

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值title>
head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
    // let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
    // age 即变量的名称,也叫标识符
    let age;
  script>
body>
html>

关键字是 JavaScript 中内置的一些英文词汇(单词或缩写),它们代表某些特定的含义,如 let 的含义是声明变量的,看到 let 后就可想到这行代码的意思是在声明变量,如 let age;

letvar 都是 JavaScript 中的声明变量的关键字,推荐使用 let 声明变量!!!

4.2 变量的赋值

javascript基础学习 ——第三节 : 变量_第3张图片

  • 声明(定义)变量相当于创造了一个空的“容器”,通过赋值向这个容器中添加数据。
  • 定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=”,然后是数值。
  • 注意:是通过变量名来获得变量里面的数据
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值title>
head>
<body>
  
  <script> 
    // 声明(定义)变量有两部分构成:声明关键字、变量名(标识)
    // let 即关键字,所谓关键字是系统提供的专门用来声明(定义)变量的词语
    // age 即变量的名称,也叫标识符
    let age;
    // 赋值,将 18 这个数据存入了 age 这个“容器”中
    age = 18;
    // 这样 age 的值就成了 18
    document.write(age);
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!';
    alert(str);
  script>
body>
html>

4.3 变量的初始化

也可以声明变量的时候同时给变量初始化。
在这里插入图片描述

4.4 更新变量:

变量赋值后,还可以通过简单地给它一个不同的值来更新它。
javascript基础学习 ——第三节 : 变量_第4张图片
javascript基础学习 ——第三节 : 变量_第5张图片
注意: let 不允许多次声明一个变量。

4.5 声明多个变量:

  • 变量赋值后,还可以通过简单地给它一个不同的值来更新它。
  • 同时声明多个变量时,只需要写一个var,多个变量名之间使用 英文逗号 隔开。

在这里插入图片描述

4.6 声明变量的特殊情况

javascript基础学习 ——第三节 : 变量_第6张图片

4.6.1 只声明不赋值
  • 结果是?
  • 程序也不知道里面存的是啥,所以结果是undefined 未定义的
var sex;
console.log(sex);
4.6.2 不声明不赋值

直接使用某个变量会报错滴

console.log(tel);
4.6.3 不声明直接赋值使用
qq = 110;
console.log(qq);

4.7 总结

javascript基础学习 ——第三节 : 变量_第7张图片

4.8 变量的使用

案例1:

有个叫卡卡西的人在旅店登记的时候前台让他填一张表,这张表里的内容要存到电脑上,表中的内容有:姓名、年龄.邮箱、家庭住址和工资,存储之后需要把这些信息显示出来,所显示的内容如下:
我叫旗木卡卡西,我住在火影村,我今年30岁了,我的邮箱是kakaxi@itcast.cn,我的工资2000。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        var name='小明';
        var address='北京';
        var age=30;
        var email='xiaoming@dfdv.cn';
        var gz=2000;
        console.log(name);
        console.log(address);
        console.log(age);
        console.log(email);
        console.log(gz);
    script>
head>
<body>
    
body>
html>
案例2

1.弹出一个输入框,提示用户输入姓名。
2.弹出一个对话框,输出用户刚才输入的姓名。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
        // 1.用户输入姓名存储到一个myname的变量里面
       var myname=prompt('请输入您的名字');

       // 2.输出这个用户名
       alert(myname);
    script>
head>
<body>
    
body>
html>

5.变量命名规范

规则:必须遵守,不遵守报错
规范:建议,不遵守不会报错,但不符合业内通识

5.1规则:

  • 不能用关键字
    – 关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等
  • 只能用下划线、字母、数字、$组成,且数字不能开头
  • 字母严格区分大小写,如 Age 和 age 是不同的变量

5.2 规范:

  • 起名要有意义
  • 遵守小驼峰命名法:第一个单词首字母小写,后面每个单词首字母大写。例:userName

5.3笔记

  • 由字母(A-Za-z)、数字(O-9)、下划线(_)、美元符号($ )组成,如: usrAge, num01,_name

  • 严格区分大小写。var app;和var App;是两个变量

  • 不能以数字开头。18age是错误的

  • 不能是关键字、保留字。例如: var、for、while

  • 变量名必须有意义。MMD BBD nl → age

  • 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName

  • 推荐翻译网站:有道爱词霸

javascript基础学习 ——第三节 : 变量_第8张图片

6. 练习题(交换两个变量的值)

要求:交换两个变量的值(实现思路:使用一个临时变量用来做中间存储)
解析:我们以苹果为例,进行交换苹果。javascript基础学习 ——第三节 : 变量_第9张图片

  • js 是编程语言有很强的逻辑性在里面:实现这个要求的思路先怎么做后怎么做
  • 1.我们需要一个临时变量帮我们
  • 2.把apple1 给我们的临时变量temp
  • 3.把apple2里面的苹果给apple1
  • 4.把临时变量里面的值给apple2
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script>
      var temp;
      var apple1='青苹果';
      var apple1='红苹果';
      temp =apple1;
      apple1=apple2;
      apple2=temp;
      console.log(apple1);
      console.log(apple2);

    script>
head>
<body>
    
body>
html>

你可能感兴趣的