【经典回放】JavaScript学习详细干货笔记之（一）

【经典回放】JavaScript学习详细干货笔记之（一）

【经典回放】JavaScript学习详细干货笔记之（二）

【经典回放】JavaScript学习详细干货笔记之（三）

一、为什么要学JavaScript

二、JavaScript经典案例

例1 一个最简单的网页构成：

例2 浏览器上加入控件

例3 事件与响应程序

例4 输入半径、求圆面积

例5 欧拉素数公式验证，公式是a=n*n-n+41，n[-39,41]

例6 爱因斯坦的台阶

例7 边长为a,b,c的三角形的面积。

例8 最大公约数。

一、为什么要学JavaScript

首先、JavaScript是浏览器下运行的程序，也就是说：只要是能上网的浏览器、就应该能支持JavaScript的运行，这点，是C语言、VB等根本不能比拟的事情。所以网络上许多优秀的程序，都是用JavaScript编写的，能让你的网页功能异常强大。在EXT3.0的文件夹里、就是一套JavaScript编写好的程序包，恰当调用这些包、就能编写出和这些范例一样的程序，而类似这样的包还很多，比如JQuery、Dojo、YUI等等的，它们的功能都非常强大，所以学会JavaScript、善于使用这些包的程序、非常重要。

同理，我们在后面还要学到C#，这个语言主要是给服务器编程使用的，仅仅是浏览器下的程序是远远不够的。随后我们学习的Ajax编程、主要是要用这两套语言去完成，当然，还要其他的语言来支持。

那么我们现在学习的C语言，实际目前最主要的用途就是：首先是能考证、其次是让学习JavaScript和C#变的容易点，毕竟这些语言的用法有很大的相似性。事实上我们大多的C语言作业、是可以用JavaScript去完成的。

二、JavaScript经典案例

JavaScript是一个支持图形界面的程序，而图形界面的构成，是用HTML语言构成的，HTML就是网页设计的语言，它的全部内容很多，但在我们开始的学习中，我们仅仅从最简单的学习起。

掌握以下经典案例，JavaScript手到擒来。

例1 一个最简单的网页构成：

<HTML><HEAD><TITLE>这里是你网页的标题</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码</SCRIPT></HEAD><BODY BGCOLOR="#FF1234"><DIV></DIV></BODY>
</HTML>

注意这个程序段落：<HTML>是这个段落的开始，最后，要用</HTML>去结束。在这个大段落里，有<HEAD>和<BODY>两个段落，每个段落都用</HEAD>和</BODY>结束，而在<HEAD>里，也有两个段落：<TITLE>和<SCRIPT>两个段落。在随后的介绍里，我们的程序将写在<SCRIPT>段落里。

< BODY BGCOLOR="#FF1234">说明了网页构成的单元，其中BGCOLOR是背景颜色，对一个网页，颜色是有红绿蓝三种基本颜色组成的，每种颜色的明亮程度分为0~255个等级，转换成16进制、就是0~FF，上述的颜色描述，就是说红色亮度为FF、绿色亮度是12、而蓝色的亮度是34，注意都是16进制的。如果说颜色是：”#FFUVWX”、则显然是错误的，因为16进制里没UVWX这样的数字。修改颜色的值，构造出一个你喜欢的网页背景颜色。运行它，你会发现在<TITLE></TITLE>中的字符将显示在浏览器的左上角中。

例2 浏览器上加入控件

浏览器上加入控件的意思是：让浏览器上显示出个按钮、文本框之类的东西，加入控件一定要记着：要写在<DIV></DIV>段落中，比如我们在浏览器上加入按钮，就是：

这个语句的含义是：

加入INPUT（输入模式）的控件；

TYPE="button"：意思是说：类型是按钮；

ID=BUTTON1：这个按钮的名称是BUTTON1，以后或许我们要加100个按钮，所以100个按钮类型都是TYPE=”button”、但每个都要有名称，比如BUTTON1到BUTTON100；

value="开始测试"：说明按钮上显示：开始测试

注意这个语句写的位置：

程序2： a1_1.htm

注意位置，如果再加入一行：

<INPUT TYPE="button" ID=BUTTON2 value="开始测试" />

浏览器上将会有2个按钮，注意ID，这个控件是BUTTON2，你把它改成BUTTON1，尽管浏览器也能显示出来，但这样就无法使用了。至于value，则是按钮上显示的字符，可以和其他按钮一样、也可以不一样。

