目录
例2:setTimeout()-浏览器过多长时间以后去执行指定的程序代码(只执行一次)
例1.write();close();window.open();
(一) JavaScript的基本语法
JavaScript严格区分大小写
注释: 单行注释// 多行注释/* */
/* */可以嵌套//,但不能嵌套/* */
换行:document.write("<br>");
调试:利用alert()函数;
null常量——空值
Undefined常量——变量未被赋值或变量属性不存在
Undefined代表无值的基本类型,Null代表无值的引用类型,undefined继承null。
变量在使用前进行声明是良好的编程习惯
(二) 程序的流程控制
1.if条件选择语句
<body>
<script language="Javascript">
function checkData()
{
if (document.form1.Text.value.length == 3)
alert("OK!有效!");
else
{
alert("请输入三个字符," + document.form1.Text.value + "无效!");
return false;
}
}
</script>
<form name="form1">
<center>
请输入字符:<input type="text" name="Text" onchange="checkData()">
</center>
</form>
</body>
2.switch选择语句
<script language="JavaScript">
{
for (i = 0; i < 6; i++)
{
switch (i)
{
case 0:
document.write("i is 0.<br>");
break;
case 1:
document.write("i is 1.<br>");
break;
case 2:
document.write("i is 2.<br>");
break;
case 3:
document.write("i is 3.<br>");
break;
default:
document.write("i is greater than 3. <br>");
break;
}
}
}
</script>
3.while循环语句
<script language="JavaScript">
var loop = 0;
while (loop < 5)
{
document.write("<h1>while循环语句</h1>");
loop++;
}
</script>
4.do while语句
<script language="Javascript">
var i = 0;
do
{
i += 1;
document.write(i + "<br>");
}
while (i < 5);
</script>
5.for循环语句
<script language="JavaScript">
for (i = 0; i < 5; i++)
{
document.write("<h3><font color=green>for循环</h3>");
}
</script>
6.break语句
<script language="JavaScript">
function BreakTest()
{
var i = 1;
while (i < 5)
{
document.write(i);
if (i == 3)
break;
i++;
}
return ("<h1>" + i + "</h1>");
}
document.write(BreakTest());
</script>
7.continue语句
<script language="JavaScript">
function skip()
{
var s ="", i = 0;//s是字符串变量
while (i < 5)
{
i++;
document.write("<b>" + i + "</b>");
if (i == 3)
{
continue;
}
s += i;
}
document.write("<br>");
return ("<b>" + s + "</b>");
}
document.write(skip());
</script>
3.函数
4.对象
例1.
<script language="javascript">
function person()
{
}
var person1 = new person();
person1.age = 18;
person1.name = "clw";
function sayfunc()
{
alert(person1.name + ":" + person1.age);
}
person1.say = sayfunc;
person1.say();
</script>
例2.
<script language="javascript">
function Person()
{
this.name = "张三";
this.age = 19;
this.height = 176;
}
var p1 = new Person();
var prop, str = "";
for (prop in p1)
{
str += p1[prop] + " ";
}
document.write(str );
alert(str);
</script>
例3.
<script language="javascript">
function person(name, age)
{
this.age = age;
this.name = name;
this.say = sayfunc;
}
function sayfunc()
{
document.write(this.name + ":" + this.age+"</br>");
}
function change(p1)
{
document.write("改变名字后:");
p1.name = "李四";
}
var person1 = new person("张三", 18);
person1.say();
change(person1);
person1.say();
</script>
(五)JavaScript的内部对象
按内部对象的使用方式分为动态对象和静态对象
动态对象——引用其方法属性时,使用new创建对象实例,使用“对象实例名.成员名”的格式来访问其属性和方法
静态对象——引用其方法属性时,直接使用“对象名.成员名”的格式来访问
Object对象、String对象、Math对象、Date对象
(1)Object对象
把对象的所有实例设置为null,可以强制性的废除对象。
如:var oObject1=new object;
oObject1=null;
每用完一个对象,将其废除用以释放内存,这是个好习惯。
<script language="javascript">
function getAttributeValue(attr)
{
document.write(person[attr]+"</br>");
}
var person = new Object(); //创建person对象实例不再需要构造函数
person.name = "张三";
person.age = 20;
getAttributeValue("name");
getAttributeValue("age");
</script>
(2)String对象
<script language="javascript">
var myStrobj = new String("www.sohu.com");
document.write(myStrobj.length+"</br>");
document.write("www.sohu.com".length + "</br>");
var myStr = "www.sohuso.com";
document.write(myStr.length);
</script>
(3)Math对象
提供了一些基本数学函数和常数,是一个静态对象。直接使用“对象名.成员名”的格式来访问其属性和方法
如:var num = Math.sin();
(4)Date对象
如:var current_time = new Date();
(六)专门用于对象的语句
1.with语句
如果一段程序代码当中多次使用到了某个对象的许多属性和方法,那么我们只要在with关键字后面的小括号中写上对象实例的名称,然后将连续的程序代码放入大括号中,这种代码可以直接引用对象实例的属性和方法,而不必在每个属性和方法前加上对象实例名和“.”了。
<script language="javascript">
var current_time = new Date();/*Date对象中所包含的时间为当前时间值*/
with (current_time)
{
var strDate = getFullYear()+ "年";//返回日期对象实例中的年份
strDate += (getMonth() + 1) + "月";
strDate += getDate() + "日 ";
strDate += getHours() + ":";
strDate += getMinutes() + ":";
strDate += getSeconds();
alert(strDate);
}
</script>
2.for...in语句
对某个对象中所有属性进行循环操作,将一个对象中的所有的属性名称逐一赋值给一个变量,而不用事先知道对象中属性的个数。能取得对象实例中每个属性的名称,那么使用“对象实例名[]”可取出对象实例中每个属性值
<script language="javascript">
function Person()
{
this.name = "张三";
this.age = 19;
this.height = 176;
}
var p1 = new Person();
var prop, str = "";
for (prop in p1)
{
str += p1[prop] + " ";
}
alert(str);
</script>
(七)数组
例1.用对象的方式实现数组
<script language="javascript">
function MyArray() //用对象方式实现数组
{
this.length = arguments.length;
for (var i = 0; i < this.length; i++)
{
this[i] = arguments[i];
}
}
var str = "";
var arr = new MyArray(4, 3.5, "abc");
for (var i = 0; i < arr.length; i++)
{
str += arr[i] + "\n";
}
alert(str);
</script>
例2.用Array()对象实现数组
<script language="javascript">
var x, str = ""; //Array对象构造函数
var arr = new Array();
arr[0] = 3.5;
arr[1] = "abc";
arr[2] = 3;
arr.sort();//对数组中所有元素进行排序
for (x in arr)
{
str = str + x + ":" + arr[x] + "\n";
}
alert(str);
</script>
(八) window对象和document对象
1.DOM对象
JavaScript将浏览器本身、网页文档以及网页文档中的HTML元素等都用相应的内置对象来表示,其中一些对象作为另外对象的属性而存在的,这些对象及对象之间的层次关系就统称为DOM(文档对象模型),window对象是最顶层的对象
2.事件
事件 |
发生条件 |
onBlur |
用户从窗口或表单中移开输入焦点 |
onChange |
用户改变元素值 |
onClick |
用户在表单元素或在链接上单击 |
onError |
装载文档或图象时出错 |
onFocus |
用户在窗口或表单元素上聚焦 |
onLoad |
用户装载页 |
onMouseDown |
用户按下一个鼠标键 |
onMouseMove |
用户移动光标 |
onMouseOver |
用户在链接上移动光标 |
onMove |
用户移动窗口 |
onReset |
用户重置表单 |
onResize |
用户改变窗口大小 |
onSelect |
用户选择表单元素的输入区域 |
onSubmit |
用户提交表单 |
onUnload |
用户退出页面 |
3.Windows对象
常用方法:alert();confirm();prompt();
setInterval()——设置浏览器每隔多长时间定期调用它所指定的程序代码(执行多次),设置的时间值以毫秒为单位 setInterval("scroll()",100);
setTimeout()——设置浏览器过多长时间以后去执行指定的程序代码(只执行一次),设置的时间值以毫秒为单位
clearInterval();clearTimeout()
例1:alert();prompt();
<script language="javascript">
alert(prompt("年龄", "18"));
</script>
例2:setTimeout()-浏览器过多长时间以后去执行指定的程序代码(只执行一次)
<body>
<script>
window.setTimeout(" window.close() ", 5000);
</script>
<center><h3>通知</h3></center>
5秒钟以后,这个窗口将自动关闭!
</body>
4.document对象
(1)write方法——向html文档中动态写入内容
(2)open方法——用于打开一个新的文档(与window的open方法类似)
(3)close方法——当向新打开的文档中写完内容以后,调用该方法关闭文档流
(4)clear方法——清除文档中的所有内容
例1.write();close();window.open();
<body>
<script language="javascript">
document.write("这是write方法动态写入的内容<br>");
function updatedoc()
{
document.write("abc<br>");
document.write("def<br>");
document.close();
var owin = window.open("", "_blank");
owin.document.write("xyz<br>");
owin.document.close();
owin.document.write("clw <br> ");
owin.document.write("hehe <br> ");
owin.document.close();
}
</script>
<input type=button name="update" value="更新" onclick="updatedoc()">
</body>
=》