JavaScript--初识JS以及JS中的变量_js强制使用等宽字体-优快云博客

本文链接：https://blog.youkuaiyun.com/wl_qianduan/article/details/106773506

JavaScript简介

HTML\CSS\JavaScript的关系

HTML：用来标记。
CSS：用来修饰。
JavaScript：用来交互。

JavaScript的由来

网景公司：决定开发一个客户端语言，来处理这种简单的验证。

Netscape开发一种名为LiveScript的脚本语言——该语言将同时在浏览器和服务器中使用（设计时可以在服务器端运行，但是在一直没流行起来，直到Node.js的成功，使这个语言开始在后端也流行起来，给整个开发带来了很大的变革）。
为了赶在发布日期之前发布Netscape与Sun公司建立了一个开发联盟。(Sun公司发布了Java，而且大火，为了赶热度更名为了JavaScript)。
JavaScript1.0取得了巨大的成功之后又发布了JavaScript1.1。
没多久之后微软在IE3中加入了自家的竞争产品JScript。（和javaScript差不多）。
这个时候市面上就有两个版本了javaScript、JScript，但是因为没有标准，两种语言并存导致了很多的问题(比如实现这个功能在Jscript要这样，而在JavaScript要那样)。
97年以JavaScript1.1为原型的建议提交给了ECMA(欧洲计算机制造商协会)，完成了__ECMA-262__的标准制定。
98年ISO(国际化标准组织)，也采用了ECMA-262标准。这个时候所有的浏览器厂商都开始将ECMA标准作为JavaScript实现基础。

ECMA

JavaScript的作用

早期的时候用来进行表单验证，现在可以做很多事情：表单验证、用户交互（主要学习的）、游戏开发、后端开发（Node.js）、硬件控制等等。

Atwood定律：Any application that can be written in JavaScript, will eventually be written in JavaScript

任何能够用javaScript实现的应用系统，最终必将用JavaScript实现。

Jeff Atwood: statckOverflow的创始人。

JavaScript特点

JavaScript是一种弱类型的，解释型的，脚本语言。

弱类型：数据类型不固定，可以随时改变。
解释型：相对于编译型来说得。
什么是编译：我们写的代码计算机并不认识，我们需要让计算机知道我们写的代码是什么意思，让计算机按照我们的意思来执行，这个过程称为编译。
1. 编译型的语言在程序运行之前需要进行整体编译（翻译）。
2. 解释型语言：程序运行时不会编译，拿一行就执行一行。
3. 脚本语言：
  脚本：是一种程序，它不能独立运行，需要一个载体来运行它。在这里载体指的是浏览器。

HTML、CSS源代码放在哪里？最后谁执行的？

源代码放在服务上，HTML、CSS、JavaScript是在浏览器中执行的。

JavaScript的构成

核心，ECMAScript，负责核心语法部分，简称ES
文档对象模型，DOM
浏览器对象模型，BOM

ECMAScript

ES与web浏览器没有直接的依赖关系，它定义的只是这门语言的基础。常见的浏览器只不过是ES运行的宿主环境之一。

组成： 语法、类型、语句、关键字、操作符、对象。

文档对象模型（DOM，Document Object Model）

DOM把整个页面映射成为多层节点。总结起来就是用来控制页面中元素和样式的。

浏览器对象模型（BOM，Browser Object Model）

开发人员使用它可以控制浏览器显示的页面意外的部分。（地址栏、历史记录）

JavaScript基础语法

初识使用JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <script>
        //这里是输出
        alert('我叫WL');
        console.log('对的，我是最帅的');
        document.write('我今年18岁...');
    </script>
</body>
</html>

在了body标签中，写一个<script>标签，script标签中写的就是javascript代码。
注释符
1. //单行注释符
2. /*注释内容*/，多行注释。
注释的作用：
1. 写程序说明的。
2. 有些代码暂时不使用，我们就先注释起来。
3. 调试代码的时候。
输出内容的小工具：
1. alert()，以弹出框的形式输出内容。
2. console.log()，在控制台内以日志形式打印内容。
3. document.write()，将内容显示在页面上。
ECMA中的语句以一个分号结尾。但是可以省略（不会报错），如果省略不写的话，由浏览器内的解析器自己确定语句的结尾。
（建议写代码的时候都加上）
关于程序的空白（空格、换行、空行）

