Skip to content

Latest commit

 

History

History
428 lines (320 loc) · 11.7 KB

04.md

File metadata and controls

428 lines (320 loc) · 11.7 KB

四、深入探索

在我们目前了解到的大多数 JavaScript 程序中，代码行的执行顺序与它们在程序中出现的顺序相同。每个代码只执行一次。因此，代码不包括确定条件是真还是假的测试，或者我们没有执行任何逻辑语句。

在这一章中，你将学习一些逻辑编程。您将了解以下主题:

  • 环
  • 如果语句
  • 开关盒

您已经知道如何在 HTML 文档中嵌入 JavaScript 代码。在开始本章之前，您将学习一些 HTML 标记和 JavaScript 方法。这些方法和标签将贯穿全书。

注

在面向对象编程中，我们不直接从对象外部对数据执行任何操作；我们要求对象通过传递一个或多个参数来执行操作。这个任务被称为对象的方法。

JavaScript 方法

在之前的章节中，你学习了如何使用document.write()打印一些东西。现在，你会学到更多的东西。

我们将检查控制台和 HTML 文档上的方法，如下所示:

  • To show an alert or a pop-up box using JavaScript, we use the following method:

    alert("Hello World");

    在控制台上输入这个并按进入，你会看到一个弹出框说你好世界:

    JavaScript methods

    您可以编写代码，在一个 HTML 文档上显示类似如下的弹出框:

    <html>
  <head>
    <title>Alert</title>
  </head>
  <body>
    <script type="text/javascript">
      alert("Hello World");

    </script>
  </body>
</html>

    输出如下:

    JavaScript methods

  • 如果你想从用户那里获取信息，你需要使用一个提示框来完成。例如，考虑以下内容:

    • 您想要输入用户名并将其打印在主网页上。

    • 您可以使用window.prompt()方法来完成。

    • window.prompt()的结构类似如下:

      window.prompt("What is your name?"); // You can type anything between the inverted commas.

    • 现在，您需要将信息存储在一个变量中。从前面的章节中，您已经知道如何做到这一点。键入以下内容并按进入 :

      var name = window.prompt("what is your name?");

    • After running this code on console, you will be asked to input something on a textbox. After typing your information, you need to press the OK button. Your information is now stored in the name variable:

      JavaScript methods

    • 如果您想在您的网页上打印变量，您可以使用document.write();方法，如下所示:

      document.write("Hello "+name+"!");

    • The output of these steps can been seen in the following screenshot:

      JavaScript methods

    • HTML 文档上的代码如下所示:

      <html>
  <head>
    <title>Prompt</title>
  </head>
  <body>
    <script type="text/javascript">
      var name = window.prompt("What is your name?");
      document.write("Hello "+name+"!"); 
    </script>
  </body>
</html>

HTML 按钮和表单

在上一章中，您学习了一些 HTML 标记。现在，我们将研究几个标签，这些标签将使学习 HTML 变得更加有趣。

按钮

如果你想在你的网页上添加按钮，你可以使用<button></button>标签。标签的结构如下:

<button type="button">Click Here </button>

如果你想让你的按钮做一些事情，例如，打开一个网址；您可以考虑以下代码:

<a href="http://google.com/"><button type="button">Click Me </button> </a>

代码的输出如下:

Buttons

形式

在 HTML 中，我们使用表单来表示包含交互式控件的文档部分，以向 web 服务器提交信息。HTML 表单的基本结构如下图所示:

<form>
  User ID: <input type = "text"><br>
  Password: <input type ="password"><br>
</form>

代码的输出如下:

Form

让我们现在再深入一点！

If 语句

假设约翰有 23 个苹果，汤姆有 45 个苹果。我们想用 JavaScript 编程查查谁的苹果多。我们需要让我们的浏览器理解 if 语句。

注

if 语句比较两个变量。

为了检查我们的条件，我们需要声明包含苹果数量的两个变量，如下所示:

var john = 23;
var tom = 45;

要检查哪个数字更大，我们可以应用 if 语句，如下所示:

if(john > tom)
{
  alert("John has more apples than tom");
}

假设我们不知道哪个变量更大。然后，我们需要检查这两个变量。因此，我们需要在程序中包含以下代码:

if(tom > john )
{
  alert("Tom has more apples than John");
}

HTML 页面中的整个代码如下:

<html>
  <head>
    <title>
      If statement
    </title>
  </head>
  <body>
    <script type="text/javascript">
      var john = 23;
      var tom = 45;
      if(john > tom){
        alert("John has more apples than Tom");
      }
    if(tom> john ){
      alert("Tom has more apples than John");
    }
    </script>
  </body>
</html>

输出如下:

If statement

您在前面的章节中学习了条件运算符。在 if 语句中，您可以使用它们。以下是一些带有注释的示例:

If(tom => john){
//This will check if the number of apples are equal or greater. 
}
If(tom <= john)
{
//This will check if the number of apples are equal or less. 
}
If(tom == john)
{
//This will check if the number of apples are equal. 
}

要检查多个条件，需要使用 OR ( ||)或 AND ( &&)。

请考虑以下示例:

If(john == 23 || john => tom)
{
/* This will check if John has 23 apples or the number of John's apple is equal to or greater than Tom's. This condition will be full filled if any of these two conditions are true. 
*/
}
If(tom == 23 && john <= tom)
{
/* This will check if Tom has 23 apples or the number of john's apple is less than Tom's or equal. This condition will be full filled if both of these two conditions are true. 
*/
}

