JavaScript基础.pptx
- 文档编号:18697229
- 上传时间:2023-09-20
- 格式:PPTX
- 页数:44
- 大小:2.57MB
JavaScript基础.pptx
《JavaScript基础.pptx》由会员分享,可在线阅读,更多相关《JavaScript基础.pptx(44页珍藏版)》请在冰点文库上搜索。
JavaScript基础,什么是JavaScript基础,javascript诞生于1995年,当时它的主要目的就是处理以前由服务器语言负责的一些输入验证操作,在javascript问世之前,必须把表单里的数据发送到服务器才能确定用户是否没有填写某个必填域或者是输入信息是否正确。
学习目标,-了解javascript组成部分-认识javascript解析机制-如何使用javascript,第一讲:
初识JavaScript,JavaScript的这三个组成部分在当前五大主流浏览器中都得到了不同程度的支持(IE、FireFox、Chrome、Safari、Opera),基本所有的浏览器都大体上支持ECMAScript第三版,但是对于DOM和BOM的支持相比较而言则差很多。
javascript是一种专与网页交互设计的脚本语言,由三部分组成:
-ECMAScript提供核心语言功能-文档对象模型(DOM)提供访问和操作网页内容的方法和接口-浏览器对象模型(BOM)提供与浏览器交互的方法和接口,JavaScript是一种可以与HTML标记语言混合使用的脚本语言,其编写的程序可以直接在浏览器中解释执行。
JavaScript是一种解释型语言(预编译,执行)JavaScrip的国际标准是ECMAScript.-语法、类型、语句、关键字、保留字、操作符、对象如何使用JavaScript?
-在HTML文档中插入脚本语言可以使用标记-标记可以置于页面任意位置,一般定义在标签中标签属性!
-type、src、charset,学习目标,-认识变量(声明、规则、全局变量、局部变量)-数据类型(基本类型、引用类型)-运算符、表达式、控制语句,第二讲:
JavaScript基础,第二讲:
2.1变量,变量-JavaScript是一种弱类型的脚本语言-varc=3:
即变量的声明(变量使用之前必须加var声明,编程规范)-变量的命名规则!
1变量命名必须以字母或是下标符号”_”或者“$”为开头。
2变量名长度不能超过255个字符3变量名中不允许使用空格4不能使用脚本语言中保留的关键字及保留符号作为变量名5变量名区分大小写(javascript是区分大小写的语言),全局变量和局部变量,-全局变量在函数体外部声明的变量函数内部,没有加var关键字声明的变量-局部变量方法内部,使用var声明的变量,第二讲:
2.2数据类型,ECMAScript中,数据类型也分为基本类型和引用类型两大类.基本数据类型:
Number、Boolean、String、Undefined、NullNumber:
整数和小数(最高精度17位小数)、NaN、Infinity,-Infinity注意:
1.除10进制外,还可通过8进制和16进制的字面值来表示,如070表示56、0xA表示10.Boolean:
true和false.Undefined:
表示变量声明但未赋值.Null:
表示一个空的对象引用(也就是赋值为null),引用类型,Object类型(比如对象、数组、RegExp、Date.)Typeof操作符基本类型和引用类型的值基本类型是按照值访问的,因为可以操作保存在变量中的实际值引用类型则是按引用去访问的,第二讲:
2.3运算符,运算符与表达式:
加减乘除、递增(+)、递减(-)、求余(%)变量的自动转换=等同符:
不会发生类型的自动转化!
=等值符:
会发生类型自动转化、自动匹配!
在程序中还经常使用到扩展赋值运算符,如:
+=,-=,*=,/=,%=等,在复杂的表达式中往往会综合运用各种不同类型的运算符,而表达式的运算顺序有一定的规则:
首先应按照运算符的优先次序从高到低的顺序,其次,优先级相同的运算符按照事先约定的结合方向(从左向右或从右向左)进行。
条件表达式的基本的语法是:
(条件表达式1)?
表达式2:
表达式3,第二讲:
2.4控制语句,基本上ECMAScript的控制语句和C一致if语句if(条件)elseif(条件).elseswitch语句:
switch(expression)caseconst1:
语句块1.default:
.for(初始化部分;条件部分;更新部分)语句块while(条件)语句块do语句块while(条件)break语句是结束当前的循环,并把程序的控制权交给循环的下一条语句这里是结束循环,循环到此为止continue语句是结束当前的某一次循环,但是并没有跳出整个的循环。
第二讲:
2.4控制语句,基本上ECMAScript的控制语句和C一致if语句if(条件)elseif(条件).elseswitch语句:
switch(expression)caseconst1:
语句块1.default:
.for(初始化部分;条件部分;更新部分)语句块while(条件)语句块do语句块while(条件)break语句是结束当前的循环,并把程序的控制权交给循环的下一条语句这里是结束循环,循环到此为止continue语句是结束当前的某一次循环,但是并没有跳出整个的循环。
学习目标,-掌握数组的概念、特性、常用方法-掌握Object,学会使用对象-了解其他引用类型对象,第三讲:
数组,第三讲:
3.1数组,在ECMAScript中数组是非常常用的引用类型了。
ECMAScript所定义的数组和其他语言中的数组有着很大的区别。
那么首先要说的就是数组也是一种对象。
特点:
“数组”即一组数据的集合。
js数组更加类似java的容器。
长度可变,元素类型也可以不同!
数组长度随时可变!
随时可以修改!
(length属性)常用方法:
push、popshift、unshiftsplice、sliceconcat、join、sort、reverse、filter等,第三讲:
3.2Object,什么是对象,其实就是一种类型,即引用类型,而对象的值就是引用类型的实例。
在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起。
我们目前为止大多数引用类型都是Object类型的实例,Object也是ECMAScript中使用最多的一种类型(就像java.lang.Object一样,Object类型是所有它的实例的基础)。
Object类型的创建方式创建Object类型有两种,一种是使用new运算符,一种是字面量表示1.使用new运算符创建Object2.使用字面量的方式创建ObjectvarStudent=newObject();varStudent=Student.name=张三;name:
张三,age:
31;在实际开发过程中,我们更喜欢字面量的声明方式。
因为它清晰,语法代码少,而且给人一种封装的感觉,字面量也是向函数传递大量可选参数的首选方式。
对于Object类型应用forin枚举循环,学习目标,-了解函数的基本概念-函数的定义方式-函数的参数-this,第四讲:
函数,第四讲:
4.1初识函数,Function类型,即函数的类型。
一个典型的JavaScript函数定义如下:
function函数名称(参数表)函数执行部分:
注意:
参数列表直接写形参名即可,不用写var!
return语句:
return返回函数的返回值并结束函数运行函数也可以看做数据来进行传递,第四讲:
4.2定义函数,三种定义函数的方式:
function语句形式函数直接量形式通过Function构造函数形式定义函数,比较三种方式定义的区别,第四讲:
4.3Arguments对象,ECMAScript函数不介意传递进来多少参数,也不会因为参数不统一而错误,实际上函数体内可以通过arguments对象来接受传递进来的参数。
-arguments对象的length属性可以得到参数的数量PS:
我们可以利用length这个属性来智能判断有多少参数,然后把参数进行合理的应用,比如,要实现一个加运算,将所有传进来的数字累加,而数字个数又不确定,第四讲:
4.3Arguments对象,ECMAScript函数不介意传递进来多少参数,也不会因为参数不统一而错误,实际上函数体内可以通过arguments对象来接受传递进来的参数。
-arguments对象的length属性可以得到参数的数量PS:
我们可以利用length这个属性来智能判断有多少参数,然后把参数进行合理的应用,比如,要实现一个加运算,将所有传进来的数字累加,而数字个数又不确定,学习目标,-什么是正则表达式-创建正则表达式-获取控制-常用的正则,第五讲:
正则表达式,第五讲:
5.1正则表达式,什么是正则表达式正则表达式(regularexpression)是一个描述字符模式的对象,ECMAScript的RegExp类表示正则表达式,而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。
正则表达式主要用来验证客户端的输入数据,用户填完表单单击按钮之后,表单就会被发送到服务器,在服务器端通常会用PHP,ASP.NET等服务器脚本对其进行进一步处理,可以节约大量的服务器端的系统资源,并且提供更好的用户体验。
创建正则表达式创建正则表达式和创建字符串类似,创建正则表达式提供了两种方法,一种事采用new运算符,另一种是采用字面量的方式。
varReg=newRegExp(hello);/第一个参数字符串varReg=newRegExp(hello,gi);/第二个参数可选模式修饰符varReg=/hello/;/直接使用两个反斜杠varReg=/hello/gi;/在第二个斜杠后面加上模式修饰符,第五讲:
5.2RegExp对象的方法,RegExp对象的方法RegExp对象包含两个方法,test()和exec(),功能基本相似,用于测试字符串匹配,test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值,如果存在则返回true,不存在则返回false.exec()方法执行成功,则返回包含该查找字符串的相关信息数组,如果执行失败,则返回Null.,第五讲:
5.5正则表达式元字符,第五讲:
5.5正则表达式元字符,简单的电子邮箱验证:
varmail=/(w.-+)(w.-+).(w2,4)$/;,第五讲:
5.4正则表达式的静态属性,第五讲:
5.3字符串的正则表达式方法,使用字符串的正则表达式方法除了test()和exec方法,string对象也提供了3个使用正则表达式的方法。
学习目标,-DOM介绍-查找元素-DOM节点-节点操作,第六讲:
DOM基础,第六讲:
6.1DOM基础,什么是DOMDOM(DocumentObjectModel)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。
DOM描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。
DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式DOM介绍DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。
节点加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构。
DOM将这种树型结构理解为由节点组成,从上图的树型结构,我们理解几个概念,html标签没有父辈,没有兄弟,所以html标签为根标签。
head标签是html子标签,meta和title标签之间是兄弟关系。
如果把每个标签当作一个节点的话,那么这些节点组合成了一棵节点树。
html,head,body,title,meta,h1,p,ul,li,li,li,第六讲:
6.2DOM基础,节点种类:
元素节点、文本节点、属性节点查找元素W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作。
当我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了,而通过这个节点对象,我们可以访问它的一系列属性,node节点属性节点可以分为元素节点、属性节点和文本节点,而这些节点又有三个非常有用的属性,分别为:
nodeName、nodeType和nodeValue。
层次节点节点的层次结构可以划分为:
父节点与子节点、兄弟节点这两种。
当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点。
第六讲:
6.4节点操作,第七讲:
事件操作,JavaScript事件模型:
内联模型、脚本模型。
内联模型这种模型是最传统接单的一种处理事件的方法。
在内联模型中,事件处理函数是HTML标签的一个属性,用于处理指定事件。
/注意单双引号,脚本模型由于内联模型违反了HTML与JavaScript代码层次分离的原则。
为了解决这个问题,我们可以在JavaScript中处理事件。
这种处理方式就是脚本模型。
varinput=document.getElementsByTagName(input)0;input.onclick=function()/匿名函数执行alert(Lee);,第七讲:
事件处理函数,JavaScript可以处理的事件类型为:
鼠标事件、键盘事件、HTML事件。
第七讲:
事件处理函数,键盘事件,第七讲:
事件处理函数,第七讲:
事件对象,事件对象,我们一般称作为event对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的。
获取事件对象的两种方式/通过arguments获取input.onclick=function()alert(arguments0);/MouseEvent,鼠标事件对象;/通过参数接收input.onclick=function(evt)vare=evt|window.event;/实现跨浏览器兼容获取event对象alert(e);,第七讲:
事件对象,event的对象的属性,THANKYOU,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScript 基础