day11_JS初识_语法

今日学习目标 : 入门HarmonyOS生态中 , ArkTS最基础的语法 JavaScript , 今天最主要的学习内容了解和掌握JavaScript的基础语法 , 并灵活的再后面开发过程进行使用

今日学习目标

1. 什么是JavaScript

2. JavaScript组成

3. JavaScript执行环境

4. JavaScript代码的书写位置

5. JavaScript中的注释

6. 变量 ( 重点 )

7. 变量命名规则和规范

8. 输出形式

9. 数据类型

10. 数据类型转换

11. 运算符

12. 基础知识题目

1. 什么是JavaScript ( 简称JS )

1. 首先要了解前端以及Harmony生态中网站的组成部分（网站的三层结构）

   • HTML 表示了你的页面内有什么，组成页面的骨架 （结构层）

   • CSS 表示了你的页面中每一个内容是什么样子的（样式层）

   • JavaScript（简称js） 表示了你的页面中每一个内容如何发生变化, 有什么行为内容（行为层）

2. JavaScript

   • 是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

2. JavaScript组成

1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型

2. BOM (Browser Object Model): 浏览器对象模型

   • 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等

3. DOM (Document Object Model): 文档对象模型

   • 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等

     

3. JavaScript执行环境

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码

4. JavaScript代码的书写位置

和 css 一样，我们的 js 也可以有多种方式书写在页面上让其生效

js 也有多种方式书写，分为 行内式， 内嵌式，外链式

1) 行内位置使用 ( 行内式 ) 不推荐

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

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>
​
<!-- 写在其他元素上 -->
<div οnclick="alert('我是一个弹出层')">点一下试试看</div>
​
<!-- 注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->

2) 内部位置使用 ( 内嵌式 )

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

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

3) 外部位置使用 ( 外链式 )

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

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

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

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

5. JavaScript中的注释

• 学习一个语言，先学习一个语言的注释，因为注释是给我们自己看的，也是给开发人员看的

• 写好一个注释，有利于我们以后阅读代码

1) 单行注释

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

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

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

2) 多行注释

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

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

javascript

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

6. 变量

1) 什么是变量

• 变量指的是在程序中保存数据的一个容器

• 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

• 也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他

• 语法： var 变量名 = 值

2) 定义变量及赋值

/*
var : 定义变量的关键字, 告诉浏览器, 我要定义一个变量了
空格 : 必须写, 区分 关键 和 变量名 的
变量名 : 你自己起的一个名字
= : 赋值符号, 把右边的内容, 给到左边的变量
值 : 你给你定义的变量赋的是什么值
*/
​
// 定义一个变量
var num;
​
// 给一个变量赋值
num = 100;
​
// 定义一个变量的同时给其赋值
var num2 = 200;

3) 注意事项

1. 一个变量名只能存储一个值

2. 当再次给一个变量赋值的时候，前面一次的值就没有了

3. 变量名称区分大小写（JS 区分大小写）

7. 变量命名规则和规范

- 规则： 必须遵守的，不遵守就是错1. 一个变量名称可以由 **数字**、**字母**、**英文下划线（_）**、**美元符号（$）** 组成2. 严格区分大小写3. 不能由数字开头，不要使用中文汉字命名4. 不能是 **保留字** 或者 **关键字**5. 不要出现空格
- 规范： 建议遵守的（开发者默认），不遵守不会报错1. 变量名尽量有意义（语义化）2. 遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

8. 输出 输入 形式

1) 输出形式1

以弹窗的形式展示给用户

// 以弹出层的形式展示给我们
alert('你好 世界')

2) 输出形式2

在页面中展示给用户

// 直接展示到我们的页面上
document.write('hello world')

3) 输出形式3

// 在控制台展示出来
console.log('大家好');

4) 选择输入框

// 这个选择框返回的是一布尔值
var name = confirm('你是程序员吗')
// 打印我们拿到的结果(也就是布尔值)
console.log(name)

