二、使用 JavaScript 解决问题
在前一章中，您已经学习了如何在控制台上使用 JavaScript 打印东西。现在，让我们看看 JavaScript 语法、变量、算术运算符和注释背后的基础。
在计算机世界里，除了数据什么都没有。您可以读取、修改和创建新数据；然而，任何不是数据的东西根本不存在。在 JavaScript 中，我们需要处理数据来开发一个网站。
要理解 JavaScript 的基本语法，首先需要知道 JavaScript 是区分大小写的。在 JavaScript 中不能互换小写字母和大写字母。因此，在处理 JavaScript 语法时，您需要记住编写代码并不是唯一重要的任务，您还必须观察语法是否编写正确。
我给你举个例子。在前一章中，您已经使用document.write();语法在浏览器上成功打印了 Hello World 。
如果你写Document.write("Hello World");会发生什么？没错。它不会成功运行。您会收到一条错误信息。这种错误被称为未被发现的语法错误。
JavaScript 语句通常写在一行上。你可以用分号结束你的陈述。以分号结束语句不是强制性的。但是，在每个语句后添加分号是一个很好的做法。
让我们考虑以下示例:
document.write("Hello");
document.write("World");
document.write("!");
其输出如下:
注
JavaScript 关键字(如 for、while、if、switch、case 等)总是小写。内置对象(如日期、数学、数字等)以大写字母开头。
变量
我们已经知道计算机世界除了数据什么都没有。
有不同类型的数据(我们称之为数据类型，如下:
- 你的名字是一种数据
- 你的年龄就是数据
- 你的成绩也是数据
然而，它们都是不同的。它们之间有什么区别？你的名字只包含一组字符或者，有些人也叫它字符串。你的年龄是一个整数类型的数据。你的成绩是一个浮动类型的数据。JavaScript 的奇妙之处在于，在编写变量的名称之前，您不必指定数据类型。
注
JavaScript 允许使用三种数据类型。字符串(例如"This is an example of string")、数字(例如2015、3.1415等)和布尔(例如true或false)。
我们讨论过变量了吗？你已经知道数据类型了。你将需要一些东西来存储你的数据。这个东西叫做变量。在 JavaScript 中，我们在变量名前使用var。记住var以小写字母开头。
让我们考虑以下示例:
var x;
var y;
var sum;
var name;
假设我们有 14 个苹果和 6 个橘子。要将它们存储在变量中，我们将使用以下方法:
var apples = 14;
var oranges = 6;
下面的例子不一样。你能说出原因吗？
var Apples = 14;
var apples = 14;
var APPLES = 14;
var appleS = 14;
是的，JavaScript 是区分大小写的。这里所有的变量都是不同的，尽管变量的值是相同的。
现在，让我们做一些编码。以前，在控制台上，你把自己的名字作为作业打印出来。我希望你做这件事没有任何麻烦。我们现在用一个变量不同地打印你的名字怎么样？假设你的名字是Sherlock Holmes。是什么样的数据？
你说得对，是弦式。通常对于字符串类型的数据，我们把字符串放在两个引号之间。
让我们考虑以下示例:
var name = "Sherlock Holmes";
var occupation = "Detective"
要使用控制台打印它们，您需要键入每个语句并按进入。请看下图:
注
不要在控制台上复制和粘贴代码。您可能会遇到语法错误。
点击进入后会出现一条额外的线，说明undefined。暂时不要担心这个。它刚刚返回了一个控制台日志。
您将Sherlock Holmes字符串存储在name变量上，并将Detective 存储在occupation上。每次访问name或occupation时，都可以访问所述字符串。
假设你想在屏幕上打印夏洛克·福尔摩斯。只需键入以下内容:
document.write(name);
键入后，点击进入。你会看到福尔摩斯印在屏幕上，如下所示:
键入document.write(occupation);并点击进入，如下图截图所示:
你可能想知道为什么夏洛克·福尔摩斯和侦探之间没有空间。因为，在控制台上，历史不会自动从左侧的网页中移除，并且在您第二次输出(occupation)时点击进入后，字符串会将自身放在前一个字符串之后。除非您使用 Ctrl + L 键盘快捷键清除控制台并按下 F5 键重新加载网页，否则这种情况将一直发生。
注
当您重新加载网页时，您存储的变量也将从内存中删除。别担心，在下一章中，你将学习如何使用存储在文件中的变量。
如果您想要连接两个(或多个)变量，您可以在两个变量之间添加一个加号(+，如下所示:
document.write(name+occupation);
document.write(occupation+name);
你能告诉我这些命令会输出什么吗？
是的，你是对的。输出如下:
夏洛克霍尔姆斯侦探
侦探福尔摩斯
注
您的输出可能在网页的一行中。如果要分割线，添加<br> HTML 标签。最简单的添加方式就是输入document.write("<br>");点击进入。您的下一个输出将在新的行中。
如果要在两个字符串之间添加除变量之外的任何字符串(例如空格)，只需键入以下内容:
document.write(name+" "+occupation);
输出如下:
福尔摩斯探案
输入以下代码，点击进入会发生什么？
document.write("My name is "+name+" and I am a "+occupation);
没错。你完全正确。输出如下所示:
我叫夏洛克·福尔摩斯，我是一名侦探
现在，在控制台上添加另一个变量。考虑Sherlock Holmes24 岁。你还记得什么是数据时代吗？
是的，它是整数类型的数字。因此，输入以下代码，点击进入:
var age = 24;
现在您有以下三个变量:
- 名字
- 职业
- 年龄
让我们在网页上打印以下输出:
我叫夏洛克·福尔摩斯，今年 24 岁，是一名侦探
我们在控制台上的代码是什么？
代码如下:
document.write("My name is "+name+", I\'m "+age+" years old and I am a "+occupation);
输出如下所示:
类型
打印报价/逗号
如果你想印刷莎士比亚说:“生存还是毁灭:这是个问题！”使用document.write();语法，您可能会键入以下代码:
document.write("Shakespeare said, "To be, or not to be: that is the question!"");
然而，这会给一个被称为语法错误的错误。要消除此错误，您需要在两个逗号前使用反斜杠(\)。正确的代码如下:
document.write("Shakespeare said, \"To be, or not to be: that is the question!\"");
输出如下所示:
莎士比亚说:“生存还是毁灭:这是个问题！”
同样的规则也适用于单个倒逗号(')。
这里有一个快速练习给你:
-
Suppose
Tomhas a cat (Lucy). The cat,Lucy, is2.4years old. Store the name, cat's name, and its age on three different variables and print the following output using console:汤姆的猫露西 2.4 岁。
-
Assume that you bought
4pounds of apples. Each pound costs you$1.2. Store the price and quantity of apples on two different variables and print the following output using console:我买了 4 磅苹果。每磅我得付 1.2 美元。
评论
假设你做了大量的编码和一些逻辑运算，在 JavaScript 上使用了大量的变量，如果出现错误，你想让我帮你处理代码。当你把代码发给我时，除非我对 JavaScript 有清晰的了解，或者你对重要的几行进行了评论，否则我不会知道你键入了什么。
注释基本上是浏览器在运行时忽略的一行文本或代码。您可以将注释与便笺或提醒进行比较。
让我们考虑一下下面的例子:
Var name = "Sherlock Holmes"; // This is a string
Var occupation = "Detective"; // This variable stores information
Var age = 14; // This is an integer type of data.
如何进行多行注释？您以下列方式提到该评论:
/*
This is a multiline comment.
The browser will ignore this.
You can type any important information on your comment.
*/
您的多行注释应该在/*和*/之间，如下图所示:
算术运算符
在 JavaScript 中，和其他编程语言一样，我们可以做一些算术运算。在你的学校，你可能已经学会了如何将两个数字相加，将一个数字与另一个数字相减，将两个数字相乘，以及将一个数字与另一个数字相除。在几行代码的帮助下，您可以在 JavaScript 中完成所有这些事情。
在 JavaScript 中，我们使用以下算术符号进行运算:
|
操作员
|
描述
| | --- | --- | | + | 添加 | | - | 减去 | | * | 繁殖 | | / | 分开 | | % | 要查找提醒(称为模数运算符) |
加法
假设有两个变量x和y，分别为值3和4。我们应该在控制台上做什么来存储变量的值？
是的，我们执行以下操作:
var x = 3; // 3 is stored on variable x
var y = 4; // 4 is stored on variable y
然后，按进入。
取另一个保持x和y之和的变量，如下所示:
var z = x+y; // This syntax stores the sum of x and y on z
你能告诉我当我们打印z时会发生什么吗？
document.write(z);
是的，你是对的，这将打印 7 ，如下图截图所示:
减法
要从另一个数字中减去，需要在它们之间加一个减号(-)。
让我们考虑以下示例:
var x = 9; // 9 is assigned to the variable x.
var y = 3; // 3 is assigned to the variable y.
var z = x - y ; // This syntax subtracts y from x and stores on z.
document.write(z); // Prints the value of z.
该代码的输出为 6 ，如下图截图所示:
乘法
要将两个存储有整型或浮点型数据的数字或变量相乘，只需在变量或数字之间加一个星号(*)。
我们来看看下面的例子:
var x = 6; // 6 is assigned to the variable x.
var y = 2; // 2 is assigned to the variable y.
var z = x * y; // For two numbers you can type z = 6 * 2 ;
document.write(z); // Prints the value of z
该代码的输出为 12 ，如下图截图所示:
分部
要将一个数字与另一个数字相除，需要在数字之间加上一个正斜杠(/)。
让我们看看下面的例子:
var x = 14; // assigns 14 on variable x.
var y = 2; // assigns 2 on variable y.
var z = x / y; // divides x with y and stores the value on z.
document.write(z); // prints the value of z.
该代码的输出为 7 ，如下图截图所示:
模量
如果你想找到一个数和另一个数的模，你需要在两个数之间放一个百分号(%)。
让我们考虑以下示例:
var x = 34; // assigns 34 on the variable x.
var y = 3; // assigns 3 on the variable y.
var z = x % y ; // divides x with y and returns the reminder and stores on the variable z
document.write(z);
该代码的输出为 1 ，如下图截图所示:
类型
模量(%)算符是做什么的？
嗯，从你的数学课开始，你就已经学会了如何将一个数除以另一个数。比方说，你用 10 除以 2。结果将是 5，这是一个整数类型的数字。然而，如果你把 10 除以 3 会发生什么？答案不会是整数。该值为 3.33333333333333。也可以说答案是 3，余数是 1。请考虑以下几点:
10 = 9 + 1;
也就是(9+1)/3
= 9/3+1/3
= 3 + 1/3;
因此，余数为 1。模数的作用是找出余数并返回。因此，10%3 = 1。
现在，让我们用一段代码总结一下到目前为止所学的所有算术运算符。
能告诉我下面几行的输出吗？
var x = 5 ;
var y = 4 ;
var sum = x + y ;
var sub = x - y ;
var mul = x * y ;
var div = x / y ;
var mod = x % y ;
document.write("The summation of x and y is "+ sum + "<br>") ;
document.write("The subtraction of x and y is " + sub + "<br>") ;
document.write("The multiplication of x and y is " + mul + "<br>");
document.write("The division of x and y is " + div + "<br>") ;
document.write("The modulus of x and y is " + mod + "<br>") ;
您将获得以下输出:
x 和 y 之和为 9
x 和 y 的减法是 1
x 和 y 的乘积是 20
x 和 y 的除法是 1.25
x 和 y 的模数为 1
这个输出可以在下面的截图中看到:
我猜你成功了。现在，让我们用以下内容来解释它们:
- 我们分别将
5和4分配给x和y - 我们将
x和y的和分配给sum变量，x和y的减法分配给sub变量，x和y的乘法分配给mul变量，x和y的除法分配给div变量，x和y的模数分配给mod变量 - 然后，我们使用
document.write();语法打印它们 - 我们使用了一个
<br>HTML 标签来分隔每行的输出
考虑下面的例子:
约翰有 56 支钢笔。他想把它们排成七排。每行将有相同数量的笔。写一个代码，打印每行的笔数。
(提示:取笔数和行数两个变量，用笔数除以行数，将值存储在一个新变量中。)
示例输出如下:
约翰将不得不在每条线上放置 XX 支笔。// XX 为笔数
更多操作员和操作
除了前面提到的操作符之外，JavaScript 还有更多的操作符。让我们再深入一点。
递增或递减运算符
如果您有一个整数并且您想要将它增加 1 或任何数字，您可以键入以下内容:
var x = 4; // assigns 4 on the variable x.
x = x + 1;
/* since x=4, and you are adding 1 with x, so the final value is 4 + 1 = 5, and 5 is stored on the same variable x. */
您也可以将变量增加 1，键入以下内容:
var x = 4; // assigns 4 on the variable x.
x++; // This is similar to x = x + 1.
如果要将变量增加 1 以上，你会怎么做？你可以这样理解:
var x = 4; // assigns 4 on the variable x.
x = x + 3; // Say, you want to increment x by 3.
/* since x = 4, and you are adding 3 with x, so the final value is 4 + 3 = 7, and 7 is stored on the same variable x. */
您也可以通过键入以下内容来增加变量:
var x = 4; // assigns 4 on the variable x.
x += 3; // This is similar to x = x + 3.
类型
请记住，不应在运算符(例如+、-、*、/等)和等号(=)之间放置空格。
输出将看起来类似于控制台上的以下截图:
减量运算符呢？是的，你完全正确。减量操作与增量操作相同。唯一改变的是星座。您的加法(+)运算符将被减法运算符(-)替换。让我们看一个例子:
var x = 9; // assigns 9 on the variable x.
x = x - 1;
/* since x = 9, and you are subtracting 1 from x, so the final value is 9 - 1 = 8, and 8 is stored on the same variable x. */
您也可以通过输入以下内容来减少变量1:
var x = 9; // assigns 9 on the variable x.
x--; // This is similar to x = x - 1.
如果想要将变量减少超过1，那么会怎么做？你可以这样理解:
var x = 9; // assigns 9 on the variable x.
x = x - 4; // Say, you want to decrement x by 4.
/* since x = 9, and you are subtracting 4 from x, so the final value is 9 - 4 = 5, and 5 is stored on the same variable x. */
您也可以通过键入以下内容来减少变量:
var x = 9; // assigns 9 on the variable x.
x -= 4; // This is similar to x = x - 4.
这些代码的输出可以在下面的截图中看到:
这些操作的类型对于 JavaScript 中的逻辑操作非常重要。你将在第四章、更深一点中了解它们的用法。
赋值运算符
赋值运算符为运算符赋值。相信你已经知道赋值运算符了吧？嗯，你在变量和它的值之间使用一个等号(=)。通过这样做，您为变量赋值。
让我们看看下面的例子:
var name = "Sherlock Holmes"
Sherlock Holmes字符串被分配给name变量。您已经学习了递增和递减运算符。你能告诉我以下代码的输出是什么吗？
var x = 3;
x *= 2;
document.write(x);
输出将是 6 。
你还记得为什么会这样吗？
x *= 2;方程与x = x * 2;类似，因为x等于3，再乘以2。最后一个数字(3 x 2 = 6)分配给同一个x变量。这就是我们得到以下输出的原因:
让我们执行以下练习:
以下代码的输出是什么？
var w = 32;
var x = 12;
var y = 9;
var z = 5;
w++;
w--;
x*2;
y = x;
y--;
z%2;
document.write(" w = "+w+ ", x = "+x+ ", y = "+ y+", z = "+z );
我们将获得以下输出:
w = 32，x = 12，y = 11，z = 5
这个输出可以在下面的截图中看到:
JavaScript 比较和逻辑运算符
如果你想做一些逻辑上的事情，比较两个数字或者 JavaScript 中的变量，你需要使用一些逻辑运算符。以下是比较运算符的几个示例:
|
操作员
|
描述
| | --- | --- | | == | 等于 | | ！= | 不等于 | | > | 大于 | | < | 不到 | | => | 等于或大于 | | <= | 小于或等于 |
以下是使用这些运算符的几个示例:
在接下来的章节中，您将学习更多关于这些操作符的使用。
让我们讨论几个按位逻辑运算符和按位运算符:
|
经营者
|
描述
| | --- | --- | | && | 表示“与”运算符。为了检查两个或多个语句是否正确，我们使用这个。 | | || | 表示或运算符。为了检查是否有任何陈述是真实的，我们使用这个。 | | ~ | 表示非操作符。 | | ^ | 这个表示异或运算符。 | | >> | 此表示右移操作员。 | | << | 此表示左移操作符。 |
他们可能是你现在很难学的 T2。别担心，你现在不必使用它们。我们将在第四章、更深一点中使用它们。
总结
在本章中，您学习了 JavaScript 语法。我们讨论了 JavaScript 变量以及如何给变量赋值。你学会了如何评论代码。你现在知道为什么评论很重要了。你终于学会了一个重要的话题:运算符和操作。没有使用操作符和逻辑函数的 JavaScript，如今也不会这么丰富。因此，学习逻辑操作是获得良好 JavaScript 知识的关键。
我建议你在家练习本章的所有代码。你只需在控制台上输入它们，避免复制和粘贴代码。这会妨碍你的学习。作为一个程序员必须有一个好的打字速度，复制和粘贴代码不会提高这一技能。您可能会在键入代码时遇到问题；然而，你会学到。
你可以用 JavaScript 解决任何算术问题。您还可以在控制台上检查您的逻辑是真还是假。如果你能做到这一点，我们可以进入下一章，第 3 章，介绍 HTML 和 CSS ，在这里你会了解到 HTML、CSS 等等。
版权属于：月萌API www.moonapi.com，转载请注明出处