再加入：

则代表给浏览器上加入了一个文本框，名称text1，写入””中则代表要在JavaScript中直接按text1使用它，这个和BUTTON1不一样，后面还会介绍到。注意：如果要加入很多的文本框，则它们每个的ID都是不能相同的。

尝试着加入3个按钮、5个文本框。

<HTML><HEAD><TITLE>加入控件测试</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码</SCRIPT></HEAD><BODY BGCOLOR="#00FF00"><DIV><INPUT TYPE="button" ID=BUTTON1 value="开始测试" /></DIV></BODY>
</HTML>

例3 事件与响应程序

所谓事件，就是当你的鼠标点了控件、双击控件或者移动过控件等这些操作；

响应程序，就是发生事件后、该进行什么样的处理。

我们现在首先把界面上仅仅造一个按钮、看鼠标点该按钮后要进行的操作。要说明这样的按钮，就是用：

<INPUT TYPE="button" ID=BUTTON1 value="点我" οnclick='响应函数名称()'/> 构造按钮，这个控件说明中，其中：

οnclick='响应函数名称()'

非常重要，所谓响应函数名称、就是用JavaScript编写的一个函数。函数的名称是自己可以随便定义的，比如我们打算用函数fun1()来处理这个鼠标点击，则函数是：

function fun1()
{alert("你好，我的第一个网页程序~");
}

alert()是JavaScript的一个提示函数，会在消息框中提示后面的字符串，除了函数前必须加function外，其他写法和C语言没什么差别。

最关键的有两点：

1 我们的按钮BUTTON1的实践响应函数应该是fun1()、所以，这个按钮的说明就应该是这样的：

<INPUT TYPE="button" ID=BUTTON1 value="点我" οnclick='fun1()'/>

一定注意οnclick=后的写法

2 响应函数fun1()在网页中、要写在<SCRIPT></SCRIPT>之间，千万不能在其他地方写这些函数代码，否则不会执行。

完整的程序就是下面的内容：

<HTML><HEAD><TITLE>这里是你网页的标题</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码function fun1(){alert("你好，我的第一个网页程序~");}</SCRIPT></HEAD><BODY BGCOLOR="#00FF00"><DIV><INPUT TYPE="button" ID=BUTTON1 value="点我" onclick='fun1()'/></DIV></BODY>
</HTML>

一定注意上面内容中红色粗体字部分，浏览器中打开它，点那个按钮吧，会看到提示的。

例4 输入半径、求圆面积

首先想界面构成，要输入半径，肯定要一个文本框，而计算，则要有个命令按钮，所以要加两个控件：

<INPUT TYPE="button" ID=BUTTON1 value="开始计算" onclick='Area()'/><INPUT TYPE='input' ID="text1"/>

也就是说：在text1中输入半径、按下“开始计算“按钮，则将把结果显示出来。注意这个按钮：它的鼠标点事件响应函数是Area()

对JavaScript语言来说，变量仅有一个类型：var，注意是小写的，这点和C语言有很大不同，但使用起来、确实很方便。首先、JavaScript函数要获得text1控件中输入的值，于是有：

function Area()
{var r;r=text1.value;
}

这段程序就可以从text1控件中读到输入的值。再申请个变量a用来计算圆面积，就是：

function Area()
{var r,a;r=text1.value;a=3.141592654*r*r；alert(“圆面积是”+a);
}

这样，a中就可以计算出圆的面积来，要显示弹出消息框来报告结果。整个程序是：

<HTML><HEAD><TITLE>圆的面积</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码function Area(){var r,a;r=text1.value;a=3.141592654*r*r;alert("圆面积是："+a);}</SCRIPT></HEAD><BODY BGCOLOR="black"><DIV><INPUT TYPE="button" ID=BUTTON1 value="开始计算" onclick='Area()'/><INPUT TYPE='input' ID="text1"/></DIV></BODY>
</HTML>

另外一种输出语句是：document.write(“圆面积是：”+a);

注意：这一句将把结果直写到网页上、并清除所有的元素，用这一句代替alter()，则又是新的一种显示结果，a4.htm就是这样的网页，这种显示方法适合显示结果很多的情况。当然，你也可以再加一个文本框、把结果显示在新的文本框里。

