javascript编程起步（一至七课）

javascript编程起步（第一课）
不管你以前学没有学过javascript，本教程都能带您进入javascript的殿堂，领悟javascript的魅力。
  大家来到这里，都是javascript的爱好者，对javascript都多多少少有一定的理解。关于javascript
的历史等就不做介绍了，我们直接来学习它，用它。
  也许大部分人都认为javascript是在客户端运行的，其实不然。javascript有两种不同的运行环境，
一个是在服务器端的javascript，另一个就是客户端的javascript了。还有就是javascript也是面向对象
的语言。
  作为第一课，只是给大家一个简单的认识，东西不是太多。主要有以下三个方面：
  1、在页面添加javascript
  2、javascript的数据类型
  3、javascript最基本的三个对话框

  关于怎么添加javascript，我想大家都知道，就是
  <script language="javascript">   //这行是javascript脚本标记，斜杠后面的就是注释了
  document.write("在页面显示的javascript") //在页面显示一句话
  </script>
  /*这也是注释，
    不过是多行的。
  */
  我想这个今天就不细讲了，留到下一课讲，就当是这课的作业吧，就是关于适应各种环境的javascript
的添加。如不支持javascript的浏览器，我们该加入些什么才能不让浏览器显示javascript的源代码等等。

  第二个也就是今天讲的最重要的一个，就是javascript的数据类型，主要有以下几个基本的类型。
  字符串（string）
  数字（number）
  布尔值（boolean）
 
  字符串就是由一连串的字符组成的序列。包括字母、数字以及标点符号。当然还可以是汉字等。简单一点
就是表示文本信息。

  数字又分为两类：整型数字和浮点型数字。
  整数包括正整数，零和负整数。

  javascript中的数字可以使用十进制、八进制和十六进制来书写。方法如下：
  十进制：15（直接写数字即可）
  八进制：017（要以零做为引导数字）
  十六进制：0xf（要以0x做为引导数字）

  浮点型数字也叫实数，为了方便，也可以使用科学记数法来表示：
  1.13e1、1.5e3（等价于1.5乘10的3次方）
  javascript的数字范围大约为10的负308次方到10的308次方之间。
  javascript中还有一个特殊的数字值NaN（not a number），javascript 用nan表示这个无意义的结果。

  布尔值：true和false，在计算机中一般用1表示true，用0表示false。

  空值就是null，即不表示任何东西。
  未定义值undefined，有时等于null，有时可能是出了问题。
  特殊字符：也叫转义字符。是一些以反斜杠开头的不可显示的特殊控制字符。
  \b:表示退格
  \n:表示换行
  等等。

  alert()方法的使用：
  <script language="javascript">
  alert("在页面上显示警告对话框");
  </script>
  alert()是javascript产生一个带确认按钮的对话框，上面显示括号内的信息。

  confirm()方法的使用：
  <script language="javascript">
  confirm("在页面上显示确认对话框");
  </script>
  confirm()和alert()差不多，不同的就是多了个取消按钮。按确定返回true，按取消返回false。
  <script language="javascript">
  var con;
  con=confirm("你们喜欢这样的教程吗？");
  if (con==true) alert("喜欢");
  else alert("不喜欢");
  </script>

  prompt()方法的使用：
  <script language="javascript">
  var name,age;
  name=prompt("请问您的名字？");
  alert(name);
  age=prompt("多大？");
  alert(age);
  </script>
  它不但可以显示信息，而且可以输入信息。
----------------------------------------------------------------------------------------
javascript编程起步（第二课）

关于上课的作业，大家都知道，代码如下：
  <script language="javascript">
  <!--
  代码
  //-->
  </script>
  这儿补充一点内容，还可以告诉读者这儿是javascript代码，该浏览器不支持。
  <noscript>
  在浏览器不支持的时候显示这句话
  </noscript>
  今天我们主要学习的内容有以下几块：
  1、javascript变量
  2、javascript表达式和运算符

  可以用var加上为变量指定的名称来声明变量，变量类型可以通过给变量赋值来确定。由于javascript采用的是弱类型的样式，对数据类型要

