JavaScript+Vue.jsWeb开发实战教程课件 第一章 JavaScript概述_第1页
JavaScript+Vue.jsWeb开发实战教程课件 第一章 JavaScript概述_第2页
JavaScript+Vue.jsWeb开发实战教程课件 第一章 JavaScript概述_第3页
JavaScript+Vue.jsWeb开发实战教程课件 第一章 JavaScript概述_第4页
JavaScript+Vue.jsWeb开发实战教程课件 第一章 JavaScript概述_第5页
已阅读5页，还剩20页未读， 继续免费阅读

下载本文档

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

文档简介

JavaScript概述演讲人：XXXXXXJavaScript+Vue.jsWeb开发实战教程01学习目标掌握JavaScript的特点掌握JavaScript代码的引入方式理解JavaScript运行环境能够安装VSCode能够调试JavaScript代码能够编写一个简单的JavaScript程序思维导图1.1.1JavaScript的特点1．简单JavaScript是一种脚本语言，其采用小程序段的方式实现编程。与其他脚本语言相同，JavaScript是一种解释型语言。JavaScript程序不需要编译，可直接在浏览器中解释执行，具有较高的开发效率。JavaScript的基本结构形式与C、C++、VisualBasic、Delphi十分类似，但其不像这些语言一样需要先编译，而是在程序运行过程中被逐行地解释。JavaScript与超文本标记语言（HyperTextMarkupLanguage，HTML）结合在一起，可以方便用户使用。JavaScript的简单主要体现在：首先，JavaScript是一种基于Java基本语句和控制流的简单而紧凑的编程语言，学习JavaScript对学习Java来说可以起到非常好的过渡作用；其次，JavaScript的变量类型采用弱类型，1.1.1JavaScript的特点2．动态JavaScript是动态的，其可以直接对用户输入做出响应，而无须经过Web服务程序。JavaScript对用户输入的响应是以事件（event）驱动的方式进行的。3．跨平台JavaScript依赖于浏览器本身，与操作环境无关。只要能在支持JavaScript的浏览器的计算机上运行，JavaScript程序就可以被正确执行。1.1.1JavaScript的特点4．节省服务器开销JavaScript是一种基于客户端的语言，对于用户在浏览网页的过程中进行的填表、验证等交互过程，浏览器只需加载HTML文档中的JavaScript源代码并解释执行相应的程序即可完成，大大减少了服务器的资源消耗。JavaScript程序的运行不需要高性能的计算机和Web服务器，仅需代码编辑器及浏览器。

1.1.2JavaScript的发展历程JavaScript是由欧洲计算机制造联合会（EuropeanComputerManufacturersAssociation，ECMA）通过ECMAScript（简称ES）实现的标准化语言。年份版本描述1995JavaScript1第一个版本1998JavaScript2版本变更1999JavaScript3添加正则表达式和try-catch语句

JavaScript4没有发布2009JavaScript5添加strictmode（严格模式）和JavaScript对象表示法（JavaScriptObjectNotation，JSON）支持2011JavaScript5.1版本变更2015JavaScript6添加类和模块2017JavaScript7增加指数运算符（**）和Atotype.includes2017JavaScript8引入

async、await，简化了异步操作；引入新的对象和字符串方法，如Object.values、Object.entries2018JavaScript9引入异步迭代器、新的Rest/Spread属性，以及Ptotype.finally2019JavaScript10增加Atotype.flat、flatMap和Object.fromEntries等新功能2020JavaScript11引入BigInt数据类型，允许处理超大整数；引入可选链运算符（?.）和空值合并运算符（??）2021JavaScript12增加逻辑赋值运算符、字符串替换功能（replaceAll）和WeakRef对象2022JavaScript13引入新顶层await，简化了模块中的异步操作表JavaScript的发展历程1.2.1安装VSCode在Windows操作系统中安装VSCode的操作步骤如下。step01在VSCode官网下载合适版本的VSCode安装包并解压。step02双击安装包中的VSCode安装程序，在“安装”窗口中单击“浏览”按钮，在弹出的对话框中选择编辑器安装位置，如图所示，单击“下一步”按钮。step03单击“浏览”按钮，选择编辑器快捷方式的放置位置，如图所示，单击“下一步”按钮。图