**例5 欧拉素数公式验证，公式是a=n*n-n+41，n[-39,41]**

首先这个公式的计算没输入数据的要求，所以不需要文本框，但我们要补充一个判断素数的函数，对C语言，则是：

int prime(int n){int I;for(I=2;I<=n/2;I++)if(n%I==0) return 0;return 1;
}

上述函数我们很熟悉，现在要改写成JavaScript语言的，注意JavaScript变量仅仅有var，并且JavaScript有false、ture的概念，所以有：

function prime(n)
{var i;for(i=2;i<=n/2;i++)if(n%i==0) return false;return true;
}

注意和C语言的差别：首先是函数没返回类型，这点和C有很大区别，其次是C的函数没有function这样的描述。

为证明欧拉公式，我们再编写个函数，就是：

function Euler()
{var a,n;for(n=-39;n<=41;n++){a=n*n-n+41;if(prime(a))document.write(n+"欧拉公式正确"+"<br>");elsedocument.write(n+"欧拉公式错误"+"<br>");}
}

这个函数同C语言的差异也不大，用document.write()代替了printf()，用“var a,n;”代替了“int a,n;”，函数前补充了function，这些变动都是很小的。

最主要的是：document.write()能显示很多数据，这点是alter()不能比的。在上述的显示内容中，其中的："<br>"是回车换行，相当于C语言的："\n"，差别是一个在浏览器中起作用、一个是在黑屏幕上起作用。

最后、一定注意函数名称是：Euler()

所以，我们的按钮说明、就应该是这样的：

说明这个按钮一旦按下、则执行函数：Euler()，整个就是：

<HTML><HEAD><TITLE>欧拉公式</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码function prime(n){var i;for(i=2;i<=n/2;i++)if(n%i==0) return false;return true;}function Euler(){var a,n;for(n=-39;n<=41;n++){a=n*n-n+41;if(prime(a))document.write(n+"欧拉公式正确"+"<br>");elsedocument.write(n+"欧拉公式错误"+"<br>");}}</SCRIPT></HEAD><BODY BGCOLOR="#FFFF00"><DIV><INPUT TYPE="button" ID=BUTTON1 value="开始计算" onclick='Euler()'/></DIV></BODY>
</HTML>

这个程序能计算-39到41之间的值，尝试着修改一下，让它能计算用户输入的数据范围的值。实际就是再加2个文本框、让用户可以输入两个数据。

例6 爱因斯坦的台阶

这是一个典型的穷举问题，只能不断的尝试，先设台阶数量为n，n从2开始、逐步增加，只要满足条件：

n%2==1&&n%3==2&&n%5==4&&n%6==5&&n%7==0

则循环停止，n从2到不知道大小的一个数，所以可以先假定到10000吧，就是：

for(n=2;n<=10000;n++)

if(n%2==1&&n%3==2&&n%5==4&&n%6==5&&n%7==0) break;

(这里你看不出来是C语言还是JavaScript，实际都一样)

或者写成：

for(n=2;!(n%2==1&&n%3==2&&n%5==4&&n%6==5&&n%7==0);n++)

;

注意这个循环是空循环，意思是不满足条件：

n%2==1&&n%3==2&&n%5==4&&n%6==5&&n%7==0

则执行空循环、然后再n++;

写法可以很多，结果是一个，我们这里把结果显示在一个文本框TEXT1里。所以上述函数就是：

function fun()
{var n=2;for(n=2;!(n%2==1&&n%3==2&&n%5==4&&n%6==5&&n%7==0);n++);TEXT1.value=n;
}

注意函数名称是：fun()，所以按钮控件就是：

而显示结果的文本框就是：

一定注意：在JavaScript函数中引用的是：TEXT1控件，则定义的时候一定要把控件的名称也写成TEXT1，如果写成Text1，则肯定杯具了。整个就是：

爱因斯坦的台阶：

<HTML><HEAD><TITLE>爱因斯坦的台阶</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码function fun(){var n=2;for(n=2;!(n%2==1&&n%3==2&&n%5==4&&n%6==5&&n%7==0);n++);TEXT1.value=n;}</SCRIPT></HEAD><BODY BGCOLOR="#FFFF00"><DIV><INPUT TYPE="button" ID=BUTTON1 value="开始计算" onclick='fun()'/><INPUT TYPE="input" ID="TEXT1"/></DIV></BODY>
</HTML>

