JavaScript+jQuery+ES6入门到放弃之JavaScript基础

博主： Arvin
发布时间：2022 年 08 月 30 日
1485 次浏览
暂无评论
5410字数
分类： JavaScript

## JavaScript概述

**JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言**

### 特点

* 向HTML页面中添加交互行为
* 脚本语言，语法和Java类似
* 解释性语言，边执行边解释

### 组成

* ESMAScript: 主要描述JavaScript的语法、变量、数据类型、运算符、逻辑控制语句、关键字、对象等等...
* DOM(Document Object Model, 文档对象模型): 主要用于访问和操作HTML文档,例如获取a标签中的文本值,鼠标悬浮至图片上时添加动画效果等等...
* BOM(Browser Object Model,浏览器对象模型): 主要用于操作浏览器对象,例如:打开一个新的浏览页面、调整浏览器窗体大小、前进与后退等操作...

## JavaScript的基本结构

### 语法

```javascript
<script>
//JavaScript 语句;
</script>
```

**注意：**

在使用JavaScript时,可以使用 `<script>`标签将代码包裹后在嵌入HTML文档中。浏览器在遇到 `<script>`开始标签时,将逐行读取代码,直到遇到 `</script>`结束标签为止。

在编写网页时，`<script></script>`标签可以放在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存。

</div>

### 📌在网页中如何引入JavaScript代码

* 内部JavaScript脚本: 适用于代码量较少的单个页面
* 外部JavaScript文件 ⭐**️推荐**

* 适用于代码量多，且可以重复应用于多个页面
  * 随着后续项目规格增加，最为推荐
  * 语法: `<script src="脚本文件路径"></script>`
* 行内JavaScript代码

* 适用于代码量极少的情况
  * 增加了HTML代码，没有将结构与交互分离开，不推荐使用

## JavaScript核心语法

### 📌变量

**🔖声明变量：** `var 变量名;`

**注意:** 变量名区分英文字母大小写，所以字母大小写不同的变量名则表示不同的变量
</div>

**变量命名建议**

* 需见名知意，即具有语义化
* 使用驼峰式命名(首字母小写,后续字母均需大写,例如: firstName)

语法扩展：

```javascript
var 变量1,变量2, 变量3 = 值;    //声明多个变量同时给单独变量赋值
var 变量名1 = 值;    //声明变量时直接赋值
变量名2 = 值;   //直接省略var关键字创建变量   不推荐,易出错
```

### 📌数据类型

#### **基本数据类型**

* number: 整数、浮点数

* 不仅包括所有的整型变量，还包括所有的浮点型变量
  * 十进制：默认    **`var i = 20;`**
  * 八进制：以0开头，其后的数字可以是任何八进制数字（0~7）  **`var i = 012;`**
  * 十六进制：以0x或0X开头，其后的数字是任意的十六进制数字和字母（0~9和A~F） **`var i = 0x91;`**
  * 特殊数据类型: NaN（Not a Number）：表示非数字
* string: 单字符、字符串

* **`var txt = 'this is string text'; //声明一个string类型的变量,单引号或双引号均可`**
  * 常用方法

`charAt(index)`  →  返回在指定位置的字符
    `indexOf(str,index)`  →  查找某个指定的字符串在字符串中首次出现的位置
    `substring(index1,index2)` →  返回位于指定索引index1和index2之间的字符串，包括索引index1对应的字符，不包括索引index2对应的字符
    `split(str)`  →  将字符串分割为字符串数组
    `replace(regexp/substr,replacement)`  →  在字符串中用一些字符替换另一些字符

