Web前端开发 课件 第12章 JavaScript基础_第1页
Web前端开发 课件 第12章 JavaScript基础_第2页
Web前端开发 课件 第12章 JavaScript基础_第3页
Web前端开发 课件 第12章 JavaScript基础_第4页
Web前端开发 课件 第12章 JavaScript基础_第5页
已阅读5页，还剩58页未读， 继续免费阅读

下载本文档

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

文档简介

第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三部分组成。JavaScriptECMAScriptBOMDOM

JavaScript组成

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')；向文档写文本、HTML表达式或JavaScript代码输入和输出语句

12.1JavaScript概述图1图2图3

12.1JavaScript概述浏览器的控制台中也可以直接输入JavaScript代码中来执行语句，这为初学者提供了很大的便利。用户输入控制台输出控制台

12.1JavaScript概述

12.2变量变量是计算机内存中存储数据的空间，使用变量可以方便的获取或者修改内存中的数据。变量的使用，分为两步：声明变量和变量赋值。varage;//声明一个名称为age的变量

age=10//为age变量赋值

varage=18//声明变量的同时赋值

1.声明变量2.变量赋值3.变量初始化

12.2变量1.更新变量的值。2.同时声明多个变量。

12.2变量3.声明变量的特殊情况。（1）只声明变量，但不赋值（2）不声明变量，直接输出变量的值在对变量进行命名时，需要遵循变量的命名规则，具体如下：由字母、数字、下划线和美元符号（$）组成。严格区分大小写，如app和App是两个变量。不能以数字开头，如18age是错误的变量名。不能是关键字、保留字，如var、for、while等是错误的变量名。要尽量做到“见名知义”如age表示年龄，num表示数字。遵循驼峰命名法，首字母小写，后面单词首字母大写，如myFirstName。

12.2变量

12.3数据类型JavaScript是一种弱类型语言，不用提前声明变量的数据类型。在程序运行过程中，变量的数据类型会被自动确定。

12.3数据类型当不确定一个变量或值是什么数据类型的时候，可以利用typeof运算符进行数据类型检测。toString()：把其他类型转换成字符串如:varnum=35;num.toString()parseInt(String)、parseFloat(String)将字符串转换为整型、浮点型如:parseFloat(“34.45”)将字符串“34.45”转换为浮点值34.45基本数据类型转换Boolean(value)：把值转换为布尔型，空字符串、0、NaN、null和undefined转换为false，其他为true。Number(value)：将值转换为数值型。String(value)：把值转换为字符串。数据类型转换

12.3数据类型

12.4运算符JavaScript运算符用于赋值，比较值，执行算术运算等。

12.4运算符算术运算符用于对两个变量或值进行算术运算。运算符描述例子y值x值备注+加法x=y+2y=5x=7-减法x=y-2y=5x=3*乘法x=y*2y=5x=10/除法x=y/2y=5x=2.5%余数x=y%2y=5x=1++自增x=++yy=6x=6先自增再赋值x=y++y=6x=5先赋值再自增--自减x=--yy=4x=4先自减再赋值x=y--y=4x=5先赋值再自减12.4运算符赋值运算符用于对两个变量或值进行算术运算。运算符运算示例结果=赋值a=3;a=3+=加并赋值a=3;a+=2;a=5-=减并赋值a=3;a-=2;a=1*=乘并赋值a=3;a*=2;a=6/=除并赋值a=3;a/=2;a=1.5%=求模并赋值a=3;a%=2;a=1+=连接并赋值a='abc';a+='def';a='abcdef'12.4运算符比较运算符用于对两个数据进行比较，其结果是布尔值（true或false）。运算符运算示例结果备注>大于5>5false<小于5<5false>=大于或等于5>=5true<=小于或等于5<=5true==等于5==4false先转换相同类型，再比较!=不等于5!=4true===全等5===5true比较值是否相等，比较数据类型是否相同!==不全等5!=='5'true

12.4运算符逻辑运算符用于对布尔值进行运算，其返回值也是布尔值。运算符运算示例结果&&与a&&ba和b都为true，结果为true，否则为false||或a||ba和b中至少有一个为true，则结果为true，否则为false!非!a若a为false，结果为true，否则相反12.4运算符条件运算符又叫三元运算符，是一种需要三个操作数的运算符，运算的结果根据给定条件决定。条件表达式?表达式1:表达式2语法说明：先求条件表达式的值，如果为true，则返回表达式1的执行结果；如果条件表达式的值为false，则返回表达式2的执行结果。age>=18?'已成年':'未成年';

