一、JavaScript代码的书写位置

JS书写方式分为：行内式、内嵌式、外链式

行内式（不推荐）

写在标签上的js代码需要依靠事件（行为）来触发

<!-- 写在 a 标签的 herf 属性上 -->
<a herf="javascript:alert('这是一个弹出层')";>点一下试试</a>

<div onclink="alert=('这是一个弹出层')">点一下试试看</div>

<!-- 注：onclink 是一个事件（点击事件），当事件发生时执行后面的 js 代码 -->

内嵌式

内嵌式的js代码会在页面打开的时候直接触发

<!-- 在 html 页面书写-一个 script 标签，标签内部书写 js 代码 -->
<script type-"text/ javascript">
    alert( '我是一个弹出层' )
</script>
    
<!-- 注: script标签可以放在 head 里面也可以放在 body 里面 -->

外链式（推荐）

外链式js代码只要引入了html页面,就会在页面打开的时候直接触发

新建一个 .js 后缀的文件，在文件内书写js代码，把写好的js文件引入html页面

 // 我是index.js文件
 alert('我是一个弹出层')

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index. js"></script>
 
<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

二、JS中的注释

习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员着的
写好注释，有利于我们阅读代码

单行注释

一般用来描述下一行代码的作用

可以直接写两个 / ，也可以按ctrl + /

// 我是一个单行注释
    
// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')

多行注释

一般用来写-大段话，或者注释一段代码

可以直接写 /* */ 然后在两个星号中间写注释，也可以按shift + alt + a

/* 我是一个多行注释 */

/*
    注释的代码不会执行
    alert('我是一个弹出层')
    alert('我是一个弹出层')
*/
alert('我是一个弹出层')

三、变量

变量指的是在程序中保存数据的一个容器
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据，向内存中存储一个数据，给这个数据起一个名字，为了以后再次找到
变量的本质是内存中一个存储单元
语法：var变量名 = 值

定义变量及赋值

//定义一个变量
var num;

//给一个变量赋值
num = 100;

//定义一个变量的同时给其赋值
var num2 = 200;

注意:

一个变量名只能存储一个值
当再次给一个变量赋值的时候，前面一次的值就没有了
变量名称区分大小写(JS 区分大小写)

变量的命名规则和命名规范

规则:

一个变量名称可以由 数字、字母、英文下划线( _ )、美元符号($) 组成
严格区分大小写
不能由数字开头，不要使用中文汉字命名
不能是保留字或者关键字
不要出现空格

规范:

变量名尽量有意义(语义化)
道循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

访问变量值

控制台输出语句

引号中的内容被打印显示到控制台窗口

console.log('输出内容")

变量名值被打印显示到控制台窗口

console.log(变量名)

变量内存结构图

关于变量本质理解：变量是内存中一个存储单元

计算机执行的程序都会被加载来内存执行
内存会被分成两个区域:栈区域和堆区域
var num创建的变量被存储栈区域

先在内存中分配一个存储单元,num指向这个存储单元，将10存储到名为num的存储单元中。

var num = 10

内部结构图.png

四、数据类型

是指我们存储在内存单元中值的类型

好比不同容器可以放不同类型的东西，如:抽屉，可以放钥匙，也可以书本，还可以放money

根据容器放的东西的不同，将其分成不同类型，通常分为两大类基本数据类型和复杂数据类型

基本数据类型

数值类型(number)
- 一切数字都是数值类型(包括二进制，十进制，十六进制等)
- NaN (not a number) ，一个非数字
字符串类型(string)
- 被引号包裹的所有内容(可以是单引号也可以是双引号)
布尔类型(boolean)
- 只有两个(true或者false)
null类型(null)
- 只有一个，就是 null，表示空的意思
undefined类型(undefined)
- 只有一个，就是 undefined，表示没有值的意思

复杂数据类型

对象类型(object)
函数类型(function)
......

判断数据类型

typeof

使用typeof关键字来进行判断

//第一种使用方式
var n1 = 100;
console.log(typeof n1);

//第二种使用方式
var s1 = 'abcdefg" ;
console.log(typeof(s1));

isNaN(x)

isNaN(x)函数用于检查其参数x是否是非数字值,是非数字值返回true，否则返回false

//如果变量是—个数字
var nl = 100;
console.log(isNaN(n1)); /l/=>false

//如果变量不是一个数字
var s1 = "Jack "
console.log(isNaN(s1)); 1/=> true

注:检查的值是数值形字符串会自动转为数字再判断

var a = '100'/ '100' -> 100
console.log(isNaN(a)) /l false

提示: isNaN()函数通常用于检测 parseFloat()和parseInt()的结果，以判断它们表示的是否是合法的数字。当然也可以用isNaN()函数来检测算数错误，比如用О作除数的情况。

数据类型转换

数据类型之间的转换，比如数字转成字符串，字符串转成布尔，布尔转成数字等

其他数据类型转成数值
1. Number(变里)
  - 可以把一个变量强制转换成数值类型
  - 可以转换小数，会保留小数
  - 可以转换布尔值
  - 遇到不可转换的都会返回NaN
  示例
```
"=>0"100'=> 100 'hello'=> NaN- Number(true) => 1
 Number(false)=> 0 - Number(null)=> 0
 Number(undefined) => NaN
```
2. parseInt(变里)
  - 从第一位开始检查，是数字就转换，直到一个不是数字的内容
  - 开头就不是数字，那么直接返回NaN
  - 不认识小数点，只能保留整数
3. parseFloat(变里)
  - 从第一位开始检查，是数字就转换，知道一个不是数字的内容
  - 开头就不是数字，那么直接返回NaN
  - 认识一次小数点
4. 除了加法以外的数学运算
  - 运算符两边都是可运算数字才行
  - 如果运算符任何一遍不是一个可运算数字，那么就会返回NaN
  - 加法不可以用
其他数据类型转成字符串
1. 变里.toString()
  - 有一些数据类型不能使用toString()方法，比如undefined和null
2. String(变里)
  - 所有数据类型都可以
```
String(100) =>"100'
String(undefined) => 'undefined'String(true) = > 'true'
String(null) => 'null
```
3. 使用加法运算
  - 在JS里面，+ 由两个含义
  - 字符串拼接︰只要＋任意一边是字符串，就会进行字符串拼接
  - 加法运算：只有＋两边都是数字的时候，才会进行数学运算
其他数据类型转成布尔
1. 在js中，只有 ' ' 、0 、null 、undefined 、NaN 这些是false，其余都是true

五、运算符

在代码里面进行运算的时候使用的符号，不光只是数学运算，在js里面还有很多的运算方式

数学(算术)运算符
1. +
  - 只有符号两边都是数字的时候才会进行加法运算
  - 只要符号任意一边是字符串类型，就会进行字符串拼接
2. —
  - 会执行减法运算
  - 会自动把两边都转换成数字进行运算
3. *(x)
  - 会执行乘法运算
  - 会自动把两边都转换成数字进行运算
4. /
  - 会执行除法运算
  - 会自动把两边都转换成数字进行运算
5. %
  - 会执行取余运算
  - 会自动把两边都转换成数字进行运算
赋值运算符
1. =
  - 就是把 = 右边的赋值给等号左边的变量名
  - var num = 100
  - 就是把100赋值给num变量
  - 那么num变量的值就是100
2. +=
```
var a = 10;a += 10;
console.log(a); //=> 20
```
  - a += 10等价于a = a + 10
3. -=
```
var a = 10;
a -= 10;
console.log(a); //=> 0
```
  - a -= 10)等价于a = a - 10
