HTML 前端 实例与教程 5_第1页
HTML 前端 实例与教程 5_第2页
HTML 前端 实例与教程 5_第3页
HTML 前端 实例与教程 5_第4页
HTML 前端 实例与教程 5_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

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

文档简介

单元9JavaScript基础HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】9.1JavaScript简介9.1.1JavaScript特点9.1.2ECMAScript版本9.2JavaScript用法9.2.1<script>标签9.2.2<body>中的JavaScript9.2.3外部的JavaScript9.3JavaScript运行环境9.3.1调试JavaScript代码9.3.2Chromesnippets9.4JavaScript输出9.4.1警告框9.4.2操作HTML元素9.4.3写入HTML文档9.4.4输出到控制台9.5JavaScript语法9.5.1JavaScript字面量9.5.2JavaScript变量9.5.3JavaScript操作符9.5.4JavaScript语句9.5.5JavaScript关键字9.5.6JavaScript标识符9.5.7JavaScript注释9.5.8JavaScript数据类型9.6JavaScript函数9.6.1JavaScript函数语法9.6.2带参数的函数9.6.3带有返回值的函数【商业实例】“仿写淘宝首页”

项目——开发登录

校验功能任务一为“登录”按钮添加事件任务二进行用户名密码校验【综合实训】制作用户列表网页【单元小结】目录【学习导读】我们平时在浏览网页时，会发现网页上存在一些交互效果，例如在百度中搜索内容时，输入框的下方会根据我们输入的内容展示出相关联的选项，按回车键或者单击搜索按钮后搜索结果会呈现在网页上。这个交互过程就是通过JavaScript来实现的。JavaScript是Internet上最流行的脚本语言之一，它存在于全世界所有Web浏览器中，能够增强用户与Web站点及Web应用程序之间的交互。掌握JavaScript基础可以使开发者编写出功能丰富、动态的网页应用程序。本单元将详细介绍JavaScript的基础知识。学习导读【学习目标】知识目标1．掌握JavaScript的语法。2．掌握JavaScript的函数。3．理解JavaScript的运行环境。能力目标1．能够独立创建JavaScript函数。2．能够定义JavaScript语句。3．能够编写简单的JavaScript输出程序。素质目标1．培养学生良好的编程能力。2．培养学生的逻辑思维能力。3．培养学生的探索精神。学习目标思维导图9.1JavaScript简介9.1.1JavaScript特点简单性首先，它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，对学习Java来说是一种非常好的过渡；其次，它的变量类型采用弱类型，并未使用严格的数据类型。动态性节省服务器

开销JavaScript是动态的，它可以直接对用户输入做出响应，无须经过Web服务程序。它对用户的响应是以事件驱动的方式进行的。JavaScript依赖于浏览器本身，与操作环境无关，只要有能运行浏览器的计算机以及支持JavaScript的浏览器就可以正确执行，从而实现了“编写一次，走遍天下”。JavaScript是一种基于客户端的语言，浏览器通过调入HTML文档中的JavaScript源代码来解释用户在浏览过程中进行的填表、验证等交互操作，大大减少了服务器的资源消耗。跨平台性9.1JavaScript简介9.1.2ECMAScript版本年份名称描述1997ECMAScript1第一个版本1998ECMAScript2版本变更1999ECMAScript3添加正则表达式添加

try/catch