</div>
  * 语法: **`字符串对象.方法名();`**
  * 更多方法请查阅: [https://www.runoob.com/jsref/jsref-obj-string.html](https://www.runoob.com/jsref/jsref-obj-string.html)
* boolean: true、false

#### 特殊数据类型

* null(空)和undefined(未定义,变量声明未赋值时,则为未定义)
  * undefined派生自null,在JavaScript把它们定义为相等的
  * 区别

> 1. undefined表示没有为变量设置值或属性不存在
    > 2. null表示变量是有值的，只是其值为null
    >

#### typeof()

语法： `typeof(值或变量);`

* 用于判断某个值或变量的数据类型
* 返回值的数据类型
  * number：整数或浮点数
  * string：使用单引号或双引号声明的字符串
  * boolean：true或false
  * object：空类型，或者是一种引用类型：如对象、函数、数组
  * undefined：未定义数据类型的变量

### 📌运算符

* 算术运算符: +、-、*、/、%、++、—
* 比较运算符: >、<、>=、<=、==、!=、===、!==

* 注意:
    <div class="tip inlineBlock warning simple">

1. **==：用于一般比较，在比较时会自动进行数据类型隐式转换**
    2. **===：用于严格比较，只要数据类型不匹配，就返回false** 
</div>

**案例演示：**

```javascript
    var i = "10";
    var k = 10;
    console.log(i == k);  //== 只比较值是否相等,返回:true
    console.log(i === k); //=== 比较值和数据类型是否相等,返回:false
    ```
* 逻辑运算符: &&、||、!
* 赋值运算符: =、+=、-=

### 📌控制语句

* if条件判断语句
  ```javascript
  if(条件表达式) {
      //条件为真时要执行的代码
  } else {
      //条件为假时要执行的代码
  }
  ```
* switch选择结构
  ```javascript
  switch (条件表达式) {
      case常量1:
          //JavaScript语句1;
      break;
      case常量2:
          //JavaScript语句2;
      break;
      ...
      default:
          //JavaScript语句3;
  }
  ```
* while循环结构
  ```javascript
  while(条件表达式) {
      //JavaScript代码;
  }
  ```
* do-while循环结构
  ```javascript
  do {
      //循环体
  }while(条件表达式);
  ```
* for循环
  ```javascript
  for(初始化循环变量;  条件表达式;  循环变量迭代) {
      //JavaScript代码;
  }
  ```
* foreach遍历
  ```javascript
  //声明数组
  var arr = ["张三", "李四", "王五", "赵六", "王麻子"];
  //使用foreach循环遍历数组
  arr.forEach(item => {
      //使用foreach遍历数组时,item为数组中具体的项
      console.log(item);
  });
  ```
* for-of循环遍历
  ```javascript
  //声明数组
  var arr = ["张三", "李四", "王五", "赵六", "王麻子"];
  //使用for-of循环遍历数组 [推荐适用于遍历数组]
  for (const item of arr) {
      //使用for-of遍历数组时,item为数组中具体的项
      console.log(item);
  }
  ```
* for-in循环遍历
  ```javascript
  /***遍历数组***/
  //声明数组
  var arr = ["张三", "李四", "王五", "赵六", "王麻子"];
  //使用for-in循环遍历数组 [推荐适用于遍历对象]
  for (const key in arr) {
      //使用for-in遍历数组时,key为数组的下标
      console.log(arr[key]);
  }

/***遍历对象***/
  //创建对象
  const object = { name: '张三', age: 20 }
  //使用for-in遍历对象中的属性值 [使用for-of则出现异常]
  for (const key in object) {
      console.log(`属性名:${key} 属性值:${object[key]}`)
      /*
       * 输出结果:
       *  属性名:name 属性值:张三
       *  属性名:age  属性值:20
       */
  }
  ```
* 流程控制语句:
  * `break`: 终止整个循环,执行循环之后的代码语句
  * `continue`: 结束本次循环操作,继续下一次的循环操作

### 📌注释

* 单行注释: `// 注释内容`
* 多行注释
  ```javascript
  /*
   * 注释内容
   */
  ```
* 文档注释 [在“`JavaScript+Jquery+ES6入门到放弃之JavaScript函数`”演示案例中有体现]

### 📌浏览器提示对话框

* 提示框、对话框的作用:

* 向用户显示消息
  * 与浏览器中显示的网页没有关系，其不包含HTML和CSS
  * 对话框外观由操作系统及浏览器设置来决定
  * 都是同步和模态的, 显示对话框时代码会停止执行，而关掉对话框后代码又会恢复执行
* 警告框: `alert("提示信息");`
* 确认框:  `var res = confirm("提示信息");  //返回true、false`
* 输入接收框

```javascript
  //用户点击取消按钮时，res的值为null
  //如需接收number类型的数据，则需要通过parseInt()、parseFloat()转换
  //在执行转换前，请使用isNaN(res)判断用户输入的是否为数字
  var res = prompt("请输入今天是几月几号","默认值");  //返回值为string

//演示案例: 实现加减乘除四则运算
  var num1 = prompt("请输入第一个数字:")  //用户输入: 10
  var num2 = prompt('请输入第二个数字:')  //用户输入: 40
  var opt = prompt("请输入运算符:", "+、-、*、/")  //用户输入: +
  var result = 0;
  switch (opt) {
      case '+':
          result = num1 + num2;
          break;
      case '-':
          result = num1 - num2;
          break;
      case '*':
          result = num1 * num2;
          break;
      default:
          result = num1 / num2;
          break;
  }
  console.log("计算之后的结果为:" + result);   //输出: 1040
  //为什么会输出: 1040? 解答: 因为操作符"+"在JavaScript中有不仅有算术运算的功能还有字符串拼接的功能,所以输出结果为1040
  //而当用户输入"-"、"*"、"/"时,系统会将用户输入的数据进行数据类型转换,所以在其他操作符下计算结果将会正常

//如何解决?
  var num1 = parseFloat(prompt("请输入第一个数字:"))  //将用户输入的值转换为浮点数,注意: 如果用户输入的不是数值时,则会返回NaN(Not a number)
  ```

### 关键字与保留字

* **关键字:** break、delete、if、this、while、case、do、in、throw、with、catch、else、instanceof、try、continue、finally、new、typeof、debugger、for、return、var、default、function、switch、void
* **保留字:** abstract、debugger、float、long、short、boolean、double、goto、native、static、byte、enum、implements、package、super、char、export、import、private、synchronized、class、extends、int、protected、throws、const、final、interface、public、transient、volatile

---

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之JavaScript函数](https://jbea.cn/archives/529.html)
</div>

最后修改：2022 年 08 月 31 日

都滑到这里了，不点赞再走！？

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

JavaScript+jQuery+ES6入门到放弃之JavaScript基础

Arvin • 2022 年 08 月 30 日

## JavaScript概述

**JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言**

### 特点

* 向HTML页面中添加交互行为
* 脚本语言，语法和Java类似
* 解释性语言，边执行边解释

### 组成

## JavaScript的基本结构

### 语法

```javascript
<script>
//JavaScript 语句;
</script>
```

**注意：**

在编写网页时，`<script></script>`标签可以放在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存。

</div>

### 📌在网页中如何引入JavaScript代码

* 内部JavaScript脚本: 适用于代码量较少的单个页面
* 外部JavaScript文件 ⭐**️推荐**

* 适用于代码量多，且可以重复应用于多个页面
  * 随着后续项目规格增加，最为推荐
  * 语法: `<script src="脚本文件路径"></script>`
* 行内JavaScript代码

* 适用于代码量极少的情况
  * 增加了HTML代码，没有将结构与交互分离开，不推荐使用

## JavaScript核心语法

### 📌变量

**🔖声明变量：** `var 变量名;`

**注意:** 变量名区分英文字母大小写，所以字母大小写不同的变量名则表示不同的变量
</div>

**变量命名建议**

* 需见名知意，即具有语义化
* 使用驼峰式命名(首字母小写,后续字母均需大写,例如: firstName)

语法扩展：

### 📌数据类型

#### **基本数据类型**

* number: 整数、浮点数

* **`var txt = 'this is string text'; //声明一个string类型的变量,单引号或双引号均可`**
  * 常用方法

#### 特殊数据类型

* null(空)和undefined(未定义,变量声明未赋值时,则为未定义)
  * undefined派生自null,在JavaScript把它们定义为相等的
  * 区别

> 1. undefined表示没有为变量设置值或属性不存在
    > 2. null表示变量是有值的，只是其值为null
    >

#### typeof()

语法： `typeof(值或变量);`

### 📌运算符

* 算术运算符: +、-、*、/、%、++、—
* 比较运算符: >、<、>=、<=、==、!=、===、!==

* 注意:
    <div class="tip inlineBlock warning simple">

1. **==：用于一般比较，在比较时会自动进行数据类型隐式转换**
    2. **===：用于严格比较，只要数据类型不匹配，就返回false** 
</div>

**案例演示：**

### 📌控制语句

### 📌注释

### 📌浏览器提示对话框

* 提示框、对话框的作用:

//如何解决?
  var num1 = parseFloat(prompt("请输入第一个数字:"))  //将用户输入的值转换为浮点数,注意: 如果用户输入的不是数值时,则会返回NaN(Not a number)
  ```

### 关键字与保留字

---

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之JavaScript函数](https://jbea.cn/archives/529.html)
</div>

JavaScript+jQuery+ES6入门到放弃之JavaScript基础

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Java基础之JDK的安装

开启Visual Studio Code编写jQuery语法提示

C#-WinForms实现手写板

使用GSAP实现滚动条交互动画

HTML从入门到精通 - 初识HTML

JavaScript实现轮播图实例教程

来自雷雄辉同学的项目总结

T-SQL编程之数据的模糊查询

来自隆烜彬同学的项目总结

Typecho 网站总访客数以及页面加载总耗时代码

JavaScript+jQuery+ES6入门到放弃之JavaScript基础

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript+jQuery+ES6入门到放弃之JavaScript基础

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款