HTML5 CSS3 JavaScript第1章ppt课件.pptx

《HTML5 CSS3 JavaScript第1章ppt课件.pptx》由会员分享，可在线阅读，更多相关《HTML5 CSS3 JavaScript第1章ppt课件.pptx（80页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、HTML5 CSS3 JavaScript第1章教学课件第第1章章初初识Web前端前端1.1 Web前端发发展展历历程程1.2 Web开发的核心技核心技术术1.3 Web开开发发工具工具了解Web前端发展展历程程理解Web前端开发的3 3个核心技个核心技术的概念概念掌握HTML5HTML5、CSS3CSS3和JavaScriptJavaScript的基基础知知识熟练使用Web前端开开发工具工具引言1994年蒂姆伯纳斯李（TimBernersLee）创建万维网联盟（World Wide Web Consortium，简称W3C），这是Web技术领域最具权威和影响力的国际中立性技术标准机构，它最重

2、要的工作是制定Web规范，这些规范描述了Web的通信协议（比如HTML和XHTML）和其他的构建模块，有效促进了Web技术的互相兼容。Web前端因其开发效率高，网页效果美观，用户体验感好，现已被广泛应用。在学习Web前端之前，应该“知己知彼”了解其发展历程。在学习中需要掌握Web前端开发的3个核心技术HTML5、CSS3和JavaScript，这是Web前端必学的知识体系。在开发过程中熟练使用Web前端开发工具，可以快速且方便的编写网页代码。1.1Web前端前端发展展历程程Web前端概述Web前端发展简史1.1 Web前端发展历程1.1.1Web前端概述万维网（WorldWideWeb，亦作W

3、eb、WWW、W3），是一种基于超文本和超文本传输协议（HyperTextTransferProtocol，简称HTTP）的，全球性的，动态交互的，跨平台的分布式图形信息系统。在这个系统中，每个有价值的事物被称为“资源”，并且由一个全局“统一资源标识符（UniformResourceLocator，简称URL）”标识，这些资源由超文本输协议传送给用户，而用户通过点击链接来获得资源。前端开发是创建Web页面或APP等前端界面呈现给用户的过程，通过HTML（HyperTextMark-upLanguage，超文本标记语言）、CSS（CascadingStyleSheets，层叠样式表）和JavaS

4、cript以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。1.1 Web前端发展历程1.1.1Web前端概述Web1.0：网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主Web2.0：互联网进入Web2.0时代以后，涌现出大量的类似于桌面软件的Web应用，用户不仅能浏览网页，还能对网页上的内容进行操作。网站的前端因此发生变化，网页不再只是单一的承载文字和图片，各种媒体的应用使网页内容变得更丰富多彩，同时也提升了用户体验感在互联网的发展过程中，Web前端发展初期HTML技术只能展示简单的网页，当时被称为网页制作，十分不易于开发者

5、维护与更新网站。1.1 Web前端发展历程1.1.2Web前端发展简史1.静态页面阶段1994年12月，W3C在伯纳斯李的主持下成立，标志着万维网进入了标准化发展的阶段。这个阶段的网页还非常地原始，主要以HTML为主，是纯静态的只读网页，被称为Web1.0时代。2.JavaScript诞生1995年，网景通信公司（NetscapeCommunicationsCorporation，亦称Netscape）设计了JavaScript脚本语言，并集成到Navigator2.0版本中。JavaScript主导了W3C的官方标准，成功实现JavaScript的标准走向国际。1.1 Web前端发展历程1.

6、1.2Web前端发展简史3.动态页面的发展JavaScript兴起以后，网页可以显示出浮动广告之类的动态效果，但这不是动态网页。以PHP、JSP和ASP为代表的后端动态页面技术的应用才实现动态交互。4.Ajax开启Web2.0时代2004年以前的动态页面是由后端技术驱动的，但频繁的页面刷新给用户带来极差的体验感。Ajax技术实现了异步HTTP请求，用户不用专门去等待请求的响应，就可以继续浏览或操作网页。Ajax技术开启了web2.0的时代。1.1 Web前端发展历程1.1.2Web前端发展简史5.前端兼容性框架的出现不同的浏览器之间，技术标准会有差异，这样不利于兼容开发，于是催生了Dojo、M

