《HTML5与JavaScrip程序设计》项目一 Web前端开发基础 教学课件.pptVIP

01小明在学习web前端开发的过程中，利用HTML5和CSS3已经能够设计非常美观的网页了，但是小明设计的网页有个缺陷，就是不能进行人机交互。本任务让我们一起来了解人机交互的脚本语言JavaScript的起源、基本特点等相关概念，重点学习在HTML5中引入JavaScript脚本程序的三种方式后，最后完成一个密码验证的JavaScript小程序。完成任务任务描述能熟悉JavaScript起源和特点。能了解JavaScript的作用。能编写简单的JavaScript代码。能在HTML5网页中使用JavaScript脚本程序。能力目标知识目标学习目标思政目标遵规守纪，方能长远。网络空间守法意识。维护纯净网络，人人有责。03知识链接JavaScript作为最流行的脚本语言之一，早在1995年由BrendanEich(布兰登·艾奇）在网景导航者浏览器上首次设计出并应用，最初网景公司将其命名为LiveScript，后来为了借势当时火热的Java语言营销而更名，但JavaScript与Java的关系就像“大熊猫”与“小熊猫”，它们本质上是两种不同的编程语言。JavaScript的出现，使得信息和用户之间不仅只是一种显示和浏览的关系，它实现了一种实时的、动态的、可交式的表达能力。在我国大力推动网络安全和清洁网络空间的大背景下，我们要利用JavaScript推动Web技术的发展，造福每一位互联网用户。03知识链接123JavaScript语言不依赖操作系统，仅需要浏览器的支持。JavaScript可以跨平台基于面向对象思想诞生了许多优秀的库和框架，大大提高了软件开发的效率，降低了开发成本。JavaScript支持面向对象JavaScript不需要编译、链接，生成独立的可执行文件后才能运行；而是依赖于解释器，只在被调用时自动进行解释或编译。JavaScript是脚本语言作为一种轻量级的编程语言，简单易学。JavaScript的特点03知识链接（1）嵌入式直接编写到HTML5文件中，必须使用script标签包裹JavaScript代码，例如：scripttype=text/javascriptJavaScript语句；/script03知识链接（2）外链式需要将JavaScript代码保存到一个单独的扩展名“js”的文件中，并在HTML5文件中使用script标签的src属性引入js文件，例如：JS/test.js文件……alert(“你好”)；//对话框中输出“你好”……HTML5文件……scriptsrc=JS/test.js/script……编写JavaScript代码在HTML5网页文件中引用JS文件03知识链接（3）行内式将JavaScript代码作为HTML标签的属性值使用。通过一个简单的具体案例来看看。图1-3JavaScript测试页面!DOCTYPEHTMLhtmllang=enheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8titleHTML4/title/headbodyahref=javascript:alert(你好);测试/a !--写在a标签的href属性中--inputtype=buttononclick=alert(你好);value=测试 !--写在input标签的事件属性中--/body/html03CDBAE小贴士行内式一般不推荐使用。嵌入式只适用在JavaScript代码较短的时候。外链式适用于当需要编写大量、逻辑复杂、特有功能的JavaScript代码。其原因有三个：首先是JavaScript代码单独编写和存储，有利于修改和维护；其次是外链式可以利用浏览器缓存提高速度；最后是外链式有利于分布式部署。引入方式适用原则知识链接04任务实施!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title我的第一个JavaScript程序/title/headbodydiv我的第一个JavaScript程序/divscriptvarpassword=prompt(请输入密码：);if(password==123){ alert(你输入的密码正确！);