选择编辑器安装位置图

选择编辑器快捷方式的放置位置1.2.1安装VSCodestep04选择安装VSCode时需要执行的附加任务，此处勾选全部复选框，如图所示，单击“下一步”按钮。step05确认“目标位置”“开始菜单文件夹”“附加任务”，单击“安装”按钮，准备安装，如图所示。图

选择附加任务图

准备安装1.2.1安装VSCodestep06此时“安装”窗口显示安装进度，表示VSCode正在安装，如图所示。在安装过程中可以单击“取消”按钮，取消安装。step07安装完成界面如图所示，单击“完成”按钮，可以立即启动VSCode。图VSCode正在安装图

安装完成界面1.2.2设置VSCode

按“Ctrl+,”组合键，即可调出VSCode设置面板，如图所示，常用设置都可以通过该面板进行调整。图VSCode设置面板单击VSCode编辑器主界面左边的扩展按钮（或按“Ctrl+Shift+X”组合键），即可开始为VSCode安装扩展程序。图

与“OpenInDefaultBrowser”有关的扩展程序1.2.3利用VSCode创建HTML模板文件打开VSCode，选择“文件/新建文件”命令，在“新建文件”界面的输入框中输入文件名（需加上扩展名.html），表示要创建一个HTML格式的文件，按“Enter”键，在弹出的“创建文件”对话框中选择文件的保存位置，单击“创建文件”按钮，即可成功创建HTML模板文件，如图所示。图

选择“文件/新建文件”命令图

输入文件名图

选择HTML模板文件的保存位置1.3.1<script>标签<script>标签是HTML代码中用于嵌入JavaScript代码的标签。<script>和</script>标签可以标识JavaScript代码的开始和结束位置，这两个标签会告诉浏览器在解析HTML文档时执行它们之间的JavaScript代码。通过使用<script>标签，开发者可以将JavaScript代码直接嵌入HTML代码中，从而实现网页的交互性和动态性。<script>标签可以放置在HTML文档的<head>或<body>标签中。当浏览器解析到<script>标签时，会停止解析HTML代码，并开始执行其中的JavaScript代码。<!DOCTYPEhtml><html>

<body>

<script>

document.write('<h1>这是一个标题</h1>');

document.write('<p>这是一个段落</p>');

</script>

</body></html>1.3.2在HTML文件中嵌入JavaScript代码<script>标签可以定义在HTML代码的<body>标签内部。例如，通过JavaScript代码在页面加载时向HTML代码的<body>标签中写入文本内容，代码如下所示（位置：单元1/1-1.html）。图

使用JavaScript代码创建页面文本在网页中的实现效果<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8"/>

</head>

<body>

<divid="demo"></div>

<scriptsrc="./js/myScript.js"></script>

</body></html>1.3.3JavaScript的外部引用

通过<script>标签，开发者可以引入外部的JS文件，以便重复使用或分离JavaScript代码。设置“src”属性，将外部JS文件的统一资源定位符（UniformResourceLocator，URL）指定给<script>标签，浏览器会根据URL加载并执行该文件中的JavaScript代码。

外部JS文件的扩展名是“.js”，引入时开发者可以将JS文件放置于<head>标签或者<body>标签中，实际运行效果与开发者在<script>标签中编写JavaScript代码的运行效果完全一致。例如，通过引入外部JS文件的方式在页面上输出一段文本，代码如下所示（位置：单元1/1-2.html）。functionmyFunction(){

document.getElementById('demo').innerHTML='这是我的第一个JavaScript函数';}myFunction();1.4JavaScript运行环境JavaScript可以运行在多种环境中，包括浏览器和服务器端环境（如Node.js）。在浏览器中，只需打开包含JavaScript代码的网页，浏览器的JavaScript引擎就会自动执行这些代码。目前的主流浏览器有Chrome（使用Blink内核）、Edge（使用Chromium内核）、火狐浏览器（使用Gecko内核）及Safari（使用WebKit内核），这些浏览器的开发者工具大同小异，本书以Chrome浏览器为例进行介绍。step00在Chrome浏览器中，按“F12”键或者在页面空白处单击鼠标右键，在弹出的快捷菜单里选择“检查”命令，如图所示，可以打开开发者工具。step00也可以在Chrome浏览器右上角菜单栏中选择“更多工具/开发者工具”命令，打开开发者工具，如图所示。图

