本篇为 JavaScript 系列笔记第一篇，将陆续更新

文章目录

一、初识 JavaScript
- 1. JavaScript 是什么
- 2. JavaScript 的作用
- 3. HTML、CSS 和 JS 的关系
- 4. 浏览器执行 JS简介
- 5. JS 的组成
- 6. JS 初体验
二、JavaScript 注释
- 1. 单行注释
- 2. 多行注释
三、JavaScript 输入输出语句
四、变量
- 1. 变量概述
- 2. 变量的使用
- 3. 变量的语法扩展
- 4. 变量的命名规范
五、数据类型
- 1. 数据类型简介
- 2. 数据类型分类
- - 2.1 数字型 Number
  - 2.2 字符串型 String
  - 2.3 布尔型 Boolean
  - 2.4 Undefined 和 Null
- 3. 获取变量数据类型
- 4. 数据类型转换
- - 4.1 转换为字符串
  - 4.2 转换为数字型
  - 4.3 转换为布尔型

一、初识 JavaScript

1. JavaScript 是什么

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器（js 引擎）逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程

2. JavaScript 的作用

表单动态校验（密码强度检测）（ JS 产生最初的目的）
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)

3. HTML、CSS 和 JS 的关系

HTML、CSS 标记语言–描述类语言

HTML 决定网页结构和内容，相当于人的身体
CSS 决定网页呈现给用户的样式，相当于给人穿衣服、化妆

JS 脚本语言–编程类语言

实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作

4. 浏览器执行 JS简介

浏览器分成两部分：渲染引擎和 JS引擎

渲染引擎：用来解析 HTML 与 CSS，俗称内核。例如，chrome 浏览器的 blink
JS 引擎：也称为 JS 解释器，用来读取网页中的JavaScript代码，对其处理后执行。例如，chrome 浏览器的 V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时 逐行解释每一句源码（转换为二进制机器语言），然后由计算机去执行，所以 JavaScript 语言归为 脚本语言，会逐行解释执行。

5. JS 的组成

1. ECMAScript

ECMAScript 是由 ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

ECMAScript：ECMAScript 规定了JS 的 编程语法 和 基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

2. DOM——文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以 对页面上的各种元素进行操作（大小、位置、颜色等）。

2. BOM——浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

6. JS 初体验

JS 有 3 种书写位置，分别为 行内、内嵌 和 外部

1. 行内式

<body><input type="button" value="唐伯虎" onclick="alert('秋香')">
</body>

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在 HTML 中我们推荐使用双引号, JS 中我们 推荐使用单引号
可读性差，在 HTML 中编写 JS 大量代码时，不方便阅读
引号易错，引号多层嵌套匹配时，非常容易弄混
特殊情况下使用

2. 内嵌 JS

<head>...<script>alert('JavaScript!')</script>
</head>

可以将多行 JS 代码写到 <script> 标签中
内嵌 JS 是学习时常用的方式

3. 外部 JS 文件

<head>...<script src="my.js"></script>
</head>

利于HTML页面代码结构化，把大段 JS 代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS 文件的 <script> 标签中间不可以写代码
适合于JS 代码量比较大的情况

二、JavaScript 注释

1. 单行注释

为了提高代码的可读性，JS 与 CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释 和 多行注释

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来

// 用来注释单行文字（快捷键 ctrl + / ）

2. 多行注释

/*获取用户年龄和姓名并通过提示框显示出来
*/

/* */ 用来注释多行文字（默认快捷键 alt + shift + a ）
快捷键修改为： ctrl + shift + /
vscode修改快捷键方法: 首选项按钮 => 键盘快捷方式 => 查找原来的快捷键 => 修改为新的快捷键 => 回车确认

三、JavaScript 输入输出语句

为了方便信息的输入输出，JS 中提供了一些输入输出语句，其常用的语句如下：

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息

示例

...<script>// 输入框prompt('请输入您的年龄');// 警示框alert('计算的结果是');// 控制台输出console.log('展示给程序员');</script>
...

四、变量

1. 变量概述

变量是用于存放数据的容器，我们通过变量名获取数据，甚至修改数据

本质：变量是程序在内存中申请的一块用来存放数据的空间

2. 变量的使用

变量在使用时分为两步：

声明变量

赋值

1. 声明变量

var age;     // 声明一个名称为 age 的变量

var 是一个 JS 关键字，用来声明变量（variable 变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2. 赋值

age = 10;   // 给 age 变量赋值为 10

" = " 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

3. 变量的初始化

var age  = 18;   // 声明变量同时赋值为 18

声明一个变量并赋值，我们称之为 变量的初始化

案例一

案例二

3. 变量的语法扩展

1. 更新变量

一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

var age = 18;
age = 81;      // 最后的结果就是 81， 因为 18 被覆盖掉了

2. 同时声明多个变量

同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开

var age = 10,  name = 'zs', sex = 2;

3. 声明变量特殊情况

4. 变量的命名规范

由字母（A - Z，a - z）、数字（0 - 9）、下划线（_）、美元符号（$）组成，如：usrAge，num01， _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写，如 myFirstName
推荐翻译网站：有道爱词霸

案例

五、数据类型

1. 数据类型简介

为什么需要数据类型？

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着 不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;            // 这是一个数字型
var areYouOk = '是的';   // 这是一个字符串

