JS基础一

最新推荐文章于 2024-05-21 14:15:14 发布

1_菜鸟初学者

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量18

点赞数

分类专栏：前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_48328683/article/details/134983418

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、JavaScript介绍

1.1JavaScript是什么

1.JavaScript是什么？
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
2.JavaScript做什么？

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

3.JavaScipt的组成

ECMAScript:
规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等
Web APIs：
DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

1.2JavaScript书写位置

1.内部JavaScript
直接写在html文件里，用script标签包住
规范：script标签写在上面
拓展：alter(‘你好,js’)页面弹出警告对话框

注意事项
我们将

2.外部JavaScript
代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中。
在这里插入图片描述

注意事项
- 1.script标签中间无需写代码，否则会被忽略！
- 2.外部JavaScript会使代码更加有序，更易于复用，且没了脚本的混合，HTML也会更加易读，因此是个好习惯。

3.内联JavaScript
代码写在标签内部
语法：
注意：此处作为了解即可，但是后面vue框架会用这种模式
在这里插入图片描述

1.3JavaScript的注释

单行注释
- 符号：//
- 作用: //右边这一行代码会被忽略
- 快捷键:ctrl + /
块注释
- 符号：/* */
- 作用：在/* 和 */之间的所有内容都会被忽略
- 快捷键：Shift + alt + a

1.4JavaScript的结束符

结束符
- 作用：使用英文的;代表语句结束
- 实际情况：实际开发中，可写可不写，浏览器（JavaScript）可以自动推断语句的结束位置
- 现状：在实际开发中，越来越多的人主张，书写JavaScript代码时可以省略结束符
- 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

1.5输入和输出语法

目标：能写出常见JavaScript输入输出语法

什么是语法：
* 人和计算机打交道的规则约定
* 我们要按照这个规则去写
* 比如：你吃了吗
* 我们需要操作就计算机，需要计算机能看懂

输出和输入也可以理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程

输出语法
- 语法1
  
  **作用：**向body内输出内容
  **注意：**如果输出的内容写的是标签，也会被解析成网页元素
- 语法2
  
  **作用：**页面弹出警告对话框
- 语法3
  
  **作用：**控制台输出语法，程序员调试使用
2.输入语法
- 语法：
- 作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
- 展示：
JavaScript代码执行顺序：
- 按HTML文档流顺序执行JavaScript代码
- alter()和prompt()它们会跳过页面渲染先被执行（目前作为了解）

1.6字面量

目标：能说出什么是字面量
在计算机科学中，字面量（literal）是在计算机中描述事/物

比如：

我们工资是： 1000,此时1000就是数字字面量
‘前端’ 是字符串字面量
[]数组字面量 {}对象字面量等等

二、变量

2.1变量是什么

问题1：用户输入的数据我们如何存储起来？
目标：理解变量是计算机存储数据的“容器”

1.变量：

白话：变量就是一个用来装东西的盒子。
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。
注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

2.2变量基本使用

1.声明变量：

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法：
- 声明变量有两部分构成：声明关键字、变量名（标识）
- let即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语
举例：
- 我们声明了一个age变量
- age即变量的名称，也叫标识符

2.变量赋值：

定义了一个变量后，你就能初始化它（赋值）。在变量名之后跟上一个“=”，然后是数组。

3.更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
在这里插入图片描述
注意：let不允许多次声明一个变量

4.声明多个变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。
语法：多个变量中间用逗号隔开。
在这里插入图片描述
**说明：**看上代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

2.3变量的本质

目标：能说出变量的本质是什么
内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间
在这里插入图片描述

2.4变量命名规则与规范

规则：必须遵守，不遵守报错（法律层面）
规范：建议，不遵守不会报错，但不符合业内通识（道德层面）

1.规则：
- 不能使用关键字
- 只能使用下划线、字母、数字、$组成，且数字不能开头
- 字母严格区分大小写
2.规范：
- 起名要有意义
- 遵守小驼峰命名法
- 第一个单词首字母小写，后面的每个单词首字母大写。

2.5变量拓展-数组

目标：能够声明数组并且获取里面的数据

1.声明语法

例如
数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号中0开始，所以小明的编号为0，小刚的编号为1，以此类推
在数组中，数据的编号也叫索引或者下标
数组可以存储任意类型的数据

