JavaScript简介

概念

 **一种运行在客户端的脚本语言(**script就是脚本的意思) .<br />    JavaScript 是一种轻量级的编程语言,是可插入 HTML 页面的编程代码。avaScript 插入 HTML 页面后，可由所有的现代浏览器执行.

用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。<br />    脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<body>
    <script>
        /* 内嵌式写法:写在html页面里面 */
        alert('你压着我头发了')
    </script>
</body>

JS引入方式

内嵌式:

<body>
    <script>
        /* 内嵌式写法:写在html页面里面 */
        alert('你压着我头发了')
    </script>
</body>

外链式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外链式:引入外部的js文件 -->
    <script src="./yy.js"></script>
</head>
<body>
</body>
</html>

注意:

script标签既有外链文件,又有内嵌代码时, **只执行外链文件**<br />    如果想要内嵌代码执行,需要重新开一个script标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- script标签既有外链文件,又有内嵌代码,到底执行哪一个??  只执行外链文件
         如果想要内嵌代码执行,重新开一个script标签
    -->
    <script src="./yy.js">
        alert('要不,你把头发扎一下!')
    </script>
</head>
<body>
</body>
</html>

JS作用

   表单动态校验(或者密码强度的检测)    最初目的<br />    网页的特性<br />    服务端的开发(Node.js)<br />    桌面程序<br />    app<br />    控制硬件-物联网<br />    游戏开发(cocos2d-js)<br />        ......

JS组成

一般认为JavaScript由三部分组成

ECMAScript: 基础语法
DOM: 文档数据模型
BOM: 浏览器对象模型

1) ECMAScript

ECMAScript 是由ECMA（原欧洲计算机制造商协会）进行标准化的一门编程语言, 主要规定了像变量, 数据类型, 流程控制, 函数等基础语法

2) DOM和BOM

W3C: 万维网联盟 (World Wide Web Consortium) 主要是完成HTML和CSS及浏览器标准化的研究, 是一个非盈利性的公益组织, 主要由大公司和开发人员组成
其中,

DOM是由W3C组织制定的标准, 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色、事件等）

BOM是由各个浏览器厂商根据DOM在各自浏览器上的实现, 不同的浏览器会略有差异, 通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

JS输入输出

弹出输入框:
var 变量名 = prompt (‘ ‘)
输出:
第一种方式—> alert( 变量名)
(弹出框展示, 给用户看)
第二种方式—> console.log(变量名)
(输出到控制台, 给程序员看)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
      // 弹出输入框
      var age=prompt("请输入你的年龄") /* age用来接收用户输入的年龄 */
      // 第一种方式展示:弹出框展示-->给用户看的
      alert(age)
      // 第二种方式展示:输出到控制台-->给程序员看的
      console.log(age)
  </script>
</body>
</html>

变量

什么是变量

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

变量是一个存放数据的容器(盒子), 由变量名和变量值组成
就好比, 通过房间号(变量名)可以找到某个人(变量值)

变量的作用

存储变化的数据

变量的使用

1, 声明变量

var ( variable )是一个 JS关键字, 用来声明变量, 后面跟变量名
uname/age就是变量名, 计算机通过这个名字就可以找到对应的内存空间, 进而访问到空间里的数据
```
// var 变量名
var uname
var age
```
2, 使用变量 ( 变量的赋值 )
```
// 变量名 = 变量值
age = 10  // 将数值10放到age对应的空间
```

变量使用时可以
A.先声明然后赋值也可以
B.声明的同时赋值 (里面的值可以修改)

<body>
    <script>
        /* 变量使用的第一种方式:先声明然后赋值 */
        /* 声明一个变量 */
        var username 
        /* 赋值 */
        username = '张三'
        /* 使用 */
        alert(username)/* 弹出 */
        console.log(username)/* 打印 */
        /* 变量使用的第二种方式:声明的同时赋值 */
        var age = 28
        console.log(age);
        /* 特点:里面的值可以进行修改 */
        age = 29
        console.log(age);
    </script>
</body>

变量命名规则

在JS中, 变量的命名是有一定的规则的

标识符: 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
变量名严格区分大小写, 如 app和App是两个不同的变量
不能以数字开头
不能是关键字或者保留字

推荐使用驼峰法 (首字母小写，后面单词的首字母需要大写)
如: myFirstName

