纲要基础知识 ( 来源组成特点和引用等 ) 基本语法及实例 HTML 文档对象模型 (DOM) 浏览器对象模型 (BOM):Window 对象等

Size: px

Start display at page:

Download "纲要基础知识 ( 来源组成特点和引用等 ) 基本语法及实例 HTML 文档对象模型 (DOM) 浏览器对象模型 (BOM):Window 对象等"

恤栋霍
5 years ago
Views:

1 第 11 讲 Javascript 张高川遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ:

2 纲要基础知识 ( 来源组成特点和引用等 ) 基本语法及实例 HTML 文档对象模型 (DOM) 浏览器对象模型 (BOM):Window 对象等

3 Javascript 是什么?

4 Javascript 是什么? JavaScript 是因特网上最流行的脚本语言 JavaScript 被设计为向 HTML 页面增加交互性一种直译式脚本语言, 是一种动态类型弱类型基于原型的语言, 内置支持类型 JavaScript 是属于 web 的语言, 它适用于 PC 笔记本电脑平板电脑和移动电话跨平台

5 Javascript 来源 Netscape Sun Brendan Eich Java Javascript Microsoft JScript ScriptEase CEnvi 浏览器 :ECMA 标准 (ECMAScript)

6 Javascript 组成 ECMAScript 描述了该语言的语法和基本对象文档对象模型 (DOM) 描述处理网页内容的方法和接口浏览器对象模型 (BOM) 描述与浏览器进行交互的方法和接口

7 Javascript 组成 ECMAScript Javascript (JS) 程序文档对象模型 (DOM) 浏览器对象模型 (BOM)

8 Javascript 组成 ECMAScript Javascript (JS) 程序文档对象模型 (DOM) 网页文档及标签元素浏览器对象模型 (BOM)

9 Javascript 组成 ECMAScript Javascript (JS) 程序文档对象模型 (DOM) 网页文档及标签元素浏览器对象模型 (BOM) 各种浏览器软件

10 Javascript 组成 ECMAScript Javascript (JS) 程序文档对象模型 (DOM) 网页文档及标签元素浏览器对象模型 (BOM) 各种浏览器软件各种操作系统

11 Javascript 基本特点脚本语言基于对象简单动态性跨平台性

12 Javascript 基本特点脚本语言基于对象简单动态性跨平台性 JavaScript 是一种解释型的脚本语言, C C++ 等语言先编译后执行, 而 JavaScript 是在程序的运行过程中逐行进行解释注意 : 网页中 Javascript 代码的执行效果!

13 Javascript 基本特点脚本语言基于对象简单动态性跨平台性 JavaScript 是一种基于对象的脚本语言, 它不仅可以创建对象, 也能使用现有的对象例如 : 网页中的各种元素!

14 Javascript 基本特点脚本语言基于对象简单动态性跨平台性 JavaScript 语言中采用的是弱类型的变量类型, 对使用的数据类型未做出严格的要求, 是基于 Java 基本语句和控制的脚本语言, 其设计简单紧凑注意 : 简单易用的同时, 逻辑的严谨与合理, 需要靠你自己!

15 Javascript 基本特点脚本语言基于对象简单动态性跨平台性 JavaScript 是一种采用事件驱动的脚本语言, 它不需要经过 Web 服务器就可以对用户的输入做出响应在访问一个网页时, 鼠标在网页中进行鼠标点击或上下移窗口移动等操作 JavaScript 都可直接对这些事件给出相应的响应

16 Javascript 基本特点脚本语言基于对象简单动态性跨平台性 JavaScript 脚本语言不依赖于操作系统, 仅需要浏览器的支持因此一个 JavaScript 脚本在编写后可以带到任意机器上使用, 前提上机器上的浏览器支持 JavaScript 脚本语言, 目前 JavaScript 已被大多数的浏览器所支持

17 Javascript 基本特点不同于服务器端脚本语言, 例如 PHP 与 ASP,JavaScript 主要被作为客户端脚本语言在用户的浏览器上运行, 不需要服务器的支持, 可以减少对服务器的负担 PHP 与 ASP 安全性 JavaScript JavaScript 仍然以其跨平台容易上手等优势大行其道 AJAX 事件驱动异步 IO JavaScript 逐渐被用来编写服务器端程序

18 如何在 HTML 页面中使用 JavaScript?

19 如何在 HTML 页面中使用 JavaScript? HTML 中的脚本必须位于 <script> 与 </script> 标签之间 <script> alert("my First JavaScript"); </script> 脚本可被放置在 HTML 页面的 <head> 和 / 或 <body> 部分中外部 JavaScript 文件的文件扩展名是.js 如需使用外部文件, 请在 <script> 标签的 "src" 属性中设置该.js 文件 :<script src="myscript.js" ></script>