例7 边长为a,b,c的三角形的面积。

公式：s=(a+b+c)/2;

A=sqrt(s*(s-a)*(s-b)*(s-c))

这个公式最关键的是：要首先判断a、b、c是不是三角形的数据，否则开平方程序就错了，会崩溃的。

为输入三个边长的数据，首先要有三个文本框控件，考虑到结果也显示在文本框里，于是做4个文本框，外带一个计算按钮，于是有：

<INPUT TYPE="button" ID=BUTTON1 value="开始计算" onclick='Triangle()'/><INPUT TYPE="input" ID="A"/><INPUT TYPE="input" ID="B"/><INPUT TYPE="input" ID="C"/><INPUT TYPE="input" ID="RESULT"/>：

其中A、B、C控件是输入三边长的文本框，而按钮的响应函数，一定注意是Triangle(),这个函数是计算三角形面积的。

最简单的函数就是：

function Triangle()
{var a,b,c,s,a;a=A.value;b=B.value;c=C.value;s=(a+b+c)/2;a=Math.sqrt(s*(s-a)*(s-b)*(s-c));RESULT.value=a;
}

整个程序就是：

<HTML><HEAD><TITLE>三角形的面积</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码function Triangle(){var a,b,c,s,a;a=A.value;b=B.value;c=C.value;s=(a+b+c)/2;a=Math.sqrt(s*(s-a)*(s-b)*(s-c));RESULT.value=a;}</SCRIPT></HEAD><BODY BGCOLOR="#FFFF00"><DIV><INPUT TYPE="button" ID=BUTTON1 value="开始计算" onclick='Triangle()'/><INPUT TYPE="input" ID="A"/><INPUT TYPE="input" ID="B"/><INPUT TYPE="input" ID="C"/><INPUT TYPE="input" ID="RESULT"/></DIV></BODY>
</HTML>

但这个程序肯定是有问题的，计算出来是错误的。首先Math.sqrt()必须要求是个float类型的数据，而从文本框里读到的数据，我们却不知道类型，实际大多情况下，我们知道是字符串。JavaScript有个强制类型转换函数，就是parseFloat()，于是上述函数就变为：

<HTML><HEAD><TITLE>三角形的面积</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码function Triangle(){var a,b,c,s,a;a=parseFloat(A.value);b= parseFloat(B.value);c= parseFloat(C.value);s=(a+b+c)/2;a=Math.sqrt(s*(s-a)*(s-b)*(s-c));RESULT.value=a;}</SCRIPT></HEAD><BODY BGCOLOR="#FFFF00"><DIV><INPUT TYPE="button" ID=BUTTON1 value="开始计算" onclick='Triangle()'/><INPUT TYPE="input" ID="A"/><INPUT TYPE="input" ID="B"/><INPUT TYPE="input" ID="C"/><INPUT TYPE="input" ID="RESULT"/></DIV></BODY></HTML>

但这个程序非常脆弱，输入负值也计算，但肯定是程序崩溃。

为此，还要把这个程序做的更加健壮，于是要假如判断：

三边为负则是：

if(a<=0||b<=0||c<=0)
{alert("这不是三角形数据、滚~思想有多远滚的有多远~");return;
}

是否为三角形三边的判断则是：

if((a+b)<c||(b+c)<a||(a+c)<b)
{alert("这是三角形数据？滚~欠揍啊~");return;
}

于是修改后的程序就是：