<script>
        // 变量名不能以数字开头
           // var 111
           var _a
           var $aa
        // 严格区分大小写
            var A
            var a
        // 变量名不能是关键字或者是保留字
            // var var
            // var if
    </script>

数据类型

概念

  变量的数据类型就是在变量中保存的数据的类型.

var uname = '小小胖' // uname变量的数据类型就是字符型
var age = 1 // age变量的数据类型就是数字型

JavaScript是弱类型语言, 并没有严格的规定变量的类型, 换句话说, 变量的类型是可以改变的, 但是强烈不建议这么做,

常用的数据类型

简单数据类型(基本)

Number: 数字型
String: 字符型
Boolean: 布尔型
Undefined: 未定义
Null: 空 | 简单数据类型 | 说明 | 默认值 | | —- | —- | —- | | Number | 数字型, 包含整型和小数型, 如21, 0.2333 | 0 | | String | 字符型, 如’张三’, 字符串带引号 | ‘’(空字符) | | Boolean | 布尔型, 如true, false; 等价于1和0 | false | | Undefined | 未定义, 变量声明, 未赋值就是undefined | undefined | | Null | 空 | null |

数字型
示例
var num = 10 // num 数字型
var PI = 3.14 // PI 数字型
var num3 = 0xFF // 0x开头的是16进制数

console.log(Number.MAX_VALUE) // 数字型的最大值
console.log(Number.MIN_VALUE) // 数字型的最小值
console.log(Number.MAX_VALUE 2) // Infinity 无穷大
console.log(-Number.MAX_VALUE 2) // -Infinity 无穷大

console.log(‘小小胖’ - 100) // NaN 非数
这里注意一种特殊的数: NaN(Not a Number)非数

字符型
使用引号来表示一个字符串

单引号, 双引号都可以, 推荐使用单引号, HTML中一般使用双引号
引号成对使用

转义字符

转义符	解释说明
\n	换行符，n 是 newline 的意思
\\	斜杠 \
\‘	‘ 单引号
\“	” 双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

字符串拼接
在JavaScript中, +是一个很特别的符号, 可以用于字符串的拼接
var str = ‘hello ‘ + ‘world’
console.log(str) // hello world

布尔型
布尔类型有两个值：true 和 false. 其中

true 表示真
false 表示假

Undefined
一个变量声明了, 但是没有被赋值, 这时变量里会使用默认值undefined

Null
空

 <script>
        /* js是一个弱类型的语言 */
        var a = '10';
        console.log(typeof a);
        //- Number: 数字型
        var b1 = 10;
        var b2= 10.0;
        var b3 = 0xff;/* 十六进制 */
        console.log(typeof b1);//number
        //- String: 字符型(''或者""都可以)
        var c1 = '张三'
        console.log(typeof c1);//string
        //- Boolean: 布尔型(取值是true或者false)
        var d1 = true
        console.log(typeof d1);//boolean
        //- Undefined: 未定义
        var e
        console.log(e);//undefined
        //- Null: 空 (主要是给对象赋值,后面会讲)
        //转义字符
        var str = '我是一个\'高帅富\'程序员'
        //var str1 = "我是一个'高帅富'程序员"
        console.log(str);
        //+可以做字符串的拼接
        var cc = '1'+'2'
        console.log(cc);//12
    </script>

引用数据类型

Object: 对象

在JavaScript中, 一切都是对象

判断数据类型

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

var num = 18;
console.log(typeof num) // 结果 number

数据类型转换

