本文是一份详细的JavaScript学习笔记，涵盖了为什么要学习JavaScript、经典案例分析，包括网页构成、控件添加、事件响应、数学计算等多个方面，旨在帮助读者深入理解和应用JavaScript。通过实例，如计算圆面积、验证欧拉素数公式、爱因斯坦的台阶问题等，阐述JavaScript在图形界面和动态网页中的重要作用。
【经典回放】JavaScript学习详细干货笔记之（一）
【经典回放】JavaScript学习详细干货笔记之（二）
【经典回放】JavaScript学习详细干货笔记之（三）
目录
例5 欧拉素数公式验证，公式是a=n*n-n+41，n[-39,41]
一、为什么要学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 value="开始测试" />
这个语句的含义是：
加入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，则是按钮上显示的字符，可以和其他按钮一样、也可以不一样。
再加入：
<INPUT TYPE="input" ID="text1" 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>");
else
document.write(n+"欧拉公式错误"+"<br>");
}
}这个函数同C语言的差异也不大，用document.write()代替了printf()，用“var a,n;”代替了“int a,n;”，函数前补充了function，这些变动都是很小的。
最主要的是：document.write()能显示很多数据，这点是alter()不能比的。在上述的显示内容中，其中的："<br>"是回车换行，相当于C语言的："\n"，差别是一个在浏览器中起作用、一个是在黑屏幕上起作用。
最后、一定注意函数名称是：Euler()
所以，我们的按钮说明、就应该是这样的：
<INPUT TYPE="button" ID=BUTTON1 value="开始计算" οnclick='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>");
else
document.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()，所以按钮控件就是：
<INPUT TYPE="button" ID=BUTTON1 value="开始计算" οnclick='fun()'/>
而显示结果的文本框就是：
<INPUT TYPE="input" ID="TEXT1"/>
一定注意：在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()函数计算，所以整个网页将有两个命令按钮，所以要：
<INPUT TYPE="button" ID=BUTTON1 value="计算1" οnclick='fun1()'/>
<INPUT TYPE="button" ID=BUTTON2 value="计算2" οnclick='fun2()'/>
注意这两个按钮的响应函数：一个是fun1()、而另外一个是fun2()，这两个函数实际是从两个文本框中读数字、并把结果写到另外一个文本框里，所以就是：
<INPUT TYPE="input" ID="A"/>
<INPUT TYPE="input" ID="B"/>
<INPUT TYPE="input" ID="RESULT"/>
其中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：一个网页中表格的构造方法，你能看懂么？
作业：
1 在文件夹ext-3.0.0\examples下，找到index.html文件，打开它，然后逐个挑选出你喜欢的外观组件名称；
2 打开：ext-3.0.0\examples\desktop\desktop.html，看看这个组件的外观，说明该组件外观适合做什么样的系统？
3 Google中找：JQuery，寻找该编程框架下的各种组件，看看是否有你喜欢的，评价以下和ExtJS组件的外观差异；
4 Google中找：Dojo，寻找该编程框架下的各种组件，看看你最喜欢的组件是什么？
5 Google中找：YUI、mootools、Prototype等框架，看你喜欢的组件是什么？
6 网络上寻找上述框架的各种编程资料、范例；
7 哪种框架是IBM、SUN支持的？
8 哪种框架是支持2D、3D作图的？仅仅是做图、还可以有什么框架支持？
9 上述框架的基本程序、在哪个网站上提供引用？网络地址是什么？
10 这些框架是否有收费的？
11 上述框架的基本编程语言是什么？
12 对JavaScript进行编程、最好的编程工具是什么？FireBug是个什么样的系统？它要什么浏览器支持？
刘一哥GIS：专注GIS教育，探索GIS奥秘，分享GIS价值！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
