diff --git a/00-前端工具/01-Sublime Text在前端中的使用.md b/00-前端工具/01-Sublime Text在前端中的使用.md index 63fb219..9c2ef4d 100644 --- a/00-前端工具/01-Sublime Text在前端中的使用.md +++ b/00-前端工具/01-Sublime Text在前端中的使用.md @@ -26,7 +26,7 @@ ## 常用插件 -### SublimeCodeIntel： JavaScript代码自动提示（不好用） +### JavaScript代码自动提示：SublimeCodeIntel（不好用） 安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。 @@ -45,12 +45,10 @@ 保存后重启软件。 - 参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756) - -### sublime javascript complet：JavaScript代码自动提示 +### JavaScript代码自动提示：javascript complet - [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions) @@ -60,6 +58,13 @@ 在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomplete](https://github.com/alienhard/SublimeAllAutocomplete) +### JS代码格式化：JsFormat + + +快捷键是：选中JS代码，然后按ctrl+alt+f。 + +或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令 + diff --git a/03-JavaScript/01-JavaScript语法基础：JS简介&变量.md b/03-JavaScript/01-JavaScript语法基础：JS简介&变量.md index 081961f..50f659b 100644 --- a/03-JavaScript/01-JavaScript语法基础：JS简介&变量.md +++ b/03-JavaScript/01-JavaScript语法基础：JS简介&变量.md @@ -583,7 +583,7 @@ typeof 变量 ``` -## 变量格式转换 +## 数据类型转换 ### 用户的输入 @@ -644,6 +644,34 @@ typeof 变量 10 ``` + +### 字符串转为浮点数（小数）：`parseFloat()`： + +道理同上。 + + +### 隐式转换 + +我们知道，`"2"+1`得到的结果其实是字符串，但是`"2"-1`得到的结果却是数值1。，这是因为计算机自动帮我们进行了“**隐式转换**”。 + + +也就是说，`-`、`*`、`/`、`%``这几个符号会自动进行隐式转换。例如： + +```javascript + var a = "4" + 3 - 6; + console.log(a); +``` + +输出结果： + +``` + 37 +``` + +虽然程序可以对`-`、`*`、`/`、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。 + + + ## 我的公众号 想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 diff --git a/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md b/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md index 73913fc..b8b39e7 100644 --- a/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md +++ b/03-JavaScript/02-JavaScript语法基础：运算符和表达式.md @@ -1,21 +1,38 @@ +> 本文首发于[博客园](https://www.cnblogs.com/smyhvae/p/8306146.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + +我们在[上一篇文章](http://www.cnblogs.com/smyhvae/p/8303507.html)里讲到了JS中**变量**的概念，本篇文章讲一下**运算符**和表达式。 + +比如说`+`、`*`、`/`、`(` 都是**运算符**，而`（3+5）/2`则是**表达式**。 +运算符有很多分类：数学运算符、逻辑运算符、自增运算符、赋值运算等。 - -## 运算符和表达式 - -比如说`+`、`*`、`/`、`(` 都是**运算符**，而`（3+5）/2`是**表达式**。 - -运算符有很多分类：数学运算符、逻辑运算符、自增运算符、赋值运算等等。本段先讲**数学运算符**。 +## 数学运算符 常见的数学运算符有以下几种： -## 20180117_1650.png +![](http://img.smyhvae.com/20180117_1650.png) + +**求余的举例**： + +假设用户输入345，怎么分别得到3、4、5这三个数呢？ + +**答案**： + +``` + 得到3的方法：345 除以100，得到3.45然后取整，得到3。即：parseInt(345/100) + + 得到4的方法：345 除以100，余数是45，除以10，得到4.5，取整。即：parseInt(345 % 100 / 10) + + 得到5的方法：345 除以10，余数就是5。即：345 % 10 +``` ### 数学运算符的运算规则 -（1）先算乘除、后算加减 +（1）先算乘除、后算加减。 （2）小括号：能够影响计算顺序，且可以嵌套。没有中括号、没有大括号，只有小括号。 @@ -27,12 +44,7 @@ console.log(3 % 5); ``` -结果： - -``` - 3 -``` - +输出结果为3。 举例2：（运算符优先级） @@ -44,35 +56,172 @@ 原式 = 1 + 6 % 4 / 3 = 1 + 2 / 3 = 1.66666666666666 - - - ### 乘方 -如果项计算 `a 的 b次方`，即 $a^b$ ，可以使用如下函数： +如果想计算 `a 的 b 次方`，可以使用如下函数： ``` - Math.pow(a,b); + Math.pow(a, b); ``` +Math的中文是“数学”，pow是“power 幂”。 -举例： - - - - - -## 乘方和开根号 - - - - - - - - - - +**举例1：** + +![](http://img.smyhvae.com/20180117_1730.png) + +代码实现： + +``` + var a = Math.pow(3, Math.pow(2, 2)); + console.log(a); +``` + +**举例2：** + +![](http://img.smyhvae.com/20180117_1740.png) + +代码实现： + +``` + var a = Math.pow(Math.pow(3, 2), 4); + console.log(a); +``` + +### 开方 + +如果想计算数值a的开二次方，可以使用如下函数： + +``` + Math.sqrt(a); +``` + +sqrt即“square 开方”。比如： + +``` + var a = Math.sqrt(36); +``` + +## 布尔值、关系运算符、逻辑运算符 + +### 布尔值 + +我们在上一篇文章中学习到的变量类型中包括：数值型、字符串型。今天再来学习一个类型：**布尔类型**。 + +布尔类型的值，就两个：true、false。 + +布尔值直接使用就可以了，千万不要加上引号。 + +代码： + +```javascript + var a = true; + console.log(typeof a); +``` + +控制台输出结果： + +``` + boolean +``` + +### 关系运算符 + +关系运算符有很多种，比如： + +``` + > 大于号 + < 小于号 + >= 大于或等于 + <= 小于或等于 + == 等于 + === 全等于 + != 不等于 + !== 不全等于 +``` + +关系运算符，得到的结果都是布尔值：要么是true，要么是false。 + +**`==`符号的强调**： + +注意`==`这个符号，它是**判断是否等于**，而不是赋值。 + +（1）`== `这个符号，还可以验证字符串是否相同。例如： + +``` + console.log("我爱你中国" == "我爱你中国"); //输出结果为true +``` + +（3）`== `这个符号并不严谨，会将不同类型的东西，转为相同类型进行比较。例如： + +``` + console.log("6" == 6); //true +``` + +如果要保证**完全等于**，我们就要用三个等号`===`。例如： + + +``` + console.log("6" === 6); //false + console.log(6 === 6); //true +``` + +上述内容分析出： + +- `==`两个等号，不严谨，"6"和6是true。 + +- `===`三个等号，严谨，"6"和6是false。 + +另外还有：**`==`的反面是`!=`，`===`的反面是`!==`。**。例如： + +``` + console.log(3 != 8); //true + console.log(3 != "3"); //false，因为3=="3"是true，所以反过来就是false。 + console.log(3 !== "3"); //true，应为3==="3"是false，所以反过来是true。 +``` + +### 逻辑运算符 + +逻辑运算符有三个： + +- && 与（且）:两个都为真，结果才为真 + +- || 或 + +- ! 非：只要有一个是真，结果就是真 + +能参与逻辑运算的，都是布尔值，得到的答案仍然是布尔值。 + +**连比的写法：** + +来看看逻辑运算符连比的写法。 + +举例1： + +``` + console.log(3 < 2 && 2 < 4); +``` + +输出结果为false。 + +举例2：（判断一个人的年龄是否在18~60岁之间） + +``` + var a = prompt("请输入您的年龄"); + alert(a>=18 && a<= 65); +``` + +## 数据类型转换 + +暂略。 + +## 我的公众号 + +想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) diff --git a/03-JavaScript/03-JavaScript语法基础：if语句&for循环&函数.md b/03-JavaScript/03-JavaScript语法基础：if语句&for循环&函数.md new file mode 100644 index 0000000..8fa2cc7 --- /dev/null +++ b/03-JavaScript/03-JavaScript语法基础：if语句&for循环&函数.md @@ -0,0 +1,380 @@ + + +> 本文首发于[博客园](http://www.cnblogs.com/smyhvae/p/8310295.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + +## if语句 + +### 最基本的if语句 + +if语句的结构体：（格式） + +```javascript + if (条件表达式) { + // 条件为真时，做的事情 + + } else { + // 条件为假时，做的事情 + + } +``` + +if语句也成为“选择语句”、“条件判断语句”，我们通过下面的图片来解释。 + +### 多分支的if语句 + +格式： + +```javascript + if (条件表达式1) { + // 条件1为真时，做的事情 + + } else if (条件表达式2) { + // 条件1不满足，条件2满足时，做的事情 + + } else if (条件表达式3) { + // 条件1、2不满足，条件3满足时，做的事情 + + } else { + // 条件1、2、3都不满足时，做的事情 + } +``` + +以上所有的语句体中，只执行其中一个。 + +做个题目： + +``` + 根据BMI（身体质量指数）显示一个人的体型。 + BMI指数，就是体重、身高的一个计算公式。公式是： + BMI =体重÷身高的平方 + + 比如，老师的体重是81.6公斤，身高是1.71米。 + 那么老师的BMI就是 81.6 ÷ 1.712 等于 27.906022365856163 + + 过轻：低于18.5 + 正常：18.5-24.99999999 + 过重：25-27.9999999 + 肥胖：28-32 + 非常肥胖, 高于32 + + 用JavaScript开发一个程序，让用户先输入自己的体重，然后输入自己的身高（弹出两次prompt框）。 + 计算它的BMI，根据上表，弹出用户的身体情况。比如“过轻” 、 “正常” 、“过重” 、 “肥胖” 、“非常肥胖”。 +``` + +答案： + +写法1： + +```javascript + //第一步，输入身高和体重 + var height = parseFloat(prompt("请输入身高，单位是米")); + var weight = parseFloat(prompt("请输入体重，单位是公斤")); + //第二步，计算BMI指数 + var BMI = weight / Math.pow(height, 2); + //第三步，if语句来判断。注意跳楼现象 + if (BMI < 18.5) { + alert("偏瘦"); + } else if (BMI < 25) { + alert("正常"); + } else if (BMI < 28) { + alert("过重"); + } else if (BMI <= 32) { + alert("肥胖"); + } else { + alert("非常肥胖"); + } +``` + +写法2： + +```javascript + //第一步，输入身高和体重 + var height = parseFloat(prompt("请输入身高，单位是米")); + var weight = parseFloat(prompt("请输入体重，单位是公斤")); + //第二步，计算BMI指数 + var BMI = weight / Math.pow(height, 2); + //第三步，if语句来判断。注意跳楼现象 + if (BMI > 32) { + alert("非常肥胖"); + } else if (BMI >= 28) { + alert("肥胖"); + } else if (BMI >= 25) { + alert("过重"); + } else if (BMI >= 18.5) { + alert("正常") + } else { + alert("偏瘦"); + } +``` + +### if语句的嵌套 + +我们通过下面这个例子来引出if语句的嵌套。 + +``` + 一个加油站为了鼓励车主多加油，所以加的多有优惠。 + 92号汽油，每升6元；如果大于等于20升，那么每升5.9； + 97号汽油，每升7元；如果大于等于30升，那么每升6.95 + 编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，弹出价格。 +``` + +![](http://img.smyhvae.com/20180117_2232.png) + + +代码实现如下： + +```javascript + //第一步，输入 + var bianhao = parseInt(prompt("您想加什么油？填写92或者97")); + var sheng = parseFloat(prompt("您想加多少升？")); + + //第二步，判断 + if (bianhao == 92) { + //编号是92的时候做的事情 + if (sheng >= 20) { + var price = sheng * 5.9; + } else { + var price = sheng * 6; + } + } else if (bianhao == 97) { + //编号是97的时候做的事情 + if (sheng >= 30) { + var price = sheng * 6.95; + } else { + var price = sheng * 7; + } + } else { + alert("对不起，没有这个编号的汽油！"); + } + + alert("价格是" + price); +``` + +### if语句的几个小知识点 + +（1）else部分可以省略。例如： + +```javascript + var a = 10; + if(a > 20){ + alert("这个数字大于20"); + } + +``` + +没有else部分，则代表没有“否则”。如果条件表达式不满足了，那么就什么都不做。 + +（1）如果要做的事情只有一句话，那么大括号就可以省略。例如： + +```javascript + var a = 2; + if(a > 5) alert("这个数字大于5"); + alert("哈哈"); + +``` + +弹出的内容是“哈哈”。 + +## for循环 + +### for循环的结构 + +for循环举例： + +```javascript + for (var i = 1; i <= 100; i++) { + console.log(i); + } +``` + +上方代码的解释： + +![](http://img.smyhvae.com/20180117_2248.png) + + +### for循环遍历 + + +```javascript + for (var i = 1; i < 13; i = i + 4) { + console.log(i); + } + +``` + +上方代码的遍历步骤： + +``` +程序一运行，将执行var i = 1;这条语句， 所以i的值是1。 +然后程序会验证一下i < 13是否满足，1<13是真，所以执行一次循环体（就是大括号里面的语句）。 +执行完循环体之后，会执行i=i+4这条语句，所以i的值，是5。 + +程序会会验证一下i < 13是否满足，5<13是真，所以执行一次循环体（就是大括号里面的语句）。 +执行完循环体之后，会执行i=i+4这条语句，所以i的值，是9。 + +程序会会验证一下i < 13是否满足，9<13是真，所以执行一次循环体（就是大括号里面的语句）。 +执行完循环体之后，会执行i=i+4这条语句，所以i的值，是13。 + +程序会会验证一下i < 13是否满足，13<13是假，所以不执行循环体了，将退出循环。 + +最终输出输出结果为：1、5、9 +``` + +接下来做几个题目。 + +题目1： + +```javascript + for (var i = 1; i < 10; i = i + 3) { + i = i + 1; + console.log(i); + } +``` + +输出结果：2、6、10 + +题目2： + +```javascript + for (var i = 1; i <= 10; i++) { + + } + console.log(i); +``` + +输出结果：11 + +题目3： + +```javascript + for(var i = 1; i < 7; i = i + 3){ + + } + console.log(i); +``` + +输出结果：7 + +题目4： + +```javascript + for (var i = 1; i > 0; i++) { + console.log(i); + } +``` + +死循环。 + +## 算法题练习 + +暂略。 + +## 函数 + +函数：就是将一些语句进行**封装**，然后通过**调用**的形式，执行这些语句。 + +**函数的作用：** + +- 将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。 + +- 简化编程，让编程模块化。 + +先来看个例子： + +```javascript + console.log("你好"); + sayHello(); //调用函数 + //定义函数： + function sayHello(){ + console.log("欢迎"); + console.log("welcome"); + } +``` + +### 第一步：函数的定义 + +函数定义的语法： + +```javascript + function 函数名字(){ + + } +``` + +解释如下： + +- function：是一个关键字。中文是“函数”、“功能”。 + +- 函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。 + +- 参数：后面有一对小括号，里面是放参数用的。 + +- 大括号里面，是这个函数的语句。 + + +### 第二步：函数的调用 + +函数调用的语法： + +```javascript + 函数名字(); +``` + +### 函数的参数：形参和实参 + +函数的参数包括形参和实参。来看下面的图就懂了： + + +![](http://img.smyhvae.com/20180118_1130.png) + +注意：实际参数和形式参数的个数，要相同。 + +举例： + +```javascript + sum(3,4); + sum("3",4); + sum("Hello","World"); + + //函数：求和 + function sum(a, b) { + console.log(a + b); + } +``` + +控制台输出结果： + +``` + 7 + 34 + helloworld +``` + +### 函数的返回值 + +举例： + +```javascript + console.log(sum(3, 4)); + + //函数：求和 + function sum(a, b) { + return a + b; + } +``` + +return的作用是结束方法。 + +## 我的公众号 + +想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) + + + + diff --git a/推荐链接.md b/推荐链接.md index 6743be4..6e1ed00 100644 --- a/推荐链接.md +++ b/推荐链接.md @@ -58,6 +58,11 @@ +### 2018-01-17 + +- [你的简历能帮你争取到面试机会吗](http://www.cnblogs.com/JavaArchitect/archive/2018/01/09/8249594.html) + +- [漫话JavaScript与异步·第三话——Generator：化异步为同步](http://www.cnblogs.com/leegent/archive/2018/01/10/8207246.html)