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()是javascript产生一个带确认按钮的对话框,上面显示括号内的信息。

 confirm()和alert()差不多,不同的就是多了个取消按钮。按确定返回true,按取消返回false。

 prompt()方法的使用,它不但可以显示信息,而且可以输入信息。

今天我们主要学习的内容有以下几块:
  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()运算符:用来返回变量或数据的类型。

下面是今天的学习重点:
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 (条件)
      语句段1;
else
       语句段2;

 功能:若表达式为true,则执行语句段1;否则执行语句段2。

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

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("00000.html","newwindow", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=500,height=500,left=100,top=100")
//-->
</script>


若if后的语句有多行,则必须使用花括号将其括起来。

今天的主要任务就是:
1:For循环;
2:数据类型;
3:既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>

今天的课程就轻松一下,学习点能见到效果的。
主要内容就是基于鼠标的事件,有如下几种:
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 οnmοuseοver="text_onmouseover()" οnmοuseοut="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多。
(需要注意的是:启动这个事件处理过程存在一个问题,就是它有可能会屏蔽其他事件。另外还增加了页面的处理时间,应尽量少用。)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值