JS概述、变量、数据类型

Luckies
177 阅读7分钟

1. 前言

1.1. 什么是 JavaScript
  • JS是一种运行于 JS 解释器 / 引擎中的解释型脚本语言
    • 编译型语言: 程序在运行前会进行编译
    • 解释型语言: 运行之前不会编译, 直接执行, 出错则停止
    • JS 解释器 / 引擎: 是 JS 脚本的运行环境
      • 独立安装的 JS 解释器( NodeJS )
      • 嵌入在浏览器内核中的 JS 解释器
  • 前端三大语言: 1. HTML: 专门编写网页内容的语言 2. CSS: 专门编写网页样式的语言 3. JavaScript: 专门添加网页交互行为的语言
1.2. 什么是交互: 3 步
  1. 用户的输入或操作
  2. 接收用户输入的数据, 并处理数据, 响应用户的操作
  3. 返回处理结果

所有静态页面必需添加交互行为后, 才能让用户使用

1.3. 何时使用JavaScript
  1. 客户端数据计算
  2. 客户端表单验证
  3. 动画效果

2. javascript概述

2.1. 发展史
  1. 1992年 Nombas 为自己的软件开发了一款脚本语言C Minus Minus( C-- )后更名为 ScriptEase, 可以嵌入在网页中
  2. 1995年 Netscape 为自己的 Navigator2.0 开发了另一种客户端脚本语言-LiveScript, 为了借助 Java 势头, 所以更名为 Javascript
  3. 1996年 Microsoft 为了进军浏览器市场, 在 IE3.0 中 发布了 Javascript 的克隆版, 称为 JScript
  4. 1997年 Javascript1.1 作为草案提交给了 ECMA ( 欧洲计算机制造商联合会 ), Javascript 的核心 被更名成 ECMAScript
  • 介绍: ECMAScript , JavaScript, JScript
    • ECMAScript: 由ECMA组织制定的JavaScript语言国际标准
    • JavaScript: NetScape(网景) 按照 ECMAScript 标准, 实现的 JavaScript 语言版本
    • JScript: 微软按照 ECMAScript 标准, 实现的 JavaScript 语言版本
  • JS: 3 部分
    • 核心语法: ECMAScript ES 版本: 3.1 + 5 + 6
    • DOM 标准: 规定了专门操作网页内容的程序
    • BOM: 专门操作窗口的程序
2.2. JS 语言的特点和用途
  • 特点:
    1. 任何文本工具都可以开发 JS
    2. 无需编译, 直接由 JS 引擎来执行
    3. 弱类型语言: 由数据来决定数据类型
    4. 面向对象的语言
  • 用于:
    1. 客户端的 JS
      • 客户端数据计算
      • 表单输入验证
      • 浏览器事件的触发和处理
      • 网页特效制作
    2. 服务器端的 JS
      • 分布式运算
      • 实时服务器
      • 窗口应用
      • 网络应用
2.3. 如何使用JavaScript:

  • 运行环境: 专门解释并执行程序语言的小软件 -- 脚本解释引擎

    • 2 种:
      1. 浏览器自带
        • 内容排版引擎: 专门解释 HTML 和 CSS 等静态语言
        • 脚本解释引擎: 专门解释并执行 JS 程序
        • 做动画选择 CSS vs JS
          • 如果不需要交互行为的动画, 首选 CSS, 效率高
          • 如果必须交互行为的动画, 只能用 JS
      2. 独立安装: nodeJS
        • 从 chrome 浏览器中剥离的独立的脚本解释引擎
        • 以前需要掌握的语言: 前端 -- JS 后端 -- PHP / JAVA 数据库 -- SQL
        • 现在的趋势: 前端 -- JS 后端 -- nodeJs 数据库 -- MongoDB
2.4. 编写方式:

  1. 在网页内编写: 初学者

    • 所有 JS 程序必需放在 <script> 内
    • 问题: 不便于维护和重用

  2. 在专门的外部 JS 文件中编写, 在网页中引入: 网站项目

    1. 在 .js 文件中编写 JS 程序

    2. 在 html 文件中用 <script src="url"></script>

    强调: 一个 script 标签要么用于包含 JS 代码, 要么用于引入外部 JS 文件 -> 不能同时使用, 否则, 带 src 的 script 内部的 JS 代码自动失效

    • 优: 内容与行为分离，便于维护

  3. 在浏览器控制台 / nodeJS 中编写 JS 指令: 测试小程序

    • 客户端: 浏览器控制台 -> 专门编写并运行 JS 小程序的窗口
    • nodeJS: 终端使用命令行执行 JS 代码
    • 好处: 调试的内容不影响页面布局
2.5. JS基本语法规范
  1. 区分大小写
  2. 字符串用单双引号包裹都行
  3. 每条语句必须以分号结束( 现在的编译器有些不需要分号 )
  4. 注释: 不会被 JS 引擎解释执行的语言
    • 单行注释: // 注释内容
    • 多行注释: /* 注释内容 */

