JavaScript基础语法（一）

前言

js变量

数据类型

数据类型转换

传送门 ——> JavaScript基础语法（二）、JavaScript之数组与函数（三）、JavaScript之对象（四）、JavaScript阶段二之Web APIs

前言

历史：布兰登.艾奇（1961~），在1995年中利用10天完成了JavaScript的设计

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

解释型与编译型语言

JS属于解释型语言。

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

翻译器翻译的方式有两种:一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
编译器是在代码执行之前进行编译，生成中间代码文件
解释器是在运行时进行及时解释，并立即执行(当编译器以解释方

js作用

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

我们都知道前端三大件为html，css，js，js用来实现业务逻辑和页面控制，相当于实现人的各种动作

浏览器执行JS的过程

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

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

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

即浏览器通过JS引擎将js这种高级语言逐行转换为计算机能识别的机器语言

js组成

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

ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。我们接下来学习的就是JavaScript语法。

即 js = ECMAScript(基础语法) + DOM + BOM 组成

JS写法

js写法有三种

行内式，即直接写在html元素中
内嵌式也写在html页面中，只不过用<script>xxx</script>进行包裹
外部式，通过<script src='js.js'></script>将外部的js文件进行引入

js注释

<script>//单行注释/*多行注释*/
</script>

html注释：
php注释：//
python注释： #

JS输入输出语句

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

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>js练习</title>
</head>
<body><script>//这是一个输入框prompt("请输入年龄");//alert弹出警示框，展示给用户的alert('计算的结果是');//console.log，给程序员测试用的console.log('我是程序员能看到的');</script>
</body>
</html>

弹出输入框

console.log

js变量

var age;      //声明一个名称为age的变量，变量名区分大小写

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

声明变量并赋值，称为变量的初始化

<script>var name = "cc";console.log(name);    //控制台输入变量值
</script>

案例1：

浏览器弹出输入框，用户输入内容后将该内容进行弹窗

<script>var name = prompt('请输入姓名');alert(name);
</script>

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

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

案例2——两变量值交换

需要一个临时变量作为缓冲

<script>var temp;var apple1 = "青苹果";var apple2 = "红苹果";temp = apple2;apple2 = apple1;apple1 = temp;console.log(apple1);  //输出红苹果console.log(apple2);  //输出青苹果
</script>

数据类型

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

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

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

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

var x = 6; //x为数字类型
var x = "Bi11"; //×为字符串类型

1. 数据类型分类

JS把数据类型分为两类：

简单数据类型（ Number, string，Boolean , Undefined，Null )
复杂数据类型( object)

在js中八进制前面加0，十六进制前面加0x

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

typeof 输出数据类型

<script>var age = '12';console.log(typeof age);   //输出string
</script>

2 isNaN

判断是否非数字，是数字返回false，不是返回true

console.log(isNaN(12));   //返回false

3. 字符串型

字符串使用单引号或者双引号包裹，因为HTML标签里里面的属性使用的是双引号，所以js推荐使用单引号

4. 字符串转义符

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

5. 字符串长度

获取字符串的长度 length

<script>var uname = "sdfsfddsf df ";console.log(uname.length);
</script>

python中是len(字符串)

6. 字符串拼接

多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串。即拼接的字符中只要有字符串类型，那么拼接后就是为字符串类型
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

<script>console.log("沙漠"+"骆驼");   //字符串的沙漠骆驼console.log("我才"+18);      //我才18console.log(true+"我才");    //true我才console.log('12'+12);       //1212console.log(12+12);         //24
</script>

数字相加，字符相连

同样，字符串与变量相连也是用+号，'我今年'+age+'岁了'

7. 布尔型 Boolean

布尔类型有两个值: true和false ，其中 true表示真(对)，而false表示假(错)。布尔型和数字型相加的时候，true的值为1 ，false的值为0。

console.log (true + 1);    // 2
console.log(false + 1) ;   // 1

8. Undefined和Null

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

null为空值，即什么值都没有，比如 null+1，值就为1

数据类型转换

1. 转换为字符串

加号拼接字符串的方式也称为隐式转换

2. 转换为数字型

<script>console.log(parseInt('3.14'));  //取整，输出3console.log(parseInt('3.99'));  //取整，输出3console.log(parseInt('120px')); //120，会去掉px这个单位console.log(parseFloat('3.23'));   //不会取整，数字原样输出console.log(Number('3.14'));     不会取整，数字原样输出
</script>

3. 转换为布尔型

Boolean()，将其他类型转换为布尔型，结果为true或者false

<script>console.log(Boolean(2));   //输出trueconsole.log(Boolean(0));   //false
</script>

标识符

标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字

感谢黑马程序员分享的web前端视频：https://www.bilibili.com/video/BV1ux411d75J?p=14