5) 用户输入框

// 这个输入框返回的是用户输出的内容
var name = prompt('请输入你的姓名')
// 我们拿到的结果就是用户输入的结果
console.log(name)

9. 数据类型

是指我们存储在内存中的数据的类型

我们通常分为两大类 *基本数据类型* 和 *复杂数据类型(引用数据类型)*

1) 基础数据类型

1) 数值类型（number）

• 包含一切数字和数值相关内容

  • 整数 : 100, -100, 234

  • 浮点数 : 100.234, -0.456

  • 科学记数法 : 10e5

  • 其他进制表示

  • 二进制 : 0b100

  • 八进制 : 0o100

  • 十六进制 : 0x100

  • 无穷 : Infinity

  • 非数字 : NaN

// 整数
var n1 = 100
var n2 = -100
// 浮点数
var n3 = 100.2
var n4 = -100.2
// 科学记数法
// e5 => 指 10 的 5 次方
// 10e5 => 指 10 * 10的5次方
var n5 = 10e5
// 其他进制表示
var n6 = 0b100
var n7 = 0o100
var n8 = 0x100

2) 字符串类型 (string)

a) 被引号包裹的所有内容

单引号 ( '' )

双引号 ( "" )

反引号 ( `` )

ar s1 = 'hello world'
var s2 = "hello world"
var s3 = `hello world`
console.log(s1)
console.log(s2)
console.log(s3)

b) 注意

无论哪种引号, 必须成对出现

各种引号之前可以互相嵌套, 但是不能自己嵌套自己

反引号定义的字符串可以换行书写, 并且可以在字符串内直接使用 ${} 的形式解析变量

// 1. 可以换行书写
var str = `helloworld你好 世界
`
console.log(str)// 2. 可以直接在字符串内解析变量
var age = 18
// 单引号 和 双引号 不具备解析变量的能力
var s1 = '我是小千, 我今年 ${ age } 岁了'
console.log(s1)var s2 = `我是小千, 我今年 ${ age } 岁了`
console.log(s2)	

3) 布尔类型 (boolean)

表示肯定或否定时在计算机中对应的是布尔类型数据

只有两个（true 或者 false）

表示肯定的数据用 true，计算机中存储的就是1

表示否定的数据用 false，计算机中存储的就是0

/*布尔 Boolean+ true 表示真, 在计算机内存储的时候按照 1 存储+ false 表示假, 在计算机内存储的时候按照 0 存储
*/var b1 = true
var b2 = false
console.log(b1)
console.log(b2)

4) null类型

只有一个，就是 null，null值表示一个空对象指针

有值，但是是一个空值。

使用时需要给变量赋值为null，才能得到null

5) undefined类型

undefined也叫未定义是比较特殊的类型，本该有个值，但是没有 ，就是undefined

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

只有一个，就是 undefined，表示没有值的意思

/*空+ Undefined: 只有一个值=> undefined, 表示 没有=> 这里本该有一个值, 但是没有的时候, 叫做 undefined=> 一个变量声明为赋值, 就是 undefined+ Null: 只有一个值=> null, 表示 有一个空=> 这里真的有一个值, 这个值是一个空值=> 你需要给一个变量赋值为 null 才是 null
*/var u
// 需要拿到 u 变量的值来使用
// u 本该给我一个值, 让我显示, 但是没有
console.log(u)var n = null
// n 变量给我的值就是一个 空值
console.log(n)

2) 复杂数据类型

对象类型（object）

函数类型（function）

后面会详细的为大家详解复杂的数据类型

10. 数据类型转换

1) 数据类型检测

既然已经把数据分开了类型

我们就要知道我们存储的数据是一个什么类型的数据

我们就要知道每个变量的类型是什么

typeof

使用 typeof 关键字来进行判断

语法:

1. typeof 变量

2. typeof(变量)

返回值(结果): 以一个字符串的形式告诉你你检测的变量是什么数据类型

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

注意

typeof 的结果必然是一个字符串类型

