Web前端开发 课件 第12章 JavaScript基础.pptx

第12章JavaScript基础主讲教师：朱铁樱《Web前端开发》

12.1JavaScript概述JavaScript是Web开发领域中的一种功能强大的编程语言。其作用主要用于开发交互式的Web页面，使网页的互动性更强，用户体验更好。语言作用说明HTML结构从语义角度描述页面结构，相当于人的身体结构CSS样式从审美角度美化页面样式，相当于给人穿衣服、化妆JavaScript行为从交互角度描述页面行为，相当于人的各种动作

LiveScript由布兰登·艾奇（BrendanEich）发明，于1995年出现在Netscape。Netscape与SUN合作，将LiveScript改为JavaScript，造就了这个强大的Web页开发工具。如今，web3.0时代，各种JavaScript功能框架层出不穷，各种前端应用愈加丰富多彩。JavaScript的诞生和发展12.1JavaScript概述

JavaScript内嵌于HTML网页中，通过浏览器内置的JavaScript引擎直接编译，把一个原本只用来显示的页面，转变成支持用户交互的页面。JavaScript主要运行在浏览器中的。例如，直接在浏览器中进行表单验证，只有填写格式正确的内容后才能够提交表单，避免因表单填写错误导致反复提交，节省了时间和网络资源。JavaScript作用12.1JavaScript概述

JavaScript是一种脚本语言，特点是简单、易学、易用，语法规则比较松散，能够快速完成程序的编写工作JavaScript可以跨平台，它不依赖操作系统，仅需要浏览器的支持JavaScript支持面向对象，可以使JavaScript开发变得快捷和高效，降低开发成本JavaScript特点12.1JavaScript概述

JavaScript由ECMAScript、DOM、BOM三部分组成。JavaScriptECMAScriptBOMDOMJavaScript组成12.1JavaScript概述

ECMAScript：是JavaScript的核心。规定了JavaScript的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法工业标准。DOM：文档对象模型，是用于html编程的接口，可以通过DOM对页面上的各种元素进行操作。BOM：浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM，可以对浏览器窗口进行操作。JavaScript组成12.1JavaScript概述

行内式：将单行或少量的JavaScript代码写在HTML标签的事件属性中。注意单引号和双引号的使用。行内式可读性较差。多层引号嵌套时，容易混淆，导致代码出错。临时测试或特殊情况使用行内式，一般情况下不推荐。JavaScript书写位置12.1JavaScript概述

内嵌式（嵌入式）：使用script标签包裹JavaScript代码，script标签可以写在head或body标签中。12.1JavaScript概述JavaScript书写位置

外部式（外链式）：将JavaScript代码写在一个单独的文件中，一般使用“.js”作为文件扩展名，在HTML页面中使用script标签引入，适合JavaScript代码量比较多的情况。注意外部式的script标签内不能编写JavaScript代码。12.1JavaScript概述JavaScript书写位置

在编写JavaScript代码时，需要注意基本的语法规则：JavaScript严格区分大小写，在编写代码时一定注意大小写的正确性。JavaScript代码对空格、换行、缩进不敏感，一条语句可以分成多行书写。如果一条语句结束后，换行书写下一条语句，后面的分号可以省略。JavaScript语法规划12.1JavaScript概述

JavaScript代码的注释方式：单行注释：以“//”开始，到该行结束或script标签结束之前的内容都是注释。快捷键：ctrl+/。多行注释：以“/*”开始，以“*/”结束。需要注意的是，多行注释中可以嵌套单行注释，但不能再嵌套多行注释。快捷键：shift+ctrl+/。12.1JavaScript概述

JavaScript可以在网页中实现用户交互效果。例如，网页打开后自动弹出一个输入框，用户输入内容后，由程序内部进行处理，处理完成后再把结果返回给用户。这整个过程分为输入、处理和输出3个步骤。语句说明alert(msg)浏览器弹出警告框console.log(msg)浏览器控制台输出信息prompt(msg1,msg2)浏览器弹出输入框，用户可以输入内容document.write(msg)；向文档写文