了解JavaScript.

Slides:



Advertisements
Similar presentations
1 HTML 语言与网页设计 —— DHTML 技术 2 学习目标 理解客户端脚本的作用,掌握在 网页中使用客户端脚本的方法。 理解 JavaScript 语言的基本语法。 理解 JavaScript 对象和浏览器对 象在脚本编程中的作用。 理解 DHTML 的原理,能够在网页 中应用 DHTML.
Advertisements

第 4 章 PHP 基本語法.
JavaScript脚本语言 两个简单的方法 alert(strvar); document.write(strvar);
Tool Command Language --11级ACM班 金天行.
JavaScript中常用的互動方式 認識簡單的交談與基本的運算.
第12讲 Javascript 复习 信息学院 孙辉.
P303 HTML/DHTML/CSS/JavaScript 專業HTML網頁設計 陳錦輝.
第一讲 JavaScript编程基础 信息学院 周宝刚.
第4章 JavaScript脚本语言基础 4.1 JavaScript简介 4.2 JavaScript语法基础
JavaScript 语言基础.
第3章 JavaScript语言基础.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
第6章 脚本编程 讲述脚本的概念、JavaScript的基本语法、在页面上创建JavaScript的方法,重 点介绍了JavaScript内置对象和浏览器对象在Web页上的应用.
Oracle数据库 Oracle 子程序.
Ch07 PHP程式基礎 網頁程式設計.
ASP VBScript 基础知识.
EBNF与操作语义 请用扩展的 BNF 描述 javascript语言里语句的结构;并用操作语义的方法描述对应的语义规则
C++Primer 3rd edition 中文版 Chap 5
滑鼠移動與按鍵事件 JavaScript 滑鼠移動與按鍵事件.
EBNF 请用扩展的 BNF 描述 C语言里语句的结构; 请用扩展的 BNF 描述 C++语言里类声明的结构;
張智星 台大資工系 多媒體檢索實驗室 第五章 自訂函數 張智星 台大資工系 多媒體檢索實驗室.
JavaScript 语言3 学习网站:心蕊设计
本單元介紹何謂變數,及說明變數的宣告方式。
ASP动态网页设计实用教程 主讲教师: 开课单位:.
JavaScript 靜宜大學 資管系 楊子青.
條件判斷指令 -if 指令 -switch 指令 迴圈指令 - for 迴圈 - while迴圈 - break、continue 指令
PHP 程式流程控制結構.
走进编程 程序的顺序结构(二).
附錄E Access事件類別 主從式資料庫系統 - 附錄E.
湖北职院计科系.
1.2 MATLAB变量表达式与数据格式 MATLAB变量与表达式 MATLAB的数据显示格式
第二章 Java语言基础.
程式設計 Visual Basic簡介 週次:2 建國技術學院 資管系 饒瑞佶 2003年9月17日.
進階 WWW 程式設計 -- PHP 語言結構 靜宜大學資訊管理學系 蔡奇偉副教授 2003
VB程序设计语言 主讲教师:王 杨.
JavaScript培训
第3章 Java語法的JSP程式 3-1 Java語言的基礎 3-2 JSP程式的基本架構 3-3 Java的變數與資料型態
第4章 PHP流程控制语句.
1.3 C语言的语句和关键字 一、C语言的语句 与其它高级语言一样,C语言也是利用函数体中的可执行 语句,向计算机系统发出操作命令。按照语句功能或构成的不 同,可将C语言的语句分为五类。 goto, return.
学习目标 1、什么是字符集 2、字符集四个级别 3、如何选择字符集.
JavaScript Sunxiaoshen.
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
C语言程序设计 第一章 数据类型, 运算符与表达式 第二章 顺序程序设计 第三章 选择结构程序设计 第四章 循环控制 第五章 数组.
项目二:HTML语言基础.
Action Script 使用介紹 第六組 張瀚之.
第3章 JavaScript基本语句.
第4章 Excel电子表格制作软件 4.4 函数(一).
第九节 赋值运算符和赋值表达式.
3.16 枚举算法及其程序实现 ——数组的作用.
本节内容 Lua基本语法.
C++语言程序设计 C++语言程序设计 第二章 基本数据类型与表达式 第十一组 C++语言程序设计.
多层循环 Private Sub Command1_Click() Dim i As Integer, j As Integer
ASP.NET实用教程 清华大学出版社 第4章 C#编程语言 教学目标 教学重点 教学过程 2019年5月5日.
Visual Basic程序设计 第13章 访问数据库
学习目标 1、了解基本运算符 2、运算符优先级.
第2章 JavaScript语言基础 2.1 数据类型、常量及变量.
第二章 Java基本语法 讲师:复凡.
本节内容 C语言的汇编表示 视频提供:昆山爱达人信息技术有限公司 官网地址: 联系QQ: QQ交流群 : 联系电话:
第二章 Java基本语法 讲师:复凡.
PHP程式設計 五、程式流程控制結構 建國科技大學 資訊管理學系 饒瑞佶.
C++语言程序设计 C++语言程序设计 第一章 C++语言概述 第十一组 C++语言程序设计.
第6章 PHP基本語法介紹.
WEB程序设计技术 数据库操作.
鸡兔同笼(续) ——选择结构.
C#快速導讀 流程控制.
数的简单处理 ——顺序结构、变量、数据类型、运算符
C语言基本语句 判断循环.
顺序结构程序设计 ——关于“字符串”和数值.
JavaScript 教师:魏小迪
Presentation transcript:

了解JavaScript

JavaScript概述 什么是JavaScript脚本语言? (1) 脚本语言(Scripting Language)? 由ASCII码构成,可直接用任何的文本编辑器开发完成。是一种不必事先编译,只要利用适当的解释器(Interpreter)就可以执行的简单的解释式程序 (2) JavaScript? JavaScript是由网景公司开发的一种跨平台,基于对象(object-oriented)式的网页式脚本语言(Web Script Language)。JavaScript代码可直接嵌入HTML文件中,随网页一起传送到客户端浏览器,然后通过浏览器的解释器来解释执行。

JavaScript概述 2. JavaScript的特点 脚本编写语言 基于对象的语言 简单性 安全性 动态性 跨平台

JavaScript概述 3. JavaScript的功能 制作网页特效 提供表单前端验证 窗口动态操作 提高系统工作效率

JavaScript概述 4. 在HTML文档中嵌入JavaScript代码 在HTML标记中直接写入JavaScript代码 例: <BODY> <P onmouseover="alert('欢迎您学习JavaScript!')">鼠标移过来</P> </BODY> </HTML> 运行

JavaScript概述 4. 在HTML文档中嵌入JavaScript代码 <script> 将JavaScript代码放入<Script>…</Script>标记符中 例如: <script> document.write("欢迎您学习JavaScript!"); </script> 运行

JavaScript概述 4. 在HTML文档中嵌入JavaScript代码 将代码独立存储为以 .js 为扩展名的文件,利用SRC属性将该文件调入 例如: <script src="welcome.js"> </script> welcome.js文件内容如下: document.write("欢迎您学习JavaScript!");

JavaScript概述 4. 在HTML文档中嵌入JavaScript代码 为避免某些浏览器不完全支持JavaScript,而造成错误,可将JavaScript代码用注释语句括起来 例如: <Script > <!-- …… --> </Script>

JavaScript编程基础 1. 数据类型 数值(Number):包含整数或浮点数。 逻辑值(Logical):取值为true或false。 字符串(String):用单引号或双引号括起来的零个或多个单一的字符所组成。 空值(null):表示没有值,取唯一值”null”,大小写敏感。 未定义值(undefined):表示尚未定义值。 注:null不能写成Null或NULL。 null既不等于“0”,也不等于“空字符串”。因为“0”是数值,“空字符串”是字符串。

