JavaScript 基础--变量、数据类型


theme: cyanosis
highlight: a11y-light

JavaScript 基础–变量、数据类型

  1. JavaScript (是什么?)
    是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。

  2. 作用(做什么?)
    网页特效 (监听用户的一些行为让网页作出对应的反馈)
    表单验证 (针对表单数据的合法性进行判断)
    数据交互 (获取后台的数据, 渲染到前端)
    服务端编程 (node.js)

  3. JavaScript的组成(有什么?)
    ECMAScript:
    规定了js基础语法核心知识。
    比如:变量、分支语句、循环语句、对象等等
    Web APIs :
    DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作
    BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
    注意 DOM属于BOM

JavaScript 基础--变量、数据类型_第1张图片

JavaScript 书写位置

  1. 内部 JavaScript

    直接写在html文件里,用script标签包住

    规范:script标签写在上面

    注意事项:我们将

代码写在以.js结尾的文件里

语法:通过script标签,引入到html页面中。

JavaScript 基础--变量、数据类型_第2张图片

  1. 内联 JavaScript

    代码写在标签内部

    语法:

    注意: 此处作为了解即可,我们并不推荐,但是后面vue中会看到这种使用模式

JavaScript 基础--变量、数据类型_第3张图片

JavaScript 注释

​ 注释是编写程序时,写程序的人给一个语句、程序段、函数等的解释或提示,能提高程序代码的可读性。注释只是为了提高可读性,不会被计算机编译

单行注释
符号://
作用://右边这一行的代码会被忽略
快捷键:ctrl + /

块注释
符号:/* /
作用:在/
和 */ 之间的所有内容都会被忽略

JavaScript 基础--变量、数据类型_第4张图片

JavaScript 结束符

结束符
代表语句结束
英文分号 ;
可写可不写(现在不写结束符的程序员越来越多)
换行符(回车)会被识别成结束符 ,所以一个完整的语句,不要手动换行
因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符
但为了风格统一,要写结束符就每句都写,要么每句都不写(按照团队要求.)

JavaScript 基础--变量、数据类型_第5张图片

JavaScript 输入输出语法

输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。
常见的几种输出语法:

32a85028f8e90dda594cb3a3dbb5aee.png

向body内输出内容
如果输出的内容写的是标签,也会被解析成网页元素

722eb9fb01abb2ccc4605355c97e21c.png

页面弹出警告对话框

01f22b7eab7da48448abeb9034e6715.png

控制台输出语法,程序员调试使用

JavaScript 输入输出语法

输入和输出 输入:prompt prompt(“请输入收货地址”);

输出:三种方式

  1. console.log(); 在浏览器控制台中输出
  • 不会影响页面效果
  • 不会阻止浏览器执行
  1. document.write(); 在页面中输出
  • 会影响页面效果
  1. alert(); 在页面上弹出
  • 会阻止浏览器执行,一般慎用

变量的概念

用来装数据的容器

变量:
1.白话:变量就是一个装东西的盒子。
2.通俗:变量是计算机中用来存储数据的“容器”,它可以让计算机变得有记忆。

变量的基本使用

1创建变量

  • let user=(’ 内容’)
  • let user;//undefined 为给变量赋值 所以未undefined类型

2 给变量赋值

  • 要想使用变量,首先需要创建变量(专业说法: 声明变量)

    age=18

  • 定义了一个变量后,你就能够初始化它(赋值)。在变量名之后跟上一个“=”,然后是数值。

JavaScript 基础--变量、数据类型_第6张图片

*** 如果变量没有赋值 默认值为 undefined

变量的使用规范和规则

  • 不能使用以下关键字充当变量名字
  1. let let=(“111”)
  2. let for =(”414“)
  3. if(此为循环语句,不可作为变量的命名名称)
  4. switch((此为循环语句,不可作为变量的命名名称))
  • 不能使用数字开头
  • 3可以使用英文 下划线 $
  • 尽量使用有语义的名称
  • 使用小驼峰命名规则 userName 首字母小写
  1. 大驼峰命名规则 首字母大写UserName

掌握变量的声明方式

  1. 更新变量:

变量赋值后,还可以通过简单地给它一个不同的值来更新它。

通俗来说:所谓更新变量就是为变量重新赋值 代码如下:

<script>
        let age="23";
        document.write("我的年龄是",age) 
    
         age="24"
         document.write("我的年龄是",age)
    script>

注意:在let声明变量中不能重复定义,一个结构中不能使用let声明同名变量

例如:

JavaScript 基础--变量、数据类型_第7张图片

  • 如何同时声明多个变量且赋值

  • let name= '张三' ,age=20
    console.log(name,age)
    

案例1:

JavaScript 基础--变量、数据类型_第8张图片

<body>
    <script>
        // 实际变量的意义就是存储数据的

        // 首先需要定义变量去接收用户输入的姓名
        // 然后需要用prompt 去接收这个姓名 ,最后再输出这个数据
        let userName=prompt("请输入您的姓名:")
        document.write(userName)
    script>
body>

案例2:

JavaScript 基础--变量、数据类型_第9张图片

<body>
    <script>
        // 先创建一个新的变量 然后将num1的值 赋值到tt上 这时候tt就等于10了 
        // 此时再把num2的值赋值给num1  这时候 num1就等与20了 
        // 最后把tt的数值 赋值给num2  最终再输出num1和num2  顺序就调换guoll
        let num1="10",num2=20 ,tt;
        tt=num1;num1=num2 ;
        num2=tt;
        document.write(num1 ,num2)
    script>
body>

数据类型