1) 显式转换 ( 强制转换 )

     最常见的是字符型转数值型<br />强制转换也叫显示转换,其实是调用一些方法来实现数据类型的转换

   **String():将参数转成字符串**<br />**       Number():将参数转成数值**<br />            **注意: null 可以和数值进行转换,而undefined不可以**<br />**       Boolean():将参数转成Boolean的结果(true和false)**<br />**            结论: Boolean可以将任意的类型转成true或者false.  **<br />**                         0 null undefined 空字符串 可以转成fasle 其他都是true**

 <script>
        /* 强制转换也叫显示转换,其实是调用一些方法来实现数据类型的转换
            String():将参数转成字符串
            Number():将参数转成数值
                注意: null 可以和数值进行转换,而undefined不可以
            Boolean():将参数转成Boolean的结果(true和false)
                结论: Boolean可以将任意的类型转成true或者false.0 null undefined 空字符串 可以转成fasle 其他都是true

        */
       var a = String(100)
       console.log(a);
       console.log(typeof a);

       //var b = Number('100')
       //var b = Number('zd')//NaN not a number
       //var b = Number(true)//1
       //var b = Number(false)//0
       //var b = Number(null)//0
       var b = Number(undefined)//NaN not a number
       console.log(b);
       console.log(typeof b);

       //var c = Boolean('true')//true
       //var c = Boolean('zd')//true
       //var c = Boolean('false')//true
       //var c = Boolean(false)//false
       //var c = Boolean(1)//true
       //var c = Boolean(0)//false  ------
       //var c = Boolean(null)//false ------
       //var c = Boolean(undefined)//false ------
       var c = Boolean('')//false  ------

       console.log(c);
       console.log(typeof c);
    </script>

2) 隐式转换 ( 自动转换 )

什么是隐式转换
隐式转换就是JS引擎偷偷将类型转换了, 不让你知道
由于JavaScript是一种非常灵活的语言, 导致数据类型存在大量隐式转换, 这里面有很多坑.

任意类型的数据加上字符串,都会转成字符串
true,false,null和数值进行运算的时候,都会被自动转成数值

针对于+运算规律
如果+两端有一端是字符,就会执行字符的拼接
如果+两端没有一个是字符,就会使用Number()强转,然后再进行加法运算

 <script>
        /* 
            也叫 隐式转换
                任意类型的数据加上字符串,都会转成字符串
                true,false,null和数值进行运算的时候,都会被自动转成数值

            针对于+运算 规律
                如果+两端有一端是字符,就会执行字符的拼接
                如果+两端没有一个是字符,就会使用Number()强转,然后再进行加法运算

        */

        //var a = 1 + 'a';
        var a = true + 'a';
        console.log(a);

        var b = true + 1;
        console.log(b);

        var c
        var d = c + 1;
        console.log(c);//undefined
        console.log(d);//NaN

    </script>

运算符

运算符的分类

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号, 常用的有:

算数运算符
自增自减运算符
比较运算符
逻辑运算符
赋值运算符
1) 表达式和返回值
表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解：是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给开发者，称为返回值 ```javascript 1 + 1 // 是一个表达式, 返回值是2

var a = 100 a + 100 // 返回值是200

1 == ‘1’ // 返回值是true

<a name="sQM0F"></a>
## 2 算数运算符
算数运算符就是数学运算中的加减乘除

| **运算符** | **描述** | **实例** |
| --- | --- | --- |
| + | 加 | 20 + 10 = 30 |
| - | 减 | 20 - 10 = 10 |
| * | 乘 | 20 * 10 = 200 |
| / | 除 | 20 / 10 = 2 |
| % | 取模 | 返回余数18 % 2 = 0 ; 15 % 2 = 1 |

小数会存在精度丢失的问题<br />0.1 + 0.2 ===== 0.30000000000000004<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/26244239/1646310625367-8cf78122-92f3-424f-850b-1fc84a9e08ee.png#clientId=u96046970-03cd-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u723cc247&margin=%5Bobject%20Object%5D&name=image.png&originHeight=105&originWidth=340&originalType=url&ratio=1&rotation=0&showTitle=false&size=4534&status=done&style=none&taskId=ub6a15243-1af6-4db8-a126-c492dfbf380&title=)<br />因此, 不要直接拿小数进行比较!!!
```javascript
 <script>
        console.log(20*10);
        console.log(20/10);//商
        console.log(20%10);//余数

        console.log(1/2);//0.5

        console.log(1.0+2.0);
        console.log(0.1+0.2);//小数是无限接近某一个数
    </script>

3 自增自减运算符

自增自减都是对数字变量的操作
示例
var num = 1
num++
++num
下面这种是错误的
1++

1) 前置自增

++num: 先+1, 再返回结果
var num = 10
++num // 表达式返回11, 执行完后num的值是11

2) 后置自增

