Web前端开发-交互式设计（JavaScript+jQuery） 课件 单元1 JavaScript概述_第1页
Web前端开发-交互式设计（JavaScript+jQuery） 课件 单元1 JavaScript概述_第2页
Web前端开发-交互式设计（JavaScript+jQuery） 课件 单元1 JavaScript概述_第3页
Web前端开发-交互式设计（JavaScript+jQuery） 课件 单元1 JavaScript概述_第4页
Web前端开发-交互式设计（JavaScript+jQuery） 课件 单元1 JavaScript概述_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端开发—交互式设计

（JavaScript+jQuery）主编：孙佳帝

孙文江编委：白哲佳张卓2023年电子工业出版社JavaScript概述01JavaScript语言基础02JavaScript函数 03面向对象编程 04JavaScript内置对象05BOM编程06DOM编程07DOM事件08利用JQuery编程09设计个性化网站1001单元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三部分。ECMAScriptDOMBOM1.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中使用JavaScript1.嵌入到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页面由定义页面结构与内容的HTML、定义布局与外观的CSS和改变交互行为的JavaScript脚本相互结合而成。依据Web标准和方独立开发的原则，应将JavaScript代码独立于HTML文件。在商业开发中，推荐使用<script>标记的src属性引入外部JavaScript文件。【解决方案】为了防止引入JavaScript脚本产生的阻塞和性能问题，推荐将所有<script>标签放在<body>标签的底部，以尽量少对整个页面渲染的影响，避免用户看到一片空白的页面。当大型网站和网络应用出现依赖多个JavaScript脚本文件时，减少页面渲染所需的http请求是网站提速的一条经典法则。减少页面中引入

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论