JavaScript基本介绍（了解）

我们最开始认识的JS

web标准的三部分（网页的三大部分）

HTML：控制页面的结构
CSS：控制页面的样式
JavaScript：控制网页的行为（动态效果）

JavaScript的作用

在学习JS之前，首先要明白JS的作用是什么？

远古时期：表单校验

现在：无所不能

最初的JavaScript：表单校验

用于判断表单的输入是否正确（表单校验）

现在的JavaScript：无所不能

前端的本职工作：网页中完成各种各样的特效
后端的事情也能做：服务端开发（nodejs）
前后端交互：异步与服务器交互（AJAX）
命令行工具开发（nodejs）
桌面程序（Electron）
app开发（ReatNative）
控制硬件------物联网（Ruff）
游戏开发（cavans）
等等......

演示：Canvas游戏美女相册

什么是JavaScript（知道）

JavaScript是一种运行在 浏览器 的 脚本语言 ，现在也可以运行在服务器端

不同于HTML和CSS，JavaScript是一门编程语言，因此比HTML和CSS会更加复杂一下，学习的时间也会更长。

JavaScript历史（了解）

开始阶段：

1995年，Netscape(网景)公司的Brendan Eich(布兰登·艾奇)，这个大佬花了10天时间为Netscape Navigator2.0开发了一个名为LiveScript的脚本程序，目的是在浏览器中执行预检测程序（表单校验）

发展阶段：

后来Netscape在与Sun合作之后将其改名为JavaScript。目的是为了利用 Java 这个因特网时髦词汇
微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）

三足鼎立阶段：

CEnvi的scriptEase
Netscape的JavaScript
IE的JScript

标准化阶段：

1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，最终锤炼出来了ECMA-262，该标准定义了一门全新的脚本语言，名为ECMAScript。

JavaScript的组成 (记忆)

JavaScript = ECMAScript + DOM + BOM

ECMAScript（JavaScript的核心）：ECMAScript是一套标准，规范了语言的基本语法。
DOM（Document Object Model）：一套操作网页元素的方法
BOM（Browser Object Model）：一套操作浏览器功能的方法

JavaScript入门

JavaScript书写位置

css需要写在style标签中，而js需要写在script标签中

写在script标签中

<script>  alert('hello world');</script>

写在一个单独的.js文件中，通过script的src属性引入即可
```
<script src="demo.js"></script>
```

注意点：

script标签可以放在很多地方，但是我们一般写在body标签内容的最下面
如果给script标签上有src属性，里面的代码会直接忽略

注释

注释的作用就是：代码中可以看到，但是页面中不执行。注释仅仅起到一个提示的作用。

单行注释

// 这是单行注释， 单行注释只能写一行代码//  快捷键： ctrl + /  // 注释的内容

多行注释

/*    这是多行注释，在多行注释中可以换行    快捷键：alt + shift + a*//* 注释的内容 */

在大家练习的时候，就养成一个喜欢写注释的好习惯！

------------------------

5种输出语句

alert ：弹框

//alert会弹出一个：弹框/警告框/提示框/弹窗alert("hello world");

confirm ：确认框

//confirm弹出一个确定框confirm("偷电瓶车养你好不？");

prompt ：输入框

//prompt：弹出一个输入框，可以输入值prompt("请输入谁是最靓的仔！");

document.write ：网页中写入内容

//可以识别标签document.write("hello world");document.write("<h1>我是一个h1标签</h1>");

控制台输出

也叫做控制台打印数据

//打开调试工具，选择Console选项（控制台），在console中可以看到打印的信息console.log("hello word");

注意点：

alert、comfirm、prompt 三个用户体验不好，工作中几乎不用，但是在学习的时候会用到。
console.log经常用来打印数据，项目调试的时候非常有用！！

变量

变量：可以变化的量（相当于一个储存数据的容器）

作用：存储数据

在使用变量之前需要先声明，才能使用变量。（相当于先做出一个容器，才能装东西）

声明：用 **var（哇！）**来声明

比如存储用户的年龄~年龄是不断变化的，可以使用变量存储

变量使用的几种形式（认识即可）

规范：使用变量前要求声明

并且：初学者在写js一行语句写完之后，记得加上分号（规范），虽然不加分号也可以。

先声明，后赋值

var age;  // 声明一个变量 nameage = 18; // 一个等号表示赋值（把等号后面的赋值给前面的！）console.log(age);

同时声明和赋值
```
var age2 = 20;console.log(age2);
```