20 纲要基础知识 ( 来源组成特点和引用等 ) 基本语法及实例 HTML 文档对象模型 (DOM) 浏览器对象模型 (BOM):Window 对象等

21 JavaScript 基本语法 >> 基本书写规范语句结束 ; 代码块 } 分行标识 \ 但是不要分在保留字中间 document.write \ ("Hello World!"); 单行注释以 // 开头多行注释以 /* 开始, 以 */ 结尾

22 JavaScript 变量与数据类型 var a=2; var b=3; var c=a+b; var x="gates", y=56, z="ceo"; var x="gates", y=56, z="ceo"; 变量必须以字母开头变量也能以 $ 和 _ 符号开头不推荐这么做变量名称对大小写敏感 (y 和 Y 是不同的变量 )

23 JavaScript 数据类型字符串数字布尔数组对象 Null Undefined

24 JavaScript 数据类型字符串数字布尔 var x1=34.00; // 使用小数点来写 var x2=34; // 不使用小数点来写 var y=123e5; // var z=123e-5; // 数组对象 Null Undefined

25 JavaScript 数据类型字符串数字布尔数组对象 var cars = new Array(); cars[0]= aaa"; cars[1]= bbb"; cars[2]= ccc"; Null Undefined

26 JavaScript 数据类型字符串数字布尔 var cars = new Array(); cars[0] = "aaa"; cars[1] = "bbb"; cars[2] = "ccc"; 数组对象 Null var cars = new Array("aaa","bbb","ccc"); var cars = ["aaa","bbb","ccc"]; Undefined

27 JavaScript 数据类型字符串数字布尔 var cars = new Array(); cars[0] = "aaa"; cars[1] = "bbb"; cars[2] = "ccc"; 数组对象 Null var cars = new Array("aaa","bbb","ccc"); var cars = ["aaa","bbb","ccc"]; Undefined

28 JavaScript 数据类型字符串数字布尔数组对象 Null var person = firstname: "Bill", lastname: "Gates", id: 5566 }; var person = firstname : "Bill", lastname : "Gates", id : 5566 }; name = person.lastname; name = person["lastname"]; Undefined

29 JavaScript 数据类型字符串数字布尔数组对象 Null Undefined 这个值表示变量不含有值可以通过将变量的值设置为 null 来清空变量 x=null; Undefined

30 JavaScript 数据类型字符串动态类型数字布尔数组对象 var x // x 为 undefined var x = 6; // x 为数字 var x = "zgc"; // x 为字符串 Null Undefined

31 JavaScript 对象所有事物都是对象 : 字符串数字数组日期等对象是拥有属性和方法的数据 var seq = "cgtacgatcatcgtacgtcaggctcactgcgctagct"; 对于字符串 seq 来说, 你一般会进行什么操作?

32 JavaScript 对象所有事物都是对象 : 字符串数字数组日期等对象是拥有属性和方法的数据 var seq = "cgtacgatcatcgtacgtcaggctcactgcgctagct"; txt.length txt.indexof() txt.replace() 对于字符串 seq 来说, 你一般会进行什么操作? txt.search() txt.touppercase()

33 JavaScript 函数 function myfunction_name ( [arg1], [arg2], ) 这里是要执行的代码 } <button onclick = "welcome(' 张高川 ')" > 点击这里 </button> <script> function welcome (name) alert("hello " + name + ", welcome to my web home!"); } </script>

34 JavaScript 函数 function myfunction_name ( [arg1], [arg2], ) 这里是要执行的代码 } <button onclick = "welcome(' 张高川 ')" > 点击这里 </button> 如果函数有返回值, 使用 return 语句 <script> 如 :return 1; function welcome 一旦执行到 (name) return 语句时, 函数会停止执行, 并 alert("hello 返回指定的值无论该语句后面是否还有脚本 " + name + ", welcome to my web home!"); } </script>

35 JavaScript 运算符 >> 算术运算符运算符描述例子结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x=10 / 除 x=y/2 x=2.5 % 求余数 ( 保留整数 ) x=y%2 x=1 ++ 累加 x=++y x=6 -- 递减 x=--y x=4

36 JavaScript 运算符 >> 赋值运算符运算符例子等价于结果 = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0

37 JavaScript 运算符 >> 字符串连接 +