求不太严格，在程序执行的过程中，会根据需要自动转换。
  对于字符串变量，可以通过“变量名.length”来获得该变量中字符串的长度，如
  var name;
  name="javascript";
  那么name.length的值就是10。

  若在一行中创建多个变量时，记住用逗号来隔开变量名。各语句用分号隔开。(使用分号是个好习惯, 大家在学习的时候尽量养成加分号的习

惯)
 
  类型转换：javascript允许在程序中改变变量的类型，最常见的两个类型转换符Number和String。
  Number(x)是字符型值——〉数字值型。String与之相反。相对于javascript的自动类型转换，可以将这种转换成为强制类型转换。（强制类

型转换需要在javascript1.2及以上版本才可以使用）

  变量的命名：

  1.必须以字母或下划线开头，中间可以有字母数字和或下划线。不能使用空格、+、-等其他符号。
    作为连字符外，变量名称不能有空格、（＋）、（－）、（，）或其它符号。
  2.不能使用JavaScript中的关键字作为变量。
  （javascript变量名是区分大小写的，name和Name是不一样的。）

  对于变量还有一个重要性──那就是变量的作用域。在JavaScript中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作

用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。

  例子：
<script>
var myStr = "我是全局变量";
function getStr1(){
     var myStr = "我是局部变量";
     alert (myStr);
}
function getStr2(){
     alert (myStr);
}
getStr1();
getStr2();
// 测试会弹出两个提示框，第一个提示“我是局部变量”，第二个提示“我是全局变量”
</script>

  表达式：在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常由表达式来完成，可以说它是变量、常量、布

尔及运算符的集合，因此表达式可以分为算术表述式、字串表达式、赋值表达式以及布尔表达式等。
 

  运算符：

  1.算术运算符：+（加） 、-（减）、 *（乘）、 /（除）、 %（取模） -（取反）、
            ++（递加1）、--（递减1）。
            例：11%2=1 ； 如果x=2   ++x+4=7     x+++4=6
          （++x是先执行加1，x++是执行完语句之后x在自加1
例子：

<script>
var i=0, j=0;
alert(i++ + " " + ++j + " " + i);
// 输出 “0 1 1”，可见i++是先输出了i，然后进行运算，而++j是先对j进行了自加运算，然后输出j的值
</script>
）
  2.比较运算符：<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、==(等于)、!=(不等于)
          （基本操作过程是，首先对它的操作数进行比较，然后再返回一个true或False值。）
  3.逻辑运算符：!（取反)、&=（与之后赋值）、 &（逻辑与）、 |=（或之后赋值）、 |（逻辑或）、
            ^=（异或之后赋值）、 ^（逻辑异或）、 ?:（三目操作符）、||（或）、&& （与）
            ==(等于)、|=(不等于)。
  4.字符串运算符：只有+   （”my“+”javascript“结果等于”my javascript“）
  5.赋值运算符：即=，将右边的值赋给左边的变量。
  6.条件运算符：（？：）
            例：status=(age>=18)?"adult":"child";如果大于18，则表达式的值为adult。
  7.typeof()运算符：用来返回变量或数据的类型。

 

作业：试试能不能做个最最最最简单的计算器？
    （就是我可以输入两个数和一个运算符号，就得出计算结果。结合上一课的prompt()）
答案：
<script language="javascript">
function yunshuan(a,op,c)
{
try{
  eval("result=a"+op+"c");
  return result;
}
catch(e){
  alert("Some error occur");
}
}
function main(){
var a,b,c;
a=parseInt(prompt("请输入第一个数"));
op=prompt("请输入运算符");
c=parseInt(prompt("请输入第二个数"));
alert("the result is :" + yunshuan(a,op,c));
}

</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
javascript编程起步（第三课）

第三课终于和大家见面了, 大家要感谢 Actions 的辛勤劳动啊, 好好利用论坛给大家提供的资源和教程, 希望大家一起学习提高 :D
大家有什么意见, 建议或者想法, 可以到本版的教程问答区 或 站务管理版的 建议或意见 去发表, 我们会及时给您反馈 :)

下面是今天的学习重点：
A.补充上课的变量内容
B.if语句的基本语法
C.window.com()基本用法

A.变量
1.变量的类型规则
javascript是无类型的，他的变量可以放任何数据类型的值。
2.变量的声明
在javascript程序中，在使用变量之前，必须先声明它。变量是使用关键字var声明的。而实际上，不一定要先声明变量，在某些情况下，变量

声明是可选的。
var i；
var sum；
也可以使用一个var关键字声明多个变量；
var i，sum；
而且还可以将变量声明和变量初始化绑定在一起：
var message = 'hello'；
var i = 0，j=0，k=0；
由var声明的变量是永久的，因为各浏览器对是否可以删除全局性的变量的态度是不同的，（都可以删除局部变量）为了安全，最好假设全局变