7、ooltools、YUIExtJS、JQuery等前端兼容框架，其中2006年诞生的JQuery的应用最为广泛。6.HTML5的出现2007年，W3C采纳了HTML5规范草案，并在2008年1月22日正式发布草案。在HTML5新规范的指引下，各个浏览器厂商不断改进浏览器。2014年10月28日，W3C正式发布HTML5.0标准。1.1 Web前端发展历程1.1.2Web前端发展简史7.前端三大框架前端3大主流框架是Angular、Rect和Vue。Angular是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能。2011年，React诞生，于101

8、3年5月开源，是一个用于构建用户界面的JavaScript框架，核心思想是封装组件。2014年，尤雨溪开发出一套用于构建用户界面的渐进式框架Vue，它能减少不必要的DOM操作和提高渲染效率。8.ECMAScript6的发布2015年6月，ECMAScript6.0发布，这个版本增加了很多新的语法，更加提升了JavaScript的开发潜力1.2Web开开发的核心技的核心技术HTML5JavaScriptCSS31.2 Web开发的核心技术Web开发用到的核心技术有HTML、CSS和JavaScript（简称JS），随着用户体验需求的提升，目前开发者在开发过程中常用的是升级版的HTML5与CSS3

9、。它们是在原有的基础上增加一些新的标签与属性，基本满足了开发需求，为开发者带来极大的便利。根据W3C标准，一个网页主要由3部分组成：结构（HTML）、表现（CSS）和行为（JavaScript），3者和谐地存在于浏览器中。1.2 Web开发的核心技术1.2.1HTML5HTML是一种“超文本标记语言”，“超文本”指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。“超文本标记语言”是标准通用标记语言下的一个应用，也是一种规范和标准。它通过各类标签来标记想要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标签，可以告诉浏览器如何显示其中的内容，例如，文字如何处理、画面

10、如何安排、图片如何显示等。当前，在Web开发中，普遍使用的是HTML的最新版本HTML5，HTML5是一个网页的核心，在一些基本标签内添加内容便可完成一个简单的HTML文件，运行之后即可在浏览器中显示网页。1.2 Web开发的核心技术1.2.1HTML5HTML特点特点简易性。HTML版本升级采用超集方式，从而更加灵活方便。可扩展。HTML语言应用广泛，同时带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。平台无关性。HTML可以使用在多种平台上，关联性不大。通用性。HTML是基于标准通用标记语言，它允许网页开发者建立图片与文本相结合的复杂页面，页面可被网络上的

11、任何人使用各种类型的电脑或浏览器进行浏览。1.2 Web开发的核心技术1.2.1HTML5HTML5新特性新特性新的语义元素。HTML5提供了新的元素来创建更好的页面结构，例如、和。新的表单控件。HTML5拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证，例如，数字（number）和日期（date）。强大的图像支持。HTML5可使用和标签通过脚本语言(通常是JavaScript)绘制图形。强大的多媒体支持。HTML5规定了在网页上嵌入视频和音频元素的标准，即使用和元素。强大的新API。1.2 Web开发的核心技术1.2.1HTML5文件基本结构主要由文件声明（）、HTML文档（）

12、、文件头部（）和文件主体（）4部分构成。文件结构HTML文件一个简单HTML文件的文件结构1.2 Web开发的核心技术1.2.1HTML51.文件声明文件结构声明必须在HTML文件的第一行，位于标签之前。声明不是HTML标签，它用于向浏览器说明当前文件属于哪种HTML或XHTML标准规范。声明与浏览器的兼容性有关，如果没有，就会由浏览器决定如何展示HTML页面。是HTML5标准网页声明，表示向浏览器说明当前文件使用HTML5标准规范。1.2 Web开发的核心技术1.2.1HTML52.HTML文档文件结构是HTML文件的文档标签，是HTML文件开始标签，也被称为根标签，是指文件的最外层，是HT