3. 变量

  • 什么是变量: 内存中存储一个数据的存储空间, 再起一个名字

  • 何时: 只要反复使用的数据, 都要先保存在变量中, 再反复使用变量

  • 如何使用:

    1. 先声明: 在内存中创建一个存储空间再起一个名字

      • 何时: 只要使用变量前, 必须先声明变量

      • 如何: var 变量名； -> 默认值: undifined(为空)

      • 简写: var 变量1，变量2，...

      注意: 变量名规范: 1. 使用字母、数字、下划线组成, 不能够以数字开头

      1. 不允许使用 JS 语言的保留字 / 关键字 -> Ex: var
      2. 见名知意
      3. 驼峰命名: 首字母小写, 中间首字母大写 -> listStyleType

    2. 赋值: 将等号右边的值保存到等号左边的变量中 -> 变量名 = 值;

      • 简写: 1. 声明同时, 初始化变量的值 -> Ex: var 变量名 = 值;

        1. 同时声明并初始化多个变量 -> Ex: var 变量1 = 值1, 变量2 = 值2;

      • 特殊注意: 1. 普通模式: 强行给未声明变量赋值, 不会报错 -> 会自动创建该变量

        1. 严格模式: 比普通 JS 运行模式要求更严格的机制
          • 禁止给未声明的变量赋值
          • 如何启用: 在 script 标签内代码开始位置输入: use strict

    3. 取值: 任何情况下, 使用变量名, 等效于直接使用变量中的值

      • 特殊: 在严格模式下, 强行从未声明的变量中取值 -> 报错
        • ReferenceError: 要用的东西, 没找到

4. 常量

  • 什么是常量

    值不允许改变的量

  • 何时: 只要一个数据一旦定义, 就不允许改变

  • 如何使用:

    1. 先声明: const 常量名 = 值;

      • 强调: 1. 声明常量时, 必须初始化 , 不然会报错

        1. 习惯上, 常量名要全大写

    2. 赋值: 常量不允许在声明后再赋值

    3. 取值: 常量的用法和普通变量完全一样

  • 特殊: 强行修改常量的值:

    • 普通模式: 不报错, 但也不能修改 -> 静默失败
    • 严格模式: 报错 -> 将所有静默失败都升级为错误

5. 数据类型

  • 什么是数据类型: 数据在内存中的存储结构
  • 为什么: 为了让不同类型的数据, 更便于执行专门的操作
  • 分类:
    1. 原始类型: 值直接保存在变量本地的数据类型
      • 5种: number, string, boolean, null, undefined
    2. 引用类型: 值无法保存在变量本地的数据类型
      • 变量中只保存指向实际数据所在位置的地址值
5.1. 原始数据类型详解:
5.1.1. number: 存储一切数字

  • 何时: 只要不带引号的数字直接量, 默认类型 number

    • 只要经常用作算数计算或比较的数值都不加引号

  • 存储空间: 8 字节二进制( 整数 4 字节 )

    • 1字节( Byte ) = 8位二进制数( Bit )
    • 1KB = 1024字节B
    • 1MB = 1024KB

  • 将十进制数转二进制: n.toString(2);

  • 强调: 1. number 即包含整数, 又包含浮点数( 小数 )

    1. 数字大小和所占空间无关
5.1.2. string: 保存一串字符组成的字符串
  • 何时: 用于显示或记录一段文字
    • 凡是用 "或 ' 包裹的一串文字, 数据类型为 string
  • 存储空间:
  • JS 中采用 unicode 编码存储每个字符
    • unicode 是对全球主要语言的每个文字编一个号
      • 为什么: 计算机只认数字, 不认字符
      • 查看一个字符串的 unicode号: str.charCodeAt()
        • 数字 09: 4857
        • 大写字母 AZ: 6590
        • 小写字母az: 97122
        • 汉字: \u4e00 ~ \u9fa5
  • 转义字符: \
    • 何时: 2种
      1. 当字符串中包含和 JS 语言标点符号冲突的内容, 用 \ 将冲突的字符转为原文, 不再按程序解析
      2. 要表示特殊意义:
        • \n -> 换行, \t -> 制表符, \u -> unicode
        • 特殊情况: 路径中的 \ -> 2种
          1. 前再加 \ -> 不建议, 只有 windows 才认 \
          2. 将 \换成 / -> 强烈建议, 任何操作系统都认
5.1.3. boolean: 布尔类型

只有两个值的类型: true / false

  • 何时: 专门用于表示一个判断的结论
5.1.4. null: 空
  • 让程序员手动清空一个变量
5.1.5. undefined: 空
  • 由程序自动使用, 为变量赋初值
avatar
文章
阅读
粉丝