当你需要检测两个内容的运算结果的时候, 必须要使用 () 包裹

var r1 = typeof 100 + 200
var r2 = typeof(100 + 200)
console.log(r1)
console.log(r2)

当你多个typeof连用的时候，返回值必然是一个'string'

console.log(typeof typeof 100); // string

isNaN()

可以使用 isNaN 这个方法来判断一个变量是不是一个合法的数字

isNaN ：is not a number

语法：

isNaN(要检测的数据)

返回值：布尔值

// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true//如果变量是这样的一个数据
var r1 = '123javas
console.log(isNaN(r1)); //=>false

Number.isNaN()

Number.isNaN() 方法用于判断传递的值是否为 NaN

并且检查其类型是否为 Number

如果值为 NaN 且类型为 Number，则返回 true，否则返回 false

console.log(Number.isNaN(123)); // false
console.log(Number.isNaN(0/0)); // true

2) 数据类型转换

数据类型之间的转转换

其他数据类型转换成数值类型

其他数据类型转换成字符串类型

其他数据类型转换成布尔类型

1) 其他数据类型转成数值

*Number(变量)*

语法:

Number(你要转换的数据)

返回值:

转换好的数值类型数据

转换规则:

把你要转换的内容当做一个整体

如果整体可以转换为一个合法数字, 那么就是这个数字

如果整体不可以转换为合法数字, 那么就是 NaN(not a number)

注意:

true 会转换为 1

false 会转换为 0

// 1. Number()
var s1 = '132abc'
console.log(s1)
console.log(typeof s1)
console.log('==========================')
// 开始转换
// 使用 Number 方法转换 s1 变量, 把结果赋值给 res 变量
var res = Number(s1)
console.log(res)
console.log(typeof res)

*parseInt(变量)*

语法:

parseInt(你要转换的数据)

返回值:

转换好的数值类型数据

转换规则:

不管你要转换的是什么数据, 都一位一位的看待

如果第一位就不能转换成合法数字, 那么直接给出 NaN, 停止转换

如果第一位可以, 那么继续转换第二位

以此类推, 直到遇到不能转换的为止

注意:

不认识小数点,遇到小数点就认为不是一个数字后面的就不检测了返回的就是点前面的整数部分

所以使用 parseInt() 还有一个取整功能

var s1 = '100.23456'
console.log(s1)
console.log(typeof s1)
console.log('=============================')
var res = parseInt(s1)
console.log(res)
console.log(typeof res)

*parseFloat(变量)*

语法:

parseFloat(你要转换的数据)

返回值:

转换好的数值类型数据

转换规则:

和 parseInt 一模一样

唯一的区别就是认识一位小数点

var s1 = '1.52rem'
console.log(s1)
console.log(typeof s1)
console.log('=============================')
var res = parseFloat(s1)
console.log(res)
console.log(typeof res)

*除了加法以外的数学运算*

只要不是进行加法运算, 都可以进行转换数字

num - 0

num * 1

num / 1

...

转换规则:

和 Number 方法一模一样

把数据当做一个整体看待

运算符两边都是可运算数字才行

如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN

加法不可以用

var s1 = '100'
console.log(s1)
console.log(typeof s1)
console.log('====================')
var res = s1 - 0
console.log(res)
console.log(typeof res)

2) 其他类型转成字符串

就是把其它的数据类型转换成字符串数据类型

*toString()*

语法:

你要转换的数据.toString()

返回值:

转换好的字符串类型数据

注意:

除了 null 和 undefined 以外都行

// 2. toString
var n = null
console.log(n)
console.log(typeof n)
console.log('-------------------------')
var res = n.toString()
console.log(res)
console.log(typeof res)

*String()*

语法:

String(你要转换的数据)

返回值:

转换好的字符串类型数据

能转换:

所有数据都能转换

// 1. String()
var n1 = 100
console.log(n1)
console.log(typeof n1)
console.log('==================')
var res = String(n1)
console.log(res)
console.log(typeof res)

