韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解

文西马龙：http://blog.csdn.net/wenximalong/

js基本语法——三大流程控制

循环控制
听其名而知其意，就是让你的代码可以循环的执行。
案例：
编写一个程序，可以打印10句
“你好，我是刘德华同志”

demo1.html

<html><head><script language="javascript">for(var i=0; i<10; i++){document.writeln("你好，刘德华同志！<br/>");}document.writeln("=======<br/>");// while循环var i=0;while(i<10){document.writeln("你好，我是刘德华 <br/>");i++;}// do while循环document.writeln("=======<br/>");var i=0;do{document.writeln("你好，我是张学友 <br/>");i++;}while(i<10);</script></head><body></body>
</html>

看for循环执行的流程，看内存中的变化 内存示意图

程序流程图，看图知意。

循环控制
循环控制有三种
①for循环
for(循环初值;循环条件;步长){
语句; //循环体
}
②while循环
while(循环条件){
语句; //循环体

}

特别说明：while循环是先判断再执行语句。
③do while循环
do{
}while(循环条件);
特别说明：do while循环是先执行，再判断。
while和do while区别的 通俗讲解：
还钱的问题
while：上来先问你还不还钱，还钱，就不打你（先判断，再执行）
do while：上来先打一顿，打完了再问，还钱吗（先执行，再判断）

var i=0;
do{
document.writeln("hello <br/>");
i++;
}while(i<10);

的流程图
案例：
（1）计算1+2+…n的值

demo2.html

<html><head><script language="javascript">var n=window.prompt("请输入一个整数");n=parseInt(n);var res=0;for(var i=0;i<=n;i++){res+=i;}document.writeln("结果是"+res);</script></head><body></body>
</html>

（2）计算1!+2!+…+n!的值

demo3.html