<HTML><HEAD><TITLE>三角形的面积</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码function Triangle(){var a,b,c,s,a;a=parseFloat(A.value);//parseFloat()函数是转换成浮点数字b=parseFloat(B.value);c=parseFloat(C.value);if(a<=0||b<=0||c<=0){alert("这不是三角形数据、滚~思想有多远滚的有多远~");return;}if((a+b)<c||(b+c)<a||(a+c)<b){alert("这是三角形数据？滚~欠揍啊~");return;}s=(a+b+c)/2;a=Math.sqrt(s*(s-a)*(s-b)*(s-c));//Math.sqrt()是开平方RESULT.value=a;}</SCRIPT></HEAD><BODY BGCOLOR="#FFFF00"><DIV><INPUT TYPE="button" ID=BUTTON1 value="开始计算" onclick='Triangle()'/><INPUT TYPE="input" ID="A"/><INPUT TYPE="input" ID="B"/><INPUT TYPE="input" ID="C"/><INPUT TYPE="input" ID="RESULT"/></DIV></BODY></HTML>

例8 最大公约数。

回忆小学的公约数计算方法，比如求30、18的最大公约数，就是：

当然也可以这么计算：

30%18=12

18%12=6

也就是说，令：m=30,n=12

r=m%n

有：r=12

再次有：m=n；n=r；就是m=18,n=12，再次计算就是：

r=m%n，得到r=6

最后，再次执行m=n;n=r;就是m=12,n=6，计算有：

r=m%n，得到r=0，循环终止。

这个算法就是所谓的欧几里德算法。

做这个算法的时候，确定一定是大数字在m、而小数字在n。

所以有：

function gcd1(m,n)
{var r;//根据m、n的大小交换数据if(m<n){r=m;m=n;n=r;}while(r=m%n){m=n;n=r;}return n;
}

这个算法就是所谓迭代，另外一个算法就是所谓穷举，首先就是因数分解两个数字：

30=1*2*3*5;

18=1*2*3*3;

这两个数字共同的部分是1*2*3，这个就是最大公约数。根据最大公约数的性质，这个数一般不大于两个数中的最大者，所以穷举的C语言范例就是：

int gcd(int m,int n)
{int r,i,a;a=m>n?m:n;r=1;for(i=1;i<a;i++)if(m%i==0&&n%i==0&&i>r) r=i;return r;
}

对于JavaScript，转换过程一样很简单：

 function gcd2(m,n){var r,i,a;a=m>n?m:n;r=1;for(i=1;i<a;i++)if(m%i==0&&n%i==0&&i>r) r=i;return r;}

实际无论哪个函数，都可以得到你希望的结果。

这个情况下，我们期望有两个命令按钮，一个按gcd1()函数计算、而另外一个则按gcd2()函数计算，所以整个网页将有两个命令按钮，所以要：

注意这两个按钮的响应函数：一个是fun1()、而另外一个是fun2()，这两个函数实际是从两个文本框中读数字、并把结果写到另外一个文本框里，所以就是：

其中A、B两个文本框是输入数据、而RESULT则是显示结果。但要注意的是：fun1()调用的是gcd1()函数、而fun2()调用的是gcd2()函数，它们相似、但完全不是一个意思。

<HTML><HEAD><TITLE>最大公约数</TITLE><SCRIPT TYPE="TEXT/JAVASCRIPT">//这里要加入的是JAVASCRIPT的代码//欧几里德算法function gcd1(m,n){var r;if(m<n){r=m;m=n;n=r;}while(r=m%n){m=n;n=r;}return n;}//穷举算法function gcd2(m,n){var r,i;var a=m>n?m:n;r=1;for(i=1;i<a;i++)if(m%i==0&&n%i==0&&i>r) r=i;return r;}function fun1(){var a=parseInt(A.value);var b=parseInt(B.value);RESULT.value=gcd1(a,b);}function fun2(){var a=parseInt(A.value);var b=parseInt(B.value);RESULT.value=gcd2(a,b);}</SCRIPT></HEAD><BODY BGCOLOR="#FFFF00"><DIV><INPUT TYPE="button" ID=BUTTON1 value="计算1" onclick='fun1()'/><INPUT TYPE="button" ID=BUTTON1 value="计算2" onclick='fun2()'/><INPUT TYPE="input" ID="A"/><INPUT TYPE="input" ID="B"/><INPUT TYPE="input" ID="RESULT"/></DIV></BODY></HTML>

余下的程序，它们分别是：

a8.htm:e的近似值，简单~

a10.htm: 三数排序，同C，没什么奇怪的。

a11.htm:作业3.5(2)，++、---运算，结果同C一样

a12.htm:作业3.5(6)，++、---运算，结果同C一样

a13.htm:全局变量和静态变量，JavaScript不认识static

a14.htm:不起作用的swap()函数，原理同C一样

a15.htm:全局变量的swap()函数，原理同C一样

a16.htm：JavaScript中的数组定义

a17.htm：自由的JavaScript数组，大小是你爱用多大它就多大，比C幸福。

a18.htm：一个网页中表格的构造方法，你能看懂么？

作业：