*使用加法运算*

在 JS 里面，+ 由两个含义

字符串拼接： 只要 + 任意一边是字符串，就会进行字符串拼接

加法运算：只有 + 两边都是数字或者是布尔值的时候，才会进行数学运算

如果想把一个数据转换成字符串, 那么只需要 + 字符串

var n1 = '100'
console.log(n1)
console.log(typeof n1)
console.log('===================')
// 在字符串拼接转字符串的时候, 最好拼接一个空字符串
var res = n1 + ''
console.log(res)
console.log(typeof res)

3) 其他数据类型转成布尔

语法：Boolean(要转换的数据)

返回值：就是你转换好的布尔值

在 js 中，只有 ''、0、null、undefined、NaN，这些是 false

其余都是 true

console.log(Boolean(''));
console.log(Boolean(NaN));
console.log(Boolean(0));
console.log(Boolean(undefined));
console.log(Boolean(null));

11. 运算符

1) 含义

就是在代码里面进行运算的时候使用的符号

不光只是数学运算

我们在 js 里面还有很多的运算方式

我们所熟知的数学运算只是诸多运算符的一种

2) 数学运算符

1. +

   • 只有符号两边都是数字或者布尔值的时候才会进行加法运算

   • 只要符号任意一边是字符串类型，就会进行字符串拼接

     // 数学运算符
     console.log(100 + 100); // 200
     console.log(100 + true); // 101
     console.log(100 + false); // 100
     console.log(100 + '435'); // '100435

2. -

   • 会执行减法运算

   • 会自动把两边都转换成数字进行运算

     // 数学运算符(-)
     console.log(10 - 5); // 5
     console.log(10 - true); // 9
     console.log(10 - false); // 10

3. *

   • 会执行乘法运算

   • 会自动把两边都转换成数字进行运算

     // 数学运算符(*)
     console.log(10 * 5); // 50
     console.log(10 * true); // 10
     console.log(10 * false); // 0

4. /

   • 会执行除法运算

   • 会自动把两边都转换成数字进行运算

     // 数学运算符(/)
     console.log(10 / 5); // 2
     console.log(10 / true); // 10
     console.log(false / 10); // 0

5. %

   • 会执行取余运算

   • 会自动把两边都转换成数字进行运算

     // 数学运算符(%)
     console.log(10 % 3); // 1

6. **

   • 幂（**）运算符返回第一个操作数取第二个操作数的幂的结果

     // 数学运算符(**)
     console.log(3 ** 4); // 81

3) 赋值运算符

1. =

   • 就是把 = 右边的赋值给等号左边的变量名

   • var num = 100

   • 就是把 100 赋值给 num 变量

   • 那么 num 变量的值就是 100

   • 注意：

     同一个变量只能赋值一次

     也就说给同一个变量第一次赋值以后就不能再次赋值了

     如果给同一个变量再次赋值会把前面的值覆盖掉

   • 变量值的交换

   • 借助第三个变量来做交换

     // 交换变量
     // 声明变量
     var x = 5
     var y = 6
     console.log(x) 
     console.log(y) // 声明第三个变量
     var tmp
     // 把x的值赋值给tmp
     tmp = x
     // 把y的值赋值给x 
     x = y
     // 把tmp的值赋值给y
     y = tmpconsole.log(x) 
     console.log(y) 

2. +=

   • 就是赋值符号和加号的合作符号

   • 就是在自己的原来的基础上再加上多少

     var a = 10;
     a += 10;
     console.log(a); //=> 20

   • a += 10 等价于 a = a + 10

   • 不能写成 a = 10 + a

3. -=

   • 就是赋值符号和减号的合作符号

   • 就是在自己的原来的基础上再减去多少

     var a = 10;
     a *= 10;
     console.log(a); //=> 100
     // `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 %= 3;
     console.log(a); //=> 1
     // `a %= 3` 等价于 `a = a % 3`

4) 比较运算符

