JavaScript 语言2 学习网站：http://xin126.cn/ 第 4 章 JavaScript 语言2 学习网站：http://xin126.cn/

JavaScript 语言2 学习网站：http://xin126.cn/
第 4 章 JavaScript 语言2 学习网站：

函数 alert("Hello World!") } 函数是一段能够实现某种功能的代码块，它可以被事件处理或其他语句调用。
<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!") } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" > </form> </body> </html> 例01.htm

函数内置函数用户自定义函数 function funcName(argument1,argument2,etc)
eval 函数 isNaN 函数用户自定义函数创建用户定义的函数 function funcName(argument1,argument2,etc) {statements; }

内置函数 eval() 例02.htm 返回表达式的结果执行语句
<SCRIPT LANGUAGE ="JavaScript"> var x=2+3; document.write(eval(x+7)); var s=alert(x); eval(s); </SCRIPT> 例02.htm

内置函数 isNaN(x) 用于判断其参数是否是 NaN(not a number),如果是数据值型数据返回false,否则返回true;
document.write(isNaN(123)+ "<br />") document.write(isNaN(-1.23)+ "<br />") document.write(isNaN(5-2)+ "<br />") document.write(isNaN(0)+ "<br />") document.write(isNaN("Hello")+ "<br />") document.write(isNaN("2005/12/12")+ "<br />") 例03.htm

内置函数 Number(x) document.write(Number(5) + "<br />")
如果无法转换为数字，那么 Number() 函数返回 NaN。对于布尔值，是true返回值为1，false返回值为0; document.write(Number(5) + "<br />") document.write(Number("hello") + "<br />") document.write(isNaN(true)+ "<br />") document.write(isNaN(false)+ "<br />") 例04.htm

自定义函数 function funcName(argument1,argument2,etc) {statements; }
<script type="text/javascript"> function displaymessage() { alert("Hello World!") } </script> <form> <input type="button" value="Click me!" onclick="displaymessage()" > </form>例01.htm

函数示例 <FORM METHOD=POST ACTION="" NAME="form1">
num1:<INPUT TYPE="text" NAME="textnum1"><br> num2:<INPUT TYPE="text" NAME="textnum2"> <INPUT TYPE="button" value="计算" onclick="Execute1()"> </FORM>