ECMAScript4没有发布2009ECMAScript5添加strictmode（严格模式）添加JSON支持2011ECMAScript5.1版本变更2015ECMAScript6添加类和模块2016ECMAScript7添加指数运算符（**）添加Atotype.includes9.2JavaScript用法9.2.1<script>标签<script>是HTML中用于嵌入JavaScript代码的标签。<script>和</script>说明JavaScript代码在何处开始和结束，在这两个标签的中间可以编写JavaScript代码，它的作用是告诉浏览器在解析HTML文档时执行其中包含的JavaScript代码。通过使用<script>标签，我们可以将JavaScript代码直接嵌入HTML文档中，从而实现网页的交互性和动态性。<script>标签可以放置在HTML文档的<head>或<body>部分中。当浏览器解析到<script>标签时，会停止解析HTML，并开始执行其中的JavaScript代码。9.2JavaScript用法<script>标签可以定义在<body>标签内部，例如通过JavaScript在网页加载时向HTML的<body>标签写入文本内容，代码如下所示（实例位置：单元9/9-1.html）。9.2.2<body>中的JavaScript<!DOCTYPEhtml><html><body><script> document.write('<h1>这是一个标题</h1>'); document.write('<p>这是一个段落</p>');</script></body></html>运行效果9.2JavaScript用法9.2.3外部的JavaScript通过<script>标签，我们可以引入外部的JavaScript文件，以便重复使用或分离JavaScript代码。设置src属性，将外部JavaScript文件的URL指定给<script>标签后，浏览器会根据URL加载并执行该文件中的JavaScript代码。外部JavaScript文件的扩展名是.js，引入时可以将脚本放置于<head>或者<body>中，实际运行效果与在<script>标签中编写脚本完全一致。9.2JavaScript用法9.2.3外部的JavaScript例如通过引入外部.js文件在网页上输出一段文本，代码如下所示（实例位置：单元9/9-2.html）<!DOCTYPEhtml><html><head><metacharset="utf-8"/></head><body><divid="demo"></div><scriptsrc="./js/myScript.js"></script></body></html>9.2JavaScript用法9.2.3外部的JavaScriptmyScript.js文件中的代码如下。functionmyFunction(){document.getElementById('demo').innerHTML='这是我的第一个JavaScript函数';}myFunction();运行效果9.3JavaScript运行环境打开开发者工具01OPTION在GoogleChrome浏览器中按F12键，或者在网页空白处右击，在弹出的快捷菜单中选择“检查”命令，打开开发者工具。02OPTION也可以在右上角菜单栏中选择“更多工具”—“开发者工具”命令来打开开发者工具。9.3JavaScript运行环境9.3.1调试JavaScript代码01OPTION打开开发者工具后，可以在“控制台”面板中调试JavaScript代码。例如在“>”符号后输入要执行的代码“console.log(”hello,JavaScript“)”，按回车键后接口执行代码。9.3JavaScript运行环境9.3.1调试JavaScript代码02OPTION单击图标可以清空控制台中的内容9.3JavaScript运行环境9.3.2Chromesnippets可以在GoogleChrome浏览器中创建并执行脚本。在开发者工具中打开“源代码/来源”面板，再打开“代码段”选项卡，单击“新代码段”按钮，创建一个代码段。01OPTION9.3JavaScript运行环境9.3.2Chromesnippets单击“新代码段”按钮后，会自动创建一个文件，在右侧窗口中输入代码，并按Command+S组合键（macOS）或Ctrl+S组合键（Windows和Linux）保存更改。例如输入以下内容。console.log(1111)console.log(2222)02OPTION保存后，右击文件名，在弹出的快捷菜单中选择“运行”命令来执行代码。9.3JavaScript运行环境9.3.2Chromesnippets运行代码后“控制台”面板中会输出对应内容。03OPTION9.4JavaScript输出JavaScript输出是指将数据或结果显示在网页或控制台上。在JavaScript中，可以使用不同的输出方式来向用户展示信息。使用window.alert()函数弹出警告框。使用innerHTML属性将数据写入HTML元素。使用document.write()方法将内容写入HTML文档中。使用console.log()函数写入浏览器的控制台。9.4JavaScript输出9.4.1警告框可以使用alert()函数在网页中弹出一个警告框，显示特定的消息或数据。使用alert()函数时会中断JavaScript代码的执行，直到用户关闭警告框。例如使用警告框来输出计算结果，代码如下所示（实例位置：单元9/9-3.html）。<!DOCTYPEhtml><html><body><script>alert(5+6);</script></body></html>运行效果9.4JavaScript输出9.4.2操作HTML元素还可以通过操作DOM元素在网页上进行输出。例如，可以使用innerHTML属性将数据或结果写入HTML元素中，或者使用textContent属性将文本内容输出到指定的元素中。例如通过操作DOM元素修改<p>标签的内容为“段落已修改。”，代码如下所示（实例位置：单元9/9-4.html）。<!DOCTYPEhtml><html><body> <h1>我的第一个Web页面</h1> <pid="demo">我的第一个段落</p><script> document.getElementById("demo").innerHTML="段落已修改。";</script></body></html>运行效果9.4JavaScript输出9.4.3写入HTML文档使用document.write()方法可以将内容写入HTML文档中，这种方式只能用于写入文本或HTML。例如在网页中输出“你好，JavaScript”文案，代码如下所示（实例位置：单元9/9-5.html）。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title></head><body><h1>我的第一个Web页面</h1><p>我的第一个段落。</p><script>document.write('你好，JavaScript');</script></body></html>运行效果9.4JavaScript输出9.4.4输出到控制台最常见的输出方式是使用console.log()函数，它可以将数据或信息输出到浏览器的控制台。通过在代码中使用console.log()函数，可以在控制台输出调试信息、变量的值、函数的执行结果等。9.4JavaScript输出9.4.4输出到控制台例如在控制台中输出变量c的值，代码如下所示（实例位置：单元9/9-6.html）。<!DOCTYPEhtml><html><body><h1>我的第一个Web页面</h1><script>a=5;b=6;c=a+b;console.log(c);</script></body></html>运行效果9.5JavaScript语法9.5.1JavaScript字面量字符串（String）字面量字符串字面量是由引号（单引号或双引号）包围的字符序列，如"Hello,World!"。数字（Number）字面量数字字面量表示数值，可以是整数或浮点数，如42、3.14。布尔（Boolean）字面量布尔字面量表示逻辑值，可以是true或false。数组（Array）字面量数组字面量用方括号括起来，其中包含一组值，值之间用逗号分隔，如[1,2,3,4]。对象（Object）字面量对象字面量用花括号括起来，包含一组键值对，键值对由键和值组成，键和值之间用冒号分隔，每个键值对之间用逗号分隔，如{name:"John",age:30}。9.5JavaScript语法9.5.2JavaScript变量1．局部变量在函数内部声明的变量是局部变量，只能在函数内部访问。局部变量在函数执行后被删除。可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。局部变量比同名全局变量的优先级高，所以局部变量会隐藏同名的全局变量。2．全局变量在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在网页关闭后被删除。9.5JavaScript语法9.5.3JavaScript操作符算术操作符01算术操作符用于执行数学计算，如加法、减法、乘法、除法等。算术操作符有+、－、*、/等。比较操作符02比较操作符用于比较值之间的关系，如==、!=、>、<等。逻辑操作符03逻辑操作符用于组合和操作布尔值，如&&、||、!等。赋值操作符04赋值操作符用于将值赋给变量，如=、+=、－=等。位操作符05位操作符用于对数字的二进制位进行操作，如&、|、<<、>>等。9.5JavaScript语法9.5.4JavaScript语句例如使用分号定义多条语句，如下所示。JavaScript语句是一组指令或命令，用于告诉计算机执行特定的操作或任务。它们是JavaScript代码的基本构建块，用于控制程序的流程、处理数据、执行操作等。JavaScript语句以分号（;）结尾，每条语句通常占据一行，但一行也可以包含多条语句，使用分号将它们分隔开即可。a=5;b=6;c=a+b;9.5JavaScript语法9.5.5JavaScript关键字声明关键字如var、let、const，用于声明变量并指定其作用域和特性。函数关键字如function、return等，用于定义和调用函数，以及返回结果。对象和类关键字如new、this、class、extends等，用于创建和操作对象，以及定义类和继承关系。条件和循环关键字如if、else、switch、case、default、for、while、do等，用于实现条件判断和循环控制。异常处理关键字如try、catch、throw、finally等，用于捕获和处理异常情况。模块和导入关键字模块和导入关键字有import、export等，用于模块化开发和导入导出代码。9.5JavaScript语法9.5.6JavaScript标识符JavaScript标识符是用来标识变量、函数、对象、属性等命名实体的名称。标识符由字母、数字、下画线（_）和美元符号（$）组成，但不能以数字开头。在JavaScript中，标识符是区分大小写的，如myVariable和myvariable被视为不同的标识符。标识符应该尽量简洁明了，避免使用过长或过于复杂的名称，同时不能使用JavaScript的关键字，如if、for、function等。正确使用标识符可以使代码更具可读性、可维护性和一致性。选择有意义的标识符并遵循命名规则有助于提高代码的可理解性和代码质量。9.5JavaScript语法9.5.6JavaScript标识符9.5JavaScript语法9.5.7JavaScript注释1．单行注释单行注释以双斜线（//）开始，一行中双斜线后的内容都将被视为注释。单行注释通常用于在代码中添加简短的解释或说明。添加单行注释，代码如下。//输出标题：document.getElementById("myH1").innerHTML="欢迎来到我的主页";//输出段落：document.getElementById("myP").innerHTML="这是我的第一个段落。";9.5JavaScript语法9.5.7JavaScript注释2．多行注释多行注释以斜线和星号（/*）开始，以星号和斜线（*/）结束。多行注释可以跨越多行，用于添加详细的解释或临时禁用一段代码。添加多行注释，代码如下。/*下面的这些代码会输出一个标题和一个段落并将代表主页的开始*/document.getElementById("myH1").innerHTML="欢迎来到我的主页";document.getElementById("myP").innerHTML="这是我的第一个段落。";9.5JavaScript语法9.5.8JavaScript数据类型1．基本数据类型（原始数据类型）0102030405表示数值，包括整数和浮点数。表示文本数据，即由字符组成的序列。表示逻辑值，只有两个可能的值（true和false）。表示空的值或不存在的对象。表示未定义的值。数字（Number）字符串（String）布尔值（Boolean）空值（Null）未定义（Undefined）9.5JavaScript语法9.5.8JavaScript数据类型2．复杂数据类型（引用数据类型）函数（Function）表示可执行的代码块，可以接收参数并返回值。对象（Object）表示一组相关属性和方法的集合。正则表达式（RegExp）表示用于匹配和操作字符串的模式。数组（Array）表示一个有序的集合，可以包含任意类型的数据。9.5JavaScript语法9.5.8JavaScript数据类型3．特殊的数据类型Infinity：表示正无穷大的特殊数值。ABNaN（NotaNumber）：表示非数字值，当数学运算无法返回有效数字时使用。9.6JavaScript函数9.6.1JavaScript函数语法使用关键字function声明函数，后面加上函数名称和一对圆括号，圆括号中可以包含参数列表。函数体包含在花括号中，用于定义函数的具体操作。例如定义一个函数，代码如下。functiongreet(){console.log("Hello,JavaScript");}当调用该函数时，会执行函数内的代码。可以在任何时机调用函数（比如当用户单击按钮时），并且可由JavaScript在任何位置进行调用。9.6JavaScript函数9.6.2带参数的函数函数可以接收参数，参数是在函数调用时传递给函数的值。函数的调用通过函数名后跟一对圆括号实现，圆括号中可以包含传递的参数。例如调用greet()函数并传入参数"John"，代码如下。greet("John");//调用函数greet()，传递的参数为"John"也可以传递多个参数，参数之间由逗号（,）分隔，例如定义有两个参数的函数并调用该函数，代码如下。functionmyFunction(var1,var2){//函数体}myFunction(argument1,argument2)9.6JavaScript函数9.6.3带有返回值的函数在使用return语句时，函数会停止执行，并返回指定的值，return语句后面的语句将不会再执行。函数可以在执行完处理数据的操作后返回处理结果（即返回值），通过使用return关键字来实现。例如定义一个函数并返回结果，代码如下。functionmyFunction(){varx=5;returnx;}myFunction();//返回数值59.6JavaScript函数9.6.3带有返回值的函数定义一个函数，该函数有姓名和年龄两个参数，函数执行完后返回一段文本，将文本输出到浏览器中，代码如下所示（实例位置：单元9/9-7.html）。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>函数</title></head><body><script>functiongreet(name,age){varmessage='Hello'+name+'!Youare'+age+

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

温馨提示

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

最新文档

评论

0/150

提交评论