12.4运算符运算符优先级：是指表达式中所有运算符参与运算的先后顺序。结合方向运算符结合方向运算符无()左==!====!==无++（后置）--（后置）左&右!-（负数）+（正数）++（前置）--（前置）左^右**左|左*/%左&&左+-左||左<<>>>>>右?:左<<=>>=右=+=-=*=/=%=<<=>>=>>>=&=^=|=

12.5流程控制通过控制代码的执行顺序来完成要实现的功能，这就是流程控制。顺序结构是程序中最基本的结构，程序会按照代码的先后顺序依次执行。分支结构用于根据条件来决定是否执行某个分支代码。循环结构用于根据条件来决定是否重复执行某一段代码。12.5流程控制常用的分支结构语句有if语句和switch语句。if单分支语句，当满足某种条件时，进行某种处理if…else双分支语句，当满足某种条件时，进行某种处理，否则进行另一种处理if…elseif多分支语句，可针对不同情况进行不同的处理12.5流程控制switch多分支语句，针对某个表达式的值作出判断，从而决定执行哪一段代码。查询水果价格12.5流程控制使用switch多分支语句实现用户在弹出框中输入一个水果，如果有就弹出该水果的价格，如果该水果不存在就弹出“没有此水果”的效果。苹果3.5元/斤榴莲35元/斤香梨3元/斤12.5流程控制1.一般情况下，它们两个语句可以互相替换。2.Switch…case语句通常处理case比较确定值的情况，而if…elseif语句更加灵活，常用于范围判断(大于、等于某个范围)。3.switch语句进行条件判断后直接执行到程序的条件语句，效率更高，而if…elseif语句有几种条件，就得判断多少次。4.当分支比较少时，

if…elseif语句的执行效率高。5.当分支比较多时，switch语句的执行效率高，而且结构更清晰。

switch语句和if…elseif语句的区别12.5流程控制在程序中，一组被重复执行的语句称为循环体，能否重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句称为循环语句。for语句是最常用的循环语句，循环次数已知的情况。①执行“vari=1;”初始化变量。②判断条件表达式“i<=100”是否为真，如果为真，执行循环体，反之，结束循环。③执行循环体console.log(i)。④执行操作表达式“i++”，将i的值加1。⑤继续判断“i<=100”是否为true，当i的值加到101时，循环结束。代码执行流程循环结构12.5流程控制while语句可以在条件表达式为true的前提下，循环执行指定的一段代码，直到条件表达式为false时结束循环。do…while语句会无条件地执行一次循环体中的代码，然后再判断条件，根据条件决定是否循环执行。注意：1.在循环体中需要对计数器的值进行更新，以防止出现死循环。2.while是先判断后执行，而do...while是先执行后判断。3.do...while保证循环体至少执行一次，而while不能。循环结构12.5流程控制continue关键字应用在循环结构中，用来立即跳出本次循环，也就是跳过continue后面的代码，继续下一次循环。break关键字可以用在switch语句和循环语句中，在循环语句中使用时，其作用是立即跳出整个循环，也就是将循环结束。循环结构12.5流程控制（1）重复执行相同代码，执行N次，N通过prompt输入。重要的事情说N遍。（2）重复执行不同代码，第1遍输出“这是第1次循环”，第100遍输出”这是第100次循环“，其他遍忽略。循环结构12.5流程控制（3）1~100之间的所有整数“求和”和“平均数”。（4）1~100之间的所有整数“求偶数和”和“求奇数和”循环结构（5）1~100之间的所有能被3整除的整数之和12.5流程控制循环嵌套（6）生成字符串（7）九九乘法表12.5流程控制猜数游戏随机产生一个0到9之间的数字，接收用户输入的一个数字，用户有3次输入的机会。猜大了，提示“大了”，猜小了，提示“小了”。如果3次机会内猜对则提示“猜对了”，直接跳出游戏。如果3次都没有猜对则提示“你输了”，并结束游戏。Math.random()：产生一个[0，1)之间的随机数。Math.ceil()方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。

12.6函数函数的含义：用于封装一段完成特定功能的代码。相当于将一条或多条语句组成的代码块包裹起来，用户在使用时只需关心参数和返回值，就能完成特定的功能，而不用了解具体的实现。函数有两种：JavaScript自带的系统函数和用户自定义函数函数在使用时分为两步，声明函数和调用函数。声明函数的基本语法调用函数：三种情况1.函数调用和表单元素的事件一起使用，格式：事件名＝“函数名()”;2.在脚本中直接调用，格式：函数名();3.在脚本中通过元素事件调用，格式：事件名=函数名；

