JavaScript

一种运行在客户端（浏览器）的编程语言，实现人机交互效果

组成

ECMAScript：

规定了js基础语法核心知识

比如：变量、分支语句、循环语句、对象等。

Web APIs（接口）：

DOM操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器
注意DOM属于BOM

作用

网页特效（监听用户的一些行为让网页作出对应的反馈）
表单验证（针对表单数据的合法性进行判断）
数据交互（获取后台的数据，渲染到前端）
服务端编程（node.js）

切换按钮案例

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 </style>
 </head>
 <body>
 <button>点击</button>
 </body>
 <script>
 // 更换背景按钮
 document.querySelector("button").onclick=function(){
 document.body.style.backgroundColor="black";
 }
 </script>
 </html>

添加JavaScript方式

1、内部JavaScript

直接写在html文件里，用Script标签包住

规范Script标签写在上边

<body>
    <script>
    alert('嗨！！！')
    </script>
 </body>

注意事项

我们将

如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。

因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

2、外部JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中

<body>
  <script src="js/flexible.js"></script>
  </body>

注意事项

script标签中间无需写代码，否则会被忽略！
外部javaScript会使代码更加有序，更易于复用，且没有了脚本的混合，html也会更加易读。

3、内敛JavaScript

代码写在标签内部

语法：

    <body>
    <button onclick="alter('逗你玩~')">点击我月薪过万</button>
    </body>

注意事项

此处作为了解即可，但是后面vue框架会用这种模式

注释

单行注释符号：// 快捷键：ctrl+/
块注释符号：/* */ 快捷键：shift+alt+A

变量

1、声明变量

语法：

let 变量名
let age;

声明变量有两部分构成：声明关键字、变量名（标识）
let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

2、变量赋值

语法

<script>
let username='张三';
console.log(username);

let age=18;
console.log(age);

let height=160,weight=110;
console.log(height+weight);

</script>

定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

3、更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

注意：let不允许多次声明一个变量

4、声明多个变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

let one=10,two=20,three;

交换变量案例

<script>
let one=10,two=20,three;
three=one;
one=two;
two=three;

console.log('one'+'='+one);
console.log('two'+'='+two);

</script>

变量命名规则与规范

变量数组

数据类型

number数字型

即我们数学中学习到的数字，可以是整数、小数、正数、负数。

let age=18

注意事项

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认

Java是强数据类型 例如 int a = 3 必须是整数

2. ### string字符串型

通过单引号（''）、双引号（""）或反引号（`）包裹的数据都叫字符串（推荐单引号）

let username='张三';
 console.log(username);
document.write(username+' ');

字符串拼接

let UserName=prompt('请输入名字'),UserAge=prompt('请输入年龄'),UserSex=prompt('请输入性别')
document.write(`大家好，我叫${UserName},年龄${UserAge},性别${UserSex}<br>`)

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
必要时可以使用转义符 \，输出单引号或双引号

boolean布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

let isCool=true
isCool=false

undefine未定义型

（只有一个值 undefined ）

什么情况出现未定义类型？

答：只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

let age
document.write(age) //undefind

工作中的使用场景：

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

null空类型

null 表示值为空

( 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null )

null 和 undefined 区别：

undefined 表示没有赋值
null 表示赋值了，但是内容为空

类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

如：使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

let numone=prompt('请输入第一个数值'),numtwo=prompt('请输入第二个数值'),numthree
numthree=numone+numtwo
console.log(numthree,typeof numthree) //100200 string

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

方法

- 号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

( +号作为正号解析可以转换成Number )

<script>
console.log(11+11) //22
console.log('11'+11) //1111
console.log(11-11) //0
console.log(1*1)  //1
console.log('1'*1) //1
console.log(typeof '123') //string
console.log(typeof + '123') //number
console.log(+'11'+11) //22
</script>

显式转换

转换为数字型

Number(数据)
- 转换数据类型
- 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据

let str='132px'
console.log(parseInt(str))//打印数字型 ‘132’

let str1=123+''
let str2=Number(str1)
console.log(typeof str1)//转换前是字符串型
console.log(typeof str2)//转换后是数字型

parsenInt(数据)
- 只保留整数

let numone=prompt('请输入第一个值'),numtwo=prompt('请输入第二个数值'),numthree
numthree=parseInt(numone)+parseInt(numtwo)
console.log(numthree)

let str='132px'
console.log(parseInt(str))//打印数字型 ‘132’

parseFloat(数据)
- 可以保留小数

let numone=prompt('请输入第一个值'),numtwo=prompt('请输入第二个数值'),numthree
numthree=parseFloat(numone)+parseFloat(numtwo)
console.log(numthree)

转换为字符型

String（数据）

let num1=123
let str=String(num1)//转换方法一
console.log(typeof num1)//转换前是数字型
console.log(typeof str)//转换后是字符串型

变量.toString（进制）

let num1=12
console.log(num1.toString())//打印出 字符串‘12’

let num1=123
let str =num1.toString()//转换方法二
console.log(typeof num1)//转换前是数字型
console.log(typeof str)//转换后是字符串型

订单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    table{
        text-align: center;
        border-collapse: collapse;
    }
    </style>
</head>
<body>
    
</body>
<script>

  let goodsName="红米手机",price=1999,count=prompt("购买数量"),total,address=prompt("地址")

 total=parseInt(price)*parseInt(count)
 document.write(`