在代码运行时，变量的数据类型是由 JS 引擎根据等号右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型

JavaScript 拥有动态类型，同时也意味着 相同的变量可用作不同的类型：

var x = 6;           // x 为数字
x = "Bill";           // x 为字符串

2. 数据类型分类

JS 把数据类型分为两类：

简单数据类型（ Number，String，Boolean，Undefined，Null ）

复杂数据类型（ object )

JavaScript 中的简单数据类型及其说明如下：

简单数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值	0
Boolean	布尔值型，包含 true 和 false	false
String	字符串型，如 “张三”	“”
Undefined	未赋值的变量，var a;	undefined
Null	声明空值，var a = null;	null

2.1 数字型 Number

JavaScript 数字类型既可以用来保存整数值，也可以保存浮点数（小数）

var age = 21;       // 整数
var Age = 21.3747;  // 小数

数字型进制

最常见的进制有二进制、八进制、十进制、十六进制

八进制数字序列范围：0~7
十六进制数字序列范围：0 - 9 以及 A - F
在JS中八进制前面加 0，十六进制前面加 0x

数字型范围

JavaScript 中数值的最大和最小值

最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-324

数值型三个特殊值

Infinity，代表无穷大，大于任何数值
-Infinity，代表无穷小，小于任何数值
NaN，Not a number，代表一个非数值

isNaN()：判断是否为数字型

2.2 字符串型 String

字符串引号嵌套

字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号''

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号
如果需要 引号嵌套，可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)，var strMsg = '我是"高帅富"程序猿'; 或 var strMsg2 = "我是'高帅富'程序猿";

字符串转义符

类似 HTML 里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。常用的转义符及其说明如下：

字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。

字符串拼接

多个字符串之间可以 使用 " + " 进行拼接 ，拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

案例：输出年龄

2.3 布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0

2.4 Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined（如果进行相连或者相加时，注意结果）

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null）

3. 获取变量数据类型

typeof 可用来获取检测变量的数据类型

通过 prompt 所取的值是字符型的

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值

数字字面量：8, 9, 10
字符串字面量：‘黑马程序员’, “大前端”
布尔字面量：true，false

4. 数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。

我们通常会实现 3 种方式的转换：

转换为字符串类型
转换为数字型
转换为布尔型

4.1 转换为字符串

方式	说明
toString()	转成字符串
String()强制转换	转成字符串
加号拼接字符串	和字符串拼接的结果都是字符串

三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换

4.2 转换为数字型

方式	说明
parseInt(string)函数	将string类型转换成整数数值型
parseFloat(string)函数	将string类型转成浮点数数值类型
Number()强制转换函数	将string类型转换成数值型
隐式转换 `- * /`	利用算术运算隐式转换为数值型

parseInt() 会下取整和去掉后面单位
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型。但是注意不能是加号，而是减号、乘号、除号

4.3 转换为布尔型

方式	说明
Boolean()	其他类型转成布尔值

代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
其余值都会被转换为 true

JavaScript（一）—— 初识JavaScript/注释/输入输出语句/变量/数据类型相关推荐

JavaScript基础(一)(编程语言,计算机基础,初始JavaScript,JavaScript注释,输入输出语句,变量的概念,变量的使用,数据类型,解释型语言和编译型语言)
JavaScript基础第01天 1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
JavaScript基础第01天—编程语言—计算机基础—初始JavaScript—JavaScript注释—JavaScript输入输出语句—变量的使用—数据类型—关键字和保留字
JavaScript基础第01天 1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
javascript基本语法(输入输出语句,变量常量,数据类型,运算符,流程控制语句,数组,函数)
javascript javascript介绍 JavaScript 是一种客户端脚本语言.运行在客户端浏览器中,每一个浏览器都具备解析 JavaScript 的引擎. 脚本语言:不需要编译,就可以被 ...
JavaScript（三）—— JavaScript 函数/JavaScript 作用域/JavaScript 预解析/JavaScript 对象
本篇为 JavaScript 系列笔记第三篇,将陆续更新 JavaScript(一)-- 初识JavaScript/注释/输入输出语句/变量/数据类型 JavaScript(二)-- JavaScri ...
个人知识整理(javascript篇初识)
个人知识整理(javascript篇初识(简介书写方式注释)) 一个小前端~突然想写点什么-算是梳理一下自己的知识吧 Javscript 简介浏览器本身并不会执行JS代码,而是通过内置 Java ...
JavaScript入门(part1)--初识JavaScript
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门初识JavaScript JavaScript 是什么 JavaScript的作用浏览器执行JS简介 JS ...
JavaScript基础第01天笔记——编程语言、计算机基础、JavaScript注释、JavaScript输入输出语句、变量的概念、变量的使用、数据类型、解释型语言和编译型语言、关键字和保留字
1 - 编程语言 1.1 编程编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...
JavaScript 教程「2」：注释、输入输出、变量
注释为了提高代码的可读性,我们往往需要在代码中添加一些额外的信息,但是我们又不想让这些信息影响到代码的执行.这时候,我们就需要使用到注释.JavaScript 中,主要有两种注释,一种是单行注释,另 ...
JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)
前言根据视频和PPT整理 JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程视频对应资源(在视频简介里面) ...

JavaScript（一）—— 初识JavaScript/注释/输入输出语句/变量/数据类型