什么是JavaScript?
JavaScript是一种脚本语言,所以它的代码也称为JS脚本,它是运行在客户端的。
1.从功能上来说:
对用户输入的数据进行验证。
网页特效。
动态更改内容
JavaScript是客户端语言,那么他写在哪里呢?有两种方式:
[b]1.使用 <script> 标签将语句嵌入文档
2.将 JavaScript 源文件链接到 HTML 文档中[/b]
例如:
以上test.js中的内容如下:
简单语法:
JavaScript语法和C语言类似,只是语法关键字等细节不同。
变量的命名,只要你会一种一种,例如C,或者Java,C++,那么它的命名基本就掌握了。
变量:
变量的使用和C语言是一样的,分为先声明,给变量赋值。
变量的作用域,可以简单的记住,一个变量,如果声明带有var的,那么这个变量即为局部变量,如果没有带var,则这个变量为全局变量。
把下面的例子跑一下就什么都明白了
[b]注释:可以使用//进行行注释,也可以使用/**/进行块注释。[/b]
运算符:跟C语言是非常类似的,在这里就不废话了。
函数:
举个例子:
函数的定义形式如下:
function 函数名( 参数1,参数2,… ){
语句;
}
例如:
function sum ( one, two)
{
var result = one + two;
return result;
}
函数的调用形式如下:
函数调用一般和表单元素的事件一起使用,调用格式为: 事件名="函数名"
<INPUT name="add" type="button" value="加法"
onClick="sum(2,5)">
下面看一个完整的例子:
JS对数组的支持:
声明数组
var 数组名 = new Array(数组大小);
例: var emp = new Array(3)
添加元素
emp[0] = "AA";
emp[1] = "BB";
emp[2] = "CC";
也可以声明数组并赋初值:
例: var emp = new Array("AA","BB","CC");
[b]
常用的属性:
length
常用的方法:
join 将数组中的元素组合成字符串
reverse 颠倒数组元素的顺序,使第一个元素成为最后一个,而最后一个元素成为第一个
sort 对数组元素进行排序(按照String类型进行)[/b]
小例子:
通过上述的小例子说明了for的用法,其他的do while ,while,if等条件循环判断语句,还是一句话,只要你会任何一门语言,那么我想这个对你们来说,简直是小菜一碟啊,因为你们都是大神。。。
JS两个最常见的内置函数:
eval 函数: 用于计算字符串表达式的值
isNaN 函数:用于验证参数是否为 NaN(非数字)
JS事件:
[b]onClick 鼠标单击
onChange 文本内容或下拉菜单中的选项发生改变
onFocus 获得焦点,表示文本框等获得鼠标光标。
onBlur 失去焦点,表示文本框等失去鼠标光标。
onMouseOver 鼠标悬停,即鼠标停留在图片等的上方
onMouseOut 鼠标悬停,即鼠标停留在图片等的上方
onMouseMove 鼠标移动,表示在<DIV>层等上方移动
onLoad 网页文档加载事件
onSubmit 表单提交事件
onMouseDown 鼠标按下
onMouseUp 鼠标弹起[/b]
下面挑选几个举例:
onChange
onFocus和onBlur
onMouseOver和onMouseDown事件
onLoad事件
此章节先暂时到这,未完待续。。。
JavaScript是一种脚本语言,所以它的代码也称为JS脚本,它是运行在客户端的。
1.从功能上来说:
对用户输入的数据进行验证。
网页特效。
动态更改内容
JavaScript是客户端语言,那么他写在哪里呢?有两种方式:
[b]1.使用 <script> 标签将语句嵌入文档
2.将 JavaScript 源文件链接到 HTML 文档中[/b]
例如:
<html>
<head>
<script Language ="JavaScript">
// JavaScript Appears here.
alert("这是第一个JavaScript例子!");
alert("欢迎你进入JavaScript世界!");
alert("今后我们将共同学习JavaScript知识!");
</script>
</Head>
</Html>
<script language="JavaScript" src= "test.js">
</script>
以上test.js中的内容如下:
document.write("喂!你好吗? ");
简单语法:
JavaScript语法和C语言类似,只是语法关键字等细节不同。
变量的命名,只要你会一种一种,例如C,或者Java,C++,那么它的命名基本就掌握了。
变量:
变量的使用和C语言是一样的,分为先声明,给变量赋值。
//声明变量
var a;
//赋值
a=12;
//同时声明和初始化变量
var a= 10;
//声明多个变量
var x, y, z = 10;
变量的作用域,可以简单的记住,一个变量,如果声明带有var的,那么这个变量即为局部变量,如果没有带var,则这个变量为全局变量。
把下面的例子跑一下就什么都明白了
<script language="javascript">
var quanju ="1";
function getStr(){
var quanju = 5;
alert(quanju);
}
function getInt(){
quanju = 3;
alert(quanju);
}
function getBool(){
alert(quanju);
}
</script>
[b]注释:可以使用//进行行注释,也可以使用/**/进行块注释。[/b]
运算符:跟C语言是非常类似的,在这里就不废话了。
函数:
举个例子:
<SCRIPT language = "JavaScript">
function calcu( ){
//获取form表单calc中元素的name为num1的值。
var numb1= document.calc.num1.value;
//获取form表单calc中元素的name为num2的值。
var numb2= document.calc.num2.value;
//由于上述获得的都是String类型的,因此需要调用JS的内置函数进行转换parseFloat转换为Float类型,然后进行相乘。
var total=parseFloat(numb1)*parseFloat(numb2);
document.calc.result.value=total;
}
</SCRIPT>
....
//onClick="calcu( )"给的元素的单击触发事件绑定为calcu函数。
<INPUT name="getAnswer" TYPE="button" onClick="calcu( )" value="计算看看/>
函数的定义形式如下:
function 函数名( 参数1,参数2,… ){
语句;
}
例如:
function sum ( one, two)
{
var result = one + two;
return result;
}
函数的调用形式如下:
函数调用一般和表单元素的事件一起使用,调用格式为: 事件名="函数名"
<INPUT name="add" type="button" value="加法"
onClick="sum(2,5)">
下面看一个完整的例子:
<HEAD>
<SCRIPT language="JavaScript" >
function compute(op)
{
var num1,num2;
num1=parseFloat(document.myform.num1.value);
num2=parseFloat(document.myform.num2.value);
if (op=="+") {
document.myform.result.value=num1+num2 ;
}
if (op=="-")
{
document.myform.result.value=num1-num2 ;
}
if (op=="*")
{
document.myform.result.value=num1*num2 ;
}
if (op=="/" && num2!=0)
{
document.myform.result.value=num1/num2 ;
}
}
</SCRIPT>
</HEAD>
<FORM action="" method="post" name="myform" >
<P>第一个数<INPUT name="num1" type="text">
<BR>第二个数<INPUT name="num2" type="text">
</P>
<P>
<INPUT name="addButton" type="button" value="+"
onClick="compute('+')">
<INPUT name="subButton" type="button" value="-"
onClick="compute('-')">
<INPUT name="mulButton" type="button" value="×"
onClick="compute('*')">
<INPUT name="divButton" type="button" value="÷"
onClick="compute('/ ')">
</P>
<P>计算结果 <INPUT name="result" type="text">
</P>
</FORM>
JS对数组的支持:
//例如,数组的声明有三种方式。
arrayObj = new Array();
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
//arrayObj : 必选项。要赋值为 Array 对象的变量名。
//Size : 可选项。数组的大小。由于数组的下标是从零开始,
// 创建的元素的下标将从零到 size -1。
//element0,...,elementN : 可选项。要放到数组中的元素。这将创建
// 具有n + 1 个元素的长度为 n + 1 的数组。使用该语法时
// 必须有一个以上元素。
声明数组
var 数组名 = new Array(数组大小);
例: var emp = new Array(3)
添加元素
emp[0] = "AA";
emp[1] = "BB";
emp[2] = "CC";
也可以声明数组并赋初值:
例: var emp = new Array("AA","BB","CC");
[b]
常用的属性:
length
常用的方法:
join 将数组中的元素组合成字符串
reverse 颠倒数组元素的顺序,使第一个元素成为最后一个,而最后一个元素成为第一个
sort 对数组元素进行排序(按照String类型进行)[/b]
小例子:
//打印金字塔型的直线
<HTML>
<HEAD>
<TITLE>For 循环演示</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
document.write("<H2 align=center>打印金字塔直线</H2>");
for (var i= 0; i<100; i=i+5){
document.write("<HR align=center width=" + i+"%>");
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
通过上述的小例子说明了for的用法,其他的do while ,while,if等条件循环判断语句,还是一句话,只要你会任何一门语言,那么我想这个对你们来说,简直是小菜一碟啊,因为你们都是大神。。。
JS两个最常见的内置函数:
eval 函数: 用于计算字符串表达式的值
isNaN 函数:用于验证参数是否为 NaN(非数字)
<SCRIPT LANGUAGE = "JavaScript">
<SCRIPT LANGUAGE = "JavaScript">
var str1=prompt("输入一个表达式,我给您计算,如:1+1", "");
var result=eval(str1);
document.write(str1+"="+result);
var x = prompt("输入一些数据,我来告诉您是不是数字","0");
if (isNaN(x)){
alert (x + " 不是一个数字");
}
else{
alert (x + " 是一个数字");
}
</SCRIPT>
JS事件:
[b]onClick 鼠标单击
onChange 文本内容或下拉菜单中的选项发生改变
onFocus 获得焦点,表示文本框等获得鼠标光标。
onBlur 失去焦点,表示文本框等失去鼠标光标。
onMouseOver 鼠标悬停,即鼠标停留在图片等的上方
onMouseOut 鼠标悬停,即鼠标停留在图片等的上方
onMouseMove 鼠标移动,表示在<DIV>层等上方移动
onLoad 网页文档加载事件
onSubmit 表单提交事件
onMouseDown 鼠标按下
onMouseUp 鼠标弹起[/b]
下面挑选几个举例:
onChange
<script language="javascript">
function changeBg()
{
if(document.form1.bgColorList.value!="")
{
document.body.style.backgroundColor=
document.form1.bgColorList.value;
}
}
</script>
<select name="bgColorList" onChange="changeBg()">
<option value="">---------</option>
<option value="#FFCCFF">粉红浪漫</option>
<option value="#6699FF">蓝色忧郁</option>
<option value="#9966FF">紫色诱惑</option>
<option value="#009966">绿色环保</option>
</select>
onFocus和onBlur
<HEAD>
<SCRIPT language="JavaScript" >
function myfun1( )
{
if (document.myform.card.value=="请注意格式:10xxxxxx")
document.myform.card.value="" ;
}
function myfun2( )
{
var a=document.myform.card.value;
if (a.substr(0,2)!="10" || isNaN(a))
{
alert("格式错误,请重新输入") ;
document.myform.card.focus();
}
}
</SCRIPT>
<STYLE type="text/css">
Input { background-color: #55FFFF; font-size: 20px;
border: 1px solid;}
</STYLE>
<BODY>
<FORM name="myform">
卡号:<INPUT name="card" type ="text"
value="请注意格式:10xxxxxx"
onFocus="myfun1( )"
onBlur="myfun2( )" />
<BR/>
密码: <INPUT name ="pass" type ="text" />
</FORM>
</BODY>
onMouseOver和onMouseDown事件
<HTML>
<HEAD>
<TITLE>图片切换</TITLE>
</HEAD>
<BODY>
<A href="http://www.mycom.cn">
<IMG src="dog1.jpg" name="picture"
width="400" height="155"
onMouseOver=" src=‘dog2.jpg’ "
onMouseOut=" src=‘dog1.jpg’ "/>
低价转让哈士奇弟弟
</A>
<H1> 移过来看看俺啊</H1>
</BODY>
</HTML>
onLoad事件
<script language="javascript">
alert("页面没有显示完");
function over()
{
alert("页面已经全部显示");
}
</script>
<body onLoad="over()" >
……
此章节先暂时到这,未完待续。。。