13、ML文件结束标签。网页的所有内容都需要写在标签里面。中的lang属性用来获取或设置文档内容的基本语言，en表示英文（English）。1.2 Web开发的核心技术1.2.1HTML53.文件头部文件结构是HTML文件的头部标签，是HTML文件头标签，是HTML文件尾标签。它用于定义文档的头部信息，是所有头部元素的容器，描述了文件的各种属性和信息。头部元素有、等标签。是辅助标签，用于定义页面的相关信息，例如，描述页面的作者、摘要、关键词、版权、自动刷新等页面信息。是标题标签，用于定义页面的标题。标签用于定义客户端脚本语言。标签用于定义HTML文件的样式文档。标签定义文件与外部资源之间的关系。1.

14、2 Web开发的核心技术1.2.1HTML54.文件主体文件结构是主体标签，是正文内容开始标记，是正文内容结束标记。它用于定义文件的内容，可包含图片、文本、视频、音频、超链接、表格、列表等各种内容。在HTML文件中，是HTML文件的注释，用于标注网页内容的注释部分，它的主要作用是对代码进行解释，给开发人员作参考，不会被浏览器解析和执行。1.2 Web开发的核心技术1.2.1HTML51.HTML标签标签和元素HTML标签分为单标签和双标签，单标签是由一个标签组成的，例如，有、等。HTML标签大多数为双标签，双标签由首标签和尾标签构成，首标签格式为，尾标签格式为。HTML标签的语法格式如下。内容

15、1.2 Web开发的核心技术1.2.1HTML52.HTML元素标签和元素HTML5文件由元素和标签构成。HTML元素指的是从开始标签（Start Tag）到结束标签（End Tag）的所有代码。整个HTML文件就像是一个元素集合，里面包含了许多元素。在HTML文件中某个元素的语法如下。内容1.2 Web开发的核心技术1.2.2CSS3CSS是层叠样式表，一种用于(增强)控制网页样式并允许将样式信息与网页内容分离的标记性语言，由W3C定义和维护，使用CSS可以实现网页内容与呈现的分离，不仅可以提升网页执行效率，更方便后期管理和代码维护。目前最新版本是CSS3，为W3C的推荐标准。CSS定义如何

16、渲染HTML模型和对象，渲染网页显示效果。它可以对网页中各元素进行定位和布局，具有对模型和对象样式的编辑能力，不仅能静态修饰网页内容，也能结合诸如JS类的脚本动态修饰网页。CSS可以改变HTML元素的样式。改变元素样式我们得先弄清楚3件事：“改变的对象是谁”、“改什么类型的样式”和“具体改成什么样子”。改变的对象是谁改什么类型的样式具体改成什么样子1.2 Web开发的核心技术1.2.2CSS3在HTML元素中选择要改变的对象，需要使用到CSSCSS选择器器。CSS选择器用于指定、控制指定、控制CSSCSS要作用的要作用的HTMLHTML元素元素，例如ID选择器是通过ID来选择标签。选择改变HT

17、ML元素的具体样式属性，需要使用CSSCSS属性属性。CSS属性是指定指定选择符所具有符所具有的属性的属性，例如字体属性、背景属性、文本属性、边框属性等。指定指定这个个样式属性的属性式属性的属性值，例如字体属性设置字体的大小、粗细等，背景属性设置内容的背景颜色、背景图片等1.2 Web开发的核心技术1.2.2CSS3CSS特点特点丰富的样式定义易于使用和修改多页面应用层叠页面压缩CSS以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格。1.2 Web开发的核心技术1.2.2CSS3CSS3新特性新特性新增选择器

18、。CSS3新增了结构伪类选择器、属性选择器等。新的边框效果。CSS3新增了圆角边框（border-radius）、边框阴影（box-shadow）等，丰富了元素的边框效果。2D转换和3D转换。CSS3增加了位移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew）4种转换。动画。动画通过keyframes规则指定一个CSS3样式和动画将逐步从目前的样式更改为新的样式。渐变、过渡、弹性盒模型等。CSS3样式用于辅助HTML5进行页面布局，CSS3有三种引入方式，不同的引入方式对于后期的维护难度也不相同。CSS3的三种引入方式为行内样式、内嵌样式和外链样式，样式的优先等