2.一些术语：
- 元素：数组中保存的每个数据都叫数组
- 下标：数组中数据的编号
- 长度：数组中数据的个数，通过数组的length属性获得

三、常量

3.1常量的基本使用

概念：使用const声明的变量称为“常量”
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let.
命令规范：和变量一致
常量使用：
注意：常量不允许重新赋值，声明的时候必须赋值（初始化）
小技巧：不需要重新赋值的数据使用const

四、数据类型

4数据类型

目标：能说出JS中基本数据类型有哪些
计算机世界中的万事万物都是数据
计算机程序可以处理大量的数据，为什么要给数据分类？
* 1.更加充分和高效的利用内存
* 2.也更加方便程序员使用数据

JS数据类型整体分为两大类：
- 基本数据类型
- 引用数据类型
在这里插入图片描述

整数(Number)

即我们数学中学习到的数字，可以是整数、小数、正数、负数。
在这里插入图片描述
js中的正数、负数、小数等统一称为数字类型

注意
JS是弱数据类型，变量到底属于哪一种类型，只有赋值只后，我们才能确认
Java是强引用数据类型， int a = 3 必须是整数

NaN 代表一个计算错误。是一个不正确的或者一个未定义的数学操作所得到的结果
在这里插入图片描述
NaN是粘性的。任何对NaN的操作都会返回NaN

字符串类型（string）

通过单引号(’ ')、双引号(" ")或反引号(··)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用到单引号。
在这里插入图片描述

注意事项：
- 1.无论单引号或是双引号必须成对使用
- 2.单引号/双引号可以相互嵌套，但是不可以自己嵌套自己
- 3.必要时可以使用转义符,输出单引号或者双引号

字符串拼接：
场景：+ 运算符可以实现字符串的拼接
字符相加，字符相连
在这里插入图片描述

模版字符串

使用场景
- 拼接字符串和变量
- 在没有它之前，要拼接变量比较麻烦
语法
- ``(反引导）
- 在英文输入模式下按键盘上方那个键
- 内容拼接变量时，用${}包住变量

布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值true 和 false,表示肯定的数据用true（真），表示否定的数据用false（假）。
在这里插入图片描述

未定义类型（undefined）

未定义是比较特殊的类型，只有一个值undefined
什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为undefined。
在这里插入图片描述
工作中的使用场景：
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined,就可以判断用户是否有数据传递过来

null（空类型）

js中的null仅仅是一个代表“无”、“空”或
“值未知”的特殊值
在这里插入图片描述
null和undefined区别：

undefined表示没有赋值
null表示赋值了，但是内容为空

null开发中的使用场景：
官方解释：把null作为尚未创建的对象
大白话：将来有个变量存放的是一个对象，但是对象还没创建好，可以先给个Null

4.2检测数据类型

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

typeof运算符可以返回被检测的数据类型。它支持两种语法形式：

作为运算符：typeof x（常用的写法）
函数形式：typeof(x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接只用运算符的写法。
在这里插入图片描述

五、类型转换

5.1为什么类型转换

JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只用赋值了才清除。
坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
在这里插入图片描述
就是把一种数据类型的变量转换成我们需要的数据类型。

5.2隐式转换

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

+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的运算符比如 - * / 等都会把数据转成数字类型

缺点：

转换类型不明确，靠经验才能总结
小技巧：
+号作为证号解析可以转换成数字型
任何数据和字符串相加结果都是字符串

5.3显式转换

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

转换为数字型

Number(数据）
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据，代表非数字
parseInt(数据)
- 只保留整数
parseFloat(数据)
- 可以保留小数

六、实战案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

<style>
  h1 {
    text-align: center
  }

  table {
    /* 合并相邻边框 */
    border-collapse: collapse;
    height: 80px;
    margin: 0 auto;
    text-align: center;
  }

  th {
    padding: 5px 30px;
  }

  table,
  th,
  td {
    border: 1px solid #000
  }
</style>

<body>
  <h1>订单确认</h1>

  <script>
    let price = +prompt('请输入商品价格:')
    let num = +prompt('请输入商品数量:')
    let total = num * price
    let pace = prompt('请输入地址：')


    document.write(`
    <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <th>小米手机</th>
      <th>${price}元</th>
      <th>${num}</th>
      <th>${total}元</th>
      <th>${pace}</th>
    </tr>
  </table>
    `)
  </script>