JavaScript编程基础 2. 数据类型转换 自动数据类型转换 例如:var x=”我今年”+18; 结果:x=“我今年18” var x=”15”+8 结果:x=158 var y=15+8; 结果:y=23 如果表达式中用了其它运算符,JavaScript自动将字符串转成数值。 例如:var x=”30”/5; 结果:x=6 var y=”15”-“8”; 结果:y=7 举例

JavaScript编程基础 2. 数据类型转换 数据类型转换函数 eval(字符串):将传入的字符串参数内容,转换成相应的数值,例如: y=eval(“15”)+8; 结果:y=23 parseInt(字符串,[底数]):将传入的字符串,转换成指定底数的数值。 parseFloat(字符串):将传入的字符串,转换成浮点数值。 举例

JavaScript编程基础 3. 变量 变量命名 以字母或下划线开头(不能以数字开头),后面接数字或其它字母。 变量名区分大小写。 var A="Uppercase A"; var a="Lowercase a"; document.write(A); document.write("<br>"); document.write(a); </script>

JavaScript编程基础 3. 变量 变量的声明 变量声明时,不必定义类型,所有类型均由小写的var声明。 例如: var name; (JavaScript自动给出一个未定义值) var name,sex; (JavaScript自动给出一个未定义值) var name=”张永”,sex=”女生”; (二变量均为字符串)

JavaScript编程基础 3. 变量 变量的作用域:全局变量(Global variable)和局部变量(Local variable)。 <Script> document.title = "变量的作用域实例"; var gv = "JavaScript"; //gv是全局变量 document.write("test函数的输出:<br>"); test(); function test() { var lv = "VBScript"; //lv是局部变量 document.write("gv=" + gv + "<br>"); document.write("lv=" + lv + "<br>"+ "<br>"); } document.write("document的输出:<br>"); document.write("lv=" + lv + "<br>"); </Script>

JavaScript编程基础 4. 常量 字符串常量(String Literals) 一般字符串常量 特殊字符的字符串常量 布尔常量(Boolean Literals):true或false。 整数常量(Integers Literals) 浮点常量(Floating-Point Literals) 数组常量(Array Literals) 字符 意义 \b 后退一格(Backspace) \t 制表(Tab) \f 换页(Form feed) \’ 单引号 \n 换行(New line) \” 双引号 \r 返回(Carriage return) \\ 反斜线(Backslash)

JavaScript编程基础 5. 运算符与表达式 赋值运算符 运算符 意义 = x=5 /= x=x/y += x=x+y %= 求余赋值 -= x=x-y *= x=x*y

JavaScript编程基础 5. 运算符与表达式 比较运算符 举例 操作符 描述 举例 A==B 如果两个操作数相等,返回true Psw =password A!=B 如果两个操作数不等,返回true mobile.length!=11 A>=B 如果A大于或者等于B,返回true tries>=2 a>B 如果A大于B,返回true mflag>20 A<=b 如果A小于或等于B,返回true i<=0 A<B 如果A小巧或等于B,返回true tries<10

JavaScript编程基础 5. 运算符与表达式 算术运算符 举例 运算符 意义 + 加(Addition) / 除(Division) -- 递减(Decrement) - 减(Subtraction) % 求余(Modulus) 取负值(Unary Negation) * 乘(Multiplication) ++ 递增(Increment)

JavaScript编程基础 5. 运算符与表达式 逻辑运算符 a&&b :逻辑与(Logical AND),若a,b都是ture,则结果为ture。 a||b :逻辑或(Logical OR) ,若a,b任一是ture,则结果为ture。 !a :逻辑非(Logical NOT) ,若a是ture,则结果为false。