计算机世界中的万事万物都是数据

给数据分类 是为了 1: 更加充分和高效的利用内存

​ 2:也更加方便程序员的使用数据

  • JS数据类型分为两大类:
  1. 基本数据类型

​ : number 数字型

​ :string 字符串型

​ :boolean 布尔型

​ :undefined 未定义型

​ :null 空类型

  • 数字类型(number) :JavaScript 中的正数,负数,小数 统一称为数字类型
  • 字符串型(string) :通过单引号(’ ') 双引号(" ") 或者反引号(`)包裹数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。 注意事项:1:无论单引号或是双引号必须成对使用

JavaScript 基础--变量、数据类型_第10张图片
​ 2:单引号、双引号都可以互相嵌套,但是不可以包裹自己(口诀:外单内双或者是内双外单)

​ 3:必须使用时可以使用转义符 \ 输出单引号或双引号

JavaScript 基础--变量、数据类型_第11张图片

  • boolean 布尔型 :在计算机中,表示真假值用:true、false 以后一般作为条件

  • undefined 未定义型 表示没有赋值 一般情况下 只声明变量不赋值的情况下,变量的值默认为undefined,一般很少用

JavaScript 基础--变量、数据类型_第12张图片

  • null 空类型 表示赋值了 ,但是内容为空

JavaScript 基础--变量、数据类型_第13张图片

代码示例如下

<body>
    <script>
        let age=10     // 数字类型
        let name='小怪兽'  //带引号的是字符串
        let boy='true'   //注意此 也为字符串 

        let girl=false    //boolean:trus/fales   此为布尔型

        let iphone  //一个变量没有给它赋值的话 ,那它默认就是 undefined型

        let apple=null  //主动赋值为null 

        
    script>
body>

2.字符串的拼接

模板字符串

作用:拼接字符串和变量

JavaScript 基础--变量、数据类型_第14张图片

<body>
    <script>
        let userName=prompt('请输入您的姓名')
        let age=prompt('请输入您的年龄')
        
        document.write(`我的姓名是:${userName},我的年龄是:${age}`);
        
    script>
body>

3.控制台输出语句检测数据类型

通过 typeof 关键字检测数据类型

代码示例如下:

<body>
    <script>
        let userName='小怪兽' //字符串
        let age=99             //number
        let boy=true            //布尔类型
        let girl                //undefined
        let goodboy=null        //object

        //typeof 检测当前数据的类型
        console.log(typeof userName)
        console.log(typeof age)
        console.log(typeof boy)
        console.log(typeof girl)
        console.log(typeof null)
    script>
body>

类型转换

  • 为什么要类型转换

    1. JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚。
      坑: 使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hEejR5GH-1650884600793)(jsDay01-内容.assets/1648285104472.png)]

    此时需要转换变量的数据类型。
    通俗来说,就是把一种数据类型的变量转换成我们需要的数据类型。

    补充:以后从页面中获取用户数据,基本上都是字符串

  • 隐式类型转换

    1. 某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
      规则:

      • +号两边只要有一个是字符串,都会把另外一个转成字符串 如下结果:

JavaScript 基础--变量、数据类型_第15张图片

 + 除了+以外的算术运算符 比如 -  *  /  等都会把数据转成数字类型

 &&&小技巧写法

JavaScript 基础--变量、数据类型_第16张图片

 、、if()中表示式也会进行隐式转换:隐式转换为fales 的有:'  '   " "  0   undefined  null!

JavaScript 基础--变量、数据类型_第17张图片

  • 显示类型转换

    编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律。
    为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。
    概念:
    自己写代码告诉系统该转成什么类型
    转换为数字型

    1. Number(数据)

      • ​ 转换成数字类型

      • 如果转换字符串内容里有非数字,转换失败时结果为NaN (Not a Number) 表示不是一个数字 NaN不能与任何数值计算

      • NaN也是number类型的数据,代表非数字

        写法如下:

JavaScript 基础--变量、数据类型_第18张图片

 2.parseInt(数据)

 只保留整数

 ```html
 let nmu1=prompt('请输入数字1')
         let num2=prompt('请输入数字2')
         let max= parseInt(nmu1)+parseInt(num2)
         document.write(max)
 ```

JavaScript 基础--变量、数据类型_第19张图片

JavaScript 基础--变量、数据类型_第20张图片

JavaScript 基础--变量、数据类型_第21张图片

总结:当运用到parseInt 包裹变量 系统只会把数字部分做处理 进行运算

.parseFloat(数据)

可以保留小数

 let nmu1=prompt('请输入数字1')
        let num2=prompt('请输入数字2')
        let max= parseFloat(nmu1)+parseFloat(num2)
        document.write(max)

JavaScript 基础--变量、数据类型_第22张图片

JavaScript 基础--变量、数据类型_第23张图片

JavaScript 基础--变量、数据类型_第24张图片

总结 :parseFloat 基本特性和parseInt一样,但是他会保留小数

补充图:

JavaScript 基础--变量、数据类型_第25张图片

  • 总结:

    1. Number(数据)如果字符串内容里有非数字,转换失败时结果为 NaN
    2. parseInt 会转换类型,直到碰到非数值为止,如果第一个就是非数值,那么就是NaN
    3. parseFloat 基本特性和parseInt一样,但是他会保留小数

其他类型转换为字符串型

转换为字符型:

  • String(数据)

  • 变量.toString(进制)

JavaScript 基础--变量、数据类型_第26张图片

本章学习的 思维导图:http://assets.processon.com/chart_image/623db9e90e3e74078d4b4fef.png

你可能感兴趣的:(前端)