19、级也有划分，行内样式优先于内嵌样式和外部样式，后两者是按照就近原则决定优先级。样式的引入方式不同，内容与样式的关联性也不同，关联性的强弱会影响后期代码的维护。1.2 Web开发的核心技术1.2.2CSS3CSS3引入方式行内样式是使用style属性引入CSS3样式，示例代码如下1.2 Web开发的核心技术1.2.2CSS3CSS3引入方式行内样式这种方式没有将内容和样式分离，关联性太强，在开发中不易于后期代码维护，不提倡使用。内嵌样式是使用标签书写CSS代码。标签写在标签里面，示例代码如右所示1.2 Web开发的核心技术1.2.2CSS3CSS3引入方式内嵌样式/*在文件头部以内嵌样式书写cs

20、s代码*/divwidth:100px;.这种方式每个页面都需要定义CSS代码，后期维护难度大，仍然没有将内容和样式完全分离，不易于后期代码维护工作。外链样式是CSS代码保存在扩展名为.css的样式表中，在HTML文件中使用标签引用扩展名为.css的样式表，示例代码如下1.2 Web开发的核心技术1.2.2CSS3CSS3引入方式外链样式这种方式将内容和样式完全分离，易于前期制作和后期代码的维护。通过选择器可以定位到CSS样式需要修饰的目标，CSS3选择器是在原有的CSS选择器基础之上又新增了部分选择器，大概可分为基本选择器和高级选择器，以及新增的结构伪类选择器、伪元素选择器、属性选择器等。1

21、.2 Web开发的核心技术1.2.2CSS3CSS3选择器基本选择器有4种，分为通用选择器、标签选择器、类选择器和ID选择器。1.2 Web开发的核心技术1.2.2CSS3CSS3选择器基本选择器名称名称说明明示例示例通用选择器使用通配符“*”，选取所有元素*margin:0;padding:0;标签选择器选取所有此类标签的元素pcolor:red;类选择器按照给定的class属性的值，选取所有匹配的元素，可多次使用，以“.”定义.firstbackground-color:#fff;ID选择器按照id属性选取一个与之匹配的元素，每个id属性是唯一的，以“#”定义#navwidth:100px

22、;height:100px;CSS选择器具有权值，权值代表着优先级，权值越大，优先级越高。同种类型的选择器权值相同，后定义的选择器会覆盖先定义的选择器。1.2 Web开发的核心技术1.2.2CSS3CSS3选择器 Important：最高（权值大于1000）；行内样式：1000；ID选择器：100；类选择器：10；标签选择器：1；通用选择器：0；选择器优先级为：通用选择器标签选择器类选择器ID选择器行内样式）连接两个选择器，前面选择器表示要匹配的父元素，后面选择器表示被包含的匹配子对象ulliwidth:80px;并集选择器又称为组合选择器，使用逗号（,）连接多个选择器，可同时选择多个简单选择

23、器p,.first,#navcolor:#fff;结构伪类选择器可根据文档结构的关系来匹配特点的元素。1.2 Web开发的核心技术1.2.2CSS3CSS3选择器结构伪类选择器名称名称说明明示例示例:first-child匹配第一个子元素li:first-child color:#fff;:last-child匹配最后一个子元素li:last-child color:#acf;:nth-child()按正序匹配特定子元素，括号内为数值，表示匹配属于其父元素的第 N个子元素li:last-child(3)color:blue;:nth-last-child()按倒序匹配特定子元素，括号内为数值，

24、表示倒序匹配属于其父元素的第 N个子元素li:last-child(2)color:#bde;伪元素选择器可用于在文档中插入假象的元素，在新版本里使用“:”与“:”区分伪类和伪元素。1.2 Web开发的核心技术1.2.2CSS3CSS3选择器伪元素选择器名称名称说明明示例示例:first-letter 选取元素的第一个字符p:first-lettercolor:red;:first-line选取元素的第一行p:first-lettercolor:pink;:selection选取当前选中的字符,但改变文字结构的样式不会生效，如字号，内边距p:selectioncolor:blue;:befor

