JavaScript 语言3 学习网站:心蕊设计

Slides:



Advertisements
Similar presentations
Java Web 开发 授课人:张鸽. 第三讲 JSP 内置对象  JSP 有以下九种内置对象,包括:  ·request ,请求对象  ·response ,响应对象  ·pageContext ,页面上下文对象  ·session ,会话对象  ·application ,应用程序对象.
Advertisements

《计算机网络技术》 动态网页制作技术 常用HTML控件课程积件 杨 姝.
互動表單的應用.
第六章 网页设计与制作基础.
作業2-Javascript實作 (請同學自行研讀電子書或指定之Javascript教科書) 書上習題: 11-3
第5章 HTML 標籤介紹.
網路程式設計-期末專案 資工二B B975701 2 8 黃首翰 ~Rock your life~
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
网页制作 第一讲
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
Web Programming 網際網路程式設計
JavaScript中常用的互動方式 認識簡單的交談與基本的運算.
第三讲 站点链接与表格布局.
木棉检索队 陈晓锋 罗嘉明 李雯 任利辉 何章鸿 SEWM 2007中文Web检索测评报告 木棉检索队 陈晓锋 罗嘉明 李雯 任利辉 何章鸿
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
P303 HTML/DHTML/CSS/JavaScript 專業HTML網頁設計 陳錦輝.
第五单元课1-3 层叠样式表.
第一讲 JavaScript编程基础 信息学院 周宝刚.
第4章 JavaScript脚本语言基础 4.1 JavaScript简介 4.2 JavaScript语法基础
第3章 JavaScript语言基础.
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
第三章 使用XMLHttpRequest对象
数据访问页.
5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box
第六章 操作浏览器窗口.
CT212 (02/03)-Network Programming and design
HTML.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
网页制作 第五讲 Dreamweaver基础.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
程式簡介、VB、物件導向 國立北門高中 林明璋.
网 页 制 作 DREAMWEAVERMX 2004.
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
第四章 網頁表單與資料傳遞.
DhtmlXGrid表格显示控件简介.
Beyond Technology JavaScript(Ver1.0).
滑鼠移動與按鍵事件 JavaScript 滑鼠移動與按鍵事件.
HTML 钟晖云 QQ:
Ch.13 HTML網頁實作.
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
張智星 台大資工系 多媒體檢索實驗室 第五章 自訂函數 張智星 台大資工系 多媒體檢索實驗室.
Image对象 主讲人:傅伟玉.
本單元介紹何謂變數,及說明變數的宣告方式。
ASP动态网页设计实用教程 主讲教师: 开课单位:.
JavaScript 靜宜大學 資管系 楊子青.
W3C标准网页制作 主讲教师:张 涛.
第3 章 VBScript的控制结构.
張智星 台大資工系 多媒體檢索實驗室 第九章 小餅乾(Cookies) 張智星 台大資工系 多媒體檢索實驗室.
張智星 台大資工系 多媒體檢索實驗室 第六章 文件物件模型(DOM) 張智星 台大資工系 多媒體檢索實驗室.
实例导入:西部旅游网 | 页面属性的设置|文本的修饰|设置超级链接|制作纯文本网站|使用图像
网 站 设 计 与 建 设 Website design and developments
Cookie 存取Cookie Cookie有效時間 Session 存取Session session 函數
网站设计 前端 选择器(复习),表单.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
程式語言與邏輯 高慧君 台北市立南港高中 2006年12月22日.
第三章 HTML相关技术基础知识 纵观各种动态页面开发技术,无论是JSP、ASP还是PHP都无 法摆脱HTML的影子。这些动态的页面开发技术无非是在静 态HTML页面的基础上添加了动态的可以交互的内容。HTML 是所有动态页面开发技术的基础。在接下来的章节将要详 细介绍的就是HTML相关的一系列技术,包括HTML、
Ajax编程技术 第六章 调试与错误处理.
Ch09 在網頁之間傳遞資訊 網頁程式設計.
JavaScript Sunxiaoshen.
JavaScript 语言2 学习网站: 第 4 章 JavaScript 语言2 学习网站:
第3章 JavaScript基本语句.
中五級電腦科 PASCAL檔案處理.
第6章 PHP的数据采集.
CHAPTER 14 視窗與超連結的各種變化.
自然與生活科技:太陽的觀測 高雄市 博愛國小 林佳蓉老師 2008/11/10.
JavaScript 教师:魏小迪
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
教师:李金双 网页制作 教师:李金双
Presentation transcript:

JavaScript 语言3 学习网站:心蕊设计http://xin126.cn/ 第 4 章 JavaScript 语言3 学习网站:心蕊设计http://xin126.cn/

数组(Array)对象 数组是一个有序的值的集合,数组中的元素通过数组名和数组下标进行访问 数组的创建(使用关键词 new 来创建数组对象 ) var arr=new Array(); 创建数组的同时规定数组大小: var arr=new Array(10);

数组(Array)对象 数组赋值 数组元素的访问 document.write(“我喜欢的车是”+mycars[2]); var mycars=new Array(3) mycars[0]=“宝马" mycars[1]=“奥迪" mycars[2]=“奔驰“ var mycars=new Array("宝马","奥迪","奔驰") 数组元素的访问 document.write(“我喜欢的车是”+mycars[2]);

动态改变单元格内容 <a href="#" onClick="changeContent(0)">scene 1</a> <a href="#" onClick="changeContent(1)">scene 2</a> <a href="#" onmouseover="changeContent(2)">scene 3</a> <td id="content" ><img src='images/img1.jpg'><br>squirrel......</td> var starAry= new Array() starAry[0] ="<img src='images/img1.jpg'><br>squirrel......" starAry[1] ="<img src='images/img2.jpg'><br>road......" starAry[2] ="<img src='images/img3.jpg'><br>bicycle......" function changeContent(i){ content.innerHTML = starAry[i] //content是单元格td的id 例4-4-8.html 4-4-8.2.html

数组对象的属性 length(能够求出数组的长度) var names= new Array("烟台","北京","济南"); <script language="JavaScript"> <!-- var names= new Array("烟台","北京","济南"); document.write(names.length); //--> </script>

数组的常用方法1 concat() 将两个数组合并为一个数组。 var names1=new Array("北京市", "上海市", "广州市"); var names2=new Array("天津市", "重庆市"); document.write("<b>第一个数组的元素为:"+ names1 + "<br>"); document.write("<b>第二个数组的元素为:"+ names2 + "<br>"); document.write("<b><br>合并后的数组的数组元素为:<br>"); var names3 = names1.concat(names2); document.write(names3); 例4-4-9.html

数组的常用方法2 join() 使用指定的分隔符将数组元素拼接成一个字符串返回。 document.write("合并后的数组调用join()方法的结果为:<br>"+names3.join("-")); 例4-4-9.html

数组的常用方法3 push(): 在数组末尾添加一个或多个元素。 var names=new Array("连城诀","天龙八部"); document.write("数组的原始值:" +names); names.push("射雕英雄传","白马啸西风"); document.write(“调用push方法后数组的值:" +names);

数组的常用方法4 pop():从数组末尾删除一个元素。 names.pop(); document.write("调用一次pop方法后数组的值:"+names); document.write("再调用一次pop方法后数组的值:"+names);

通用浏览器对象 浏览器是用于显示 HTML 文档内容的应用程序 IE 浏览器对象 Netscape 浏览器对象

文档对象模型 window frame self top parent document history location link form anchor text select radio button reset textarea checkbox option submit 最低公用标准的文档对象层次

Window 对象 Window 对象表示浏览器的窗口,可用于检索有关窗口状态的信息。 属性 名称 说明 document event 表示浏览器窗口中的HTML文档。 event 表示事件的状态,例如发生事件的元素、键盘上键的状态、鼠标的位置和鼠标按钮的状态。 history 包含有关客户访问过的URL的信息。 location 包含有关当前URL的信息。 name 设置或检索窗口或框架的名称。 screen 包含有关客户的屏幕和显示性能的信息。 status 设置或检索窗口底部的状态栏中的消息。

Window 对象 方法(1) 名称 说明 alert blur close focus confirm navigate promt 显示包含应用程序定义消息的对话框。 blur 使对象失去焦点并激发onblur事件。 close 关闭当前浏览器窗口或HTML应用程序。 focus 使控件接收焦点。 confirm 弹出一个消息框。 navigate 将指定的URL加载到当前窗口。 promt 弹出一个提示框。

Window 对象 方法(2) 名称 说明 setTimeout(expression,time) clearTimeout(timer) setIntervel (expression,time) 设定一个时间间隔,可以定时反复的自动执行expression描述的代码,使用time设置时间,单位是毫秒。 open(“URL”, “windowName”[, “windowFeatures”][,replaceFlag]) 打开新的窗口并加载给定URL指定的文档;如果没有提供URL,则打开一个空文档。

prompt()方法 弹出一个输入框 <Script Language="JavaScript"> name=prompt("请输入您的大名:"); document.write("欢迎"+name+"光临本站"); document.close(); </Script> close是Document 对象的方法 作用:关闭输出流并强制显示发送的数据。

Document 对象 方法 名称 说明 clear close open write writeln 清除当前文档。 关闭输出流并强制显示发送的数据。 open 打开一个文档以收集write方法或writeln方法的输出。 write 向指定窗口中的文档写入一个或多个HTML语句。 writeln 向指定窗口中的文档写入一个或多个HTML语句,写完后回车。

Document 对象 Document 对象表示给定浏览器窗口中的 HTML 文档,用于检索有关该文档的信息。 <HTML><HEAD> <TITLE>Document对象</TITLE> <script language=“JavaScript”> alert(document.title); </script> </HEAD></HTML> 例02.htm

状态栏和标题栏动态显示 var msg,i=0; msg = new Array("------Welcome to","------Javascript","------world !","Welcome to Javascript world !"); function changeTitle(){ window.status=msg[i]; //状态栏显示 window.document.title=msg[i]; //标题栏显示 i++; if (i==msg.length) i= 0; } window.setTimeout("changeTitle()",0); window.setInterval("changeTitle()",1000); 例:4-4-13.html

write和writeln write与writeln的区别在于writeln在输出后自动添加一个换行,但在浏览器中往往被忽略,因此一般情况下用两种方法输出的效果在页面上是没有区别的(除非是输出到<pre>元素内)。   <pre> <script language="JavaScript"> document.write("你好"); document.writeln("欢迎"); document.write("光临"); </script> </pre>

Location 对象 方法 名称 说明 assign(“URL”) reload replace(“URL”) 加载新的HTML文档。 重新加载当前页。 replace(“URL”) 通过加载指定URL处的文档来替换当前文档。

assign()方法应用实例 例4-4-17.html function link_website(){ <SCRIPT language=JavaScript> function link_website(){ location.assign(fm.tt.value)} </SCRIPT> <form name=fm> <input type=“text” size=“30” name=“tt”> <input type=“button” value=”单击以加载自己喜爱的网站 “ name=bt onclick=“link_website()” > </form> 例4-4-17.html

reload()方法应用实例 常用于股市,期货等实时变化的页面中。 重新加载当前页 <SCRIPT language=JavaScript> setInterval(“location.reload()”,10000); </SCRIPT> 常用于股市,期货等实时变化的页面中。

History对象 此对象提供客户最近访问过的 URL 列表 属性 length:返回浏览器历史列表中的 URL 数量 方法 back() 加载 history 列表中的前一个 URL forward() 加载 history 列表中的下一个 URL。 go() 加载 history 列表中的某个具体页面。0代表当前记录,-1代表前一记录,1代表下一条记录。

History对象应用 <button onClick="javascript:history.go(-1);">后退</button> <button onClick="javascript:history.go(1);">前进</button> <button onClick="javascript:history.go(0);">刷新</button> <button onClick="javascript:alert(history.length)">浏览过的页面数量</button> 例04.htm

END 学习网站: http://xin126.cn/