前端学习之JavaScript第二天

- 日理万妓 2022-05-09 05:26 252阅读 0赞

#                                            Javascript基础 #

### 一、复习昨天知识 ###

**    1、 概念**

Js是一门运行在客户端的编程语言。

**    2、组成**

☞Ecmascript       js语法标准

☞Dom                 js操作网页元素

☞Bom                   js 操作浏览器

**    3、特点**

☞简单易用

☞解释执行（js解释型的语言）

Js代码不通过编译，直接通过js引擎执行代码。

☞基于对象

**4、Js书写位置**

☞内嵌式写法

☞外连式写法

**5、Js 在页面中输入消息的几种方式**

☞alert(“”);

☞confirm(“”) ;

☞prompt(“”);         接收用户信息

☞console.log(“”);      在网页控制台中输出消息

☞document.write(“”);  直接在页面中输出消息，可以写上html标签。

注意的地方：

◆在每一段js代码结束后都要加上  “;”

**    6、变量**

☞变量就是用来存储数据的容器

☞ 通过var 关键字定义一个变量

var  n1;   //定义变量

☞变量的赋值

通过赋值运算符“=” 给变量赋值。

var  n2=123;     //定义变量并赋值为123

注意：如果想要比较两个变量是否相同，不能使用“=”进行比较。

☞变量的命名规范

◆不能使用纯数字或数字开头定义变量

◆不能使用纯特殊字符或者开头（“\_”除外）定义变量

◆不推荐使用汉字定义变量

◆不能使用关键字定义变量

◆不推荐使用保留字定义变量

◆js中区分字母大小写。

**    7、数据类型**

☞简单数据类型

◆number   数字类型

◆string     字符串类型

var   s1=”123”;   s1的数据类型字符串

◆Boolean   布尔类型

true      真 （正确的）

false     假（错误的）

◆undefined     变量未初始化

var   s1; 定义了变量，但是没有给变量赋值，那么该值的数据类型就是  undefined 类型

◆变量取值为null的时候

var   s1=null;  表示变量值为空，该变量在内存中是不存在的。真正的空。   s1的数据类型为 object

☞复杂数据类型

◆object    对象

◆Array        数组

**    8、数据类型的判断**

通过typeof(变量) 进行数据类型的判断

var   s1=123;  
           alert(typeof(s1));     //number类型

**    9、比较运算符**

> , < ,   >=  ,  <=  !=

☞比较运算符计算出的结果只有两种

◆true

◆false

**10、算术运算符**

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">运算符</p> </td> 
   <td style="vertical-align:top;width:396.95pt;"> <p style="margin-left:0cm;">结果</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp; +</p> </td> 
   <td style="vertical-align:top;width:396.95pt;"> <p style="margin-left:0cm;">&nbsp; 如果是数字类型的变量相加，那么结果为数字类型</p> <p style="margin-left:0cm;">&nbsp; 如果是非数字类型的变量相加，结果为字符串类型</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">-</p> </td> 
   <td style="vertical-align:top;width:396.95pt;"> <p style="margin-left:0cm;">&nbsp; 如果是非数字类型的变量相减结果为&nbsp; NaN</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">*</p> </td> 
   <td style="vertical-align:top;width:396.95pt;"> <p style="margin-left:0cm;">&nbsp; 同上</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">/</p> </td> 
   <td style="vertical-align:top;width:396.95pt;"> <p style="margin-left:0cm;">&nbsp; 同上 ，如果0作为除数，结果为infinity（无穷大）</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">%</p> </td> 
   <td style="vertical-align:top;width:396.95pt;"> <p style="margin-left:0cm;">&nbsp; 获取余数</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:93.4pt;"> <p style="margin-left:0cm;">()</p> </td> 
   <td style="vertical-align:top;width:396.95pt;"> <p style="margin-left:0cm;">&nbsp; 优先级&nbsp; 有括号先计算括号里面的值</p> </td> 
  </tr> 
 </tbody> 
</table>

**    11、带操作的赋值运算符**

![70][]

### **新知识** ###

**    1、Date()对象**

Date对象用于处理日期和时间。

![70 1][]

**    2、Math对象**

◆Math.ceil()   天花板函数    向上取整

![70 2][]

★如果是整数，取整之后是这个数本身

★如果是小数，对数进行向上舍入。

◆Math.floor()  地板函数

![70 3][]

★如果是整数，取整之后是这个数本身

★如果是小数，对数进行向下舍入。

◆Math.max()

![70 4][]

◆Math.min()

![70 5][]

◆Math.pow()

![70 6][]

◆Math.round()

![70 7][]

◆Math.random()

![70 8][]

**    3、数据类型转换**

1、数字类型转字符串

String()

![70 9][]

变量.toString()

![70 10][]