25、e在元素内容前面添加新内容，与content配合使用，content的内容可以是图像和文本p:before content:”第一节”;color:red;:after在元素内容后面添加新内容，与content配合使用，content的内容可以是图像和文本p:aftercontent:url(“image/1.jpg”);属性选择器是根据标签的属性来匹配元素，使用中括号（）进行标识。1.2 Web开发的核心技术1.2.2CSS3CSS3选择器属性选择器名称名称说明明示例示例属性名选中所有具有该属性的标签titlecolor:#000属性名=”属性值”选中所有符合该条件的标签type=”text

26、”color:#fffclass=”属性名”从当前选择器选择的元素中，找到具有该属性名的元素inputclass=”pox”background-color:#fff;class=”字符串”从当前选择器选择的元素中，找到class属性以当前字符串为开头的元素pclass=”in”font-size:16px;class$=”字符串”从当前选择器选择的元素中，找到class属性以当前字符串为结尾的元素pclass$=”x”font-size:14px;class*=”字符串”从当前选择器选择的元素中，找到class属性中包含当前字符串的元素pclass=”o”color:red;CSS3中对字体

27、样式的设置主要有字体风格、字体粗细、字体大小、字体名称等。1.2 Web开发的核心技术1.2.2CSS3CSS3常用属性字体属性属性属性说明明font-style设置字体风格，属性值有oblique（偏斜体），italic（斜体），normal（正常）font-weight设置字体粗细，属性值有bold（粗体），bolder（特粗），lighter（细体），normal（正常）font-size设置字体大小，属性值为数值，常用单位是像素（px）font-family设置字体名称，常用属性值有“宋体”，“楷体”，“Arial”等字体属性（font）可以进行连写，连写顺序为字体风格（font-st

28、yle）、字体粗细（font-weight）、字体大小（font-size）和字体名称（font-family），字体连写的示例代码如下。1.2 Web开发的核心技术1.2.2CSS3CSS3常用属性font:italicbold16px“宋体”;字体属性CSS3中对背景样式的设置主要有背景颜色、背景图像、背景图像的重复性、背景图像滚动情况、背景图像位置等。1.2 Web开发的核心技术1.2.2CSS3CSS3常用属性背景属性属性属性说明明background-color设置背景颜色，属性值可以是颜色的英文单词或十六进制值或RGB值background-image把图像设置为背景，属性值是绝对

29、路径或相对路径表示的URLbackground-repeat设置背景图像是否重复以及如何重复，属性值有no-repeat（不重复）、repeat-x（横向平铺）、repeat-y（纵向平铺）background-attachment设置背景图像滚动情况，属性值有scroll（图像随内容滚动）、fixed（图像固定）background-position设置背景图像位置，属性值有精确的数值或top（垂直向上）、bottom（垂直向下）、left（水平向左）、right（水平向右）、center（居中）背景属性（background）可以进行连写，连写顺序为背景颜色（background-colo

30、r）、背景图像（background-image）、背景图像的重复性（background-repeat）、背景图像滚动情况（background-attachment）、背景图像位置（background-position），背景连写的示例代码如下。1.2 Web开发的核心技术1.2.2CSS3CSS3常用属性background:#cccurl(“image/2.jpg”)repeat-xscrollcenter;字体属性CSS3中对文本样式的设置主要有文本颜色、文本水平对齐方式、行高、文本修饰、文本转换、文本缩进、文本阴影等。1.2 Web开发的核心技术1.2.2CSS3CSS3常用属性

31、文本属性属性属性说明明color设置文本颜色，属性值可以是颜色的英文单词或十六进制值或RGB值text-align设置文本内容水平对齐方式，属性值有left（左对齐，默认值）、right（右对齐）、center（居中对齐）、justify（文字相对于图像对齐）line-height设置行高，属性值是数值，单位为像素（px）text-decoration用于修饰文本，属性值有none（无修饰，默认值）、line-through（删除线）、underline（下划线）、overline（上划线）、blink（闪烁）text-indent设置文本首行缩进，属性值有数值或inherit（继承父元素属性

