JS基础总结一

大同学
195 阅读8分钟

一、JavaScript 介绍

1、前言

  • 一个完整的网页由三门语言组成，缺一不可
    1. HTML：确定网页的结构
    2. CSS：确定网页的样式
    3. JavaScript：确定网页的行为(交互)

2、什么是 JavaScript

  • 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

3、JavaScript 的作用

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

4、JavaScript 的组成

1. ECMAScript

  • 规定了 JS 的基础语法核心知识。
  • 比如：变量、分支语句、循环语句、对象等。

2. Web APls

  • DOM 操作文档，比如对页面元素进行移动、大小添加删除等操作。
  • BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等。

5、JavaScript 书写位置

1. 行内样式

  • 代码写在标签内部

    image.png

2.内联

  • 直接写在 HTML 文件里面，用 script 标签包住，script 标签写在 body 标签上面
  • 注意事项：
    1. 我们将 script 标签放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略

3.外联

  • 代码写在以 .js 结尾的文件里，然后通过 script 标签引入到 html 页面中。
  • 注意事项：
    1. script 标签中间无需写代码，否则会被忽略！
    2. 外部 JavaScript 会使代码更加有序，更易于复用，且没有了脚本的混合，html 也会更加易读，因此这是个好的习惯。 image.png

6、注释

1.单行注释

  1. 符号：//
  2. 作用：//右边这一行的代码会被忽略
  3. 快捷键：ctrl + /

image.png

2.块注释

  1. 符号：/* */
  2. 作用：在 /* 和 */ 之间的所有内容都会被忽略
  3. 快捷键：shift + alt + A

image.png

7、了解JavaScript结束符

1.结束符

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

image.png

8、JavaScript 输入输出语法

1.什么是输入输出：

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

2. 输出语法：

image.png

  1. 向 body 内输出内容。
  2. 如果输出的内容写的是标签，也会被解析成网页元素。

image.png

  1. 页面弹出警告对话框。

image.png

  1. 控制台输出语法，程序员调试使用。

3.输入语法：

image.png

  1. 显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。

image.png

  1. 显示一个确认框，用户可以点击 确认 与 取消

二、变量

1、什么是变量

  • 变量是计算机中用来存储数据的容器(装东西的盒子)，它可以让计算机变得有记忆。

    image.png

  • 注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

2、变量的原理

  • 内存中一块存储数据的空间

3、变量的基本使用

1.声明变量

  • 要想使用变量，首先需要创建变量（专业说法： 声明变量）

  • 语法

    image.png

    1. 声明变量有两部分构成：声明关键字、变量名（标识）

    2. let 即关键字 (let: 允许、许可、让、要)，所谓关键字是程序发明者预先定义的有特殊含义的字符(给编译器发指令)

  • 举例

    image.png

    1. age 即变量的名称，也叫标识符

2.变量赋值

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

    image.png

  • 注意：是通过变量名来获得变量里面的数据

3.变量的注意事项

  1. 变量名不可允许重复声明
  2. 变量重复赋值：先销毁旧值，然后存入新值
  3. 变量之间赋值：取出变量的数据拷贝一份，然后复制
  4. 如果仅声明了变量，但并没有赋值，此时变量的值是 undefined 未定义

4.变量命名规划与规范

  • 规则（必须遵守，不遵守报错）

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

  • 规范（建议，不遵守不会报错，但不符合业内通识）

    1. 起名要有意义
    2. 遵守小驼峰命名法（第一个单词首字母小写，后面每个单词首字母大写。例：userName）

三、数据类型

1、数据类型整体分为两大类：

  • 基本数据类型

    1. number 数字类型
    2. string 字符串类型
    3. boolean  布尔类型
    4. undefined 未定义类型
    5. null  空类型

  • 引用数据类型

    1. object 对象
    2. function  函数
    3. array  数组

1. number 数字型

  • 什么是数字类型：

    1. 即我们数学中学习到的数字，可以是整数、小数、正数、负数；在JavaScript 中的正数、负数、小数点等 统一称为 数字类型。

    image.png

  • 注意事项

    1. JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
    2. Java是强数据类型   例如  int  a = 3    必须是整数
    3. 在控制台查看时显示为蓝色