1. 含义

   计算机除了能够处理数据的加减乘除运算外

   还能对数据进行比较，如大小比较、类型比较等

   比较运算的结果一定为布尔类型

   比较运算符也叫关系运算符

2. ==

   比较符号两边的值是否相等，不管数据类型

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

3. ===

   比较符号两边的值和数据类型是否都相等

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

4. !=

   比较符号两边的值是否不等,如果是返回true不管数据类型

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

5. !==

   比较符号两边的数据类型和值是否不等,如果都满足返回true

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

6. '>='

   比较左边的值是否 大于或等于 右边的值

   console.log(2 >= 1); // true
   console.log(2 >= 2); // true
   console.log(2 >= 3); // false

7. <=

   比较左边的值是否 小于或等于 右边的值

   console.log(1 <= 1); // true
   console.log(1 <= 2); // true
   console.log(3 <= 2); // false

8. ">"

   比较左边的值是否 大于 右边的值

   console.log(1 > 2); // false
   console.log(3 > 2); // true
   console.log(2 > 2); // false

9. "<"

   比较左边的值是否 小于 右边的值

   console.log(1 < 2); // true
   console.log(3 < 2); // false
   console.log(2 < 2); // false

5) 逻辑运算符

1. 含义

   逻辑运算符一般是将多个表达式的值组合起来，再次运算产生的新的表达式的值，逻辑运算主要分3种情形

   逻辑与（且） &&

   逻辑或 ||

   逻辑非（取反）!

2. 逻辑与 ( 且 ) &&

   • 进行 且 的运算

   • 必须符号两边同时为 true，才会返回 true

   • 只要有一边不是 true，那么就会返回 false

   • 同真为真，一假则假

   console.log(true && true); // true
   console.log(true && false); // false
   console.log(false && false); // false

3. 逻辑或 ||

   • 进行 或 的运算

   • 符号两边任意一边为 true，都会返回 true

   • 只有两边都是 false 的时候才会返回 false

   • 一真为真，同假则假

   console.log(true || true); // true
   console.log(true || false); // true
   console.log(false || false); // false

4. 逻辑非 ( 取反 ) !

   • 进行 取反 运算

   • 本身是 true 的，会变成 false

   • 本身是 false 的，会变成 true

   console.log(true); // true
   console.log(!true); // false
   console.log(false); // false
   console.log(!false); // true

6) 短路逻辑

1. 逻辑且（与）&&

   当运算符左边为 false 的时候, 右边的代码不执行

   只有左边的代码为 true 的时候, 右边的代码才执行

   false && console.log('你好 世界');
   true && console.log('你好 世界');

2. 逻辑或 ||

   当运算符 左边为 true 的时候, 右边的代码不执 行

   只有左边的代码为 false 的时候, 右边的代码才执行

   true || console.log('hello world');
   false || console.log('hello world');

7) 一元运算符

1. 含义

   一个数据带一个运算符就能完成的运算就叫一元运算

2. ++

   • 进行自增运算

   • 分成两种，前置++ 和 后置++ 不管是前置还是后置，都是让自身的值+1，只能＋1

   • 前置++，会先把值自动 +1，在返回之后参与运算

   var a = 10;
   console.log(++a);
   // 会返回 11，并且把 a 的值变成 11

   • 后置++，会先把值拿来参与运算，运算结束以后在自动+1

   var a = 10;
   console.log(a++);
   // 会返回 10，然后把 a 的值变成 11

   • 练习 - 求 n 和 res 的值

   var n = 10
   var res = n++ + ++n + ++n + ++n + n++
   console.log(n) 
   console.log(res) 

3. --

   • 进行自减运算

   • 分成两种，前置-- 和 后置--

   • 和 ++ 运算符道理一样

   • 求 n 和 res 的值

   var n = 10
   var res = --n + ++n + n++ + n++ + n-- - --n
   console.log(n) 
   console.log(res)

12. 课后练习题

详见强化练习