网页设计与制作基础（HTML5+CSS3）课件 第10章JavaScript基础.pptx

第10章JavaScript基础

目录JavaScript概述01JavaScript程序基础02JavaScript消息框和函数03JavaScript事件处理04

10.1JavaScript概述JavaScript是由Netscape公司开发并随Navigator导航者一起发布的、介于Java与HTML之间、基于对象事件驱动的编程语言。因它的开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中，因此倍受Web设计者的喜爱。

10.1.1JavaScript特点解释性：不同于编译性的语言，它是解释性语言，直接由浏览器执行。简单性：语言结构简单，容易学习。安全性：不允许访问本地的硬盘，同时不能将数据存入到服务器，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，这样可以有效的防止数据丢失。动态性：可以直接对用户或客户输入做出响应，不需要通过web服务器，它的响应是通过事件驱动完成的，比如按下鼠标、选择菜单等等。跨平台性：只依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机并支持JavaScript的都可以运行。

10.1.2JavaScript代码编写下面来编写第一个JavaScript程序。下面的JavaScript实现了弹出消息框的功能，运行后屏幕会相继显示两个消息框，第一个是：“欢迎光临JS世界！”，第二个是“精彩内容即将呈现！”。html

head

ScriptLanguage=JavaScript

alert(欢迎光临JS世界!);

alert(精彩内容即将呈现！);

/Script

/head

/htmlJavaScript代码由ScriptLanguage=JavaScript.../Script说明，表示JavaScript脚本源代码将放入其间。语句alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示（）中的字符串。

10.1.3JavaScript代码的加入JavaScript代码可以放在head/head，也可以直接将JavaScript脚本加入body中，例如：bodyScriptLanguage=JavaScriptalert(欢迎光临JS世界!);

alert(精彩内容即将呈现！);/Script/bodyScriptLanguage=JavaScript通过属性Language=JavaScript说明标识中是使用的何种语言，这里是JavaScript语言,表示在JavaScript中使用的语言。上述代码将在浏览器解析到body部分时被执行，弹出两个消息框。

10.1.4JavaScript的调用方式JavaScript可以使用以下几种方式调用：1）脚本在head标记中，定义成函数的形式，在body中调用。例如下面在head中写了一个函数，函数的内容是弹出消息框，在body中通过命令按钮的单击事件来调用。headscriptfunctionmessage(){window.alert(welcome!);}/scripttitlejs调用/title/headbodyformaction=postinputtype=buttononclick=message()value=单击/form/body

10.1.4JavaScript的调用方式2）脚本位于外部JS文件中，在head中引入，在body中调用。例如这里写了一个“message（）”的函数，放在demo.js文件中，需要把该文件在head区通过插入JavaScript的标签导入。在body区域的按钮的单击事件中调用了“message()”函数。!DOCTYPEhtmlhtmllang=enheadscriptsrc=demo.js/scripttitlejs调用/title/headbodyformaction=postinputtype=buttononclick=message()value=单击/form/body/htmldemo.js文件如下：functionmessage(){window.alert(welcome!);}

10.1.4JavaScript的调用方式3）直接在body中写Javascript代码，例如：bodyScriptLanguage=JavaScriptalert（“欢迎光临！”）；alert(“下面将进入代码学习”);/Script/body

10.1.4JavaScript