Javascript(课件PPT)
- 格式：ppt
- 大小：1.91 MB
- 文档页数：255
当前位置：文档之家 › Javascript(课件PPT)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一讲：JavaScript概述
课程内容安排
•JavaScript背景知识 •简单的脚本语言 •第一个JavaScript程序 •注意事项
JavaScript背景知识
• JavaScript的历史
• • • • Netscape LiveScript JavaApplet JavaScript
• 制定标准
• 检测当前所用的浏览器
01 02 03 04 05
<script language="JavaScript"> // 程序开始 document.write("名称：" + navigator.appName+"<br>"); // 浏览器名称 document.write("版本号：" + navigator.appVersion+"<br>"); // 浏览器版本号 document.write("发行代号："+navigator.appCodeName+"<br>"); // 浏览器的内部发行代号 </script>
01 02 03 04 05 06 07
<script language="javascript"> <!-var hello = "你好啊"; var name = „Peter‟; alert(hello + name ); --> </script>
// 脚本程序开始 // 使用双引号定义字符串 // 使用单引号定义字符串 // 将两个字符串合在一起显示 <!--脚本程序结束-->
注意事项
• 大小写敏感
• JavaScript代码是大小写敏感的，Name和name是不同的标识符，编码时 应当予以注意。同一个词如果如果各个字母间大小写不同时，系统将当 作不同的标识符来处理，相互之间没有任何联系
• 代码示例
01 02
Name = “sunsir”; name = “foxsir”;
•
•
复合数据类型
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 <script language="javascript"> <!-var comment = "静夜思李白床前明月光，疑是地上霜。举头望明月，低头思故乡。";// 诗的内容 var partial = comment.substring( 0, 3 ); // 取出标题 partial = partial.bold(); // 标题加粗 document.write( "<p align=\"center\">" ); // 输出HTML标签“<p>”，并设置居中对齐 document.write( partial ); // 输出标题 partial = comment.slice( 3, 5 ); // 取出作者 document.write( "<br>" ); // 输出换行标签<br> document.write( partial ); // 输出作者 partial = comment.slice( 5, 17 ); // 取出第一句诗文 partial = partial.fontcolor("gray"); // 设置颜色为gray（灰色） document.write( "<br>" ); // 输出换行标签 document.write( partial ); // 输出诗句 partial = comment.slice( 17, 29 ); // 取出第二句诗文 partial = partial.fontcolor("gray"); // 设置颜色为gray（灰色） document.write( "<br>" ); // 输出换行标签 document.write( partial ); // 输出诗句 document.write( "</p>" ); // 输出HTML标签“<p>”的结束标签 --> </script> <!--脚本程序结束-->
• 97年发布了ECMA262语言规范 • ECMAScript
• JavaScript现况 • JavaScript的未来
Fra Baidu bibliotek
简单的脚本语言
• 什么是脚本语言
• 脚本语言是一种应用程序扩展语言，用于系统的扩展，使其按用户的意 愿去运行。 • 所有的基础功能由系统提供，脚本语言在更高一层次描述如何调用系统 的接口。 • 解释执行。
第二讲：数据类型
课程内容安排
• • • • 基本数据类型 复合数据类型 其他数据类型 数据类型的转换
基本数据类型
• 在JavaScript中，字符串型数据是用引号括起的文本字符串。
• 在JavaScript中不区分“字符”和“字符串”，字符也被当作字符串处理。 字符串中可以包含用于特殊目的字符。
复合数据类型
• 对象的概念。
• 在面向对象的设计模式中，将数据和处理数据的方法捆绑在一起形成的整 体，称为对象。它封装了数据和操作数据的方法 ，使用时要先创建这个 对象，用new运算符来调用对象的构造函数。
• 日期对象 。
• JavaScript将与日期相关的所有特性封装进Date对象，主要用来进行一些与 时间相关的操作，比如获取当前系统时间，使用前要先创建该对象的一个 实例：
• 脚本语言的分类
• 嵌入式 • 非嵌入式
• JavaScript能做什么 • JavaScript和其它语言的异同 • JavaScript同Java的异同
第一个JavaScript程序
• 预备知识
• document对象的write方法将字符串“Hello World”输出 显示在浏览器客户区里。 • 使用window对象的alert方法以消息框的形式输出信息。 • JavaScript程序嵌入HTML文档的常用方法就是将代码放 在“<script>”标签对中 。
第一个JavaScript程序
• JavaScript编辑器的选择
• • • • • • 记事本 Visual Studio Aptana DreamWeaver WebStorm ……
• 编写“HelloWorld” • 打开记事本，输入以下代码：
01 02 03 04 05 06 07 <html> <body> <script language="JavaScript"> document.write("Hello World!"); </script> </body> </html> <!---------HTML文档开始--------------------> <!---------文档体开始--------------------------> <!---------脚本程序-----------------------------> // 输出经典的Helloworld <!---------脚本结束-----------------------------> <!---------文档体结束--------------------------> <!---------HTML文档结束-------------------->
•
分成多行、规范的书写如下：
01 02 03 04 05 06 07 08 If( 1==1 && 6>3 ) { alert(“return true” ); } else { alert( “return false” ); } // 如果1等于1，且6大于3，则 // 输出“true” // 否则 // 输出“false”
基本数据类型
•
数值型数据
– JavaScript中用于表示数字的类型称为数字型，不像其 它编程语言那样区分整型、浮点型。数字型用双精度浮 点值来表示数字数据，可以表示（-253，+253）区间中 的值。数字的值可以用普通的记法也可以使用科学记数 法。 表示方法如下所示：
10; 10.1; 0.1; 3e7; 0.3E7; // 数字 // 数字 // 数字 // 科学记数 // 科学记数
•
JavaScript代码在HTML文档中的形式。
– 链入 – 嵌入
•
参考：
第一个JavaScript程序
•
01 02 03 04 05 06 07 08 09 10 11 12
嵌入方式
– 本书使用的方式
<html> <head> <title> </title> </head> <body> <script language="JavaScript"> // JavaScript程序语句 // …… </script> </body> </html> <!---------HTML文档开始--------------------> <!---------文档头开始--------------------------> <!---------标题开始-----------------------------> <!---------标题结束-----------------------------> <!---------文档头结束--------------------------> <!---------文档体开始--------------------------> <!---------脚本程序-----------------------------> // JavaScript程序语句 // 更多的JavaScript程序语句 <!---------脚本结束-----------------------------> <!---------文档体结束--------------------------> <!---------HTML文档结束-------------------->
• 另存为“helloworld.html”,扩展名为“html”或“htm”. • 在IE中打开网页文件，运行程序。
注意事项
• 浏览器对JavaScript的支持
• 在互联网发展的过程中，几大浏览器之间也存在激烈的竞争。JavaScript 是Netscape公司的技术，其它浏览器并不能和Navigator一样良好的支持 JavaScript，因为得不到使用许可。微软公司为能使其IE浏览器能抢占一 定市场份额，于是在IE中实现了称为JScript的脚本语言，其兼容JavaScript， 但是和JavaScript间仍然存在版本差异。因此，编程人员在编码时仍然考 虑不同浏览器间的差别。
• 数学对象
• •
复合数据类型
从Math对象中获取圆周率常数，计算一个半径为2单位的圆的面积
01 02 03 04 05 06 07 08 <script language="javascript"> <!-var r = 2; var pi = Math.PI; var s = pi*r*r; alert("半径为2单位的圆面积为：" + s + "单位" );// 显示圆的面积 --> </script> // 脚本程序开始 // 定义变量表示半径 // 从Math对象中 // 计算面积
// 大写字母开头 // 汪写字母开头
注意事项
• 空格与换行
• 代码中多余的空格会被忽略，同一个标识符的所有字母必须连续。 • 一行代码可以分成多行书写。
• 单行：
• 代码写于一行中，用分号作为语句结束标志
if(1==1 && 6>3 ){alert(“return true”);}else{alert( “return false” );}
<!--脚本程序结束-->
复合数据类型
• 字符串对象
• String对象封装了与字符串有关的特性，主要用来处理字符串。通 过String对象，可以对字符串进行剪切、合并、替换等等。可以调 用该对象的构造函数创建一个实例，其实在定义一个字符串类型变 量时就也创建了一个String对象实例。 调用String对象的方法或属性形式如“对象名.方法名”或“对象名. 属性名”，构造函数如下： String([strVal]);。 看这样的一个实例，文本串中将李白《静夜思》的各个部分分别提取 出来，并格式化输出。标题加粗，文本居中对齐，诗歌正文颜色为 灰色。 示例代码如下所示。
date = new Date( ); date = new Date( val ); date = new Date( y , m, d [, h [, min [, sec [,ms]]]] );
// 直接创建 // 指定日期创建 // 指定日期创建
复合数据类型
• 全局对象。
• 全局对象是所有全局方法的拥有者，用来统一管理全局方法，全局方法也 就是指全局函数。该对象不能使用new运算符创建对象实例，所有方法直 接调用即可。 数学对象（Math）封装了与数学相关的特性，包括一些常数和数学函数， 主要使用简单一些基本的数学计算。比如求正弦、正切、余弦、取绝对值 等。 下面是这个对象的应用实例。
课程内容安排
•JavaScript背景知识 •简单的脚本语言 •第一个JavaScript程序 •注意事项
JavaScript背景知识
• JavaScript的历史
• • • • Netscape LiveScript JavaApplet JavaScript
• 制定标准
• 检测当前所用的浏览器
01 02 03 04 05
<script language="JavaScript"> // 程序开始 document.write("名称：" + navigator.appName+"<br>"); // 浏览器名称 document.write("版本号：" + navigator.appVersion+"<br>"); // 浏览器版本号 document.write("发行代号："+navigator.appCodeName+"<br>"); // 浏览器的内部发行代号 </script>
01 02 03 04 05 06 07
<script language="javascript"> <!-var hello = "你好啊"; var name = „Peter‟; alert(hello + name ); --> </script>
// 脚本程序开始 // 使用双引号定义字符串 // 使用单引号定义字符串 // 将两个字符串合在一起显示 <!--脚本程序结束-->
注意事项
• 大小写敏感
• JavaScript代码是大小写敏感的，Name和name是不同的标识符，编码时 应当予以注意。同一个词如果如果各个字母间大小写不同时，系统将当 作不同的标识符来处理，相互之间没有任何联系
• 代码示例
01 02
Name = “sunsir”; name = “foxsir”;
•
•
复合数据类型
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 <script language="javascript"> <!-var comment = "静夜思李白床前明月光，疑是地上霜。举头望明月，低头思故乡。";// 诗的内容 var partial = comment.substring( 0, 3 ); // 取出标题 partial = partial.bold(); // 标题加粗 document.write( "<p align=\"center\">" ); // 输出HTML标签“<p>”，并设置居中对齐 document.write( partial ); // 输出标题 partial = comment.slice( 3, 5 ); // 取出作者 document.write( "<br>" ); // 输出换行标签<br> document.write( partial ); // 输出作者 partial = comment.slice( 5, 17 ); // 取出第一句诗文 partial = partial.fontcolor("gray"); // 设置颜色为gray（灰色） document.write( "<br>" ); // 输出换行标签 document.write( partial ); // 输出诗句 partial = comment.slice( 17, 29 ); // 取出第二句诗文 partial = partial.fontcolor("gray"); // 设置颜色为gray（灰色） document.write( "<br>" ); // 输出换行标签 document.write( partial ); // 输出诗句 document.write( "</p>" ); // 输出HTML标签“<p>”的结束标签 --> </script> <!--脚本程序结束-->
• 97年发布了ECMA262语言规范 • ECMAScript
• JavaScript现况 • JavaScript的未来
Fra Baidu bibliotek
简单的脚本语言
• 什么是脚本语言
• 脚本语言是一种应用程序扩展语言，用于系统的扩展，使其按用户的意 愿去运行。 • 所有的基础功能由系统提供，脚本语言在更高一层次描述如何调用系统 的接口。 • 解释执行。
第二讲：数据类型
课程内容安排
• • • • 基本数据类型 复合数据类型 其他数据类型 数据类型的转换
基本数据类型
• 在JavaScript中，字符串型数据是用引号括起的文本字符串。
• 在JavaScript中不区分“字符”和“字符串”，字符也被当作字符串处理。 字符串中可以包含用于特殊目的字符。
复合数据类型
• 对象的概念。
• 在面向对象的设计模式中，将数据和处理数据的方法捆绑在一起形成的整 体，称为对象。它封装了数据和操作数据的方法 ，使用时要先创建这个 对象，用new运算符来调用对象的构造函数。
• 日期对象 。
• JavaScript将与日期相关的所有特性封装进Date对象，主要用来进行一些与 时间相关的操作，比如获取当前系统时间，使用前要先创建该对象的一个 实例：
• 脚本语言的分类
• 嵌入式 • 非嵌入式
• JavaScript能做什么 • JavaScript和其它语言的异同 • JavaScript同Java的异同
第一个JavaScript程序
• 预备知识
• document对象的write方法将字符串“Hello World”输出 显示在浏览器客户区里。 • 使用window对象的alert方法以消息框的形式输出信息。 • JavaScript程序嵌入HTML文档的常用方法就是将代码放 在“<script>”标签对中 。
第一个JavaScript程序
• JavaScript编辑器的选择
• • • • • • 记事本 Visual Studio Aptana DreamWeaver WebStorm ……
• 编写“HelloWorld” • 打开记事本，输入以下代码：
01 02 03 04 05 06 07 <html> <body> <script language="JavaScript"> document.write("Hello World!"); </script> </body> </html> <!---------HTML文档开始--------------------> <!---------文档体开始--------------------------> <!---------脚本程序-----------------------------> // 输出经典的Helloworld <!---------脚本结束-----------------------------> <!---------文档体结束--------------------------> <!---------HTML文档结束-------------------->
•
分成多行、规范的书写如下：
01 02 03 04 05 06 07 08 If( 1==1 && 6>3 ) { alert(“return true” ); } else { alert( “return false” ); } // 如果1等于1，且6大于3，则 // 输出“true” // 否则 // 输出“false”
基本数据类型
•
数值型数据
– JavaScript中用于表示数字的类型称为数字型，不像其 它编程语言那样区分整型、浮点型。数字型用双精度浮 点值来表示数字数据，可以表示（-253，+253）区间中 的值。数字的值可以用普通的记法也可以使用科学记数 法。 表示方法如下所示：
10; 10.1; 0.1; 3e7; 0.3E7; // 数字 // 数字 // 数字 // 科学记数 // 科学记数
•
JavaScript代码在HTML文档中的形式。
– 链入 – 嵌入
•
参考：
第一个JavaScript程序
•
01 02 03 04 05 06 07 08 09 10 11 12
嵌入方式
– 本书使用的方式
<html> <head> <title> </title> </head> <body> <script language="JavaScript"> // JavaScript程序语句 // …… </script> </body> </html> <!---------HTML文档开始--------------------> <!---------文档头开始--------------------------> <!---------标题开始-----------------------------> <!---------标题结束-----------------------------> <!---------文档头结束--------------------------> <!---------文档体开始--------------------------> <!---------脚本程序-----------------------------> // JavaScript程序语句 // 更多的JavaScript程序语句 <!---------脚本结束-----------------------------> <!---------文档体结束--------------------------> <!---------HTML文档结束-------------------->
• 另存为“helloworld.html”,扩展名为“html”或“htm”. • 在IE中打开网页文件，运行程序。
注意事项
• 浏览器对JavaScript的支持
• 在互联网发展的过程中，几大浏览器之间也存在激烈的竞争。JavaScript 是Netscape公司的技术，其它浏览器并不能和Navigator一样良好的支持 JavaScript，因为得不到使用许可。微软公司为能使其IE浏览器能抢占一 定市场份额，于是在IE中实现了称为JScript的脚本语言，其兼容JavaScript， 但是和JavaScript间仍然存在版本差异。因此，编程人员在编码时仍然考 虑不同浏览器间的差别。
• 数学对象
• •
复合数据类型
从Math对象中获取圆周率常数，计算一个半径为2单位的圆的面积
01 02 03 04 05 06 07 08 <script language="javascript"> <!-var r = 2; var pi = Math.PI; var s = pi*r*r; alert("半径为2单位的圆面积为：" + s + "单位" );// 显示圆的面积 --> </script> // 脚本程序开始 // 定义变量表示半径 // 从Math对象中 // 计算面积
// 大写字母开头 // 汪写字母开头
注意事项
• 空格与换行
• 代码中多余的空格会被忽略，同一个标识符的所有字母必须连续。 • 一行代码可以分成多行书写。
• 单行：
• 代码写于一行中，用分号作为语句结束标志
if(1==1 && 6>3 ){alert(“return true”);}else{alert( “return false” );}
<!--脚本程序结束-->
复合数据类型
• 字符串对象
• String对象封装了与字符串有关的特性，主要用来处理字符串。通 过String对象，可以对字符串进行剪切、合并、替换等等。可以调 用该对象的构造函数创建一个实例，其实在定义一个字符串类型变 量时就也创建了一个String对象实例。 调用String对象的方法或属性形式如“对象名.方法名”或“对象名. 属性名”，构造函数如下： String([strVal]);。 看这样的一个实例，文本串中将李白《静夜思》的各个部分分别提取 出来，并格式化输出。标题加粗，文本居中对齐，诗歌正文颜色为 灰色。 示例代码如下所示。
date = new Date( ); date = new Date( val ); date = new Date( y , m, d [, h [, min [, sec [,ms]]]] );
// 直接创建 // 指定日期创建 // 指定日期创建
复合数据类型
• 全局对象。
• 全局对象是所有全局方法的拥有者，用来统一管理全局方法，全局方法也 就是指全局函数。该对象不能使用new运算符创建对象实例，所有方法直 接调用即可。 数学对象（Math）封装了与数学相关的特性，包括一些常数和数学函数， 主要使用简单一些基本的数学计算。比如求正弦、正切、余弦、取绝对值 等。 下面是这个对象的应用实例。