38 JavaScript 比较和逻辑运算符运算符描述例子 == 等于 x==8 为 false === 全等 ( 值和类型 ) x===5 为 true;x==="5" 为 false!= 不等于 x!=8 为 true > 大于 x>8 为 false < 小于 x<8 为 true >= 大于或等于 x>=8 为 false <= 小于或等于 x<=8 为 true 运算符描述例子 && and (x < 10 && y > 1) 为 true or (x==5 y==5) 为 false! not!(x==y) 为 true

39 JavaScript 条件语句 If 语句 : if ( 条件 ) 当条件为 true 时执行的代码 } If...else if...else 语句 : If...else 语句 : if ( 条件 ) 当条件为 true 时执行的代码 }else 当条件不为 true 时执行的代码 } if ( 条件 1) 当条件 1 为 true 时执行的代码 }else if ( 条件 2) 当条件 2 为 true 时执行的代码 }else 当条件 1 和条件 2 都不为 true 时执行的代码 }

40 JavaScript 条件语句 Switch 语句 : switch(n) case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; } default: n 与 case 1 和 case 2 不同时执行的代码

41 JavaScript 循环语句 For 循环 : for ([ 语句 1]; [ 语句 2]; [ 语句 3]) 被执行的代码块 } while 循环 : while ( 条件 ) 需要执行的代码 } For/In 循环 : 遍历对象的属性 var person = fname:"john",lname:"doe",ag e:25}; for (x in person) txt=txt + person[x]; } do/while 循环 : do 需要执行的代码 } while ( 条件 );

42 Break 和 Continue 语句 break 语句用于跳出循环 continue 用于跳过循环中的一个迭代

Javascript 实例 1 写入 HTML 输出 : document.write("<h1>this is a heading</h1>"); document.write("<p>this is a paragraph</p>"); 对事件作出反应 : <button type= button onclick="alert('welcome!

43 Javascript 实例 1 写入 HTML 输出 : document.write("<h1>this is a heading</h1>"); document.write("<p>this is a paragraph</p>"); 对事件作出反应 : <button type= button onclick="alert('welcome!')" > 点击这里 </button> 改变 HTML 内容 : x = document.getelementbyid( demo ) x.innerhtml = "Hello JavaScript"; 改变 HTML 样式 : x = document.getelementbyid("demo") x.style.color = "#ff0000";

44 Javascript 实例 2 改变 HTML 图像 : <script> function changeimage() element = document.getelementbyid( myimage ) if (element.src.match("bulbon")) element.src="/i/eg_bulboff.gif"; } else element.src="/i/eg_bulbon.gif"; } } </script> <img id="myimage" onclick="changeimage()" src="/i/eg_bulboff.gif">

45 Javascript 实例 2 改变 HTML 图像 : <script> function changeimage() element = document.getelementbyid( myimage ) if (element.src.match("bulbon")) element.src="/i/eg_bulboff.gif"; } else element.src="/i/eg_bulbon.gif"; } } </script> <img id="myimage" onclick="changeimage()" src="/i/eg_bulboff.gif">

46 Javascript 实例 3 >> 表单验证问题设计当前表单中名称为 name 为必填栏目 ; 如果没有填写, 则弹出警告框 ; 然后焦点自动移至该栏目输入框

47 Javascript 实例 3 >> 表单验证 <body> <form action="submitpage.htm" onsubmit = "return validate_form(this)" method="post"> Name: <input type="text" name="name" size="30"> <input type="submit" value="submit"> </form> </body>

48 Javascript 实例 3 >> 表单验证必填 ( 或必选 ) 项目 function validate_required (field, alerttxt) with (field) if (value==null value=="") alert (alerttxt); return false; }else return true; } } }

49 Javascript 实例 3 >> 表单验证必填 ( 或必选 ) 项目 function validate_form (thisform) with (thisform) if (validate_required (name, "Name must be filled out!")==false) name.focus(); return false; } } }

50 纲要基础知识 ( 来源组成特点和引用等 ) 基本语法及实例 HTML 文档对象模型 (DOM) 浏览器对象模型 (BOM):Window 对象等

51 JavaScript HTML DOM 通过 HTML DOM, 可访问 JavaScript HTML 文档的所有元素对于字符串 seq 来说, 你一般会进行什么操作? id 标签名 (name) 类名 (class)

52 JavaScript HTML DOM // 查找 id= "intro" 元素 : var x=document.getelementbyid( intro ); // 查找 id="main" 的元素, 然后查找 "main" 中的所有 <p> 元素 : var x = document.getelementbyid("main"); var y = x.getelementsbytagname("p");

53 JavaScript HTML DOM >> 改变 HTML 内容 document.getelementbyid(id).innerhtml= new HTML <html> <body> <p id="p1">hello World!</p> <script> document.getelementbyid("p1").innerhtml = "New text!"; </script> </body> </html>

