您的位置：首页 > Web前端 > JavaScript

韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理

2012-11-27 13:00 1551 查看

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

关于for循环

案例：

打印一行10个星号

①

for(var i=0;i<10;i++){
document.writeln("*");
}

或者②

for(var i=1;i<=10;i++){
document.writeln("*");
}

一个是i=0;i<10;而另一个是i=1;i<=10;两者都是循环打印星号10次。

在①中，i取值：0,1,2,3,4,5,6,7,8,9共10个。

在②中，i取值：1,2,3,4,5,6,7,8,9,10共10个。

<html>
<head>
<script language="javascript">
for(var i=0;i<10;i++){
document.writeln("*");
}
document.writeln("<br/>=========<br/>");
for(var i=1;i<=10;i++){
document.writeln("*");
}
</script>
</head>
<boyd></body>
</html>

初学者，容易对i=0开始计数，转不过来，因为我们现实生活中计数都是从1开始，所以看i=1;i<=10;更加习惯些。

数组小标从0开始开始，为什么？找到这样的解释：

C的许多特征是为了方便编译器设计者而建立的(为什么不呢？开始几年C语言的主要客户就是那些编译器设计者)。数组下标从０而不是从１开始也是根据编译器设计者的思路而来的，因为偏移量的概念在他们心中已是根深蒂固。但这种设计让非编译器设计者感觉很别扭，他们可能会在一个定义的a[10]的a[10]存储数据，导致有一位偏移（one-bit offset）错误。

java为何下标也从０开始呢，估计是考虑到习惯性问题。C/C++程序员被固化成下标从０开始后，想更改它也是件费劲事。

没什么可说的，就是这么定义的，接受它。

============

（1）打印完整金字塔

我自己的思考过程，参看上一篇博文：javascript打印完整金字塔型_完整菱形_空心菱形_思路算法详解_js源代码

观察发现：

第一行星号的个数为1；

第二行的星号个数为2*2-1；

第三行星号的个数为2*3-1；

第四行星号的个数为2*4-1；以此类推…

星号的个数，即为要循环打印几次，这里设置i=1更好理解些。

//金字塔
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.write(" ");
}
for(var j=1;j<=2*i-1;j++){
document.write("*");
}
document.writeln("<br/>");
}

（2）打印空心三角形

发现如下规律：

①除去最后一行后，每一行，我们要打印的是内层循环的第一次和最后一次，就是三角形的边上的星号。例如第二行，一共有三个，第一个星号，第二个空格，第三个星号，当设置i=1开始，则i取值1,2,3，用if语句只打印1和3，碰到2就打印星号。以此类推。

②特殊情况：最后一行，要满打。