JavaScript会忽略程序中的空白，程序中的空白主要是用来增加程序的可读性的。

写代码的时候要有代码缩进。代码根据结构使用4个或2个空格符来进行缩进。

JavaScript中的一切都严格区分大小写。

问题：

如果控制台里面报红肯定是代码有问题。
写代码的时候字体需要使用等宽字体，这样可以更好的发现代码中的错误。Source Code Pro，Fira Code，jetbrains Mono

等宽字体：每个英文字母都占据同等的宽度（i，M）
可以在电脑中装两种输入法。一种纯英文的，一种纯中文的。

我们写代码的时候所有的符号用的都是英文符号。

其他使用JavaScript的方法

行内写法
1. 局限性很大，只能针对事件进行添加。用的时候很少。
2. 代码分离性差，可读性不高。
页面嵌入JavaScript代码
- 写法1：
```
<script>
    alert('你好,javaScript!!');
</script>
```
- 写法2：
```
<script type="text/javascript">
    alert('你好,javaScript!');
</script>
```
- 在学习和平常做项目的时候用的比较多。
- 执行顺序：包含在<script>标签内部的代码将会从上到下进行执行，在浏览器对<script>元素内的所有代码执行完成之前，其余的内容都不会被浏览器加载或显示。
包含外部javaScript文件
- 步骤:
  1. 将所有的JS内容提出成了一个.js的文件。
  2. 通过<script>标签来引入外部javaScript文件。src属性是必须存在的，它指向了包含文件的路径。
- 做项目的时候都会把JavaScript、CSS、HTML三者进行分离。
- 执行顺序：和上面一样，解析外部javaScript文件时，页面的处理也会停止。

变量

什么是变量

在计算机中可以变化的量叫做变量。变量是可以用来存储数据的容器。

变量的作用

用来进行运算的。

计算机的三大件： CPU、内存（存储速度比较快，断电数据清空）、硬盘（存储速度比内存慢，断电后数据依然存在）。

程序运行之前，需要从硬盘中将内容读取到内存。一个变量作为容器被存放在内存中，它对应着指定的值，当需要使用的时候，找到这个变量就能找到变量对应的值。

内存和硬盘的单位： GB、TB。
换算规则：

1Byte（字节，最小单位） = 8bit（是计算机中二进制的位）
1BK = 1024Byte
1MB = 1024KB
1GB = 1024MB
1TB = 1024GB
1PB = 1024TB
1EB = 1024PB

硬盘： 制造商是按照1KB=1000B来计算的，所以买来的硬盘或内存比想象中的小的多。

变量的定义

先定义变量再赋值
```
var a;
a = 10;
a = 20;
console.log(a);
```
var是JS中的关键字，它就是用来定义变量的。var 变量名
定义变量时直接赋值
```
var a = 10;
a = 20;
console.log(a);
```
特殊方式
```
c = 10;
console.log(c);
```

一次定义多个变量

第一种情况

var a = 1 , b = 2;//完全等价于 var a = 1 ; var b = 2;  
var c = 2 , d;//这样也行。 
console.log(a);
console.log(b);
console.log(c);
console.log(d);

第二种情况

var d = e = 30;    
console.log(d);
console.log(e);

变量定义规则

标识符是指变量、属性名、函数名、参数。

标识符起名的规则：

数字、字母、下划线、$符。
不能以数字开头。
不能和关键字、保留字相同。

关键字和保留字

关键字： 语言已经使用的特殊字符。

保留字： 语言以后可能会使用的字符，但是现在还未使用

  // 关键字
  break do instanceof typeof
  case else new var
  catch finally return void
  continue for switch while
  debugger* function this with
  default if throw
  delete in try
  // 保留字
  abstract enum int short
  boolean export interface static
  byte extends long super
  char final native synchronized
  class float package throws
  const goto private transient
  debugger implements protected volatile
  double import public

起的名字要有意义，不要使用拼音、更不要使用拼音和英文混写。

约定俗称的规范：
- 大驼峰命名： 每个单词首字母大写。
- 小驼峰命名： 第一个单词小写，后面的每个单词的首字母大写。
- 下划线命名： 每个单词之间使用_来进行区分。

