JS基础 -- while循环

/*
* 题：
* 向页面输出连续的数字
*
* 先不考虑连续输出数字，首先考虑的是向页面输出的话，在js中应该用哪个方法
* 要使用的是document.write()这个方法，这个在write()括号中输出文字或数字后，会在html的中输出文字或数字
*
*/

        //  document.write(1);
        //  document.write(2);
                    //  效果自己创建一个项目去试试

/
/*
* 上面这样写之后，在html中所展现的是‘12’，这样的话不是很好的辨认，也不是我们所需要的，我们所需要的是1占一行，
* 2占一行这样排列，所以我们需要它们换行
* 那换行怎么做呢？
* js中‘\n’这个的确是换行，对于write(1)来说这个‘\n’来说是没有任何作用的，因为这个对于string来说可能是很有用的，
* 但write(1)可不行，得使用
这个换行标签，因为write(1)是向内输出，在body中是需要写标签的，
* 所以在换行这个上只用
，不能使用‘\n’。
* 格式请看下面：
*/

        //  document.write(1 + '
');
        //  document.write(2 + '
');
        //  document.write(3 + '
');
        //  ......

/
/*
* 接下来要考虑的是如何连续输出？？
* 对于连续输出的想法是不断的重复，这时会想到一个就是不断复制粘贴 document.write(1 + '
');，这样虽然能做到连续输出，
* 但是，这样写会不断的手动复制，粘贴完后还的保存、运行，这样不符合程序运行的规则。
*
* 在js中有个语句可以解决这个问题，这个语句就是 while循环 语句
* while语句：
* 通过循环语句可以反复的执行一段代码多次；
*
* while循环：
* - 语法：
* while(条件表达式){
* 语句...
* }
* - while语句在执行时，先多条件表达式进行求值判断，如果值为true，则执行循环体，循环体执行完毕以后，继续对表达式进行判断，
* 如果为true，则继续执行循环体，以此类推；
* 如果值为false，则终止循环体；
* ********************************
* 这里需要注意一个写法，这个写法会对我们的程序造成运行负担，也对用户体验造成困扰，这种写法我们叫它为 死循环；
* 就是下面这种写法，如果自己想尝试一下活不下心写了，那么恭喜你中大奖了，你会发现这个工具一直弹出窗口。
* 记住要想测试不要用下面的方法，就算你把alert(n++ +'
');这个注释掉了，你会发现开发工具会死掉，无论你是重启多少次电脑或者开发工具也是一样的
* 这时不要紧张，不要怕，这不是什么天大的事，天塌不下来，电脑系统也不会重装，你可以使用以下几个方法解决这个问题：
*
* Mac系统下：
* 不论你使用了什么HTML开发工具造成这样的问题，你只需要在电脑文件夹中找到你使用的开发工作创建的项目文件夹，找到你使用的文件夹
* 然后，使用Xcode打开造成问题的html文件或者js文件，打开后把while代码块注释掉，再然后就是重新启动你的HTML开发工具。
*
* win系统下：
* 不论你使用了什么HTML开发工具造成这样的问题，你只需要在电脑文件夹中找到你使用的开发工作创建的项目文件夹，找到你使用的文件夹
* 然后，系统带有可以写脚本的软件，应该是记事本具体自己去操作，只要能打开造成问题的html文件或者js文件，并且能修改和保存就行，
* 打开后把while代码块注释掉，再然后就是重新启动你的HTML开发工具。
*
* ps：他大爷的，刚刚自己在mac系统下测试的时候，习惯性写了alert()结果程序卡死，开发工具卡死，没办法只用Xcode打开问题的html文件，然后注释掉
* while代码块后，重启开发工具后才好；自己把自己恶心了一把。
*/

        // 死循环：
        //var n = 1;
        //while (true){
        //   alert(n++ +'
');
        //}

/
/*
* 虽然上面注释中已经提示过不要这么写，但是我相信一定有人不信这个邪非要这么写。
* 可以，不过，得加一句代码，那就是 break；
*
* break：结束语句或叫退出语句
* 加上这个就不会出现这个问题了，但是while只会执行一次
*
*/

        //  var n = 1;
        //  while (true){
        //      alert(n++ +'
');
        //      break;
        //  }

/
/*
* 如果想执行多次，又不想出现死循环，那该怎么写那？？？
* if判断，对，我们需要在while代码块中加一个 if判断就可以实现了,如下面代码一样：
*/

        //  var n = 0;
        //  while (true){
        //      document.write(n++ +'
');
        //      if (n == 10) {
        //          break;
        //      }
        //  }

/
/*
* 这样就可以有效的避免死循环，又能达到我们的要求执行多次。
* 这样写看起来挺好，但是，感觉代码有点多了，多的是if判断，那怎么才能不使用if判读就行实现执行多次哪？
* 首先，我们需要把while(true)中的true给去掉，这时你会觉得去掉了if和true，那该怎么写？？
* 接下来就开始写了，
* 第一，把true去掉
* 第二，把if判断条件复杂或者写到while表达式中，也就是true原来的位置里
* 第三，把等等于换成大于等于
* 第四，把break去掉
* 这样就可以精简掉几句代码
*/

        //1.创建并初始化一个变量
        var n = 1;
        //2.在循环中设置一个条件表达式
        while(n <= 10) {
            //3.定义一个更新表达式，每次更新初始化变量
            document.write(n++ + '
');
            //这三个条件缺一不可
        }

/
/*
* 接下来在说一个while的近亲
*
* do...while循环
* - 语法
* do{
* 语句...
* }while(条件表达式)
*
* - 执行流程：
* do...while语句在执行时，会先执行do的循环体，当do循环体执行完毕以后，再对while后的条件表达式进行判断
* 如果结果为true，则继续执行do循环体，执行完毕继续对while后的条件表达式进行判断，以此类推。
* 如果结果为false，则终止循环。
* 说完了do循环的执行流程，接下来说一下while的执行流程，然后在看一下do循环和while循环的区别在哪里？？
* - while执行流程：
* while (条件表达式)语句在执行时，会先对while后的条件表达式进行判断，如果结果为true。则执行while后面的循环体，
* 直到结果为false时，循环体才会终止循环；
*
* - do与while的区别：
* do循环是先执行循环体，然后执行对while条件表达式进行判断，如果结果为true，则继续执行do循环体。
* 还有要注意的是do循环是先执行循环体，然后才会对while的条件表达式进行判断，也就是说第一次执行时，不论while条件表达式的值是否为true，
* 都会输出do循环体内的语句。
*
* while循环是先对条件表达式进行判断，如果结果为true，才会继续执行循环体代码块。
* while循环在没有对条件表达式进行判断时，循环体代码块是不会先执行的。
*
* - 总结：总来说前者是先执行循环体代码块，然后才会对while的条件表达式进行判断，而while是先进行对条件表达式判读，然后才是执行循环体代码块。
*/

        var i = 1
        do {
            document.write(i++ + '- 
');
        } while (i <= 10);

/
/*
* 最后再次提醒，在写循环时一定要避免死循环，除非必要情况，一定不要写。不然会对程序造成崩溃，内存也会崩溃
*/