32、）text-shadow设置文本阴影，属性值为数值1.2 Web开发的核心技术1.2.3JavaScriptJavaScript是一种轻量级、解释型的Web开发语言，是可与HTML文件相融合的一种脚本语言。它获得了各种浏览器的支持，如谷歌、IE、火狐等，是目前广泛应用的编程语言之一，可以呈现网页内容的交互式数据行为。当用户在客户端浏览该网页时，浏览器会执行JavaScript程序，用户可通过交互操作去改变网页的内容。JavaScript可以在标签中直接编写，也可以通过链接外部的JS文件。1.2 Web开发的核心技术1.2.3JavaScript1.解释型JavaScript的语言特性编译型语言

33、在计算机运行代码前，先把代码翻译成计算机可以理解的文件，如Java、C+等属于编译型语言。而解释型语言则不同，解释型语言的程序不需要在运行前编译，只需在运行程序时编译即可，如JavaScript、PHP等属于解释型语言。解释型语言的优点是可移植性较好，只要有解释环境，可在不同的操作系统上运行。代码修改后即可运行，无须编译，上手方便、快速。缺点是需要解释环境，运行起来比编译型语言慢，占用资源多，代码效率低。优点缺点1.2 Web开发的核心技术1.2.3JavaScript2.弱类型JavaScript的语言特性弱类型语言是相对于强类型语言而言的。在强类型语言中，变量类型有很多种，如int、cha

34、r、float、boolean等，不同的类型相互转换有时需要强制转换。而JavaScipt只有一种类型var，当其为变量赋值时会自动判断类型并进行转换。弱类型语言的优点是易于学习、语言表达简单易懂、代码更优雅、开发周期更短、更加偏向逻辑设计。缺点是程序可靠性差、调试烦琐、变量不规范、性能低下。优点缺点1.2 Web开发的核心技术1.2.3JavaScript3.动态性JavaScript的语言特性动态性语言是指在变量定义时不一定进行赋值操作，只需在使用时作赋值操作即可。这种方式使得代码更灵活、方便。在JavaScript中有多处会用到动态性，如获取元素、原型等。4.事件驱动JavaScript

35、可以直接对用户或客户输入做出响应，无须经过Web程序。它对用户的响应以事件驱动的方式进行，即由某种操作动作引起相应的事件响应，如单击、拖动窗口、选择菜单等。1.2 Web开发的核心技术1.2.3JavaScript5.跨平台JavaScript的语言特性JavaScript依赖于浏览器本身，与操作环境无关。只要计算机上可以运行浏览器，并且浏览器支持JavaScript即可正确执行，从而实现“编号一次，走遍天下”。1.2 Web开发的核心技术1.2.3JavaScriptJavaScript的构成JavaScript分为3部分，分别是ECMAScript（简称ES）、DOM（Document O

36、bject Model，页面文档对象模型）和BOM（Browser Object Model，浏览器对象模型）。1.2 Web开发的核心技术1.2.3JavaScriptJavaScript的构成ECMAScript是JavaScript语言的规范，是JavaScript的核心内容。ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的扩展。ECMAScript描述了JavaScript语言的基本语法和数据类型等，并规范了JavaScript

37、编码方式和语言特性，是浏览器厂商共同遵守的一套JavaScript语法工业标准。ECMAScriptECMAScript1.2 Web开发的核心技术1.2.3JavaScriptJavaScript的构成DOM文档对象模型是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口（API）。通过DOM提供的接口可以对页面上的各种元素进行操作。DOMDOMBOM浏览器对象模型是对浏览器窗口进行访问和操作的功能接口，例如，弹出新的浏览器窗口、获取浏览器信息等。值得注意的是，BOM是作为JavaScript的一部分而不是作为W3C组织的标准，每款浏览器都有自己的实现方式，这会导致BOM代