量不可删除。
可以使用var多次声明同一个变量
当你给一个没有声明的变量赋值时，js会自动用哪个变量为你创建一个全局变量。
如果你想在函数内部创建一个局部变量。那就必须用var在函数内部声明。
3.变量的作用域
如果局部变量和全局变量重名，则局部变量优先。js没有块级作用域。函数中声明的所有的变量，作用域是相同的。
var x；//声明一个未赋值的变量，他的值是undefined。
alert（u）; //使用未声明的变量将引发错误。
u=3；//给一个未声明的变量赋值将会创建该变量。
4.原始类型和引用类型
var a=3.14；//原始类型
var b=a；//引用类型

B.if语句

if (条件)
语句段１
else
语句段２

　功能：若表达式为true，则执行语句段１；否则执行语句段２。

　说明：
if -else 语句是JavaScript中最基本的控制语句，通过它可以改变语句的执行顺序。
表达式中必须使用关系语句，来实现判断，它是作为一个布尔值来估算的。
它将零和非零的数分别转化成false和true。
若if后的语句有多行，则必须使用花括号将其括起来。

例子
if (age < 16 )
     alert("小朋友");
else
     alert("成年人");
end if

if语句的嵌套
if (布尔值) 语句１；
else if (布尔值) 语句２；
else if (布尔值) 语句３；
else 语句４；
在这种情况下，每一级的布尔表述式都会被计算，若为真，则执行其相应的语句，否则执行else后的语句。

C.window.com()的用法
  1、基本语法
  window.open(pageURL,name,parameters)
  其中：
    pageURL 为子窗口路径
    name 为子窗口句柄
    parameters 为窗口参数(各参数用逗号分隔)
  例：
      <SCRIPT LANGUAGE="javascript">
      <!--
      window.open ('url') //url为一网址，如：http://www.numb1.com（绝对） 或 index.htm相对）
      -->
      </SCRIPT>
  2. 窗口参数
  其中yes/no也可使用1/0；value为具体的数值，单位象素。
  toolbar=yes,no 是否显示工具条
  location=yes,no 是否显示网址栏
  directories=yes,no 是否显示导航条
  status=yes,no 是否显示状态条
  menubar=yes,no 是否显示菜单
  scrollbars=yes,no 是否显示滚动条
  resizable=yes,no 是否可以改变公告窗口大小
  copyhistory=yes,no 是否显示历史按钮
  width=value 公告窗口的宽
  height=value 公告窗口的高
  left=value 公告窗口的左上顶点距屏幕左边100像素
  top=value 公告窗口的左上顶点距屏幕顶端100像素
  例：