同时声明多个变量并赋值

用的不多 ，其实只是省略了一个var。

// ， => 并列var age3 = 30，age4= 40;// 相当于var age3 = 30;var age4 = 40;

直接声明变量，不赋值

变量的默认值是undefined

 var age5; console.log(age5);// undefined =》 表示只声明，没有赋值

不声明变量，直接赋值

虽然浏览器可以识别，但是不推荐，这种写法之后会出现问题！！
```
// 不推荐 ，不符合规范age6 = 60;console.log( age6 );
```

不声明变量，也不赋值变量，直接使用

会报错！！！

 // age7 is not defined 表示是没有定义（说白了就是没有声明和赋值直接使用）
console.log(age7);

注意点：

js代码一旦报错了，后面的代码就不再执行了
变量需要声明之后，再使用，养成一个良好的编程习惯（规范）。

变量的命名规则和规范

命名规则（法律：必须遵守！！不遵守会报错！！）

由数字、字母、_ 、$、组成，并且不能以数字开头

下列变量名是否符合规则?
```
a	    
1
age18
18age
2b
name
$name
_sex
&sex
theworld
a b
```
区分大小写（大写和小写表示两个不同的变量）
不能是关键字或保留字（不用专门记忆，随着学习的深入不断会使用到）

js中和语法相关的单词，不能作为变量名
- 关键字：现在版本中语法相关的单词
- 保留字：未来版本中语法相关的单词

命名规范（道德：建议遵守，不遵守也不会报错）

变量名要有意义
遵守驼峰命名法。从第二个单词开始首字母大写！

为了可读性更好

比如：userName、userAge

------------------------

ヾ(๑╹◡╹)ﾉ"赋值的练习

// 1. 
var  a = 10;
     a = 20;
console.log( a );// ??
// 2.
var a = 20;
var b = a; // 把a的值赋值给b
console.log( b );// ?? 

// 3.
var a = 10;
var a = 20; // 一个变量多次声明，只有第一次的声明生效！第二个声明相当于没写，但是赋值有效！！
console.log( a );// ??

ヾ(๑╹◡╹)ﾉ" 交换变量练习

需求：

var a = 10;
var b = 20;
//要求：
console.log( a ); // 20
console.log( b ); // 10

方法：

使用临时变量、交换两个变量的值 （必须记忆）

                 // a   b    temp
var temp = a;    // 10  20    10
       a = b;	 // 20   20   10
       b = temp; // 20   10    10

数据类型

数据可以有多种类型，比如可以是数字（100，234......），也可以是一个文本（'棠哥' 、'棠哥真帅！'，'小姐姐真漂亮'）、等等.......

我们需要学习数据类型，之后可以轻松的通过js操作不同的数据。

简单（基本）数据类型：

数字类型：number
字符串类型：string
布尔类型：boolean
undefined：声明未赋值
null：空类型

复杂数据类型：对象

对象的范围很大，细分为以下三种情况

数组：array
函数：function
对象：object

数字类型（number）

所有数字都是数字类型

整数

var num = 10;
var num = 200;

浮点数（小数）

浮点数就是小数

浮点数形式

var num = 0.1;

科学计数法（了解）

//e 10的多少次方  前面得有数字
//e+4 10^4
//e-4 10^-4
//当一次数字很大的时候，可以用科学计数法来表示
var num = 1e+4;  //1乘以10的4次方
var num = 1e-4;//1乘以10的-4次方

浮点数精度丢失问题（了解）

尽量不要使用小数进行比较

计算机在计算小数时，有时计算会不准确。

//在进行浮点数运算的时候，可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;// 特殊情况
//尽量少用浮点数进行运算，不要让浮点数进行比较。

------------------------

字符串类型（string）

使用双引号 " 或者 ' 包裹起来的字符

字符串的格式

//双引号和单引号必须成对出现  以单引号开始到单引号结束都为字符串/以双引号开始到双引号结束都为字符串
var str = 'hello world';
var str = "hello world";

字符串长度

每一个字符串都有一个length属性，表示字符串长度（字符的个数）

var str = "akdjflksjdflk";
console.log(str.length);

转义字符

1、如果要打印：好看的'外表'千篇一律

2、如果要打印：有趣的"灵魂"万里挑一

3、如果要打印：好看的'外表'千篇一律，有趣的"灵魂"万里挑一

怎么打印呢？？