38、码的兼容性不如ECMAScript和DOM代码的兼容性。BOMBOM1.2 Web开发的核心技术1.2.3JavaScript1.变量变量与数据类型JavaScript变量是存储数据值的容器。变量是编程中最基本的单元，它会暂时引用用户需要存储的数据。JavaScript变量的语法格式如下。var 变量名；var 变量名=初始值；JavaScript变量定义的关键字是var，var具有声明作用，可以声明变量。例如varx=1，x是变量，1是变量的初始值，变量的值是可以改变的。1.2 Web开发的核心技术1.2.3JavaScript1.变量变量与数据类型JavaScript变量必须以唯一的名称标

39、识，唯一的名称被称为标识符。标识符可以是短名称，例如x、y和z，或者更具描述性的名称，例如age、sum等。标识符的通用规则名称可包含字母、数字、下划线和美元符号。名称必须以字母开头。名称也可以“$”和“_”开头。名称对大小写敏感，例如y和Y是不同的变量。保留字（比如JavaScript的关键词）无法用作变量名称。1.2 Web开发的核心技术1.2.3JavaScript2.数据类型的分类变量与数据类型数据类型分为基本数据类型和引用数据类型。基本数据类型指的是简单的数据段。基本数据基本数据类型型说明明字符串（String）表示文本数据，用引号引。例如，“你好”数值(Number)表示数学运算的

40、值。例如，整数10，浮点数3.14布尔值(Boolean)表示逻辑运算的值。只有两个值true和false空值（Null）表示没有值未定义值（Undefined）表示未赋值的初始化值）1.2 Web开发的核心技术1.2.3JavaScript2.数据类型的分类变量与数据类型引用数据类型指的是有多个值构成的对象。引用数据引用数据类型型说明明对象(Object)表示属性的无序集合。例如var obj=age:18数组(Array)表示一组数值。例如，Arr2,5,13,8函数(Function)表示执行特定任务的代码块。例如，function show(p1,p2)return p1*p2;基本数