<script language="javascript">
<!--
window.open("http://www.sina.com.cn","newwindow",

"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=500,height=500,le

ft=100,top=100")
//-->
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
javascript编程起步（第四课）

前一段有人给我说，第二课就看不明白了，我不知道是不是写的太笼统了，不够细致，还是其他的，有什么问题，大家给提出来，当然我也不

是什么js高手，只不过想把爱好者领进门而已。希望大家多多参与。
今天的主要任务就是for循环。另外就是数据类型。既for in（现在还没有讲数组和对象，先了解一下）。

数据类型的转换：
如果运算的数据类型不是一样的话，js脚本会尽力执行内部转换来解决，但js不了解你的心思。所以得到的结果可能和你想要的不一样。
em：
  3+3   // result=6
  3+"3"   // result="33"

将字符串转换为数值：
javascript语言提供两个内置函数将表示数值的字符串转换为真实的数值：parseInt()和parseFloat()。
为了使用这些函数，需要将进行转换的字符串作为参数传入函数，例：
parseInt("42")     //result=42
parseInt("42.33")   //result=42
不过是浮点数还是整数，函数返回的值都是整数。不存在四舍五入，小数点和它后面的数字将被舍弃。
而parseFloat()则返回浮点数（如果是整数就返回整数），例：
parseFloat("42")   //result=42
parseFloat("42.33") //result=42.33
如果在某处需要进行字符串的转换，只需将函数插入该初即可。如：
3+3+parseInt("3")   //result=9

将数值转换为字符串：
虽然当遇到表达式中含有混合数据类型时，js会倾向于字符串。但为了防止潜在的问题发生，最好先转换以下。在数值中加入空字符串就可以

把数值转换为字符串了：
(""+2500)         //result="2500"
(""+2500).length   //result=4

for:
javascript中最常用的循环结构称之为for循环，关键词放在循环结构的开始位置。正式语法结构如下：
for ([initial expression];[condition];[update expression]){
  statement[s] inside loop
}
例：
for(var i=0;i<9;i++)
{
n+=i
myfunc(n)
}
for...in:
这个语句完全依照变量var所设定的值决定运行次数。你可以用for...in语句在一个对象或一个数组上建立循环
for(var in [obj | array])
{
statements
}
例：
<script language="javascript">
document.writeln("The properties of the document object")
for(var element in document){
document.writein(element+"="+document[element])
}
</script>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
javascript编程起步（第五课）

鼠标事件（上）

  随着课程的进行，能跟着下来的人是越来越少了，不知道是不是因为没有太多的表现，只是死记的东西，大家都没有兴趣啊。其实网页上

的很多特效，动作大都是用javascript来实现的，没有javascript的网页，就象一个人没有了肌肉一样。但是所有的动作都是有函数来控制的

，而控制语句是基础中的基础。希望大家能耐心的学下去。今天的课程就轻松一下，学习点能见到效果的。
主要内容就是基于鼠标的事件,有如下几种：
1.mouseover（鼠标移至）
2.mouseout（鼠标移出）
3.mousemove（鼠标移动）
4.mousedown（鼠标按下）
5.mouseup（鼠标弹起）
6.click（单击）
7.dblclick（双击）

  通常1和2组合起来使用，当用户把鼠标移动到一个超链接或者其他元素时，mouseover事件就会发生，mouseout总会伴随着它，因为当鼠标

离开时，mouseout事件就会发生。
  例子：
<html>
<head>
<title>test</title>
<script language="javascript">
function text_onmouseover(){
mytext.style.fontSize="30pt";
mytext.style.color="red";
mytext.style.fontStyle="italic";
}
function text_onmouseout(){
mytext.style.fontSize="20pt";
mytext.style.color="blue";
mytext.style.fontStyle="normal";
}
</script>
</head>
<body>
<p id=mytext onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">http://www.javascript.com.cn</p>
<p>看看字体样式有什么变化</p>
</body>
</html>

  这里定义了两个函数，来使字体改变样式。关于函数我们以后会详细的讲解。
（注意：ie对页面上的所有元素都支持mouseover和mouseout事件，但对于netscape navigator来说，只有超链接和层支持这两个事件。）

下面看鼠标移动的例子：
<html>
<body onMousemove="micro$oftMouseMove()">
<SCRIPT LANGUAGE="JavaScript">
if (navigator.appName == 'Netscape')
{
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = netscapeMouseMove;
}

function netscapeMouseMove(e) {
if (e.screenX != document.test.x.value || e.screenY != document.test.y.value)
{
document.test.x.value = e.screenX;
document.test.y.value = e.screenY;
}
}

function micro$oftMouseMove() {
if (window.event.x != document.test.x.value || window.event.y != document.test.y.value)
{
document.test.x.value = window.event.x;
document.test.y.value = window.event.y;
}
}
</SCRIPT>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4">
</FORM>
</body>
</html>
鼠标移动的事件在鼠标跟随效果的使用上比较多，大家可以看看鼠标跟随特效。网上n多。
（需要注意的是：启动这个事件处理过程存在一个问题，就是它有可能会屏蔽其他事件。另外还增加了页面的处理时间，应尽量少用。）

先说到这儿吧，下节讲鼠标的另外4个事件。

今天的作业是：
1.图片链接的转换（当鼠标放上去时是一个图片，当鼠标离开时是另外一个图片）
2.图片跟随鼠标（当鼠标移动时，会有个图片跟随着鼠标一起移动）
1题答案：
<html>
<body>
<script language="javascript">
   function change()
   {
       //document.test.tupian.src="1.bmp";用test和form[0]都可以
    document.form[0].tupian.src="1.bmp";
   }
   function changeback()
   {
       //document.test.tupian.src="2.bmp";
    document.form[0].tupian.src="1.bmp";
   }
</script>
<form name="test">
<a name="aa" href="http://www.xxx.com" onmouseover="change();" onmouseout="changeback();"><img name="tupian"

src="3.jpg"/></a>
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------
javascript编程起步（第六课）

mouseDown事件和mouseUp事件
 

大家知道，mouseDown事件和mouseUp事件的组合就是click事件，但是如果在链接上按下鼠标，并移到链接之外在放开鼠标，那么就只有mouseD

own事件了。这两个事件可以增加图标按钮的图像效果，
  至于mouseDown和mouseUp的属性，它们是伴随着Click事件发生的，这和keyPress事件是keyDown事件和keyUp事件组合而成的机制是一样的

，这3个鼠标事件也有modifier属性。
  （注意：如果在onClick事件处理中使用return语句，它可以接收任何数值。只要这个值不是False，浏览器就可以完成提交。但如果浏览

器得到的是False值，表单提交操作就会被取消。）

Click事件和dbClick事件
  onClick是单击事件，onDblClick是双击事件，而实际上很难分清连续的单击和双击。它们会互相干扰。而且在ie和其他浏览器的情况还有

不同。有的浏览器是双击事件的每一次单击都会触发单击事件，而在ie中，只有双击事件的第一次单击会触发单击事件。不管怎么样，单击事

件都不会自动的取消或被忽略。因此，如果想使用单击和双击一个链接时触发两个完全不同的过程，则必须通过编程来延迟单击的动作知道双

击。

例：
<script>
var timer=null;
document.onclick=new Function("timer=setTimeout(click,500)")
document.ondblclick=new Function("clearTimeout(timer);dblclick()")
function click(){
alert("click")
}
function dblclick(){
alert("dblclick")
}
</script>

解释：
new Function("timer=setTimeout(click,500)")
新建一个函数，内容为
timer=setTimeout(click,500)
setTimeout(函数或语句，时间以毫秒为单位)
用于设置某函数或语句在某时间后执行，……
clearTimeout(timer);
清除设置，

  在高版本的浏览器中，链接的这两种事件处理程序都监视那些使得脚本阻止链接的特殊行为。
  例如：在想要的导航到另一个页面之前进行某些数据项的确认，如果某些域填得不正确，可以提醒并终止链接。要实现这种确认，必须在

事件处理程序得最后一条语句或者事件处理程序自身返回True或False。如果返回False就终止链接。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
javascript编程起步（第七课）

过年到现在一直都比较忙,辜负大家了.
今天就学习函数吧,虽然语句还没有说完.

函数是javascript语言的一个很重要的内容,但也很复杂.
下面来看看javascript函数.
函数是有function加函数名和一对带有参数括号,以及大括号组成的，其中大括号里是
主体javascript语句.
例:
function hanshuname(js) //hanshuname是函数名.
{
document.write(js,"<br>"); //是函数的主体语句.
}
函数可以嵌套,如下:
function qiantao(a,b){
function lqiantao(x){return x*x;}
return Math.sqrt(lqiantao(a)+lqiantao(b));
}
函数还可以作为数据来应用,因此可以象处理其他数据那样来处理函数,如:赋值,存储,传递等.
例:
function zhi(x){return x*x;}
实际上,函数名没有什么意义,不过是保存函数的变量名而已.
a=zhi(6);//a存放的是数字36;
b=zhi;//现在b和zhi引用同一个函数.
c=b(5);//c存放的是数字25.
在一个函数体内,标识符arguments总是具有特殊含义,它是调用对象的一个特殊属性,用来引用实际参数对象.这个实际参数对象具有大量有用的

属性.除此之外,它还兼有数组的角色.
尽管定义javascript函数时都有固定的参数，但调用这个函数时,传递给它的参数数目却可以是任意的，数组arguments[]允许完全存取那些实

际参数值.另外,arguments有一个length属性,看如下例子:
function zhi(x,y,z)
{
if(arguments.length !=3){
alert("function zhi called with"+arguments.length+"arguments,but it expects 3 arguments.");
return null;
}
}
数组arguments[]还为javascript函数开发了一项重要的可能性,既可以将函数编写为能够接受任意数目的实际参数.
function zhi()
{
var m=Number.NEGATIVE_INFINITY;
//遍历所有参数
//检索并记忆最大的一个.
for(var i=0;i<arguments.length;i++)
if(arguments>m)m=arguments;
//返回最大的参数值.
return m;
}
var lazgest=zhi(1,10,100,2,3,1000,4,5,10000,6);
也可以使用arguments[]数组来编写一个函数.

调用js函数
<a href=”#” onClick=”functionName()”>Link text</a>
<a href=”javascript:functionName()”>Link text</a>
今天先说到这儿吧,下节继续说函数.