// 单引号和双引号可以互相嵌套，但是不能嵌套自己
// 如果需要打印单引号和双引号，可以使用转义符
// ' => \'
// " => \"
console.log('你是喜欢\'好看\'的人，还是\"有趣\"的人');

代码

输出

\'

单引号

\"

双引号

\\

反斜杠

\&

和号

\n

换行符

\r

回车符

\t

制表符

\b

退格符

\f

换页符

字符串拼接（拼串）

字符串类型可以通过 + 进行拼接

比如：

var str = 'hello' + 'world';
console.log(str);// helloworld

+号的规则：

如果两边只要有一个是字符串类型，就是拼接的功能
如果两边都是数字类型，此时就是加法运算

ヾ(๑╹◡╹)ﾉ"小练习

// 下列哪一个选项可以打印出：我是棠哥
var nickname = '棠哥';
// A、console.log ( '我是' + 'nickname' );
// B、console.log ( '我是nickname' );
// C、console.log ( '我是' + nickname );

布尔类型（boolean）

布尔类型表示真或者假，只有两个值！！

true：真、对的、成立
false：假、错的，不成立

console.log( 3 > 2 );// true => 表示真/成立 console.log( 3 < 2 );// false => 表示假/不成立

注意点：

写法上区分大小写：不要写成True或者是False
'true' 和 true是两个东西，带引号的是字符串！！

undefined（声明未赋值）

非正常值：一个变量只声明，未赋值。不符合规范

var num;
console.log( num );// undefined 表示变量声明当未赋值

null

非正常值：表示变量已声明和赋值，只不过值为空。一般出现于获取页面元素未获取到的情况，web API阶段才会遇到

// 在web api 阶段才会遇到这种情况！先有印象
var div = document.getElementById('id');
console.log( div );

如何查看数据的类型（了解）

最方便的是通过数据的颜色判断
- Number类型的数据偏向蓝色
- String类型的数据是黑色
- Boolean类型的数据偏向紫红色
- Undefined的数据颜色是灰色
- Null的数据颜色是灰色

通过typeof来查看数据的类型

var num = 20 ;// numbervar str = 'abc';// stringvar bool = true;// booleanvar un = undefined;// undefinedvar nu = null;// object// 可以通过typeof来查看数据的类型console.log( typeof num );// numberconsole.log( typeof str );// stringconsole.log( typeof bool );// booleanconsole.log( typeof un );// undefinedconsole.log( typeof nu );// object (特殊情况，记忆即可)

字面量赋值与变量赋值（了解）

字面量（直接量）： 值是固定不变的，浏览器可以直接识别的量

简单数据类型比较简单，浏览器可以直接认识，都属于字面量（直接量）

// 不需要打印直接一眼就能看出来是什么类型的数据，就是字面量console.log(123);console.log("字符串");console.log(true);console.log(undefined);console.log(null);

字面量赋值与变量赋值

// 字面量赋值（直接量赋值）var num = 123；// 直接把具体的值赋值给num变量// 变量赋值 var age = num； // 通过num这个变量，把num变量的值给age变量

注意点：

打印字符串务必注意字符串是用引号包裹起来的，没有用引号包裹起来的文本会被当做变量！！！

一下结果会怎样？？

// 刚刚开始很容易犯错的点：想打印一个字符串，但是忘记写分号，最后打印成一个变量了。console.log("abc");console.log(abc);

JS基础一

JavaScript基本介绍（了解）

我们最开始认识的JS

JavaScript的作用

最初的JavaScript：表单校验

现在的JavaScript：无所不能

什么是JavaScript（知道）

JavaScript历史（了解）

JavaScript的组成 (记忆)

JavaScript入门

JavaScript书写位置

注释

------------------------

5种输出语句

变量

变量使用的几种形式（认识即可）

变量的命名规则和规范

命名规则（法律：必须遵守！！不遵守会报错！！）

命名规范（道德：建议遵守，不遵守也不会报错）

------------------------

ヾ(๑╹◡╹)ﾉ"赋值的练习

ヾ(๑╹◡╹)ﾉ" 交换变量练习

数据类型

数字类型（number）

整数

浮点数（小数）

浮点数形式

科学计数法（了解）

浮点数精度丢失问题（了解）

------------------------

字符串类型（string）

字符串的格式

字符串长度

转义字符

字符串拼接（拼串）

ヾ(๑╹◡╹)ﾉ"小练习

布尔类型（boolean）

undefined（声明未赋值）

null

如何查看数据的类型（了解）

字面量赋值与变量赋值（了解）