num++: 先返回结果, 再+1
var num = 10
num++ // 表达式返回10, 执行完后num的值是11

 <script>
        //注意点
            //只能使用在变量上
            //var a = 1++;  报错
            //console.log(a);

        //++在前. 先变量+1,再返回计算后的结果
        var num1 = 1;
        console.log(++num1);//2
        console.log(num1);//2

        //++在后  先把变量的值返回,然后变量再加1
        var num2 = 1;
        console.log(num2++);//1
        console.log(num2);//2

        //结论:不管++在前还是在后,最终变量的值都会加1

        var a = 10;
        var b = ++a +2;
        console.log(b);//13

        var a1 = 10;
        var b1 = a1++ +2;
        console.log(b1);//12

        var a2 = 10;
        var b2 = a2++ + ++a2;
        console.log(b2);//22

    </script>

4 比较运算符

比较运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果

运算符	说明	案例	返回值
<	小于	1 < 2	true
>	大于	1 > 2	false
<=	小于等于	1 <= 2	true
>=	大于等于	1 >= 2	false
==	等于(会隐式转换)	‘1’ == true	true
!=	不等于	NaN != NaN	true
===	全等, 判断类型和值	‘1’ === true	false

 <script>
        console.log('1' == true);//true 左右两边会自动用Boolean()进行转换,然后在比较 ('1'被转成了true)

        console.log('1' === true);//false  三个= 是全等于,不仅要求值相等,还必须是类型相同

        console.log(1 == '1');//true
        console.log(1 === '1');//false

        console.log(NaN == NaN); //false  六亲不认

        console.log(NaN != NaN); //true

    </script>

5 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符
后面开发中经常用于多个条件判断

运算符	说明	案例	返回值
&&	逻辑与 and	2>1 && 3 >2	true
\|\|	逻辑或 or	2>1 \|\| 3>2	true
!	逻辑非 not	!true	false

1) 逻辑与

全真为真, 一假为假

案例	返回值
true && true	true
false && true	false
true && false	false
false && false	false

2) 逻辑或

全假为假, 一真为真

案例	返回值
true \|\| true	true
false \|\| true	true
true \|\| false	true
false \|\| false	false

3) 逻辑非

真假互换

案例	返回值
!true	false
!false	true

4) 短路运算

当有多个表达式（值）做逻辑运算时
第一个表达式值可以确定结果时,就不再继续运算后边的表达式的值

逻辑与语法：表达式1 && 表达式2如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1console.log( 123 && 456 ); // 456
console.log( 0 && 456 ); // 0
console.log( 123 && 456 && 789 ); // 789

逻辑或语法：表达式1 || 表达式2

   **    如果第一个表达式的值为真，则返回表达式1**<br />**             如果第一个表达式的值为假，则返回表达式2**

<script>
      /* 
          作用
              用来连接多个条件
          生活中
              女孩子找男朋友   高 && 富 && 帅
              男孩找女盆友     白 || 富 || 美
              屌丝找          ! 女
      */

      //逻辑运算符的短路问题
      //逻辑与的短路问题 如果前面不成立,后面就不会运算
      var x = 3
      var y = 4
      console.log((x++ < 2) && (y++ > 5));//false
      console.log(x);//4
      console.log(y);//4

      //逻辑或的短路问题 如果前面成立,后面就不会运算
      var x = 3
      var y = 4
      console.log((x++ > 2) || (y++ > 5));//true
      console.log(x);//4
      console.log(y);//4
  </script>

6 赋值运算符

把数据赋值给变量的运算符

运算符	说明	案例
=	赋值	var a = 100
+=, -=	加, 减一个数后再赋值	var age = 10; age += 5
*=, /= ,%=	乘, 除, 取模后再赋值	var a = 5; age *= 2

<script>
        var a = 10
        a *= 5  // a = a * 5
        console.log(a);
</script>

7 三元运算符

语法:
条件表达式？表达式1：表达式2
说明：问号前面的位置是判断的条件，判断结果为bool型，为true时调用表达式1，为false时调用表达式2。

<body>
    <!-- 需求 求两个数的最大值 -->
    <script>
        /* 格式
                表达式1?表达式2:表达式3     ---表达式1是否成立? 成立就取表达式2的值,否则就取表达式3的值
        */
        var a = 10;
        var b = 20
        var max = a > b ? a : b
        console.log(max);

    </script>
</body>

8 运算符的优先级

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ — !
3	算数运算符	先 * / % 后 + -
4	关系运算符	>>=<<=
5	逻辑运算符	先 && 后 \|\|
6	赋值运算符	=

JavaScript 基础