JavaScript(课件)
合集下载
js课件ppt
上下文。
特点
箭头函数有几个特点，如没有自己的 this、arguments、super 或 new.target，且不 能用作构造函数等。此外，箭头函数还有一些其他的特性，如不支持函数的传统声明方
式、不支持函数的 name 属性等。
06
JavaScript 实践案例
简单的计算器
这是一个使用JavaScript实现的简单计算器功能，可以进行加、减、乘、除的基 本运算。
Set
Set 是一种特殊的类型，它只存储唯 一的值，不会重复。Set 提供了很多 有用的方法，如 add、delete、has 等，可以方便地操作集合中的元素。
箭头函数
定义
箭头函数是一种更简洁的函数语法，它没有自己的 this、arguments、super 或 new.target。箭头函数不会绑定自己的 this，箭头函数内部的 this 指向定义时所在的
JavaScript最初由Netscape于1995年开发，作 为网页浏览器的一种脚本语言，用于增加网页的 交互性。
ECMAScript标准
1997年，ECMAScript 1成为第一个广泛采纳的 JavaScript标准。随后的版本不断扩展其功能和 性能。
Node.js的出现
2009年，Ryan Dahl创建了Node.js，使得 JavaScript可以在服务器端运行，从而开启了全 栈开发的新时代。
Promise
Promise 是一个代表异步操作最终完成或失败的对象。它解决了 JavaScript 中的回调地狱问题，使 得异步代码可以像同步代码一样进行链式调用。Promise 有三种状态：pending（进行中）、 fulfilled（已成功）和 rejected（已失败）。
特点
箭头函数有几个特点，如没有自己的 this、arguments、super 或 new.target，且不 能用作构造函数等。此外，箭头函数还有一些其他的特性，如不支持函数的传统声明方
式、不支持函数的 name 属性等。
06
JavaScript 实践案例
简单的计算器
这是一个使用JavaScript实现的简单计算器功能，可以进行加、减、乘、除的基 本运算。
Set
Set 是一种特殊的类型，它只存储唯 一的值，不会重复。Set 提供了很多 有用的方法，如 add、delete、has 等，可以方便地操作集合中的元素。
箭头函数
定义
箭头函数是一种更简洁的函数语法，它没有自己的 this、arguments、super 或 new.target。箭头函数不会绑定自己的 this，箭头函数内部的 this 指向定义时所在的
JavaScript最初由Netscape于1995年开发，作 为网页浏览器的一种脚本语言，用于增加网页的 交互性。
ECMAScript标准
1997年，ECMAScript 1成为第一个广泛采纳的 JavaScript标准。随后的版本不断扩展其功能和 性能。
Node.js的出现
2009年，Ryan Dahl创建了Node.js，使得 JavaScript可以在服务器端运行，从而开启了全 栈开发的新时代。
Promise
Promise 是一个代表异步操作最终完成或失败的对象。它解决了 JavaScript 中的回调地狱问题，使 得异步代码可以像同步代码一样进行链式调用。Promise 有三种状态：pending（进行中）、 fulfilled（已成功）和 rejected（已失败）。
JavaScript基础PPT课件
事件类型、监听和传播方式讲解
事件类型 JavaScript中支持多种事件类型，包括鼠标事件、键盘事 件、表单事件、窗口事件等。每种事件类型都对应一个特 定的触发条件和处理方式。
事件监听 可以使用`addEventListener`方法为元素添加事件监听器， 当指定的事件发生时，会调用监听器中的回调函数处理事 件。
移动端适配与优化
探讨针对不同设备和浏பைடு நூலகம்器的 JavaScript代码适配与优化策略， 提高页面性能和用户体验。
行业发展趋势预测
ES6+新特性
01
分析ECMAScript 6及以后版本的新特性和发展趋势，如模块化、
异步编程、装饰器等。
前端框架与库
02
探讨React、Vue等前端框架以及配套库在Web开发中的应用和
和3D游戏。
移动应用开发
通过React Native、Cordova 等框架，可以使用JavaScript
开发跨平台的移动应用。
服务器端开发
Node.js使得JavaScript可以在 服务器端运行，处理HTTP请
求、数据库操作等。
02
JavaScript基础知识
变量与数据类型
变量声明
使用`var`、`let`或`const`关键字声明 变量，分别表示可变变量、块级作用 域可变变量和常量。
逻辑运算符
用于进行逻辑运算，包括`&&`、 `||`和`!`。
流程控制语句
01
02
03
条件语句
使用`if`、`else if`和`else` 关键字实现条件判断。
循环语句
包括`for`、`while`和 `do...while`循环，用于重 复执行某段代码。
JavaScript(课件)-(版)
深入浅出JavaScript引言：JavaScript是一种广泛应用于Web开发的编程语言，它为网页带来了动态效果和交互性。
本课件旨在为您提供关于JavaScript的全面概述，包括其基本概念、语法、功能和应用场景。
通过本课件的讲解，您将能够理解JavaScript的工作原理，并能够运用它来创建更加丰富和互动的Web体验。
第一部分：JavaScript概述1.1JavaScript的历史和发展1.2JavaScript的主要特点和优势1.3JavaScript在Web开发中的应用场景第二部分：JavaScript基础语法2.1变量和数据类型2.2运算符和表达式2.3控制语句和循环语句2.4函数的定义和调用第三部分：JavaScript对象和数组3.1对象的基本概念和创建方式3.2数组的基本概念和操作方法3.3内置对象和全局对象第四部分：JavaScript高级特性4.1闭包的概念和应用4.2原型链和继承4.3异步编程和回调函数4.4事件处理和事件委托第五部分：JavaScript与DOM操作5.1DOM的基本概念和结构5.2DOM的查询和操作方法5.3事件冒泡和事件捕获5.4AJAX和动态数据加载第六部分：JavaScript框架和库6.1jQuery的基本使用和优势6.2React的基本概念和组件化开发6.3Vue.js的基本概念和双向数据绑定6.4Angular的基本概念和依赖注入第七部分：JavaScript最佳实践和性能优化7.1代码规范和命名约定7.2代码压缩和合并7.3异步加载和懒加载7.4优化DOM操作和事件处理第八部分：JavaScript安全性和错误处理8.1JavaScript的安全性问题8.2错误处理和异常捕获8.3跨域请求和安全措施结论：通过本课件的学习，您已经了解了JavaScript的基本概念、语法和功能，并能够运用它来创建动态和交互式的Web页面。
JavaScript作为一种灵活和强大的编程语言，将继续在Web开发中发挥重要作用。
2024版JavaScript基础课件完整版
数组的定义与使用
数组的定义
数组是一种特殊的对象，用于存储一 系列有序的值。在JavaScript中，数 组可以包含任意类型的值，包括数字、 字符串、布尔值、对象等。
数组的使用
可以通过索引来访问数组中的元素，使 用push()和pop()方法添加或删除元素， 使用sort()和reverse()方法对数组进行 排序或反转等操作。
DOM结构 DOM将HTML或XML文档转化为一个树形结构，文档中 的每个元素、属性和文本都被视为一个节点（Node）， 节点之间通过父子或兄弟关系形成树状结构。
节点类型
在DOM中，节点类型包括元素节点、属性节点、文本节 点、注释节点等。
访问和修改DOM元素
获取元素 修改元素内容 修改元素属性 修改元素样式
辑非等。
用于将右侧的值赋给左 侧的变量，如等于赋值、
加等于、减等于等。
控制流语句
条件语句
使用`if...else`语句根据条 件执行不同的代码块。
循环语句
使用`for`、`while`或 `do...while`语句重复执行 一段代码，直到满足特定 条件为止。
跳转语句
使用`break`或`continue` 语句在循环中提前结束或 跳过当前迭代。
常用内置对象与方法
Date对象
用于处理日期和时间，可以创建 日期实例、获取日期和时间信息、 进行日期计算等。
String对象
用于处理字符串，提供了许多字 符串操作方法，如charAt()、 indexOf()、replace()等。
Math对象
提供了一系列数学常数和函数， 如Math.PI、Math.random()、 Math.sin()等。
本地开发环境
(2024年)JavaScript教程优质课件
动态内容
根据用户交互动态更新 网页内容，如轮播图、
下拉菜单等。
游戏开发
前后端交互
利用JavaScript开发2D 或3D网页游戏。
通过Ajax等技术实现与 服务器端的异步通信。
6
本课程目标与内容概述
2024/3/26
目标
掌握JavaScript基础语法、DOM操作、事件处理、异步编程等知识点，能够独立完成 简单的Web应用开发。
JavaScript是一种基于对象和事件驱动的脚本语言，主要用于增加网页互动性。
它可以直接嵌入到HTML页面中，由浏览器解释执行，而不需要服务器的处理。
2024/3/26
JavaScript具有动态类型、面向对象、函数式编程等特性。
4
JavaScript历史与发展
JavaScript最初由Netscape公 司的Brendan Eich在1995年设
2024/3/26
8
变量与数据类型
变量声明
使用`var`、`let`、`const`关键字声明 变量，介绍它们之间的区别和适用场 景。
类型转换
介绍JavaScript中的类型转换规则， 包括隐式转换和显式转换。
数据类型
详细讲解JavaScript中的基本数据类 型（如Number、String、Boolean 等）和复杂数据类型（如Object、 Array等）。
闭包常常被用来作为回调函数使 用，因为它可以记住自己的词法 作用域，包括 this 和外部变量。
实现函数工厂
利用闭包可以创建出可以访问私 有变量的公有方法，这是模块模 式的基础。
闭包原理
闭包是指有权访问另一个函数作 用域中的变量的函数。当函数可 以记住并访问所在的词法作用域 时，就产生了闭包。
6Javascript事件处理精品PPT课件
格式： <tag on事件=“<语句组>|<函数名>”>
事件处理举例
❖将特定的代码放置在其所处对象的事件处 理器中
例1： <body onload="alert('建议浏览器的分辨率： 800x600');"> <body onload="var str='建议浏览器的分辨率： 800x600'; alert(str); ">
事件处理举例
❖例2： <script> function show(){ var str=“建议浏览器的分辨率：800x600”; alert(str); } //如果没有参数，函数（）省略
❖document.onload=show; ❖</script>
如何编写事件处理程序（3）
❖三 编写特定对象特定事件的 JavaScript。 这种方法用得比较少，但是在某些场合还 是很好用的。方法是：
常见事件--列表3
属性 onreset onresize onselect onsubmit onunload
当以下情况发生时，出现此事件 重置按钮被点击 窗口或框架被调整尺寸 文本被选定 提交按钮被点击 用户退出页面
FF N IE 1 34 1 44 1 23 1 23 1 23
鼠标和键盘事件
WEB基础
JavaScript-06 事件处理
目标
❖了解什么是事件以及事件的调用 ❖了解常用事件 ❖掌握鼠标键盘事件 ❖掌握页面事件 ❖掌握表单事件
事件概述
❖用户与网页交互时产生的操作，称为事件。
❖事件可以由用户引发，也可能是页面发生 改变，甚至还有你看不见的事件（如Ajax的 交互进度改变）。
事件处理举例
❖将特定的代码放置在其所处对象的事件处 理器中
例1： <body onload="alert('建议浏览器的分辨率： 800x600');"> <body onload="var str='建议浏览器的分辨率： 800x600'; alert(str); ">
事件处理举例
❖例2： <script> function show(){ var str=“建议浏览器的分辨率：800x600”; alert(str); } //如果没有参数，函数（）省略
❖document.onload=show; ❖</script>
如何编写事件处理程序（3）
❖三 编写特定对象特定事件的 JavaScript。 这种方法用得比较少，但是在某些场合还 是很好用的。方法是：
常见事件--列表3
属性 onreset onresize onselect onsubmit onunload
当以下情况发生时，出现此事件 重置按钮被点击 窗口或框架被调整尺寸 文本被选定 提交按钮被点击 用户退出页面
FF N IE 1 34 1 44 1 23 1 23 1 23
鼠标和键盘事件
WEB基础
JavaScript-06 事件处理
目标
❖了解什么是事件以及事件的调用 ❖了解常用事件 ❖掌握鼠标键盘事件 ❖掌握页面事件 ❖掌握表单事件
事件概述
❖用户与网页交互时产生的操作，称为事件。
❖事件可以由用户引发，也可能是页面发生 改变，甚至还有你看不见的事件（如Ajax的 交互进度改变）。
《JavaScript》PPT课件讲义(2024)
简化了函数表达式的写法 ，同时解决了this指向的问 题，使得代码更加简洁易 读。
使用反引号(``)来定义字符 串，可以包含变量和表达 式，使得字符串的拼接更 加直观和易读。
允许将数组或对象的属性 直接赋值给其他变量，简 化了数据的提取和操作过 程。
用于处理异步操作，通过 then和catch方法来指定异 步操作成功或失败时的回 调函数，避免了回调地狱 的问题。
2024/1/29
命名导出 使用export关键字来导出模块中 的指定成员，其他模块可以使用 import { member } from 'module'的语法来导入该成员。
导入所有成员 使用import * as alias from 'module'的语法来导入模块中的 所有成员，并使用别名来引用这 些成员。
2024/1/29
20
Web API接口调用方法
1
Web API概述
Web API是一组基于HTTP协议的应用程序接口 ，用于实现Web应用与服务器之间的数据交互。
2 3
接口调用方法
通过JavaScript的XMLHttpRequest或Fetch API发送HTTP请求，调用Web API接口并处理响 应结果。
游戏开发
使用JavaScript及其 相关技术（如 Canvas、WebGL等 ）开发网页游戏或移 动游戏。
服务器端开发
使用Node.js等技术 进行服务器端编程， 处理请求、操作数据 库等。
2024/1/29
6
02
JavaScript语法与数据类型
2024/1/29
7
基本语法规则
2024/1/29
Байду номын сангаас
JavaScript学习资料演示课件
事件绑定方式
通过HTML标签属性直接绑定事件处理函数，或在JavaScript代码中使用`addEventListener()`方法绑定事件处理 函数。后者支持同时绑定多个事件处理函数，且事件处理函数中的`this`指向当前元素。
事件流模型及阻止默认行为
事件流模型
包括捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从 顶层元素向下传递，直到触发目标元素的事件处理函数；在 冒泡阶段，事件从目标元素向上冒泡，直到顶层元素。
使用CDN加速
将JavaScript文件部署在CDN上，利用CDN的分布式网络加速文件传 输，提高加载速度。
异步加载和延迟执行
通过async和defer属性实现JavaScript的异步加载和延迟执行，避免 阻塞页面渲染。
利用浏览器缓存
通过设置HTTP缓存头信息，使浏览器缓存JavaScript文件，减少重复 请求和加载时间。
利用WeakMap和WeakSet处理弱…
使用WeakMap和WeakSet可以自动处理对象之间的弱引用关系，避 免内存泄漏。
渲染性能优化策略
减少重排和重绘
通过避免不必要的DOM操作、使用transform代替top/left等优化手 段，减少页面的重排和重绘次数。
使用requestAnimationFr…
03
AJAX 基于 JavaScript、XML、HTML、CSS 和 DOM 等多种技术组合而成。
XMLHttpRequest对象使用
XMLHttpRequest 是 AJAX 的 基础，用于在后台与服务器交换
数据。
通过创建 XMLHttpRequest 对 象，可以打开一个连接、发送请
求并处理响应。
了解jQuery中的事件绑定、事件冒泡、事 件委托等概念，实现交互效果。
通过HTML标签属性直接绑定事件处理函数，或在JavaScript代码中使用`addEventListener()`方法绑定事件处理 函数。后者支持同时绑定多个事件处理函数，且事件处理函数中的`this`指向当前元素。
事件流模型及阻止默认行为
事件流模型
包括捕获阶段、目标阶段和冒泡阶段。在捕获阶段，事件从 顶层元素向下传递，直到触发目标元素的事件处理函数；在 冒泡阶段，事件从目标元素向上冒泡，直到顶层元素。
使用CDN加速
将JavaScript文件部署在CDN上，利用CDN的分布式网络加速文件传 输，提高加载速度。
异步加载和延迟执行
通过async和defer属性实现JavaScript的异步加载和延迟执行，避免 阻塞页面渲染。
利用浏览器缓存
通过设置HTTP缓存头信息，使浏览器缓存JavaScript文件，减少重复 请求和加载时间。
利用WeakMap和WeakSet处理弱…
使用WeakMap和WeakSet可以自动处理对象之间的弱引用关系，避 免内存泄漏。
渲染性能优化策略
减少重排和重绘
通过避免不必要的DOM操作、使用transform代替top/left等优化手 段，减少页面的重排和重绘次数。
使用requestAnimationFr…
03
AJAX 基于 JavaScript、XML、HTML、CSS 和 DOM 等多种技术组合而成。
XMLHttpRequest对象使用
XMLHttpRequest 是 AJAX 的 基础，用于在后台与服务器交换
数据。
通过创建 XMLHttpRequest 对 象，可以打开一个连接、发送请
求并处理响应。
了解jQuery中的事件绑定、事件冒泡、事 件委托等概念，实现交互效果。
Javascript(课件PPT)
// 设置颜色为gray（灰色）
13
document.write( "<br>" );
// 输出换行标签
14
document.write( partial );
// 输出诗句
15
partial = comment.slice( 17, 29 );
// 取出第二句诗文
16
partial = partial.fontcolor("gray");
• 97年发布了ECMA262语言规范
• ECMAScript
• JavaScript现况 • JavaScript的未来
简单的脚本语言
• 什么是脚本语言
• 脚本语言是一种应用程序扩展语言，用于系统的扩展，使其按用户的意 愿去运行。
• 所有的基础功能由系统提供，脚本语言在更高一层次描述如何调用系统 的接口。
07 -->
08 </script>
// 脚本程序开始
// 定义变量表示半径 // 从Math对象中 // 计算面积
<!--脚本程序结束-->
复合数据类型
• 字符串对象
• String对象封装了与字符串有关的特性，主要用来处理字符串。通 过String对象，可以对字符串进行剪切、合并、替换等等。可以调 用该对象的构造函数创建一个实例，其实在定义一个字符串类型变 量时就也创建了一个String对象实例。
• 检测当前所用的浏览器
01
<script language="JavaScript">
// 程序开始
02
document.write("名称：" + navigator.appName+"<br>");Βιβλιοθήκη // 浏览器名称03
JavaScript前端开发基础教程课件第2章
JavaScript运算符
算数运算符
JavaScript运算符
字符串运算符
字符串运算符是用来将两个字符串连接成一个字符，它的符号只是一个“+”， 与算数运算符中的加号是相同的，二者一个用于字符串拼接一个用于计算数字 相加结果。字符串运算符要求两个操作数都是字符串类型，如果有操作数为数 字，则先将其转换为字符串类型再进行拼接
JavaScript变量
JavaScript变量的命名规范 变量名必须以字母或者$和_符号开头，但是我们不建议使用后两种符号开头 来命名变量，因为会与一些JavaScript库的变量或函数名产生冲突。 变量名称大小写敏感（A和a是不同的变量）。 变量名不能与关键字（保留字）相同。
JavaScript变量
Ja数组类型 对象类型 undefined null 函数类型
JavaScript运算符
根据操作数的数量，运算符可以被分为以下3种： 一元运算符：只有一个操作数，例如：“++”、“--” 二元运算符：有两个操作数，例如：“+”、“=” 三元运算符：有三个操作数，JavaScript中只有一个三元运算符：“?:”
var StudentName; let Student; 也可以在声明变量时用等号给其赋，例如： var StudentName = "XiaoMing"; let unitPrice = 88;
JavaScript变量
JavaScript变量声明 也可以在同一语句中声明多个变量，以逗号隔开，例如：
JavaScript变量
变量优先级 在函数中的时候，局部变量的优先级是高于全局变量的，但是虽然名字相同， 局部变量不会影响到同名全局变量在函数外的值。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript函数使用 例4
注意！参数前不需要加var <script > function sum(x,y) { return x+y; } document.write("x + y的值为：" + sum(3,6)); </script>
JavaScript教程
第10章 JavaScript核心对象
getFullYear(): 以四位数返回年数 getMonth():返回月数（0~11） getDate():返回当月的几号 getDay():返回星期几（0~6）
日期对象的应用 例6
<script > var date = new Date(); document.write(date + "<br/>"); document.write(date.getFullYear() + " 年" + (date.getMonth()+1) + "月" + date.getDate() + "日" + "星期" + date.getDay()); </script>
</body> </html>
事件 例 10 <html>
<head> <meat charset="utf-8"/> <style type="text/css"> div {backgroundcolor:green;width:120px;height:20px;padding:40px;col or:#ffffff;} </style> <script> function mOver(obj){obj.innerHTML="谢谢"} function mOut(obj){obj.innerHTML="把鼠标移到上面"} </script> <head/> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" >把鼠标移到上面 </div></body></html>
JavaScript教程
JavaScript是由Netscape公司开发并随 Navigator导航者一起发布的、介于Java 与HTML之间、基于对象事件驱动的编程语 言，正日益受到全球的关注。因它的开发环 境简单，不需要Java编译器，而是直接运 行在Web浏览器中，而因倍受Web设计者 的所爱
基于对象的JavaScript语言
JavaScript语言是基于对象的（Object-Based）， 而不是面向对象的（object-oriented）。之所以 说它是一门基于对象的语言，主要是因为它没有提 供象抽象、继承、重载等有关面向对象语言的许多 功能。而是把其它语言所创建的复杂对象统一起来， 从而形成一个非常强大的对象系统。 虽然JavaScript语言是一门基于对象的，但它还是 具有一些面向对象的基本特征。它可以根据需要创 建自己的对象，从而进一步扩大JavaScript的应用 范围，增强编写功能强大的Web文档。
注：不同类型的变量都通过 var定义
JavaScript程序控制结构
顺序 选择 循环
选择——if语句（1）
基本格式 if（表述式） 语句段；
功能：若表达式为true，则执行语句段。
选择——if语句（2）
基本格式 if（表述式） 语句段１； ...... else 语句段２； ..... 功能：若表达式为true，则执行语句段１； 否则执行语句段２。
宿主对象
窗口对象(Window) 文档对象(Document)
JavaScript窗口及输入输出
JavaScript是基于对象的脚本编程语言，那 么它的输入输出就是通过对象来完成的。其 中有关输入可通过窗口（Window）对象来 完成，而输出可通过文档（document）对 象的方法来实现。
Window对象的应用 例7
<script > var name; name = prompt("请输入你的名字"); if(confirm("准备好考试了吗？")) { alert(name + "你好，下面开始考试！ "); } </script>。
document对象
输出 : document.write() document.writeln() 说明： write()和writeln()方法都是用于向浏览 器窗口输出文本字串； 二者的唯一区别就是writeln()方法自动 在文本之后加入回车符。
例1：编写第一个JavaScript程序
<html> <head> <script > // JavaScript Appears here. document.write(“欢迎来到JS世界！”); alert("这是第一个JavaScript例子!"); </script> </head> </html>
简单的输入、输出 例8
<script > var name; name = prompt("请输入你的名字"); document.write(name + "，你好，下面开 始考试！"); </script>
练习4 简单输入输入
（1）弹出输入框，询问信息为“请输入姓名”,将用 户输入姓名存放在name变量中； （2）同时弹出警告框，内容为：“XX，你好，下面 开始考试。” （3）在页面输出，当前日期。
练习1：编写第一个JavaScript程序
通过avascript实现以下页面效果： 1.页面输出：“你好！” 2.弹出对话框：对话框内容为“欢迎光临我 的小站！”
变量、表达式
例2
<html > <head> <script > var r=2, pi=3.14; document.write("半径为2的圆的面积为：" + pi*r*r); </script> </head> <body> </body> </html>
事件
例9
<html> <head> <meta charset="utf-8"> </head> <body> <button onclick="getElementById('demo').innerHTML=Date()">现在 的时间是?</button> <p id="demo"></p>
练习3：数组
在javascript中： 利用数组，在页面输出以下内容： * ** ***
用日期对象创建日期
功能：提供一个有关日期和时间的对象。 创建日期 （1）var myDate1=new Date() （2）var myDate2=new Date(2012， 3，7)
获取日期的时间方法
数组对象
(1)创建数组 var myArray=new Array (3);
(2)数组赋值
myArray[0]=“Jim”； myArray[1]=“Tom”； myArray[2]=“Kate”； var myArray=new Array(“Jim”,”Tom”,”Kate”);
数组应用 例5
JavaScript函数使用 例3
<script > var x=20, y=22; function sum() { return x+y; } document.write("x + y的值为：" + sum()); </script>
练习2：函数的使用
在javascript中： 1.定义变量r初值为3，变量pi初值为3.14； 2.定义函数area()求圆的面积； 3.在页面输出圆的面积。
练习4 事件练习
在页面中设计个高宽都为100px的黄色块，当鼠标悬 停在上面的时候，块内出现文本“你好！”当鼠标离 开的时候，块内的文本消失。
窗口对象的方法
alert():弹出带有指定信息和确定按钮的警告框。 confirm():弹出带有指定询问信息的确认对话框，并 有确定和取消按钮。 prompt():产生一个输入窗口，返回输入值。
注：Windows窗口对象是所有对象的父对象，代表一个浏 览器窗口。引用windows对象的属性或方法是，可直接引 用，不必通过对象名引用。
<script > var x=20, y=22; function sum() { return x+y; } document.write("x + y的值为：" + sum()); </script>
练习2参考
<script > var r=3, pi=3.14; function area() { return pi*r*r } document.write("圆的面积为：" + area()); </script>
循环—— while