54 JavaScript HTML DOM >> 改变 HTML 属性 document.getelementbyid(id).attribute = new value <img id="image" src="smiley.gif"> <script> document.getelementbyid("image").src="landscape.jpg"; </script>

55 JavaScript HTML DOM >> 改变 CSS document.getelementbyid(id).style.property = new style <p id="aaa">hello World!</p> <script> document.getelementbyid("aaa").style.color="blue"; </script> <button type="button" onclick="document.getelementbyid('aaa'). style.color='red'"> 变红 </button>

56 JavaScript HTML DOM >> 改变 CSS <input type="button" value=" 隐藏文本 " onclick="document.getelementbyid('aaa').style.visibility='hidde n'" /> <input type="button" value=" 显示文本 " onclick="document.getelementbyid('aaa').style.visibility='visibl e'" />

57 JavaScript HTML DOM >> 改变 CSS <p id="aaa" onclick="this.innerhtml=' 谢谢!'">Hello World!</p> <p id="aaa" onclick="changetext(this)'">hello World!</p> <script type="application/javascript"> function changetext(obj) if (obj.innerhtml==" 再见 ") obj.style.display="none";} else if (obj.innerhtml==" 谢谢 ") obj.innerhtml=" 再见 ";} else if (obj.innerhtml=="hello World!<br> 再点一次 <br> 再次点击这里 ")obj.innerhtml=" 谢谢 ";} else if (obj.innerhtml=="hello World!") obj.innerhtml=obj.innerhtml+"<br> 再点一次 ";} elseobj.innerhtml=obj.innerhtml+"<br> 再次点击这里 ";} } </script>

58 JavaScript HTML DOM >> 事件 <script> document.getelementbyid("aaa").onclick = function() displaydate() }; function displaydate() document.getelementbyid("aaa").innerhtml = Date(); } </script>

59 JavaScript HTML DOM >> 事件 <p id="aaa" onmouseover="this.innerhtml=' 谢谢 '" onmouseout="this.innerhtml=' 快回来 '"> Hello World! </p>

60 鼠标 onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup 按键 onkeydown onkeypress onkeyup 你还能想到什么事件? 焦点 onblur onfocus 页面 & 窗口 onload onresize onunload

61 鼠标 / 键盘属性属性描述 altkey 返回当事件被触发时,"ALT" 是否被按下 button 返回当事件被触发时, 哪个鼠标按钮被点击 clientx 返回当事件被触发时, 鼠标指针的水平坐标 clienty 返回当事件被触发时, 鼠标指针的垂直坐标 ctrlkey 返回当事件被触发时,"CTRL" 键是否被按下 metakey 返回当事件被触发时,"meta" 键是否被按下 relatedtarget 返回与事件的目标节点相关的节点 screenx 返回当某个事件被触发时, 鼠标指针的水平坐标 screeny shiftkey 返回当某个事件被触发时, 鼠标指针的垂直坐标返回当事件被触发时,"SHIFT" 键是否被按下

62 JavaScript HTML DOM 你能想到使用 Javascript HTML DOM 来完成什么样的网页操作吗?

63 纲要基础知识 ( 来源组成特点和引用等 ) 基本语法及实例 HTML 文档对象模型 (DOM) 浏览器对象模型 (BOM):Window 对象等

64 JavaScript Window >> 浏览器对象模型 (BOM) Window 对象所有浏览器都支持 window 对象它表示浏览器窗口所有 JavaScript 全局对象函数以及变量均自动成为 window 对象的成员甚至 HTML DOM 的 document 也是 window 对象的属性之一 document.getelementbyid("header"); window.document.getelementbyid("header");

body.clientheight document.body.clientwidth var w=window.innerwidth document.documentelement.clientwidth document.body.clientwidth; var h=window.

65 如何获取浏览器窗口大小?(Window 尺寸 ) 对于 Internet Explorer Chrome Firefox Opera 以及 Safari: window.innerheight 浏览器窗口的内部高度 window.innerwidth 浏览器窗口的内部宽度对于 Internet Explorer : document.documentelement.clientheight document.documentelement.clientwidth 或者 document.body.clientheight document.body.clientwidth var w=window.innerwidth document.documentelement.clientwidth document.body.clientwidth; var h=window.innerheight document.documentelement.clientheight document.body.clientheight;

66 其他 Window 方法 window.open() - 打开新窗口 window.close() - 关闭当前窗口 window.moveto() - 移动当前窗口 window.resizeto() - 调整当前窗口的尺寸

JavaScript Window 衍生对象 Screen 获得用户屏幕的信息 screen.