开关盒

如果你有超过三个条件，最好使用开关盒语句。开关柜的基本结构如下图所示:

switch (expression) {
  case expression1:
    break;
  case expression2:
    break;
  case expression3:
    break;
//-------------------------------
//-------------------------------
//  More case
//-------------------------------
//  -------------------------------
  default:    
}

每个case都有一个break。但是，default不需要break。

考虑一下汤姆有 35 支钢笔。他的朋友约翰、辛迪、劳拉和特里分别有 25 支、35 支、15 支和 18 支钢笔。现在，约翰想看看谁有 35 支钢笔。我们需要比较汤姆的钢笔和每个人的钢笔的数量。对于这种情况，我们可以使用开关盒。代码如下:

<html>
  <head>
    <title>
      Switch-Case
    </title>
  </head>
  <body>
    <script type="text/javascript">
      var Tom = 35;
      switch (Tom) {
        case 25: //Number of John's pens
          document.write("John has equal number of pens as Tom");
        break;
        case 35: //Number of Cindy's pens
          document.write("Cindy has equal number of pens as Tom");
        break;
        case 15: //Number of Laura's pens
          document.write("Laura has equal number of pens as Tom");
        break;
        case 18: //Number of Terry's pens
          document.write("Terry has equal number of pens as Tom");
        break; 
        default:
          document.write("No one has equal pens as Tom");
      }
    </script>
  </body>
</html>

输出如下:

Switch-case

注

现在，将第二种情况(35)的值更改为其他，并检查您的结果。

运动

  1. 假设除了周六和周日，你每天都需要去上学。写一个代码，在那里你会输入今天的日期，网页会显示你是否需要上学。(提示:使用开关盒。)
  2. 假设你有一个花园，你在一个月的偶数天给所有的植物浇水。写一个代码，告诉你那天你是否会给你的植物浇水。(提示:使用 if 条件和模数运算符(%)。)

循环

在这一段中，我们将学习一些叫做循环的有趣的东西。

考虑您需要使用 JavaScript 打印一行 100 次。你会怎么做？

你可以在程序中输入document.write("The line I want You to Write"); 100 次，也可以使用循环。

loop 的基本用途是多次做某事。比如说，你需要把 1 + 2 + 4 + 6 +…………+100 系列的所有整数打印到 100。计算是一样的，你只需要做多次。在这些情况下，我们使用循环。

我们将讨论两种循环类型，即循环的和循环的**。**

for 循环

成形环的基本结构如下:

for(starting ; condition ; increment/decrement)
{
  statement
}

starting参数是循环的初始化。您需要初始化循环才能启动它。condition参数是控制回路的关键要素。increment/decrement参数定义您的循环将如何增加/减少。

我们来看一个例子。你要打印 javascript 很好玩 10 次。代码如下图所示:

<html>
  <head>
    <title>For Loop</title>
  </head>
  <body>
  <script type="text/javascript">
    var java; 
    for(java=0;java<10;java++){
      document.write("javascript is fun"+"<br>");
    }
  </script>
  </body>
</html>

输出将是，类似于以下内容:

The for loop

没错。你把这句台词印了 10 遍。如果仔细查看代码，您将看到以下内容:

  • 我们声明了一个名为java的变量
  • 在for循环中，我们将0初始化为它的值
  • 我们添加了一个java<10条件，使浏览器从0计数到10
  • 我们将变量增加1；这就是为什么我们增加了java++

运动

  1. 使用 JavaScript 编写一个代码，它将打印以下输出:

    I have 2 apples.
I have 4 apples.
I have 6 apples.
I have 8 apples.
I have 10 apples.
I have 12 apples.
I have 14 apples.
I have 16 apples.
I have 18 apples.
I have 20 apples.

  2. 写一个代码，打印从 2 到 500 的所有偶数。

while 循环

您已经学习了如何使用 for 循环多次执行某个东西。现在，我们将学习另一个循环，称为 while 循环。while 循环的结构如下:

initialize;
while(condition){
  statement; 
  increment/decrement; 
}

上一个示例的代码如下:

<html>
  <head>
    <title>For Loop</title>
  </head>
  <body>
    <script type="text/javascript">
      var java = 0;
      while(java < 10){
        document.write("javascript is fun"+"<br>");
        java++;
      }
    </script>
  </body>
</html>

输出将与for循环相同。

运动

  1. 编写一个代码，使用 while 循环打印从 1 到 600 的所有奇数。(提示:使用模数运算符。)

  2. 编写一个代码，打印如下输出:

    5 x 1  = 5
5 x 2  = 10
5 x 3  = 15
5 x 4  = 20
5 x 5  = 25
5 x 6  = 30
5 x 7  = 35
5 x 8  = 40
5 x 9  = 45
5 x 10 = 50

总结

在本章中，您学习了使用 JavaScript 的逻辑操作。您学习了循环、条件运算和其他 HTML 标记。

我们需要关注这一章，因为我们已经在这里讨论了 JavaScript 中最重要的属性。如果你练习这一章和最后三章，你就可以成为一名 JavaScript 大师。我建议你不要走得更远，除非你对这四章都有很好的了解。如果你已经了解了我们之前讨论的所有话题，让我们继续进入第 5 章，嗨！驶入战斗。