（中职）JavaScript项目式实例教程项目一电子课件工信版

（中职）JavaScript项目式实例教程项目一电子课件工信版 项目一 对话框和页面输出 —— 初步体验  JavaScript项目式实例教程 有两张网页，每张网页上都有一个”问候”按钮。在第一张网页上点击该按钮，弹出对话框“张三向您问好！”，点击对话框上的“确定”按钮后，紧接着在该网页上打印“张三欢迎您光临本站！”。在第二张网页上做同样的操作，显示结果相同，只不过信息中把“张三”显示为了“李四”。项目要求代码的复用性和可维护性良好。 项目情境  JavaScript项目式实例教程 熟悉JavaScript脚本内嵌在HTML中的书写方法 熟悉JavaScript脚本的执行时机。 初步了解事件触发的概念。 初步了解函数和函数调用的方法。 熟悉JavaScript脚本文件的编写和引入的方法。 学习目标  JavaScript项目式实例教程 打开页面，立即弹出一个问候对话框。 任务1 弹出对话框  JavaScript项目式实例教程 1、在HTML中，任何标签都可以看成是一个对象，例如body就是一个对象。这些对象一般都有属性、事件和方法。其相关内容将在后面的章节阐述。 2、如果要想在页面被引导后执行一个任务，可以给<body>标签添加一个onload事件（关于事件将在后续章节详细介绍），此事件在body对象被加载完成后被触发，写法形如： onload="要执行的代码"; 3、alert("参数")功能是弹出一个对话框，对话框中的内容就是该函数中设置的参数。 4、JavaScript对大小写是敏感的，所以alert()必须全部小写。 【相关知识】  JavaScript项目式实例教程 在<body>标签内部输入以下代码： <body onload="alert('你好！')"> 【任务实现】  JavaScript项目式实例教程 在网页上打印一串欢迎词。 任务2 在页面上打印欢迎词  JavaScript项目式实例教程 1、document表示的是文档对象，每个载入浏览器的 HTML 文档都会成为 Document 对象。（关于该对象在后续章节会详细介绍） 2、document对象有很多方法，write方法是其中之一，表示在文档中打印信息内容。 【相关知识】  JavaScript项目式实例教程 在<body>标签内部输入以下代码： <body onload="document.write('欢迎光临本站！')"> 【任务实现】  JavaScript项目式实例教程 先弹出问候对话框再在页面上打印欢迎词 任务3 先弹对话框再打印  JavaScript项目式实例教程 在JavaScript中，如果功能块有多个语句，这些语句中间用分号隔开。实际上，每一个完整的功能语句结束处都应该写上分号，哪怕只有一条语句，也应该写上。 【相关知识】  JavaScript项目式实例教程 在<body>标签内部输入以下代码： <body onload="alert('你好！');document.write('欢迎光临本站');"> 【任务实现】  JavaScript项目式实例教程 页面上有一个按钮，点击此按钮后，弹出问候对话框，在页面上打印欢迎词。 任务4 点击按钮执行任务3  JavaScript项目式实例教程 document.write()执行时，将重写当前页面。所以，页面上原有的内容将全部消失，只留下document.write()写下的内容。在本任务中，页面中最后看不到原来的“问候”按钮就是这个原因。 【相关知识】  JavaScript项目式实例教程 在<body>标签对中编写按钮代码，并在按钮代码中添加onclick事件属性，并编写执行任务代码： <input type="button" name="button" id="button" value="问候" onclick="alert('你好！');document.write('欢迎光临本站！');" /> 【任务实现】  JavaScript项目式实例教程 仍然实现任务4的需求，但是要求把任务执行代码模块化，以便随时调用。 任务5 任务模块化  JavaScript项目式实例教程 1、代码模块化。 将代码“打包”为函数的形式 2、Javascript与HTML混编 <script></script>标签的使用 3、注释 //…….... 注释单行 /*…….*/ 注释多行 【相关知识】  JavaScript项目式实例教程 1、在<body>标签对中编写按钮代码： <input type="button" name="bu