<html><head><script language="javascript">var n=window.prompt("请输入一个整数");n=parseInt(n);var res=0;var temp=1;for(var i=1;i<=n;i++){for(var j=1;j<=i;j++){temp*=j;}res+=temp;tmep=1; // 清temp}document.writeln("结果是"+res);</script></head><body></body>
</html>

这个案例用来做调试太好了
代码执行流程图，加深理解

细致分析

n=2时

①执行完毕后，
就执行②，此时i=1,则i<=n成立
执行④
就执行⑤，此时j=1,i=1，则j<=i成立
执行⑦，temp*=j，即temp=1*1
然后执行⑥，j++，此时j=2
接着执行⑤，此时j=2,i=1，则j<=i不成立
跳出里层for循环，执行⑧，此时res=0,temp=1,则res+=temp;，即是res=0+1
接着执行⑨，temp=1，把temp清为1

然后执行外层循环的③，i++,此时i=2
接着执行②，进行判断，此时i=2，则i<=n成立
执行④
就执行⑤，此时j=1,i=2，则j<=i成立
执行⑦，temp*=j，即temp=1*1
然后执行⑥，j++，此时j=2
接着执行⑤，此时j=2,i=2，则j<=i成立
再执行⑦，temp*=j，即temp=1*2
然后再执行⑥，j++，此时j=3
接着执行⑤，此时j=3,i=2，则j<=i不成立
跳出里层for循环，执行⑧，此时res=1,temp=2,则res+=temp;，即是res=1+2
接着执行⑨，temp=1，把temp清为1

然后执行外层循环的③，i++,此时i=3
接着执行②，进行判断，此时i=3，则i<=n不成立
跳出外层循环，然后执行⑨，res=3

如果有一个工具，帮助我们向上面一样一步一步的分析就太好了，
在IE中进行js调试
在IE8中通过开发人员工具，就可以进行js的调试工作
注意：首先要在IE—工具—internet选项—高级中取消“禁止脚本调试”

对于低版本的IE浏览器，需要做下面的处里，才能进行js调试
1.安装Microsoft Script Editor
Microsoft Script Editor是office2003中的一个组件。要安装Microsoft Script Editor，首先要有office的安装程序。安装步骤如下：
a.打开word，工具—宏—Microsoft脚本编辑器，这个时候会需要office的安装文件
b.执行完上一步后，在Microsoft Script Editor中，调试—安装web测试，这个时候还会需要office的安装文件
c.完成安装后，重启IE和Microsoft Script Editor
2.调试
先决条件：
1.安装Microsoft Script Editor或Microsoft Script debugger
2.IE中打开了脚本调试。
要在IE中进行javascript debugger调试，首先要在IE—工具—internet选项—高级中取消“禁止脚本调试”，然后重新启动IE就可以使用Microsoft Script Editor。注意：IE较为不稳定，可能会出现该选项失效的情况。关闭IE重来一遍。

如何使用Microsoft Script Editor进行调试：
在javascript代码中，在你想要设置断点的位置，加上“debugger”
在已经处于debugger状态的Microsoft Script Editor代码窗口中设置断点
在IE中直接调用Microsoft Script Editor，请在IE地址栏中输入"javascript:debugger"回车
Microsoft Script Editor的具体使用方法请参考Microsoft Script Editor的帮助文档

双击下断点，重点看局部变量的变化
firefox浏览器下：Javascript的调试利器Firebug

经验：★★★js发生错误，如何定位其错误?
1.可以通过程序员的经验来判断
2.window.alert()来输出信息

3.使用firebug的调试工具[cy--5，浏览器对象模型BOM]

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理相关推荐

韩顺平轻松搞定网页设计(html+css+js),韩顺平轻松搞定网页设计方案(html+css+js)之javascript现场授课笔记(完整版).doc...
2011韩顺平轻松搞定网页设计(html+css+js)之 javascript现场授课笔记(完整版) 视频18整和19的前半部分不用看 Javascript的基本介绍 JS是用于WEB开发的脚本语言 ...
韩顺平php可爱屋源码_韩顺平_php从入门到精通_视频教程_第20讲_仿sohu主页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理...
韩顺平_php从入门到精通_视频教程_第20讲_仿sohu首页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理对sohu页面的分析注释很重要经验:写一点,测试一点,这是一个很好的方法. ...
html百度首页制作视频,韩顺平轻松搞定网页设计 html+css+js
韩顺平老师的教程影响着一代又一代的学子们,他的视频教程确实做的很经典,不论是java.php还是网页设计,都有出彩的地方.这里,小编给大家分享韩顺平老师的轻松搞定网页设计教程,绝对完整,全部存于百度网 ...
几行代码轻松搞定网页的简繁转换（转载）
对网页进行简繁字体转换的方法一般有两种:一是使用<简繁通>这样的专业软件,另外一种是制作两套版本的网页.显然,这两种方法都较为麻烦,而且专业软件一般不能用于免费的空间.笔者在这里给大家提供 ...
html 简繁文件转换器,几行代码轻松搞定网页的简繁转换
几行代码轻松搞定网页的简繁转换以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 对网页进行简繁字体转换的方法一般有两种 ...
几行代码轻松搞定网页的简繁转换
对网页进行简繁字体转换的方法一般有两种:一是使用<简繁通>这样的专业软件,另外一种是制作两套版本的网页.显然,这两种方法都较为麻烦,而且专业软件一般不能用于免费的空间.笔者在这里给 ...
汇道科技传授5个排版技巧，帮你轻松搞定UI设计
文字排版不只是从下拉选单选择字型和点数而已,文字排版是一项流传数世纪的技艺,自木制和金属的活版印刷便开始,而且它不只历史悠久,还很实用,大部分的人只要掌握一些实用的诀窍,就可以将之活用在诸如履历表.电 ...
HTML5期末大作业——抗击疫情感动人物-逆行者(6页)专题网页设计 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML5期末大作业--抗击疫情感动人物-逆行者(6页)专题网页设计 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计常见网页设计作业题材有个人. 美 ...
网站后台没有提示声怎么办_收藏 | 没有 PS 怎么办？10个在线作图网站，轻松搞定图片设计...
求职技巧 | 职业技能 | 通关考试,关注公众号:职域go Photoshop 已经成为大多数工作需要用到的工具,很多时候我们都要用到它来满足一些简单的排版.图片处理.尺寸调整或者是做一些简单的效果. ...
sql 显示百分比_轻松搞定数据分析之SQL——简单查询
每天早起或者睡前听一首温柔而美好的音乐,是一件很幸福的事情,无论你是否懂音乐,它都能带你发现生活中的隐藏的那些美好,今天我们先来一起欣赏Mindy Gledhill的单曲<California& ...

韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理

韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理相关推荐

最新文章

热门文章