4. *=
```
var a = 10;
a *= 10;
console.log(a); //=>100
```
  - a *= 10等价于a = a * 10
5. /+
```
var a = 10;a /= 10;
console.log(a); //=> 1
```
  - a /= 10等价于a = a / 10
6. %=
```
var a = 10;a %= 10;
console.log(a); // => 0
```
  - a %= 10等价于a = a % 10
比较运算符
1. ==
  - 比较符号两边的值是否相等，不管数据类型
  - 1 == '1'
  - 两个的值是一样的，所以得到true
2. ===
  - 比较符号两边的值和数据类型是否都相等
  - 1 === '1'
  - 两个值虽然一样，但是因为数据类型不一样，所以得到 false
3. !=
  - 比较符号两边的值是否不等
  - 1 != '1'
  - 因为两边的值是相等的，所以比较他们不等的时候得到false
4. !==
  - 比较符号两边的数据类型和值是否不等
  - 1 !== "1'
  - 因为两边的数据类型确实不一样，所以得到true
5. ＞=
  - 比较左边的值是否大于或等于右边的值
  - 1 >= 1 true
  - 1 >= 0 true
  - 1 >= 2 false
6. <-
  - 比较左边的值是否小于或等于右边的值
  - 1 <= 2 true
  - 1<- 1 true
  - 1 < 2 false
7. ＞
  - 比较左边的值是否大于右边的值
  - 1 > 0 true
  - 1 > 1 false
  - 1 > 2 false
8. <
  - 比较左边的值是否小于右边的值
  - 1 < 2 true
  - 1 < 1 false
  - 1 < 0 false
逻辑运算符
1. &&
  - 进行且的运算
  - 符号左边必须为true并且右边也是true，才会返回true
  - 只要有一边不是true，那么就会返回false
  - otrue && true (true)
  - otrue && false (false)
  - false && true (false)
  - false &8 false (false)
2. ||
  - 进行或的运算
  - 符号的左边为true或者右边为true，都会返回true
  - 只有两边都是false的时候才会返回false
  - otrue || true (true)
  - otrue || false (true)
  - false || true (true)
  - false || false (false)
3. !
  - 进行取反运算
  - 本身是true的，会变成false
  - 本身是false的，会变成true
  - !true (false)
  - lfalse (true)
自增自减运算符(一元运算符)
1. ++
  - 进行自增运算
  - 分成两种，前置++ 和 后置++
  - 前置++，会先把值自动+1，在返回
```
var a = 10;
console.log(++a);
//会返回11，并且把 a 的值变成11
```
  - 后置++，会先把值返回，在自动+1
```
var a = 10;
console.log(a++);
//会返回10，然后把 a 的值变成11
```
2. --
  - 进行自减运算
  - 分成两种，前置-- 和 后置--
  - 和++运算符道理一样
运算符优先级

JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。下表按从最高到最低的优先级列出JavaScript运算符。具有相同优先级的运算符按从左至右的顺序求值。

运算符优先级.png

JavaScript基础语法