2. string 字符串类型

  • 什么是字符串类型：

    1. 通过单引号（ '' ） 、双引号（ "" ）或反引号( `` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

    image.png

  • 反引号定义的字符串也称之模板字符串

    1. 可以换行定义字符串
    2. 可以解析变量的值 但必须用${变量名}

  • 注意事项

    1. 无论单引号或是双引号必须成对使用
    2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
    3. 必要时可以使用转义符 \，输出单引号或双引号
    4. 在控制台查看时显示为灰色

  • 字符串的拼接

    image.png

    1. 作用：拼接字符串和变量

    image.png

    1. 符号：在反引号包含的内容中需要拼接变量时，要用 ${} 包住变量

    image.png

3. boolean  布尔类型

  • 布尔值：有两个固定的值
    1. true，表示肯定的数据用 true（真），
    2. false，表示否定的数据用 false（假）。
  • 使用场景：表示肯定或否定时在计算机中对应的是布尔类型数据。

image.png

  • 注意事项：
    1. 在控制台查看时显示为蓝色

4. undefined 未定义类型

  • 未定义是比较特殊的类型，只有一个值 undefined。
  • 什么情况下会出现未定义类型：只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少直接为某个变量赋值为 undefined。
  • 工作中使用场景：通过检测变量是不是 undefined ，就可以判断数据是否有传递。
  • 注意事项：
    1. 在控制台查看时显示为灰色

5. null  空类型

  • null 表示值为空 image.png
  • null 和 undefined 区别：
  1. undefined  表示没有赋值
  2. null 表示赋值了，但是内容为空
  • 使用场景：可以先给变量里存放的对象 null，前提是这个对象没有创建好

6、检测数据类型

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

2、查看数据类型

1. 语法: typeof()

1. typeof() 查看数据类型
   console.log(typeof());      // 在控制台输出类型

2. 查看数据类型：typeof(),为获取数据类型，不具备输出功能
   console.log(typeof(10));         // number
   console.log(typeof('hello'));    // string
   console.log(typeof(true));       // boolean
   console.log(typeof(null));       // object对象

3. 对于prompt()来说，点击确认 计算机接收到的是string类型，反之null类型
   console.log(typeof(prompt('请输入数据')));

4. 对于confirm()来说，就是boolean类型
   console.log(typeof(confirm('请选择')));

3、数据类型转换

  • 说明：
    1. 把一种数据类型的变量转换成我们需要的数据类型。
    2. 只要相同的数据才可以直接进行运算，如果数据类型不相同，会发生数据类型的转换。

1.隐式转换

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

  • 规则

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

  • 缺点

    1. 转换类型不明确，靠经验才能总结

  • 小技巧

    1. +号作为正号解析可以转换成Number

    image.png

  • 注意：

    1. +，+= 会优先进行字符串的拼接，所以在使用时要注意。

2.显示转换

  • 概念：自己写代码告诉系统该转成什么类型

  • 转换为数值型

    1. Number(数据)

      1.1 转成数字类型
1.2 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
1.3 NaN也是number类型的数据，代表非数字

    2. parseInt(数据)

      2.1 只保留整数
2.2 在一个字符串中，从左向右依次提取整数，直到遇到第一个非数字就停止提取(前提是第一位是数字)

    3. parseFloat(数据)

      3.1 可以保留小数
3.2 在一个字符串中，从左向右依次提取小数，直到遇到第一个非数字就停止提取(前提是第一位是数字)

    4. +prompt('请输入')，最前面的 + 表示正整数数值。

  • 转换为字符型

    1. String(数据)
    2. 变量.toString()

  • 转换为布尔型

    1. Boolean(数据)
    2. 注意事项： 
      2.1 由于布尔类型只有两个值，因此任何数据转换成布尔类型，只能得到true或false

2.2 得到false,有且只有八种数据:  0   -0   NaN   undefined null  false  ‘’(空字符串)      do cument.all (这里需要重点记忆的是： undefined   null   0  NaN)

2.3得到true： 除false八种之外一切数据都可以返回true
avatar
文章
阅读
粉丝