41、据类型和引用数据类型的区别是基本数据类型的值是不可变的，变量存放在栈里面；引用数据类型可以拥有属性和方法，且值是可变的，值是同时保存在栈内存和堆内存。1.2 Web开发的核心技术1.2.3JavaScript3.数据类型的转换变量与数据类型其他数据可以转换为字符串类型，有2种转换方式。第1种是通过toString（）方法进行转换，第2种是使用“+”进行转换，转换完成之后使用typeof验证数据类型。转换为字符串类型的示例代码如下。vara=10;console.log(通过toString将num类型转换为string类型：+a.toString()console.log(转换之后进行验证：+

42、(typeofa.toString()console.log(通过+号将num类型转换为string类型：+(10+)console.log(转换之后进行验证：+(typeof(10+)1.2 Web开发的核心技术1.2.3JavaScript3.数据类型的转换变量与数据类型字符串类型转换为数字类型，有3种转换方式。第1种方式，ParseInt()方法从字符串的左边开始解析，遇到非数字后停止解析，返回的结果是整数值。如果首部是非数字，结果返回NaN。名称必须以字母开头。第2种方式，ParseFloat()方法的用法与ParseInt()方法相似，差别在于ParseFloat()方法能识别浮点数

43、，返回的结果是浮点数。第3种方式，Nubmber()方法的字符串必须是纯数字序列，才能返回结果，否则返回NaN。1.2 Web开发的核心技术1.2.3JavaScript运算符运算符是用来对变量或数据进行操作的符号，也称作操作符。运算符根据功能用途可分为算术运算符、比较运算符、逻辑运算符等。1.2 Web开发的核心技术1.2.3JavaScript1.算术运算符运算符算数运算符用于对数值执行算数运算，包括加、减、乘、除、取余等。1.2 Web开发的核心技术1.2.3JavaScript2.比较运算符运算符比较运算符用于对变量或表达式的结果进行比较，返回值为布尔值true或false。1.2 W

44、eb开发的核心技术1.2.3JavaScript3.逻辑运算符运算符逻辑运算符用来表示数学中的“与”“或”“非”运算，其主要作用是连接条件表达式，表示各个条件之间的逻辑关系。在上述图中，a和b分别为表达式，通常都是使用比较运算符返回的结果作为逻辑运算符的操作数，逻辑运算符还经常会出现在条件语句和循环语句中。1.2 Web开发的核心技术1.2.3JavaScriptJavaScript的常用事件JavaScript控制页面的行为是由事件驱动的。事件就是JavaScript监测测到用户的操作或是页面上的一些行为。1.3Web开开发工具工具开发工具的介绍WebStorm的安装和使用1.3 Web开发

45、工具1.3.1开发工具的介绍WebStormWebStorm是Jetbrains公司旗下一款JavaScript开发工具。这是前端开发中一个比较专业的软件，与其他软件相比，该软件体积比较大，功能也更复杂。它能支持代码高亮、智能补全等功能，除此之外，还支持代码调试、重构等功能，经常被应用于项目管理、团队协作开发中。目前已经被广大前端开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”等。它还与IntelliJIDEA同源，继承了IntelliJIDEA强大的JS部分的功能。1.3 Web开发工具1.3.1开发工具的介绍Visual Studio CodeVisual Studio Co

46、de是微软开发的一个轻量级代码编辑器，软件功能非常强大，界面简洁明晰，操作方便快捷，设计十分人性化。它支持常见的语法提示、代码高亮、Git等功能，具有开源，免费，跨平台，插件扩展丰富，运行速度快，占用内存少，开发效率高等特点，网页开发中经常会使用到该软件，非常灵活方便。1.3 Web开发工具1.3.1开发工具的介绍Sublime TextSublime Text是一个轻量级的编辑器，支持各种编程语言，SublimeText的主要功能有拼写检查，书签，完整的Python API，即时项目切换，多选择，多窗口等。SublimeText所有的强大功能都支持使用插件，快捷键发挥极大作用，有效的减少了开

47、发的劳动程度。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的安装（1）打开WebStorm官方网站https:/ Web开发工具1.3.2WebStorm的安装和使用WebStorm的安装（2）选择上一页图中的Windows选项，然后单击Download按钮下载最新版的WebStorm，页面底部是下载进度提示信息。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的安装（3）下载完成后的文件名为WebStorm-2021.2.exe，双击该文件进入安装界面。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的安

48、装（4）单击上一页图中的Next按钮进入选择安装路径窗口，选择要安装的路径。接着单击图中的Next按钮进入选择安装选项界面，创建桌面快捷方式。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的安装（5）单击上一页图中的Next按钮，进入选择开始菜单文件夹界面，默认为JetBrains。接着单击图中的Install按钮开始进行安装。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的安装（6）安装进度完成之后，进入结束界面，单击Finish按钮，完成WebStorm的安装。1.3 Web开发工具1.3.2WebStorm的安装和使用WebSt

49、orm的使用（1）安装完成之后，在桌面单击WebStorm的快捷方式，打开WebStorm并进入开始窗口。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的使用（2）单击上一页图中New Project（新工程）的图标，创建一个新工程，选择新工程文件的存储路径为D：WebStormItem。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的使用（3）新工程创建成功之后，可以自定义界面背景。设置背景颜色的步骤为，首先单击左上角的File菜单，单击Settings进入设置界面，单击展开Editor选项，选择Color SchemeHTML命令

50、，在右侧窗格的Scheme下拉列表中选择背景颜色，单击OK按钮，即可完成自定义界面背景。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的使用（4）自定义背景颜色完成之后，还可以自定义字体。在Settings设置界面上，单击Editor选项，然后单击选择Font，在右侧窗格设置自定义的字体、字号和行高，单击OK按钮即可完成设置。1.3 Web开发工具1.3.2WebStorm的安装和使用WebStorm的使用（5）创建一个新的HTML文件，首先单击File菜单，选择NewHTML file命令。1.3 Web开发工具1.3.2WebStorm的安装和使用WebSto