Web前端开发——交互式设计（JavaScript+jQuery） 课件 单元1 JavaScript概述.pptx

Web前端开发—交互式设计

（JavaScript+jQuery）主编：孙佳帝孙文江编委：白哲佳张卓2023年电子工业出版社

JavaScript概述01JavaScript语言基础02JavaScript函数 03面向对象编程 04JavaScript内置对象05BOM编程06DOM编程07DOM事件08利用JQuery编程09设计个性化网站10

01单元1JavaScript概述Web前端开发—交互式设计

1.1认识JavaScript语言

1.什么是JavaScript？JavaScript是一种具有函数优先的、轻量级、解释型或即时编译型的编程语言，是一种基于原型编程的多范式脚本语言，并且支持面向对象、命令式和声明式（如函数式）编程风格。

2.JavaScript发展历史

3.JavaScript用途基于HTML5开发的Brandify网站应用Node.js的沃尔玛网站使用Vue.js开发的饿了么App微信小程序

4.JavaScript组成一个完整的JavaScript实现包括ECMAScript、DOM和BOM三部分。ECMAScriptDOMBOM

1.2搭建JavaScript开发环境

1.选择JavaScript脚本编辑器

2.安装与配置VisualStudioCode1.安装并配置VisualStudioCode2.安装常用扩展插件（1）hinese(Simplified)(简体中文)LanguagePackforVisualStudioCode扩展插件，目的用于将VisualStudioCode转换为简体中文版。（2）安装JavaScript(ES6)codesnippets扩展插件，提供了ES6语法智能提示及快速输入功能。（3）安装JS-CSS-HTMLFormatter扩展插件，提供了保存会自动格式化代码功能。（4）安装jQueryCodeSnippets扩展插件，提供了实现jQuery代码智能提示功能。（5）安装DebuggerforChrome扩展插件，它是谷歌浏览器自带的一个web编写和调试工具，提供给web开发人员深入地访问浏览器内部和web应用的机会，可以有效地跟踪布局问题，设置JavaScript断点,以及进行JavaScript代码的优化。

3.安装Node.js1.下载并安装Node.js访问Node.js官网地址“/”，打开下载页面，下载最新版本或稳定版本。2.使用Node.js在命令行窗口中输入node命令，进入node代码执行与编辑模式，会显示一个箭头和输入光标。此时就可以输入JavaScript代码，也可以执行JavaScript脚本文件。

4.安装与配置http-serverhttp-server是一个简单的零配置的命令行http服务器，它足够强大便于生产和使用，用于本地测试和开发。在命令行窗口中，使用npm安装http-server的命令是“npminstallhttp-server-g”，安装完成后，进入项目文件夹，通过命令行命令“http-server”启动http服务器。

1.3在HTML中使用JavaScript

1.嵌入到HTML文档中脚本script/script的标签是HTML语言为引入脚本程序而定义的一个双标签。插入脚本的方法是将script/script标签置于网页的head部分或body部分中，然后在其中写入脚本程序。语法格式：script//JavaScript脚本部分/script参考【训练1-2】

2.引入外部JavaScript文件的脚本引用外部JavaScript文件的方法是使用script标签的src属性来指定外部文件的URL。语法格式：scriptsrc=url/script说明：使用src属性时，script标签之间的任何内容都将被忽略。脚本的执行在默认情况下是同步和阻塞的。参考【训练1-3】

3.嵌入到HTML标签事件中的脚本HTML标记内可以将事件以属性的形式引入，然后将JavaScript脚本写在该事件的事件处理程序中。例如，嵌入到button标签的事件中的脚本格式。buttononclick=fnc/button参考【训练1-4】

【案例1-1】

高性能引入外部JavaScript文件

【案例分析】随着Web应用日趋丰富，越来越多的JavaScript被运用到网页中，前端性能对用户体验备受关注，尤其是引入JavaScript脚本时会阻塞其他资源下载的性能问题，已成为开发者必须要思考并要解决的一个重要问题。HTML页面由定义页面结构