** **2、字符串转数字类型

◆Number

![70 11][]

★数字类型的字符串，转换之后得到的数字。

★非数字字符串，转换之后得到是NaN。

★小数类型的字符串，转换之后得到的是原数字。

◆parseInt

![70 12][]

★整数数字类型的字符串，转换之后得到的整数数字。

★数字开头的字符串，转换之后得到的是前边的数字。

★非数字开头的字符串，转换之后得到的是NaN。

★小数类型的字符串，转换之后取整。

◆parseFloat

★整数数字类型的字符串，转换之后得到的整数数字。

★数字开头的字符串，转换之后得到的是前边的数字。

★非数字开头的字符串，转换之后得到的是NaN。

★小数类型的字符串，转换之后得到的是原数字。

3、转布尔类型

Boolean()

![70 13][]

★数字和字符串转完之后为true。

★undefined、null、0转完之后为false.

4、隐式数据类型转换

在运算过程中，程序自己进行的数据转换(程序员没有操作)

**    4、逻辑运算符**

逻辑运算只有2个结果，一个为true,一个为false.

◆且&&

★两个表达式为true的时候，结果为true.

◆或||

★只要有一个表达式为true,结果为true.

◆非！

★和表达式相反的结果。

**    5、等号运算符**

“=”赋值运算符

“==”只判断内容是否相同，不判断数据类型。

“===”不仅判断内容，还判断数据类型是否相同。

!=  只判断内容是否不相同，不判断数据类型。

!==不全等于  不仅判断内容是否不相同，还判断数据类型是否不相同。

**        6、变量的集体声明**

![70 14][]

**        7、If...else  条件判断**

if(条件表达式){
        如果条件表达式结果为true,执行该处代码。 如果条件表达式结果为false,执行下边代码。 
    }else{
        如果条件表达式结果为false,执行该处代码。
    }

**8、If else嵌套**

if(条件表达式){
        如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
    }else  if(条件表达式){
        如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
    }else  If(条件表达式){
        如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
    }else{
        如果上边条件表达式结果都为false,执行该处代码。
    }

**    9、三元表达式**

表达式?结果1：结果2；

如果表达式结果为true,执行结果1，如果表达式结果为false,执行结果2.

可以理解为if else  的另外一种写法。

![70 15][]

**    10、代码调试**

◆先让程序运行一遍

◆f12   代码调试工具

◆

![70 16][]

◆刷新页面

◆找到一步步调试，每点击一次，执行一步。

![70 17][]

◆添加变量或者表达式到监视窗口。

选择变量或表达式右键add to watch.

![70 18][]

◆监视窗口

![70 19][]

如果有疑问联系博主：y19970821ywty

![70 20][]

要用到的工具，视频教程，关注公众号（Java学习之乐）直接免费获取：

![70 21][]

[70]: /images/20220509/bf4bb45f13cb46ad95b7bad350c29d1b.png
[70 1]: /images/20220509/639781d39e6c4986b2e8e04379ac99e0.png
[70 2]: /images/20220509/93d4c75079d24a918a1844f4bc423f8c.png
[70 3]: /images/20220509/26311c338b7742c79fa6f9a59e4f12bf.png
[70 4]: /images/20220509/dc3ce31069b64db18904fb9ee5fec4b8.png
[70 5]: /images/20220509/41e91447f8224c228ffb008c014115a6.png
[70 6]: /images/20220509/82766fe2282143bf919109d842af3464.png
[70 7]: /images/20220509/811844b9f21145269c0fd4eb18c3423e.png
[70 8]: /images/20220509/2487278ba4464e1a8806c18e0086f839.png
[70 9]: /images/20220509/c3ead01761b64eab89bb496a334e3d77.png
[70 10]: /images/20220509/5081dbb602f641fe9a35f2160a344231.png
[70 11]: /images/20220509/6e7a08f28085428bafe82d9a9aae0018.png
[70 12]: /images/20220509/6f0483374d24461483f1014b21c4604d.png
[70 13]: /images/20220509/9bc9143dec1d4f009ad8e0653b9e3668.png
[70 14]: /images/20220509/916f200e7184467c8140b88546b56942.png
[70 15]: /images/20220509/93229cc82d2b4859b9003e42443b1ad3.png
[70 16]: /images/20220509/e197bf61cb784b8c95782e6c9770564f.png
[70 17]: /images/20220509/42529c4d315647ba8923cdef9e5e0e38.png
[70 18]: /images/20220509/68c158ef523440459650f48f55f92c53.png
[70 19]: /images/20220509/6e398e9f32404eb7a73eb68e30b49ec0.png
[70 20]: /images/20220509/c33af78de5844555b77ce90acdd82032.png
[70 21]: /images/20220509/39a620b67c0d4b35bbde4287b513a8c1.png