<table border="1" align="center">
    
    <caption>
        <h2>订单付款确认页面</h2>
    </caption>
<thead>
    <tr>
          <th>商品名称</th>
            <th>商品价格</th>
           <th>商品数量</th>
             <th>总价</th>
            <th>收货地址</th>
    </tr>
 </thead>
   <tbody>

    
   <tr>
        <td>${goodsName}</td>
       <td>${price}</td>
        <td>${count}</td>
       <td>${total}</td>
        <td>${address}</td>
    </tr>
</tbody>
</table>`)
</script>
</html>

运算符

数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

+：求和
-：求差
*：求积
/：求商
%：取模（取余数）

console.log(1+1) //2
console.log(1*1) //1
console.log(3-2) //1
console.log(6/3) //2
console.log(10%6) //求余4

运算优先级

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

乘、除、取余优先级相同
加、减优先级相同
乘、除、取余优先级大于加、减
使用 () 可以提升优先级

（总结：先乘除后加减，有括号先算括号里面的）

console.log(1+2*3) //7
console.log(10-8/2) //6
console.log(2%5+4*2)  //10

运算符案例

赋值运算符

定义：将等号右边的值赋予给左边, 要求左边必须是一个容器

let num1=1
num1 +=1
console.log(num1)

let num1=1
num1 -=1
console.log(num1)

let num1=1
num1 *=1
console.log(num1)

let num1=1
num1 /=1
console.log(num1)

let num1=1
num1 %=1
console.log(num1)

一元运算符

自增
- 符号：++
- 作用：让变量的值 +1
自减
- 符号：--
- 作用：让变量的值 -1

使用场景：经常用于计数来使用。比如进行10次操作，用它来计算进行了多少次了。

前置自增：先自加再使用（记忆口诀：++在前先加）

// 前置自增
let a=1
console.log(++a + 2)//结果为4
console.log(a)//结果为2
// i先自加1，变成2之后，在和后面的2相加

后置自增：先使用再自加（记忆口诀：++在后后加）

//后置自增
let i=1
console.log(i++ + 2)// 结果为3
console.log(i)//自加 结果为2
//此时i是1  先和2相加 输出完毕后，i再自加++  结果为2

案例

let i=1
console.log(i++ + ++i + i)//7
//第一部分 先打印i=1 , 然后自加i=2  
//第二部分 i=2 --> ++i=3
//第三部分 i=3


let k=5
console.log(--k)//4
console.log(k--)//先打印  4
console.log(k)//然后自减 打印为 3

比较运算符


> ： 左边是否大于右边
<： 左边是否小于右边
 >=： 左边是否大于或等于右边
<=： 左边是否小于或等于右边
==： 左右两边是否相等
===： 左右两边是否类型和值都相等
!==： 左右两边是否不全等
比较结果为boolean类型，即只会得到true或false

console.log(3<=3) //true
console.log(3==2) //false
console.log(3=='3') //true
console.log(3==='3')//false
console.log(3===3)//true
console.log(3 !=='3') //true
console.log('A'>'B')//false 先把字符串 转换成数字 然后才能做大小比较
console.log('你'>'我')//false 同上
console.log(NaN===NaN)//false NaN=A || NaN=B 代码不一致
console.log(0.4+0.2==0.6)//false js处理小数有问题 需要补充精度问题
console.log(4>Number('3'))//true

= 和 == 和 === 怎么区别？

= 是赋值
== 是判断只要求值相等，不要求数据类型一样即可返回true
=== 是全等要求值和数据类型都一样返回的才是true (开发常用)

（返回结果： true 或者 false ）

逻辑运算符

let money=1
console.log(money===1||money===0) //true

let money1=1
console.log(money===1 && money===0) //false

let man=1
console.log(!man)//false

逻辑运算符里的短路 ( 短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行 )

console.log(2>10&&1<3&&3>1&&9>5)//false

console.log(2>10||1<3)//true


//或运算 左边为false（不满足）就短路 
let rain=true
rain||console.log('去玩')// false

let rain=false
rain||console.log('去玩')// true '去玩'


//与运算 左边为ture（满足）就短路
let rain=true
rain&&console.log('去玩')// ture '去玩'

let rain=false
rain&&console.log('去玩')// false 


//&&:一假全假  ||：一真则真

JavaScript基础知识点

JavaScript

组成

作用

添加JavaScript方式

1、内部JavaScript

注意事项

2、外部JavaScript

注意事项

3、内敛JavaScript

注意事项

注释

变量

1、声明变量

2、变量赋值

3、更新变量

4、声明多个变量

变量命名规则与规范

变量数组

数据类型

number数字型

boolean布尔型

undefine未定义型

null空类型

类型转换

隐式转换

方法

显式转换

转换为数字型

转换为字符型

运算符

运算优先级

赋值运算符

一元运算符

比较运算符

逻辑运算符