12.6函数函数的使用<inputtype="submit"name="Submit"value="计算1-100之和"onClick="getSum(1,100)">在<script>标签对中添加语句：window.onload=getSum(1,100);

12.6函数函数的使用JavaScript函数参数的使用非常灵活，它允许函数的形参和实参个数不同。当实参数量多于形参数量时，函数可以正常执行，多余的实参由于没有形参接收，会被忽略。当实参数量小于形参数量时，多出来的形参类似于一个已声明未赋值的变量，其值为undefined。

12.6函数函数的参数在JavaScript函数体内，使用return语句可以设置函数的返回值。一旦执行return语句，将停止函数的运行，并计算和返回return后面的表达式的值。如果函数不包含return语句，则执行完函数体内每条语句后，返回undefined值。

12.6函数函数的返回值匿名函数是没有名称的函数，因此要将声明的匿名函数赋值给一个变量，通过变量完成函数的调用和参数的传递，成为一个函数表达式。

12.6函数匿名函数声明变量后是否可以在任意位置使用该变量？

12.6函数作用域的分类变量的使用是有作用域范围的。按作用域划分有全局作用域、函数作用域和块级作用域（ES6提供的），根据不同作用域对应的变量：全局变量、局部变量、块级变量（ES6提供的）。js文件函数含有{}如for等函数作用域全局作用域块级作用域

12.6函数作用域的分类①全局变量：不在任何函数内声明的变量（显式定义）或在函数内省略var声明的变量（隐式定义）都称为全局变量，它在同一个页面文件中的所有脚本内都可以使用。②局部变量：在函数体内利用var关键字定义的变量称为局部变量，它仅在该函数体内有效。③块级变量：ES6提供的let关键字声明的变量称为块级变量，仅在“{}”中间有效，如if、for或while语句等。作用域的分类

12.6函数养成良好的编程习惯命名风格函数主要用来实现功能，通常用“动词+名词”形式。变量名用来存储数据，通常用”名词“或”形容词+名词“形式。变量名以小写字母开头，对于多个词的情况，如果没有分隔符，则从第二个词开始，每个词语第一个字母大写。类的命名通常使用“名词”，类名应该以大写字母开头。document.表单名.文本框名.valuedocument.getElementById(id).value注意：从文本框中获取的值都是字符串，若进行加减，都要进行类型转换。获取文本框值的方法document.myForm.txtCount.valuedocument.getElementById(“txtCount).value在页面实现简易计算器，用户在页面输入第一个数和第二个数，点击相应操作符将操作结果显示在计算结果文本框中。制作简易计算器设计静态页面。获取用户输入文本框的值。使用函数定义对应的加、减、乘、除操作。单击按钮时调用函数。怎么用一个函数来代替4个结构相似的函数？使用有参函数，将运算符作为参数传递

12.8对象JavaScript对象是拥有属性和方法的数据。在JavaScript中，几乎所有的事物都是对象。对象属性方法

=Fiat

car.model=500

car.weight=850kg

car.color=white

car.start()

car.drive()

car.brake()

car.stop()所有汽车都有这些属性，但是每款车的属性都不尽相同。所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。

12.8对象内置对象Date、Math、String、Array、Number等浏览器对象Window、Location、history、Navigator、Screen、document、Frame等自定义对象Date对象的创建Date对象存储的日期为自1970年1月1日00:00:00以来的毫秒数要先使用new运算符创建Date对象，创建Date对象常见方式有三种不带参数：varmyDate=newDate();创建一个含有系统当前日期和时间的Date对象变量myDate。创建一个指定日期的Date对象：varmyDate=newDate(“2024/05/01”);创建了2024年5月1日的Date变量myDate。创建一个指定时间的Date对象：varmyDate=newDate(2024,5,1,10,30,20,50);创建了一个包含确切日期和时间“2024年5月1日10点30分20秒50毫秒”的myDate变量

12.8对象Date对象的常用方法方法名描述getYear()返回年份数getFullYear()返回年份数getMonth()返回月份数（0--11）getDate()返回日期数（1--31）getDay()返回星期数（0--6）getHours()返回时数（0--23）getMinutes()返回分数（0--59）getSeconds()返回秒数（0--59）getMilliseconds()返回毫秒数（0--999）getTime()返回对应日期基线的毫秒toGMTString()以GMT格式表示日期对象toLocaleString()返回日期的字符串表示，其格式根据系统当前的区域设置来确定

12.8对象定时器setTimeout()：用于在指定的毫秒后调用函数或计算表达式语法：setTimeout(“调用的函数名称”,等待的毫秒数)使用clearTimeout()方法清除s

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

温馨提示

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

最新文档

评论

0/150

提交评论