67 JavaScript Window 衍生对象 Screen 获得用户屏幕的信息 screen.availwidth - 可用的屏幕宽度 screen.availheight - 可用的屏幕高度 Location 获得当前页面的地址 (URL), 并把浏览器重定向到新的页面 location.hostname 返回 web 主机的域名 location.href 属性返回当前页面的 URL location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80 或 443) location.protocol 返回所使用的 web 协议 ( 或 location.assign() 方法加载新的文档

68 JavaScript 消息框警告框 alert(" 文本 ") 确认框 confirm(" 文本 ") 提示框 prompt(" 文本 "," 默认值 ")

69 JavaScript 消息框 <script type="text/javascript"> function disp_alert() alert(" 我是警告框!") } </script> <input type="button" onclick="disp_alert()" value=" 显示警告框 " />

70 JavaScript 消息框 <script type="text/javascript"> function show_confirm() var r = confirm(" 你确认要关闭吗?"); if (r==true) alert(" 你点击了确认按钮!"); }else alert( 你点击了取消按钮!"); } } </script> <input type="button" onclick="show_confirm()" value=" 显示确认框 " />

71 JavaScript 消息框 <script type="text/javascript"> function disp_prompt() var name = prompt(" 请输入您的名字 "," 张高川 ") if (name!=null && name!="") document.write( 你好! + name + 祝你天天开心!") } } </script> <input type="button" onclick="disp_prompt()" value=" 显示提示框 " />

72 JavaScript 计时 settimeout() 未来的某时执行代码 cleartimeout() 取消 settimeout() var t = settimeout ("javascript 语句 ", 毫秒 )

73 JavaScript 计时 >> 时钟 <html> <head> <script type="text/javascript"> function starttime() var today=new Date() var h=today.gethours() var m=today.getminutes() var s=today.getseconds() // 如果小于 10 则补 0 m=checktime(m) s=checktime(s) function checktime(i) if (i<10) i="0" + i} return i } </script> </head> <body onload="starttime()"> <div id="txt"></div> </body> </html> document.getelementbyid('txt').i nnerhtml=h+":"+m+":"+s } t = settimeout('starttime()',500)

74 JavaScript 计时 >> 计时器 <html> <head> <script type="text/javascript"> var c=0 var t function timedcount() document.getelementbyid('txt').value=c c=c+1 t = settimeout("timedcount()",1000) } function stopcount() c=0; settimeout("document.getelementbyid('t xt').value=0",0); cleartimeout(t); } </script> </head> <body> <form> <input type="button" value=" 开始计时 " onclick="timedcount()"> <input type="text" id="txt"> <input type="button" value=" 停止计时 " onclick="stopcount()"> </form> </body> </html>

75 JavaScript Cookies <html> cookie 是存储于访问者的计算机中的变量 <head> <script type="text/javascript"> function getcookie(c_name) if (document.cookie.length>0) c_start = document.cookie.indexof(c_name + "=") if (c_start!= -1) c_start = c_start + c_name.length+1 c_end = document.cookie.indexof(";",c_start) if (c_end == -1) c_end = document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return "" }

76 JavaScript Cookies cookie 是存储于访问者的计算机中的变量 function setcookie(c_name,value,expiredays) var exdate=new Date() exdate.setdate(exdate.getdate()+expiredays) document.cookie = c_name+ "=" +escape(value)+ ((expiredays==null)? "" : ";expires="+exdate.togmtstring()) }

77 JavaScript Cookies function checkcookie() } username = getcookie('username') if (username!=null && username!="") alert('welcome again '+username+'!') } else username = prompt('please enter your name:',"") if (username!=null && username!="") setcookie('username',username,365) } } </script> </head> <body onload="checkcookie()"> </body> </html> cookie 是存储于访问者的计算机中的变量

78 实践练习与拓展阅读基于之前编写的网页, 增加 JavaScript 编写的新功能或新特色

Microsoft Word - 01.DOC

Microsoft Word - 01.DOC 第 1 章 JavaScript 简介 JavaScript 是 NetScape 公司为 Navigator 浏览器开发的, 是写在 HTML 文件中的一种脚本语言, 能实现网页内容的交互显示当用户在客户端显示该网页时, 浏览器就会执行 JavaScript 程序, 用户通过交互式的

纲 要 基础知识 ( 来源 组成 特点和引用等 ) 基本语法及实例 HTML 文档对象模型 (DOM) 浏览器对象模型 (BOM):Window 对象等

纲要基础知识 ( 来源组成特点和引用等 ) 基本语法及实例 HTML 文档对象模型 (DOM) 浏览器对象模型 (BOM):Window 对象等