选择“检查”命令图

选择“更多工具/开发者工具”命令1.4.1调试JavaScript代码step01在打开开发者工具后，可以在“控制台”面板中调试JavaScript代码。例如，在“>”符号后输入要执行的代码“console.log("hello,JavaScript")”，按“Enter”键后，浏览器执行代码，效果如图所示。step02单击去除图标，可以一键清空“控制台”面板（在后面单元中简称为“控制台”）中的内容，如图所示。图

输入并执行代码的效果图

清空“控制台”面板中的内容1.4.2Chrome浏览器脚本step01在开发者工具中打开“源代码/来源”面板，在“代码段”选项卡中单击“新代码段”按钮，可以创建一个代码段，如图所示。step02单击“新代码段”按钮后，会自动创建一个文件，在右侧界面输入代码，按“Ctrl+S”组合键（Windows和Linux操作系统）即可保存。例如，输入以下内容并保存。console.log(1111)console.log(2222)图

创建一个代码段图

运行JavaScript代码step03保存后，在文件名上单击鼠标右键，在弹出的快捷菜单中选择“运行”命令，运行JavaScript代码，如图所示。代码运行后，会在“控制台”面板中输出对应内容，如图所示。图

在“控制台”面板中输出对应的内容【商业案例】

学生信息管理系统——初始化项目本书的“学生信息管理系统”项目的主要目的是创建一个网页，该网页的主要功能包括学生信息列表的展示以及学生信息的新增、修改、删除和查看。本书通过实现这些功能，带领读者熟悉JavaScript的常用语法。本书将在每一单元的商业案例中逐步完善学生信息管理系统的功能模块，最终呈现一个完整的学生信息管理系统。本单元将搭建页面的HTML模板，后面的代码编写都会基于该模板展开。其具体操作通过3个任务来实现，分别是创建HTML模板、修改<title>标签内容为“学生信息管理系统”、创建网页内容部分并填充内容。【商业案例】

学生信息管理系统——初始化项目任务1创建HTML模板一个常用的HTML模板通常包括<html>标签、<head>标签和<body>标签3个部分。<head>标签中可以有<meta>标签、<title>标签、<link>标签和<script>标签等，具体介绍如下。<meta>标签：描述一个HTML网页文档的属性，提供有关页面的元信息，如作者、日期和时间、网页描述、关键词、页面刷新等。<title>标签：定义整个HTML文档的标题。<link>标签：引入外部的串联样式表（CascadingStyleSheets，CSS）文件，以及定义文档与外部资源的关系。<script>标签：内部可以编写JavaScript代码，也可以用于引入外部的JS文件。【商业案例】

学生信息管理系统——初始化项目任务2修改<title>标签内容为“学生信息管理系统”使用<title>标签定义的标题会显示在网页的标题栏上。修改<title>标签内容为“学生信息管理系统”，代码如下所示。<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8"/>

<metaname="viewport"content="width=device-width,initial-scale=1.0"/>

<title>学生信息管理系统</title></head><body></body></html>【商业案例】

学生信息管理系统——初始化项目任务3创建网页内容部分并填充内容<body>标签中的内容就是页面最终渲染出来的内容部分，其中可以包含很多其他HTML标签，如<p>标签、<div>标签、<h1>标签等。在<body>标签中插入一个<div>标签，<div>标签中的内容为网页的内容部分。将<div>标签中的内容设置为“这里是网站内容部分”，代码如下所示（位置：学生信息管理系统-JavaScript版/index.html）<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8"/>

<metaname="viewport"content="width=device-width,initial-scale=1.0"/>

<title>学生信息管理系统</title></head><body>

<div>这里是网站内容部分</div></body></ht

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

温馨提示

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

最新文档

评论

0/150

提交评论