JavaScript编程基础 5. 运算符与表达式 字符串运算符(String operators) 条件运算符(?) 格式:条件表达式?值1:值2 如果条件表达式的结果是ture,返回值1,否则就返回值2。 举例 new:定义对象实例。 语法:对象名称 = new 对象类型(参数) 例如:myArray=new Array(3)

JavaScript编程基础 5. 运算符与表达式 delete:删除对象、属性、数组、变量 格式:delete 对象名 delete 对象名.属性名 delete 数组名[索引值] delete 变量名 注:删除成功返回true,删除失败返回flase 举例 typeof:用来判断操作数的类型 格式:typeof 操作数 或 typeof (操作数) this:代表当前对象,因此用在不同的地方,就有不同的结果。

JavaScript编程基础 6. 程序控制流程 选择结构 if <逻辑表达式> 语句 else { 语句组 } else if <逻辑表达式> else if <逻辑表达式> { 语句组 } else { 语句组} 举例

JavaScript编程基础 6. 程序控制流程 选择结构 Switch结构: switch ( <变量> ) { case <特定数值1>:<语句或语句组>; case <特定数值2>:<语句或语句组>; default:<语句或语句组>; }

JavaScript编程基础 6. 程序控制流程 循环结构 while (<逻辑表达式>) {语句组} var i = 5; while ( i > 0 ) { document.write("i = " ,i ,"<BR>"); i--; } </Script>

JavaScript编程基础 6. 程序控制流程 循环结构 do { 语句或语句组 }while (<逻辑表达式>) var i = 5; document.write("i = " ,i ,"<BR>"); i--; } while ( i > 0 ) </Script>

JavaScript编程基础 6. 程序控制流程 循环结构 for ( [初始值];[条件];[增量] ) { <语句或语句组>} <Script> for ( var i = 5; i > 0; i-- ) { document.write(“i = ” ,i ,“<BR/>"); } </Script>

JavaScript编程基础 6. 程序控制流程 循环结构 for ( 变量 in 对象 ) { <语句或语句组> } 例1 例2

JavaScript编程基础 6. 程序控制流程 循环结构 with ( <对象> ) { <语句或语句组> } { <语句或语句组> } <Script> document.write ("限时抢购物品:"); document.write ("<Li>ViewSonic 17\" 显示器。"); document.write ("<Li>EPSON 打印机。"); </Script> <Script> with (document) { write ("限时抢购物品:"); write ("<Li>ViewSonic 17\" 显示器。"); write ("<Li>EPSON 打印机。"); } </Script>

break和continue语句   与C++语言相同,使用break语句使得循环从For或while中跳出,continue使得跳过循环内剩余的语句而进入下一次循环。

JavaScript编程基础 6. 程序控制流程 注释语句 // <单行注释语句> /* <多行注释语句> */

JavaScript的事件处理 主要内容 1、事件 (Event):鼠标或键盘的动作称为事件 。 2、事件驱动(Event Driver):由事件引发的一连串程序的动作,称为事件驱动。 3、事件处理程序(Event Handler):对事件进行处理的程序或函数。 4、事件处理程序语法

JavaScript的事件处理 1、常见事件 事件 动作 Abort 中止正在加载的对象 Unload 关闭当前网页 Blur 失去焦点 MouseDown 按下鼠标左键 Focus 获取焦点 MouseMove 移动鼠标指针 Change 改变对象的值 MouseOut 鼠标指针离开某对象 Click 在对象上单击鼠标 MouseOver 鼠标指针悬停于某对象之上 DblClick 在对象上双击鼠标 MouseUp 放开鼠标左键 DrogDrop 拖拽对象 Move 窗口被移动时 Error 加载文件或图形时发生错误 Resize 窗口大小被改变 KeyDown 按下键盘上的任意键的瞬间 Select 选择某对象 KeyPress 按下键盘上的任意键时 Submit 单击表单上的Submit按钮 KeyUp 某键被按下后弹起来的瞬间 Reset 单击表单上的Reset按钮 Load 浏览器读入文件时