### 华为云ID： SavageGrowth ### 第一周学习笔记 ## 编程语言 编程语言是用于开发程序的语言 可以通过类似于人类语言的 ”语言“ 来控制计算机，让计算机为我们做事情，这样的语言叫做编程语言 编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同的编程语言的格式和词汇不一样），必须遵守 如今通用的编程语言有两种形式：汇编语言和高级语言 **汇编语言和机器语言 **实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，统一识别和记忆 **高级语言** ：主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包含了很多编程语言，常用的有C/C++、JAVA、C#、Python、JavaScript、Go等 ## JavaScript简介 JavaScript是由Brendan Eich（布兰登·艾奇）来创造的，这位大神仅仅使用了**10多天的时间，就开发出来了** JavaScript和Java根本没有任何关系 JavaScript是运行在客户端的脚本语言 ### JavaScript的作用 - 表单动态校验（密码强度检测）（JS产生最初的目的），直接在客户端上进行验证输入表单中的内容是否符合规范 不用麻烦服务器来验证，减少服务器的压力 - 网页特效 - 服务端开发（Node.js) - APP(Cordova) - 控制硬件-物联网（Ruff) - 游戏开发（cocos2d-js) - **在客户端能实现的：客户端数据计算**：购物车内商品的计算 直接在客户端通过js来计算价格 不用传递商品价格和数量给服务器进行计算 提升了效率 减少服务器压力 ### HTML/CSS与JS的关系 HTML/CSS 是标记语言——描述类语言 HTML决定网页结构和内容，相当于人的身体 CSS决定网页呈现给用户的样子，相当于给人穿衣服 JavaScript是脚本语言——编程类语言 实现业务逻辑和页面控制，相当于人的各种动作 ### JavaScript的执行机制 浏览器本身不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码 JavaScript是解释性语言，因此JS引擎编译JavaScript代码时 是逐行编译JavaScript代码的 > 逐句编译：JS引擎每次就只编译一行JavaScript代码，编译成二进制的机器语言，然后再执行这行机器语言，重复这样的编译和执行，直到没有JavaScript代码可以去编译 ### JavaScript的组成 ES + DOM + BOM ES：ES语言标准 DOM：文档对象模型 BOM：浏览器对象模型 ### 书写JS的方式 内嵌式的js ```html ``` 行内式添加JavaScript代码 ```html 点我呀 ``` 引入外部JS ```html ``` ### 注释语句 注释是提供给代码阅读者使用，不会参与执行 单行注释：双斜杠 ` //` 多行注释： `/* */` ### 输入语句 实际开发的时候，基本不用 ```js let name = prompt("请输入你的年龄"); // 和alert一样，只有当点击确定或者取消之后,后面的代码才会运行(同步执行的表现) // 输入的值会保存到变量中 console.log(name); ``` ### 输出语句 下面的输出语句都是浏览器环境提供的，到别的环境中，这些语句就不会生效了 ```js document.write(); //该语句将数据输出到页面中 ``` ```js alert(); //该语句将数据用弹框的形式显示到页面,只有当点击确定之后,后面的代码才会运行(同步执行的表现) ``` ```js console.log();//该语句将数据显示到控制台中(常用) ``` ## 变量 变量主要用来解决数据存放问题 ```js var a = 123; ``` ### 变量的命名规范 在开发中，凡是需要命名的位置，叫做标识符 标识符就是一个名字。在JavaScript中，标识符用来对变量、函数、对象属性名进行命名，或者用做JavaScript代码中某些循环语句中的跳转位置的标记 标识符的规范（也就是变量的命名规范） 1. 必须以字母、下划线"-"、或者美元符"$"开头 2. 后续的字符可以是字母、数字、下划线或者“$”符 3. 变量的命名不能是关键字、保留字重复。如不能将变量名设置为 var for while if null undefined等 ### 声明变量的特殊情况 #### 使用声明但未赋值的变量 输出结果为undefined ```js var num; console.log(num);// undefined 这个是声明变量但未赋值的变量 输出undefined ``` #### 使用未声明未赋值的变量 输出结果会报错 ```js console.log(str);// Error:str is not defined str是尚未声明的变量 使用一个尚未声明的变量会报错 ``` 对尚未声明的变量只有两种操作不会报错 ```js // 使用typeof操作符检测其数据类型 console.log(typeof str);// 返回undefined // 对尚未声明的变量调用 delete 不会导致错误 但这样做其实没有什么意义（在严格模式下会报错） console.log(delete str); ``` #### 使用不用var声明并直接赋值的变量 不报错 能正常的输出结果 这个是js的特殊性 不推荐这种方式，因为变量会变成全局变量(变成全局对象的属性) ```js message="哈哈"; console.log(message);//哈哈 console.log(window.message);//哈哈 ``` ## 数据类型 根据数据占用的空间不同，所以要划分数据类型 JavaScript中存储的数据类型是可变的 ### 数字类型 小数 负数 整数 负整数 0 NaN等等 【了解】数字类型加上前缀，来表示不同的进制（前端开发中，进制一般是用不到的） ```js 0：前缀0表示八进制 console.log(010);//8 0x：前缀0x表示十六进制 0b：前缀0b表示二进制 ``` ### 字符串类型 字符串表示一长串文本或多个文本 ### 布尔类型 布尔类型表示真或假两种状态 ture：表示真 false：表示假 ### null类型 null类型只有一个特殊的值为null,常用来描述空值。从逻辑角度来看，null值表示一个空对象指针 ### undefined类型 undefined ## 数据类型转换 ### 把其它类型转换成字符串类型 从表单 prompt 中获取的数据 默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗的来讲，就是要把一种数据类型转换成另外一种数据类型 我们通过会试下3种方式的转换 - 转换为字符串类型 - 转换为数字类型 - 转换为布尔类型 | 方式 | 说明 | | ----------------- | ---------------------------- | | toString() | 转成字符串 | | String() 强制转换 | 转成字符串 | | 加号拼接字符串 | 和字符串拼接的结果都是字符串 | ### 把字符串类型转换成数字类型 | 方式 | 说明 | | ---------------------- | -------------------------------- | | parseInt( )函数 | 把字符串类型转换成整数数字类型 | | parseFloat( )函数 | 把字符串类型转成成浮点数数字类型 | | Number( ) 强制转换函数 | 把字符串转换成数值类型 | | 隐式转换： - * / | 使用算术运算符隐式转换为数字类型 | ### 把其它类型转换为布尔类型 | 方式 | 说明 | | ------------- | ------------------ | | Boolean()函数 | 其他类型转成布尔值 | 表示 空、否定的值 会转换为false 如 0 NaN null undefiend '' false ## 运算符 ### 算术运算符分类 1. `+` `-` `*` `/ ` 这些就是正常的加减乘除 2. `+` `-` 这些是放到数字前面的 表示正数和负数 3. `%` 求余数运算符 4. `++` `--` 加加 减减 自增自减运算符（比较复杂，会单独开一张章节来讲解） 5. `**` 幂运算符 2次幂 3次幂 ### 表达式 表达式是由操作符和操作数组成的 每一个表达式都有一个运算结果，该结果叫做返回值，返回值的类型叫做返回类型 ### 自增自减运算符 ```js var a = 1; n++; ++n; ``` ```js var a = 1; n--; --n; ``` ### 比较运算符 大小比较: `> >= =` 相等比较：`== != === !===` ### 逻辑运算符 `&&` 逻辑与 书写方式：`表达式1 && 表达式2` 如果表达式1的值 判定结果为**真**，那么就将表达式2的返回值作为整个逻辑与表达式的值 如果表达式1的值 判定结果为**假**，那么就将表达式1的返回值作为整个逻辑与表达式的值 `||` 逻辑或 写法 `表达式1 || 表达式2` 如果表达式1的boolean判定结果为真，将返回表达式1的值作为整个表达式的返回值,不运行表达式2 如果表达式1的boolean判定结果为假，将返回表达式2的值作为整个表达式的返回值 `!` 逻辑非 ## 流程控制 ### 什么是流程控制 在一个程序执行过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过代码的执行顺序来实现我们的功能 比如我们的程序需求是，当条件满足的时候，实现一组语句，当条件不满足时，执行另外一组语句，或者说有一组语句会反复的执行，像这些，都是流程控制的范畴 简单理解：流程控制就是来控制我们代码按照什么结构顺序来执行 ### 顺序结构 顺序结构是程序中最简单、最基本的流程控制、它没有特定的语法结构，程序会按照代码的先手顺序，依次执行，程序中大多数的代码都是这样执行的 ### 分支结构 由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程）从而得到不同的结果 ```js if (表达式1) { //表达式1 有时候我们也称之为条件1 // 当表达式1的Boolean判断结果为真 那么执行当前代码块中的代码 并且忽略后面所有的代码块 // 代码块中可以写任意条数据的代码 } else if (表达式2) { // 如果表达式1的布尔判断结果为假 // 那我们继续判断表达式2的Boolean判断结果 // 如果表达式2的布尔判断结果为真,那么就执行这块代码块 并且忽略后面所有的代码块 } else if (表达式3) { // 如果表达式2的布尔判断结果为假 // 那我们继续判断表达式3的Boolean判断结果 // 如果表达式3的布尔判断结果为真,那么就执行这块代码块 并且忽略后面所有的代码块 } else { // 如果上面所有表达式的结果都为假 那么执行这个代码块 } ``` ### 循环结构 循环在日常开发中非常常见 循环的本质是 重复的运行一段代码 JS支持3种循环结构：for循环 while循环 do-while循环 ### 断点调试 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这行就会停止，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下 断点调试可以帮我们观察程序的运行过程 浏览器中按F12 —> sources —> 找到需要调试的文件 —> 在程序的某一行设置断点 Watch:监视 ，通过watch可以检测变量的值的变化 非常的常用 F11: 程序单步执行，让程序一行一行的执行，这个时候，观察wathc中变量的值的变化 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，只是点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远学不会