//空心金字塔
for(var i=1;i<=n;i++){ //行数
for(var k=1;k<=n-i;k++){ //打空格
document.writeln(" ");
}
for(var j=1;j<=(2*i-1);j++){ //打星号
if(i==n){ //最后一行
document.writeln("*");
}else if(j==1 || j==(2*i-1)){ //两边
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}

（3）打印空心菱形的下半部分，不带底边的，如下图所示

截图带上底边，是为了方便观察规律，这是n=6时候的情况，6行。

观察上图发现如下规律，除去底边后，要打印的有5行。

①每行前面的空格数，和行数是一致的，控制打印空格的循环层，设置k=1;k<=i;

②在打印星号的循环层，我们要打印的就是每次循环的第一个星号和最后一个星号，最后一个星号和行数的关系为：9-2*i+2;当i=1时，打印第9个星号

//菱形下半部分，不带底边的
for(var i=1;i<=n-1;i++){ //不带底边，就可以少打印一行
for(var k=1;k<=i;k++){
document.writeln(" ");
}
for(var j=1;j<=(9-2*i+2);j++){
if(j==1 || j==(9-2*i+2)){
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}

（4）打印菱形的上半部分，带底边，但是仅仅保留底边的第一个和最后一个星号。把if(i==n)的判断去掉。

for(var i=1;i<=n;i++){ //行数
for(var k=1;k<=n-i;k++){ //打空格
document.writeln(" ");
}
for(var j=1;j<=(2*i-1);j++){ //打星号
if(j==1 || j==(2*i-1)){ //两边
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}

（5）打印完整菱形，上面的分析就可以得出了

//空心菱形
for(var i=1;i<=n;i++){ //行数
for(var k=1;k<=n-i;k++){ //打空格
document.writeln(" ");
}
for(var j=1;j<=(2*i-1);j++){ //打星号
/*if(i==n){ //最后一行
document.writeln("*");
}else*/ if(j==1 || j==(2*i-1)){ //两边
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}
for(var i=1;i<=n;i++){
for(var k=1;k<=i;k++){
document.writeln(" ");
}
for(var j=1;j<=(9-2*i+2);j++){
if(j==1 || j==(9-2*i+2)){
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}

完整图形：

<html>
<head>
<!--
*    1
***   2*2-1
*****  2*3-1
******* 2*4-1
-->
<script language="javascript">
var n=window.prompt();
//金字塔
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.write(" ");
}
for(var j=1;j<=2*i-1;j++){
document.write("*");
}
document.writeln("<br/>");
}
//空心金字塔
for(var i=1;i<=n;i++){ //行数
for(var k=1;k<=n-i;k++){ //打空格
document.writeln(" ");
}
for(var j=1;j<=(2*i-1);j++){ //打星号
if(i==n){ //最后一行
document.writeln("*");
}else if(j==1 || j==(2*i-1)){ //两边
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}
//document.writeln("<br/>");
//菱形下半部分，不带底边的
for(var i=1;i<=n-1;i++){
for(var k=1;k<=i;k++){
document.writeln(" ");
}
for(var j=1;j<=(9-2*i+2);j++){
if(j==1 || j==(9-2*i+2)){
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}
//空心菱形
for(var i=1;i<=n;i++){ //行数
for(var k=1;k<=n-i;k++){ //打空格
document.writeln(" ");
}
for(var j=1;j<=(2*i-1);j++){ //打星号
//把if(i==n)判断去掉，则底边也是打印第一个和最后一个星号
/*if(i==n){ //最后一行
document.writeln("*");
}else*/ if(j==1 || j==(2*i-1)){ //两边
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}
for(var i=1;i<=n;i++){
for(var k=1;k<=i;k++){
document.writeln(" ");
}
for(var j=1;j<=(9-2*i+2);j++){
if(j==1 || j==(9-2*i+2)){
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}
</script>
</head>
<body></body>
</html>

至此：配合我上一篇博文，js打印完整金字塔型，完整菱形，完整空心菱形就告一段落，程序的优化以后再谈。

[b]★★★★★补充：★★[b]★[b]★[b]★[/b][/b][/b][/b]

上面的（3），考虑的是n=6时候的情况，9-2*i+2;没有一般性。

如果还是还是上面的代码，当n=7的时候，空心菱形就错乱了，如下图所示：

需要改进

当我们把底边下面的一行，记为第一行的时候。

当n=5时，最后一个星号为7

当n=6时，最后一个星号为9

当n=7时，最后一个星号是11

…

当n=m时，最后一个星号是2*m-3

当n=7时

改进后的代码：

//菱形下半部分，不带底边的
for(var i=1;i<=n-1;i++){
for(var k=1;k<=i;k++){
document.writeln(" ");
}
for(var j=1;j<=(2*n-3-2*i+2);j++){
if(j==1 || j==(2*n-3-2*i+2)){
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}

当n=7时，空心菱形如下图所示：

改进后的代码，把原来的9-2*i+2循环注释掉

for(var i=1;i<=n;i++){
for(var k=1;k<=i;k++){
document.writeln(" ");
}
/*for(var j=1;j<=(9-2*i+2);j++){
if(j==1 || j==(9-2*i+2)){
document.writeln("*");
}else{
document.writeln(" ");
}
}*/
for(var j=1;j<=(2*n-3-2*i+2);j++){
if(j==1 || j==(2*n-3-2*i+2)){
document.writeln("*");
}else{
document.writeln(" ");
}
}
document.writeln("<br/>");
}

后记：罗马不是一天建成的，代码也不是一下就写好的，不怕错，错了找到然后解决，更能加深理解。

==================

javascript——函数

内容介绍

1.常用函数介绍

2.js面向对象编程——对象与对象实例

学习目标

1.充分理解函数的感念

2.能熟练的自定义函数

3.掌握js中常用的系统函数

抛出问题：函数——为什么需要函数

请完成一个这样的程序

输入两个数，再输入一个运算符(+,-,*,/)，得到结果

demo2.html

<html>
<head>
<script language="javascript">
//输入两个数，再输入一个运算符（+_*/），得到结果
var num1=window.prompt("请输入第一个num");
var num2=window.prompt("请输入第二个num");
var operator=window.prompt("请输入运算符");

num1=parseFloat(num1);
num2=parseFloat(num2);

var res=0;
if(operator=="+"){
res=num1+num2;
}else if(operator=="-"){
res=num1-num2;
}else if(operator=="*"){
res=num1*num2;
}else{
res=num1/num2;
}
document.writeln("res="+res);
</script>
</head>
<body></body>
</html>

通过这个，引出函数的必要性

再一个问题：如果在另外的html文件(比如a.html,b.html,c.html) 中也需要完成：输入两个数，再输入一个运算符(+,-,*,/)，得到结果。那又该怎么办啊？

解决方法——函数：

为完成某一个功能的程序指令（语句）的集合，称为函数。

在js中，函数分为：自定义函数、系统函数（经常查看js帮助手册）

为了复用，单独的js文件

js函数

①为什么需要函数

②函数的基本概念

为完成某一个功能的代码（语句，指令）的集合

③基本语法

function 函数名(参数列表){

//代码…

return 值;//可以选择

}

demo3.html

<html>
<head>
<script language="javascript">
//输入两个数，再输入一个运算符（+_*/），得到结果
var num1=window.prompt("请输入第一个num");
var num2=window.prompt("请输入第二个num");
var operator=window.prompt("请输入运算符");

num1=parseFloat(num1);
num2=parseFloat(num2);

//如何调用函数

document.writeln("res="+jsSuan(num1,num2,operator));
//自定义函数
function jsSuan(num1,num2,operator){ //特别强调 参数名请不要带var
var res=0;
if(operator=="+"){
res=num1+num2;
}else if(operator=="-"){
res=num1-num2;
}else if(operator=="*"){
res=num1*num2;
}else{
res=num1/num2;
}
return res; //返回
}

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

改进：

把上面的函数单独提出，写到js文件中，然后在需要的地方引入

myfuns.js

function jsSuan(num1,num2,operator){ //特别强调 参数名请不要带var
var res=0;
if(operator=="+"){
res=num1+num2;
}else if(operator=="-"){
res=num1-num2;
}else if(operator=="*"){
res=num1*num2;
}else{
res=num1/num2;
}
return res; //返回
}

demo4.html

<html>
<head>
<script language="javascript" src="myfuns.js"></script>
<script language="javascript">
//输入两个数，再输入一个运算符（+_*/），得到结果
var num1=window.prompt("请输入第一个num");
var num2=window.prompt("请输入第二个num");
var operator=window.prompt("请输入运算符");

num1=parseFloat(num1);
num2=parseFloat(num2);

//外部引用

document.writeln("res="+jsSuan(num1,num2,operator));
</script>
</head>
<body></body>
</html>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航