案例：有两个变量一个中存储的是100一个中存储的是200，交换其中的值（请用两种方法）。

方法一

var a = 10;
var b = 20;
var c;
c = a;// c= 10 a = 10
a = b;// a = 20 b = 20
b = c;// b = 10 c = 10
console.log(a);//20
console.log(b);//10

方法二

var a = 10;
var b = 20;
a = a + b ;//a = 30; (a现在包含着原来a的值和原来的值的总和)
b = a - b ;//b = 30 - 20; b =10 //用总的值减掉当前b的值，得到的就是原来a的值，然后再重新赋值给到b。
a = a - b ;//在用总的值减掉新的b（原来的a）得到的就是新的a的值。
console.log(a);
console.log(b);

变量的类型

数据类型（存储数据的类型）

基本数据类型和引用数据类型（对象）。
基本数据类型
- 数字 Number
- 字符串 String
- 布尔 Boolean
- undefined
- null
对象数据类型

Number类型

整数

var num0 = 10;
console.log(num0);
console.log(Number.MIN_VALUE);//输出整数的最小值
console.log(Number.MAX_VALUE);//输出整数的最大值。

一旦超过了最小值和最大值的范围，这个数值将会被转换为-Infinity或Infinity。

小数

var flo1 = 1.23;
var flo2 = .23;
//浮点数值中必须包含一个小数点，小数点后面必须有值。
console.log(flo1);
console.log(flo2);
var flo3 = 10.0;
console.log(flo3);
//浮点数存储需要的内存比较大，所以解析时能转换成整数就转换成整数了。

console.log(0.1 + 0.2);
浮点数在进行运算时不准确，所有语言都是如此。计算小数时会有误差。
有专门的数学库来解决这个问题。
还可以先把小数变成整数，运算完之后再变回小数就行了。

其他不常用的值
- 二进制，0、1，以0b开头
- 八进制，0~7，以0o开头。
- 十六进制，0-9 A-F，以0x开头。
不管是几进制，到最后都会转换为10进制输出。
String 字符串

字符串可以由双引号和单引号包含内容。两种方式没区别。

如果出现引号嵌套的问题，要在单引号中嵌套双引号，在双引号中嵌套单引号。如果非得在单引号中嵌套单引号那么可以使用\将单引号转义掉，改变字符原来的意思。
Boolean类型

布尔值，两个值：true（真）、false（假）。两个值严格区分大小写。

布尔值通常用来做开关条件的处理。
undefiend类型

只有一个值，undefiend。表示声明了变量没有初始化。
null类型

只有一个值，null。一般来说在讲对象这一块时，对对象初始化或者删除一个对象的时候用到。
获得变量的类型

typeof 值/变量，最终得到数据类型名的小写形式。

Number String Undefined Null Boolean

返回值：
- boolean，布尔值
- string，字符串
- number，数值
- undefined，值未定义。
  - 声明变量没有被赋值
  - 变量压根没声明。
  上面两种情况类型为undefiend，可以认为变量不能真正使用。
  
  如果一个变量被定义了没被赋值那么可以使用，如果一个变量没定义而直接使用的话将会报错（除了typeof时）。
- object，对象或null。
  
  typeof null的时候返回的是object。
  
  null是基本类型的值。

类型转换的类型

JavaScript是弱类型语言。

强类型语言必须在声明的时候执行相对应的数据类型。 int a = 1
弱类型语言定义了什么类型之后，变量里面的类型是随着里面存储的值变化而变化，而且值的类型是可以进行自动转换的。

类型转换分为两种类型：

强制类型转换： 就是强制让某个值转换为某种类型。
隐式类型转换： 变量在配合操作符进行运算的时候自动发生的类型转换。

强制类型转换

Boolean()小工具：将指定类型的值转换为布尔值。总是得到true或false。
- 任何非空字符串都会转换为true，空字符串转换为false。
- 任何非零数值都会被转换为 true，0和NaN会被转换为false。
- undefiend转换为false。
- 任何对象都会转换为true，null转换为false。
NaN（Not a Number），是数值型，用于表示一个本来要返回值得操作但是并没有返回数值的情况。