函数示例 function Execute1() { num1=Number(document.form1.textnum1.value);
{ if (num1>num2) return num1; else return num2; } alert(Execute2(num1,num2)); 例4-3-1.html

事件和事件对象概念 JavaScript程序是典型的事件驱动程序事件是在网页上进行的操作如： JavaScript事件 onClick
onChange （单行、多行文本域或选择框发生改变时） onFocus （获得焦点） onBlur （失去焦点） onMouseOver（鼠标移动到对象上） onMouseOut （鼠标移出指定对象） onLoad （载入文件） onUnload （卸载文件）

onChange事件示例例05.htm function checkNum(num){
<HTML><HEAD> <SCRIPT LANGUAGE="JavaScript"> function checkNum(num){ if (num == ""){ alert("请输入一个数字值"); return false; } if (isNaN (num)){ alert("请输入一个数字值"); return false; } else alert ("谢谢！"); } </SCRIPT> </HEAD><BODY bgColor = white><FORM> 请输入一个数字：<INPUT type = text size = 5 onChange="checkNum(this.value)" > </FORM></BODY></HTML> 例05.htm

onFocus/onBlur事件示例例06.htm <HTML> <BODY BGCOLOR=“red">
<FORM> <INPUT type = text onblur="(document.bgColor=‘green')" onfocus="(document.bgColor=‘blue')"> </FORM> </BODY> </HTML> 例06.htm

onLoad onUnLoad事件示例例07.htm </SCRIPT> </HEAD>
<HTML> <HEAD> <TITLE>您好</TITLE> <SCRIPT LANGUAGE="JavaScript"> function hello() { alert("欢迎光临本站，文件载入成功！"); } function unloadhello() { alert(" 欢迎下次再来！"); } </SCRIPT> </HEAD> <BODY onLoad="hello()" onUnLoad="unloadhello()"> <a href="06.htm">打开06页面</a></BODY> </HTML> 例07.htm

对象 JavaScript是一种基于对象（Object-Based）的语言，而不是面对对象（Object-Oriented）的语言。
对象中包含属性（变量）及用于处理数据的方法（函数）。要访问对象的属性，必须指定对象名及属性： objectName.propertyName 要访问对象方法,必须指定对象名及需要的方法： objectName.method()

字符串对象字符串对象用于操纵和处理字符串。字符串的属性length（返回字符串的长度）创建字符串对象的方法
(var) x = “This is a javascript” 字符串的属性length（返回字符串的长度） document.write(x.length) 例08.htm

字符串对象的方法名称描述 big 增大字符串文本大小。 small 缩小字符串文本大小。 bold 使字符串文本为粗体。 strike 显示带删除线的文本。 toLowerCase 将字符串转换成小写。 toUpperCase 将字符串转换成大写。 var s1=“hello,大家好！” document.write("<BR>"+s1.big()) document.write("<BR>"+s1.small()) document.write("<BR>"+s1.bold()) document.write("<BR>"+s1.strike()) document.write("<BR>"+s1.toUpperCase()) document.write("<BR>"+s1.toLowerCase()) 例4-4-1.html

字符串对象的方法(2) 名称描述 charAt(n) 返回字符串中第n个位置的字符。 charCodeAt(n) 返回字符串中第n个位置字符的unicode码 concat(string2) 连接字符串。 var s1 = "This is a javascript! "; s2="you are welcome!" document.write(s1.charAt(8)); document.write(s1.charCodeAt(8)); document.write(s1.concat(s2)); 例09.html

字符串对象的方法(3) 3 6 0 -1 17 indexOf(string, [startIndex])
若搜索的是空串返回0，搜索不到返回-1。 var s= "this is an Example of indexOf."; document.write(s.indexOf("s")); document.write(s.indexOf("s",4)); document.write(s.indexOf("")); document.write(s.indexOf("k")); document.write(s.indexOf("e",5));

Math对象 Math 对象是内部静态对象，不需要创建可以直接使用。属性 PI LN10(10的自然对数) LN2(2的自然对数)
document.write(Math.PI+"<br />"); document.write(Math.LN10+"<br />"); document.write(Math.LN2+“<br />”); 例10.htm

Math对象示例 function area(x) { var a = Math.PI * x * x;
<SCRIPT LANGUAGE = "JavaScript"> function area(x) { var a = Math.PI * x * x; alert ("半径为" + x + " " + "的圆的面积为" + " " + a); } </SCRIPT> <FORM> 输入圆的半径：<INPUT TYPE = TEXT size = 5 name = "r"> <input type = button value = "显示面积" onclick=“area(this.form.r.value)"> </FORM> 例11.htm

Math对象 abs(number) 计算绝对值 sqrt(number) 计算平方根
方法 abs(number) 计算绝对值 sqrt(number) 计算平方根 max(number1,number2) 返回两数中较大的一个 min(number1,number2) 返回两数中较小的一个 round(number) 将参数四舍五入取整 document.write("-15的绝对值："+Math.abs(-15)+"<br />"); document.write("返回20 50中较大的数："+Math.max(20,50)+"<br />"); document.write("返回20 50中较小的数："+Math.min(20,50)+"<br />"); document.write("返回8的平方根："+Math.sqrt(8)+"<br />"); document.write("将3.614四舍五入"+Math.round(3.614)+"<br />"); 例12.htm

random方法 Math.random()方法可以产生一个0-1的随机数。思考：如何生成一个0-100之间的随机整数？
Math.round(Math.random()*100) 练习：做一个猜数字的游戏。例13.htm

猜数字游戏 <SCRIPT LANGUAGE="JavaScript"> var x;
x=Math.round(Math.random()*100); function checkNum(num){ if (x>num){ alert("猜小了！"); return false;} if (x<num){ alert("猜大了"); if (x==num) {return true;} } </SCRIPT>

猜数字游戏 <form action="14.htm" method="post" > 请输入0-100之间的整数：
<input name="number" type="text"> <input type="submit" name="Submit" value="我猜！" onClick="return checkNum(this.form.number.value)"> </form>

Date对象 Date 是内置对象，包含日期和时间信息。用法： var now = new Date ();
document.write(now); 例15.htm

get方法组方法描述 getDate getDay getHours getMinutes getSeconds getMonth
从日期对象中返回一个月中的某一天（1-31） getDay 从日期对象中返回一星期中的某一天（0-6） getHours 从日期对象中返回小时数（0-23） getMinutes 从日期对象中返回分钟数（0-59） getSeconds 从日期对象中返回秒数（0-59） getMonth 从日期对象中返回月份（0-11） getYear 从日期对象中返回年份（Year大于等于1900） getTime 返回自1970年1月1日以来所经过的时间（毫秒）

set方法组方法描述 setDate setHours setMinutes setSeconds setMonth setYear
为日期对象设置一个月中的某一天（1-31） setHours 为日期对象设置小时数（0-23） setMinutes 为日期对象设置分钟数（0-59） setSeconds 为日期对象设置秒数（0-59） setMonth 设置日期对象中的月份（0-11） setYear 设置日期对象中的年份值，该值必须大于1900。 setTime 设置日期对象内的时间值

Date对象示例:显示动态时钟（1） <SCRIPT LANGUAGE="JavaScript"> document.write("<span id='time'></span>") setInterval(function timer () { var now = new Date (); time.innerText=now.getYear()+"年" +(now.getMonth()+1)+"月" +now.getDate()+"日星期"+"日一二三四五六".charAt(now.getDay())+" " +now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()} ,1000) </SCRIPT> setInterval():用来实现每经过指定时间后计算表达式或调用函数。例16.htm

with语句 with语句用于执行一组语句，所有这些语句都假定引用指定的对象。用法 with (object)
{ statements; } <HTML> <HEAD> <SCRIPT LANGUAGE ="JavaScript"> var a, b, c; var r=10; with (Math) { a = PI * r * r; b = r * cos(PI); c = r * sin(PI/2); } document.write (a +"<BR>"); document.write (b +"<BR>"); document.write (c +"<BR>"); </SCRIPT> </HEAD> </HTML>

Date对象示例:显示动态时钟（1）改写 <SCRIPT LANGUAGE="JavaScript">
document.write("<span id='time'></span>") setInterval(function () { var now=new Date(); with(now) time.innerText=getYear()+"年"+(getMonth()+1)+"月"+getDate()+"日星期"+"日一二三四五六".charAt(getDay())+" "+getHours()+":"+getMinutes()+":"+getSeconds()} ,1000) </SCRIPT>

Date对象示例:显示动态时钟（2） <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> 例4-4-7.htm 方法描述 toLocalString 根据本地时间把 Date 对象转换为字符串

END 学习网站：

JavaScript 语言2 学习网站：http://xin126.cn/ 第 4 章 JavaScript 语言2 学习网站：http://xin126.cn/

Similar presentations

Presentation on theme: "JavaScript 语言2 学习网站：http://xin126.cn/ 第 4 章 JavaScript 语言2 学习网站：http://xin126.cn/"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

JavaScript 语言2 学习网站：http://xin126.cn/ 第 4 章 JavaScript 语言2 学习网站：http://xin126.cn/

Similar presentations

Presentation on theme: "JavaScript 语言2 学习网站：http://xin126.cn/ 第 4 章 JavaScript 语言2 学习网站：http://xin126.cn/"— Presentation transcript:

Similar presentations

About project

反馈