《JavaScript动态网页设计》课件 1 创建JavaScript程序.pptx

项目1创建JavaScript程序主讲：***2024年12月18日JavaScript动态网页设计1子项目

2024年12月18日JavaScript动态网页设计2学习任务 任务1搭建开发环境 任务2初识JavaScript 任务3学习JavaScript语法任务4在网页中添加掌握JavaScript程序的基本应用

2024年12月18日JavaScript动态网页设计3任务1搭建开发环境对于Web前端开发人员，一个强大的编辑器可以使开发变得简单、便捷、高效，建议使用类似VisualStudioCode（简写Vscode）这种专注于代码编写、轻量级且功能强的文本编辑工具作为JavaScript代码的编写工具。本书安装的是windowx64的VisualStudioCode，官方简体中文版的安装文件可以在其官方网站下载：。

2024年12月18日JavaScript动态网页设计41、VisualStudioCode下载与安装步骤如下：（1）下载VisualStudioCode软件，如图1-1所示。???????图1-1?VisualStudioCode下载界面

2024年12月18日JavaScript动态网页设计5（2）运行VisualStudioCode安装程序，如图1-2所示。第一步是将其解压到指定目录，解压完成后，会自动运行安装程序。?图1-2?VisualStudioCode安装程序（3）双击安装图标，弹出安装窗口，选择“我同意此协议”选项，然后点击“下一步”按钮。如图1-3所示。?图1-2??VisualStudioCode安装界面图1-3??VisualStudioCode安装界面

2024年12月18日JavaScript动态网页设计6（4）进入“选择附加任务”窗口，根据自己的需求点击对应的选项，然后点击“下一步”按钮。如图1-4所示。?图1-4??“选择附加任务”窗口

2024年12月18日JavaScript动态网页设计7（5）进入“准备安装”窗口，点击“安装”按钮进行程序的安装。如图1-5所示。?图1-5??“准备安装”窗口

2024年12月18日JavaScript动态网页设计8（6）完成程序安装，如图1-6所示。?图1-6??完成安装窗口

2024年12月18日JavaScript动态网页设计92、JavaScript初体验下面通过一个案例来演示如何编写一段简单的JavaScript代码。【范例1-1】实现当网页打开时自动弹出一个警告框，警告框的内容为“HelloJavaScript”。script????alert(HelloJavaScript);??/script运行结果如图1-10所示。?图1-10??运行结果

2024年12月18日JavaScript动态网页设计10任务2初识JavaScriptJavaScript是一种运行在客户端的脚本语言（Script是脚本的意思），不需要编译，运行过程由js解释器逐行来进行解释并执行。JavaScript控制了网页的行为，如表单数据合法性验证、网页特效、数据计算、服务端开发（Node.js）、后端接口通信等。

2024年12月18日JavaScript动态网页设计11一、JavaScript的组成JavaScript是由ECMAScript、DOM、BOM这3部分组成的。①ECMAScript。是由ECMA国际进行标准化的一门编程语言。②DOM（DocumentObjectModel，文档对象模型）。是W3C组织推荐的处理可扩展标记语言的标准编程接口。③BOM（BrowserObjectModel，浏览器对象模型）。是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

2024年12月18日JavaScript动态网页设计12二、JavaScript的书写JavaScript有3种书写位置，分别为行内、内嵌和外部。1、行内式JS????可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如onclick。这种方式可读性差，引号易错，不方便阅读。inputtype=”button”?value=”点击一下”?onclick=”alert(‘helloeveryone’)”/

2024年12月18日JavaScript动态网页设计132、内嵌式JS???可将多行JS代码写到script标签中，内嵌JS是学习时常用的方式。【范例1-2】使用内嵌式引用JS代码，在控制台输出结果。scriptconsole.log(‘第一个JavaScript程序设计’);/script