JavaScript jQuery程序设计基础_第1页
JavaScript jQuery程序设计基础_第2页
JavaScript jQuery程序设计基础_第3页
JavaScript jQuery程序设计基础_第4页
JavaScript jQuery程序设计基础_第5页
已阅读5页,还剩643页未读 继续免费阅读

下载本文档

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

文档简介

JavaScript简介JavaScript简述

编写JavaScript的工具

JavaScript在HTML中的使用

JavaScript基本语法

JavaScript简述JavaScript的起源JavaScript的主要特点JavaScript的应用JavaScript是Web页面中的一种脚本编程语言,也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译,而是直接嵌入在HTML页面中,把静态页面转变成支持用户交互并响应相应事件的动态页面。源代码编译编译型语言解释型语言执行解释器源代码输出输出LiveScriptLiveScriptJavaScriptJavaScriptJScriptJScript++JavaScript的起源JavaScript的主要特点基于对象事件驱动跨平台安全性解释性JavaScript特点

JavaScript的应用验证用户输入的内容动画效果窗口的应用应用Ajax技术实现搜索提示编写JavaScript的工具DreamweaverCS6JavaScript在HTML中的使用在页面中直接嵌入JavaScript链接外部JavaScript文件作为标签的属性值使用在HTML文档中可以使用<script>…</script>标记将JavaScript脚本嵌入到其中。<html><head><title>JavaScript简介</title><script>......</script></head><body></body></html><html><head><title>JavaScript简介</title></head><body><script>......</script></body></html>在页面中直接嵌入JavaScript<script>…</script><scripttype="text/javascript">type属性语法格式languagedefersrctype<script>标签的4个属性指定使用的是JavaScript脚本用于指定使用的脚本类型指定外部脚本文件的路径实例01编写第一个JavaScript程序,在Dreamweaver工具中直接嵌入JavaScript代码,在页面中输出“我喜欢学习JavaScript”。运行结果<scripttype="text/javascript"src="index.js"></script><scripttype="text/javascript"src="D:/Js/index.js"></script>

相对路径绝对路径链接外部JavaScript文件<scripttype="text/javascript"src="javascript.js"></script>语法格式

外部JavaScript文件路径实例02在HTML文件中调用外部JavaScript文件,运行时在页面中显示对话框,对话框中输出“我喜欢学习JavaScript”。运行结果<scripttype="text/javascript">alert("我喜欢JavaScript");</script>2.在<script>标签内部不要存在其他的JavaScript代码。JavaScript文件

1.外部JavaScript文件中只能包含JavaScript代码,不能包含HTML和<script>标签。3.在链接外部JavaScript文件时</script>结束标签不能省略。<scripttype="text/javascript"src="test.js">alert("我喜欢JavaScript");</script><scripttype="text/javascript"src="test.js">不会执行,没有意义三个注意在HTML文档中可以在<a>标签、<input>标签中使用JavaScript脚本作为它们的属性值。

<ahref="javascript:alert('你好JavaScript')">测试</a>作为标签的属性值使用<inputtype="button"value="测试"onclick="alert('你好JavaScript

')"/>通过“javascript:”调用与事件结合调用JavaScript基本语法执行顺序大小写敏感空格与换行每行结尾的分号可有可无注释

JavaScript程序按照在HTML文件中出现的顺序逐行执行。alert("你好JavaScript");document.write("网页特效");先执行后执行在输入语言的关键字、函数名、变量时,都必须采用正确的大小写形式。HTML不区分大小写

JavaScript区分大小写

<br/>alert(123456);执行顺序大小写敏感<BR/>Alert(123456);

在JavaScript中会忽略程序中的空格、换行和制表符。

document.write(111);alert(222);document.write(111)alert(222)document.write(111);alert(222)a=123;b=456;a=123;b=456;每行结尾的分号可有可无空格与换行注释就是向文件代码中添加的一些说明性的文字,或者对代码进行暂时屏蔽。document.write("第一行输出<br>");//document.write("不会输出");document.write("第二行输出");/*document.write("不会输出<br>");document.write("不会输出");*/第一行输出

第二行输出输出

不会执行不会执行注释两种注释

/////*...*//*...*/单行注释多行注释document.write("综艺娱乐"); //输出一行文字//输出两行文字document.write("快乐大本营<br>");document.write("我是歌手");document.write("综艺娱乐");//Document.write("体育竞技");document.write("奔跑吧兄弟");注释的两个作用对代码进行解释和说明对代码进行调试总结JavaScript入门什么是JavaScriptDreamweaverCS6简介在HTML中使用JavaScript的方法JavaScript的基本语法JavaScript语言基础数据类型常量和变量运算符和表达式JavaScript基本语句函数数据类型数值型字符串型布尔型特殊数据类型数值型数据

十进制八进制十六进制浮点型数据特殊值Infinity特殊值NaN数值型在JavaScript程序中,十进制的整数是一个由0~9组成的数字序列。06-2100所谓十六进制数据,是以“0X”或“0x”开头,其后跟随十六进制的数字序列。0xff0X1230xCAFE911

十进制数字十六进制数字十进制十六进制10……A(a)11……B(b)12……C(c)13……D(d)14……E(e)15……F(f)0……01……12……2......9……9八进制数据以数字0开头,其后跟随一个数字序列,这个序列中的每个数字都在0和7之间(包括0和7)。070366分别输出数字123不同进制的输出结果。实例01运行结果八进制数字八进制浮点型数据

1.256.9963.236浮点型数据传统记数法科学记数法6e+33.12e111.234E-12

在科学记数法中,e(或E)后面的整数表示10的指数次幂,因此,这种记数法表示的数值等于前面的实数乘以10的指数次幂。输出科学记数法表示的浮点数。实例02运行结果如果一个数值超出了JavaScript所能表示的最大值的范围,JavaScript就会输出Infinity;如果一个数值超出了JavaScript所能表示的最小值的范围,JavaScript就会输出-Infinity。特殊值Infinity

JavaScript中还有一个特殊的数值NaN(NotaNumber的简写),即“非数字”。特殊值NaN0/0NaN1/0Infinity-1/0-Infinity字符串是由0个或多个字符组成的序列,它可以包含大小写字母、数字、标点符号或其他字符,也可以包含汉字。程序中的字符串型数据是包含在单引号或双引号中的。'你好JavaScript''mingrisoft@'字符串型空字符串不包含任何字符,也不包含任何空格,用一对引号表示,即""或''。"""你好JavaScript"'abc"efg''你好"JavaScript"'"I'mlegend""Youcancallme'Tom'!"由单引号定界的字符串中可以含有双引号,由双引号定界的字符串中也可以含有单引号。包含字符串的引号必须匹配。'你好JavaScript""你好JavaScript'"字符串是包含在单引号'或双引号"中的""字符串是包含在单引号\'或双引号\"中的"

JavaScript中的转义字符是“\”,通过转义字符可以在字符串中添加不可显示的特殊字符(例如\n,\t),或者防止引号匹配混乱的问题(\'、\")。引号匹配混乱转义字符描述转义字符描述\b退格\v垂直制表符\n换行符\r回车符\t水平制表符,Tab空格\\反斜杠\f换页\OOO八进制整数,范围000~777\'单引号\xHH十六进制整数,范围00~FF\"双引号\uhhhh十六进制编码的Unicode字符在document.write()语句中使用转义字符时,只有将其放在格式化文本块中才会起作用,即脚本必须放在<pre></pre>标签内。

分别定义四个字符串并输出。实例03运行结果布尔数据类型只有两个值,一个是true(真),一个是false(假),它说明了某个事物是真还是假。布尔值通常用于JavaScript的控制结构。varn=1;document.write(n==1);truevarn=1;if(n==1){document.write("n和1相等");}else{

document.write("n和1不相等");}n和1相等布尔型未定义值就是undefined,表示变量还没有赋值(如vara;)。

JavaScript中的关键字null是一个特殊的值,它表示为空值,用于定义空的或不存在的引用。特殊数据类型未定义值空值(null)特殊数据类型未定义值空值常量和变量常量变量

常量变量123"功夫JavaScript"true数值常量字符串常量布尔常量a10两个基本特征变量名变量值变量是指程序中一个已经命名的存储单元。变量名变量值变量为什么要使用变量变量的命名a1_nameStr_13xa+var学习使用变量

变量的命名变量的赋值变量的声明变量的类型字母:a~z、A~Z下划线:_首字符数字:0~9字母:a~z、A~Z下划线:_其他字符不能包含空格或加号、减号等符号。不能使用JavaScript中的关键字。abstractcontinuefinallyinstanceofprivatethisbooleandefaultfloatintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticvarcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwith

JavaScript关键字是指在JavaScript语言中有特定含义,成为JavaScript语法中一部分的那些字。

JavaScript变量由关键字var声明。语法格式

varvariablename;varusername;vara,b,c;变量名变量的声明变量的赋值varlesson="功夫JavaScript";在声明变量的同时使用等于号(=)对变量进行初始化赋值。在声明变量之后再对变量进行赋值。varlesson;lesson="功夫JavaScript";varname="张三";document.write(NAME);正确的程序

varname="张三";document.write(name);(1)如果只是声明了变量,并未对其赋值,则其值默认为undefined。(2)可以使用var语句重复声明同一个变量,也可以在重复声明变量时为该变量赋一个新值。使用变量时要严格区分字母的大小写定义一个未赋值的变量a和一个进行重复声明的变量b,并输出这两个变量的值。实例04运行结果在JavaScript中的变量必须要先定义后使用,没有定义过的变量不能直接使用。变量的类型是指变量的值所属的数据类型,可以是数值型、字符串型和布尔型等,因为JavaScript是一种弱类型的程序语言,所以可以把任意类型的数据赋值给变量。varnum=100;varnum="有一条路,走过了总会想起";变量的类型

document.write(a);将一个变量的值传递给另一个变量,并输出这两个变量的值。实例05运行结果什么是运算符和表达式运算符的应用表达式中的类型转换什么是运算符和表达式什么是运算符什么是表达式什么是运算符按运算符功能

按操作数个数

单目运算符

双目运算符

三目运算符

算术运算符

字符串运算符比较运算符

赋值运算符

逻辑运算符

条件运算符

其他运算符

运算符也称为操作符,它是完成一系列操作的符号。b=a+10什么是表达式表达式是一个相对的概念,在表达式中可以含有若干个子表达式,而且表达式中的一个常量或变量都可以看作是一个表达式。z=(x+2)-(y+3)表达式

表达式

表达式

表达式是运算符和操作数组合而成的式子。a+b5+6n=m-10按运算结果

算术表达式

字符串表达式

逻辑表达式

运算符的应用算术运算符01字符串运算符02比较运算符03赋值运算符04逻辑运算符05条件运算符06其他运算符07运算符优先级08算术运算符用于在程序中进行加、减、乘、除等运算。算术运算符++--**//%%++++----加运算符减运算符乘运算符除运算符求模运算符自增运算符自减运算符document.write(4+6);10document.write(7-2);document.write(7*3);document.write(12/3);document.write(7%4);52143i=1;j=i++;i=1;j=++i;j=1i=2j=2i=2相当于:j=i;i++;先取值,后自增相当于:++i;j=i;先自增,后取值在页面中定义两个变量,再通过算术运算符对两个变量进行不同的运算并输出结果。实例01运行结果document.write(1/0);Infinitydocument.write(0/0);NaN字符串运算符是用于两个字符串型数据之间的运算符,它的作用是将两个字符串连接起来。字符串运算符

+++=+=连接两个字符串连接两个字符串,并将结果赋给第一个字符串document.write("功夫"+"JavaScript");功夫JavaScript

varname="功夫";name+="JavaScript";document.write(name);相当于varname="功夫";name=name+"JavaScript";document.write(name);将多个字符串进行连接,并将结果显示在页面中。实例02运行结果

JavaScript脚本会根据操作数的数据类型来确定表达式中的“+”是算术运算符还是字符串运算符。document.write("12"+34)1234varstr;str+="功夫";str+="JavaScript";document.write(str);正确的程序

varstr="";str+="功夫";str+="JavaScript";document.write(str);<<<=<=>>>=>===========!=!=!==!==比较运算符比较运算符对操作数进行比较,然后返回一个布尔值true或false。小于小于等于大于大于等于等于绝对等于不等于document.write(1<6);truedocument.write(7>10);document.write(3>=6);document.write("17"==17);document.write("17"===17);falsefalsetruefalse不绝对等于document.write(10<=10);truedocument.write("17"!=17);document.write("17"!==17);falsetruevara=10;document.write(a=10);正确的程序

10vara=10;document.write(a==10);应用比较运算符实现两个数值之间的大小比较。实例03运行结果document.write("abc"=="abc");document.write("ac"<"bc");document.write("abcd">"abc");结果都为true逐个比较字符的ASCII码值,ASCII码值大的字符串大。ASCII码值都相等,字符数多的字符串大。字符串的比较

赋值运算符==a+=2a=a+2复合赋值运算

a-=2a=a-2a*=2a=a*2a/=2a=a/2a%=2a=a%2简单赋值运算

a=2str="mr"赋值运算符

简单赋值运算符

复合赋值运算符

+=+=-=-=*=*=/=/=%=%=应用赋值运算符实现两个数值之间的运算。实例04运行结果逻辑运算符逻辑运算符用于对一个或多个布尔值进行逻辑运算。true&&truetruetrue&&falsefalse&&false&&&&||||!!falsetrue||

truetruetrue||falsefalse||falsefalse!truetrue!falsefalse逻辑与运算符逻辑或运算符逻辑非运算符应用逻辑运算符对逻辑表达式进行运算并输出结果。实例05运行结果条件运算符条件运算符是JavaScript支持的一种特殊的三目运算符。表达式?结果1:结果2语法格式truetruefalsefalsevara=10;varb=10;alert(a==b?"相等":"不相等");相等使用条件运算符实现一个简单的判断功能。实例06运行结果其他运算符逗号运算符用于将多个表达式排在一起,整个表达式的值为最后一个表达式的值。逗号运算符typeof运算符typeof运算符用于判断操作数的数据类型。数据类型返回值数据类型返回值数值型numbernullobject字符串型string对象object布尔型boolean函数functionundefinedundefinedtypeof操作数语法格式应用typeof运算符分别判断4个变量的数据类型。实例07运行结果通过new运算符可以用来创建一个新的对象实例。Object1=newObject;Array2=newArray();Date3=newDate("August82008");new运算符对象实例名称

=new对象类型(参数)对象实例名称=new对象类型语法格式运算符优先级使用()来改变运算符的优先级。实例08运行结果结合性左结合

右结合

a+b+c(a+b)+c除了赋值、条件和单目运算符赋值运算符、条件运算符a=b=1a=(b=1)表达式中的类型转换类型转换为数值型undefinedNaNnull0逻辑型若其值为true,则结果为1;若其值为false,则结果为0字符串型

若内容为数字,则结果为相应的数字,否则为NaN其他对象NaN类型转换为布尔型undefinedfalsenullfalse数值型若其值为0或NaN,则结果为false,否则为true字符串型

若其长度为0,则结果为false,否则为true其他对象true类型转换为字符串型undefined"undefined"null"null"数值型NaN、0或者与数值相对应的字符串逻辑型若其值true,则结果为"true",若其值为false,则结果为"false"其他对象若存在,则其结果为toString()方法的值,否则其结果为"undefined"根据不同数据类型之间的转换规则输出以下表达式的结果:100+"200"、100-"200"、true+100、true+"100"、true+false和"a"-100。实例09运行结果if语句switch语句if语句简单if语句if…else语句if…elseif语句if语句的嵌套简单if语句

简单if语句是if语句中最简单的一种形式。if(表达式){语句}简单if语句的执行流程图条件表达式条件为真时执行的语句语法格式

判断考试成绩是否及格

varscore=85;if(score>=60){alert("及格");}if(分数大于等于60分){考试及格了}vara=20;if(a=10){alert("a的值是10");}正确的程序

vara=20;if(a==10){alert("a的值是10");}当要执行的语句为单一语句时,其两边的大括号可以省略。应用简单if语句获取3个数中的最大值。

实例01运行结果

if…else语句是if语句的标准形式,在if语句简单形式的基础之上增加一个else从句。if…else语句if(表达式){

语句1}else{

语句2}if...else语句的执行流程图条件表达式语法格式

条件为真时执行的语句条件为假时执行的语句判断考试成绩是及格还是不及格

varscore=85;if(score>=60){alert("及格");}else{alert("不及格");}if(分数大于等于60分){考试及格了}else{

考试不及格}应用if…else语句判断2010年2月份的天数。实例02运行结果语法格式

这种形式可以进行更多的条件判断,不同的条件对应不同的语句。if...elseif语句if(表达式1){

语句1}elseif(表达式2){

语句2}

…elseif(表达式n){

语句n}else{

语句n+1}注意:else和if之间有一个空格if...elseif语句的执行流程图if…elseif语句在实际中的应用也是十分广泛的,例如,可以通过该语句来实现一个时间问候语的功能。即获取系统当前时间,根据不同的时间段输出不同的问候内容。实例03运行结果在if语句的从句部分可以包含另外一个完整的if语句。if语句的嵌套语法格式

if(表达式1){if(表达式2){语句1}else{语句2}}else{if(表达式3){语句3}else{语句4}}if(表达式1){if(表达式2){语句1}else{语句2}}假设某工种的男职工60岁退休,女职工55岁退休,应用if语句的嵌套来判断一个58岁的女职工是否已经退休。实例04运行结果switch语句switch是典型的多路分支语句,它根据一个表达式的值,选择不同的分支执行。switch(表达式){case常量表达式1:

语句1;break;case常量表达式2:

语句2;break;…case常量表达式n:

语句n;break;default:

语句n+1;break;}语法格式

任意表达式或变量任意常量表达式要执行的语句退出switch语句注意:这里是冒号,不是分号用于退出switch语句,不能省略switch语句的执行流程图

case后面常量表达式的数据类型必须与表达式的数据类型相同,否则匹配会全部失败,而去执行default语句中的内容。

default语句可以省略。在表达式的值不能与任何一个case语句中的值相匹配的情况下,JavaScript会直接结束switch语句,不进行任何操作。在switch语句中漏写break语句。应用switch语句判断当前是星期几。实例05运行结果循环语句while语句do…while语句for语句循环语句的嵌套while语句

while循环语句也称为前测试循环语句,它是利用一个条件来控制是否要继续重复执行这个语句。while(表达式){

语句}while循环语句的执行流程图

循环条件

真循环体

假循环条件循环体语法格式

vari=1;while(i<=2){alert(i);}循环条件永远为真,形成死循环在使用while语句时,一定要保证循环可以正常结束,即必须保证条件表达式的值存在为false的情况,否则将形成死循环。vari=1;while(i<=2){alert(i);

i++;}正确的程序

使用while语句计算1+2+…+100的和。运行结果如下图所示。

实例01

do…while循环语句也称为后测试循环语句,它也是利用一个条件来控制是否要继续重复执行这个语句。do…while语句do{

语句}while(表达式);do...while语句的执行流程图

循环条件

真假循环体

分号可有可无,建议书写循环条件循环体语法格式

使用do…while语句计算1+2+…+100的和。运行结果如下图所示。

实例02语法格式

for循环语句也称为计次循环语句,一般用于循环次数已知的情况,在JavaScript中应用比较广泛。for语句for(初始化表达式;条件表达式;迭代表达式){

语句}for循环语句的执行流程图

循环条件

真初始化语句假循环体

改变循环变量的值

初始化语句循环条件循环体改变循环变量的值计算100以内所有奇数的和。运行结果如下图所示。实例03用嵌套的for循环语句输出乘法口诀表。运行结果如下图所示。实例04在一个循环语句的循环体中也可以包含其他的循环语句,这称为循环语句的嵌套。上述3种循环语句(while循环语句、do…while循环语句和for循环语句)都是可以互相嵌套的。循环语句的嵌套跳转语句continue语句break语句

语法格式

continue;

continue语句只能应用在while、for、do…while语句中。continue语句用于跳过本次循环,并开始下一次循环。continue语句当使用continue语句跳过本次循环后,如果循环条件的结果为false,则退出循环,否则继续下一次循环。计算1~100以内所有5的倍数的和。运行结果如下图所示。

实例05在循环语句中,break语句用于跳出循环。语法格式

break;break方法

break语句通常用在for、while、do…while或switch语句中。在嵌套的循环语句中,break语句只能跳出当前这一层的循环语句,而不是跳出所有的循环语句。使用try...catch语句处理异常

try{somestatements;}catch(exception){somestatements;}finally{somestatements;}

语法格式

使用try...catch...finally语句处理异常,当在程序中输入了不正确的方法名时,将弹出在catch区域中设置的异常提示信息,并且最终弹出finally区域中的信息提示。实例Error对象Error对象的属性name

message将异常提示信息放置在弹出的提示对话框中,其中包括异常的具体信息以及异常类型的字符串。实例

使用throw语句抛出异常thrownewError("somestatements");

语法格式

使用throw语句抛出程序中的异常。在代码中首先定义一个变量赋给的值为1与0的商,此变量的结果为无穷大,即Infinity,如果希望自行检验除零的异常,可以使用throw语句抛出异常。实例02函数的调用03函数的参数04函数的返回值05嵌套函数06递归函数变量的作用域07内置函数08定义函数的其他方法09函数的定义01函数的定义

函数是定义一次,可以调用或执行多次的一段JavaScript代码。function函数名([参数1,参数2,……]){

语句

[return返回值]}定义函数的关键字函数的名称函数体函数的返回值函数的参数语法格式

functionhello(){document.write("你好");}functionaccount(price,number){varsum=price*number;returnsum;}没有参数的函数

有参数的函数

functionhello(){document.write("你好");}functionhello(){

alert("你好");}在同一页面中,函数名必须唯一函数的调用函数的简单调用在事件响应中调用函数通过链接调用函数函数名(传递给函数的参数1,传递给函数的参数2,……);

语法格式

函数的简单调用在事件响应中调用函数触发事件调用和执行函数在页面中产生响应事件处理过程通过链接调用函数在<a>标签中的href属性中使用“javascript:函数名()”格式来调用函数,当用户单击这个链接时,相关函数将被执行。函数的参数function函数名(形参1,形参2,……){

函数体}函数名(实参1,实参2,……)functionshow(content){alert(content);}

show("我是明星");调用函数

形参实参定义函数参数的语法格式

调用函数语法格式

我是明星输出

函数的参数

形参实参定义函数时指定的参数调用函数时实际传递的值

函数参数的使用。本实例主要用于演示如何使用函数的参数。实例01运行结果函数的返回值在JavaScript的函数中,可以使用return语句为函数返回一个值。

return表达式;函数返回值的关键字functionhello(){return"你好";}alert(hello());调用函数并输出varstr=hello();alert(str);把函数的返回值赋给变量并输出语法格式

你好输出

函数返回值的简单应用。本实例主要通过函数的返回值判断两个数的大小。实例02运行结果嵌套函数函数的嵌套定义函数的嵌套调用functionoutFun(){functioninFun(x,y){alert(x+y);}inFun(1,5);}outFun();函数的嵌套定义就是在函数内部再定义其他的函数。

6函数的嵌套定义functiona(){alert("功夫JavaScript");}functionb(){

a();}b();在JavaScript中,允许在一个函数的函数体中对另一个函数进行调用。功夫JavaScript函数的嵌套调用输出输出

虽然在JavaScript中允许函数的嵌套定义,但它会使程序的可读性降低。

嵌套函数的应用。本实例主要通过函数的嵌套调用计算3个参数的平均值。实例03运行结果递归函数function函数名(参数1){

函数名(参数2);}递归函数只在特定的情况下使用,比如处理阶乘问题。

自然数的阶乘语法格式

所谓递归函数就是函数在自身的函数体内调用自身。

n!=(n-1)!*n10!=1*2*…*109!=1*2*…*91!=1……2!=1*210!=9!*109!=8!*91!=1……2!=1!*2f(n)=f(n-1)*n递归函数的应用,本实例主要使用递归函数计算10!的值。实例04运行结果变量的作用域全局变量和局部变量

变量的优先级

嵌套函数中变量的作用范围

全局变量和局部变量变量的优先级变量根据作用域分为

全局变量局部变量定义在所有函数之外的变量,作用范围是该变量定义后的所有代码定义在函数体内的变量,只有在该函数中,且该变量定义后的代码中才可以使用这个变量

如果在函数体中定义了一个与全局变量同名的局部变量,那么该全局变量在函数体中将不起作用。嵌套函数中变量的作用范围在嵌套函数中,外部函数中的变量可以在该函数体以及嵌套的函数体中起作用,而嵌套函数中的变量不能在父级或父级以上的函数体中起作用。内置函数数值处理函数字符串处理函数内置函数数值处理函数字符串处理函数parseInt()

parseFloat()isNaN()eval()escape()isFinite()unescape()encodeURI()decodeURI()数值处理函数parseInt()函数

该函数主要将首位为数字的字符串转换成数字,如果字符串不是以数字开头,那么将返回NaN。语法格式

parseInt(string,[n])转换为整型的字符串指出字符串中的数据是几进制的数据该函数主要将首位为数字的字符串转化成浮点型数字,如果字符串不是以数字开头,那么将返回NaN。parseFloat()函数语法格式

parseFloat(string)转换为浮点型的字符串该函数主要用于检验某个值是否为NaN。isNaN()函数语法格式

isNaN(num)需要验证的数字该函数主要用于检验其参数是否有限。

isFinite()函数语法格式

isFinite(num)需要验证的数字如果参数num为NaN,函数返回值为true,如果参数num不是NaN,函数返回值为false。返回值如果参数num是有限数字,函数返回值为true,如果参数num是NaN或无穷大,函数返回值为false

。返回值字符串处理函数eval()函数

该函数的功能是计算字符串表达式的值,并执行其中的JavaScript代码。语法格式

eval(string)需要计算的字符串

该函数用于将一些特殊字符(不包括字母和数字字符以及*、@、-、_、+、.和/)进行编码,它可以将这些特殊字符转换为“%XX”格式的数字。escape()函数语法格式

escape(string)需要进行编码的字符串

该函数主要用于对应用escape()函数编码后的字符串进行解码。它可以将字符串中“%XX”格式的数字转换为字符。unescape()函数语法格式

unescape(string)需要进行解码的字符串该函数主要用于将URI字符串进行编码。encodeURI()函数语法格式

encodeURI(url)需要编码的URI字符串decodeURI()函数

该函数主要用于对已编码的URI字符串进行解码。语法格式

decodeURI(url)需要解码的URI字符串定义函数的其他方法Function()构造函数定义匿名函数var变量名

=function(参数1,参数2,……){

函数体};语法格式

定义匿名函数定义一个匿名函数,获取从1到给定参数之间的所有3的倍数。实例05运行结果var变量名=newFunction("参数1","参数2",……"函数体");语法格式

Function()构造函数

Function()构造函数中的所有参数和函数体都必须是字符串类型,因此一定要用双引号或单引号引起来。varmyFun=newFunction(x,document.write(x));varmyFun=newFunction("x","document.write(x)");总结JavaScript语言基础数据类型常量和变量运算符和表达式JavaScript基本语句函数自定义对象对象简介自定义对象的创建对象访问语句对象简介什么是对象对象的属性和方法JavaScript对象的种类人身高

体重

吃饭

睡觉

用户用户名

密码

注册

登录

变量函数什么是对象对象的属性和方法对象名.属性名;

varname=用户.用户名;varpwd=用户.密码;

获取或设置属性语法

获取属性的值

对象名["属性名"];

varname=用户["用户名"];varpwd=用户["密码"];

对象的两个要素

属性方法对象中的变量对象中的函数对象的属性对象名.方法名(参数);

用户.注册();用户.登录();调用方法语法

调用对象的方法

用户.用户名="mr";用户.密码="mrsoft";

设置属性的值

用户["用户名"]="mr";用户用户["密码"]="mrsoft";

对象的方法在JavaScript中,对象就是属性和方法的集合,这些属性和方法也叫做对象的成员。JavaScript对象的种类JavaScript对象

自定义对象内置对象浏览器对象Math、Date、Arraydocument、window自定义对象的创建直接创建自定义对象通过自定义构造函数创建对象通过Object对象创建自定义对象var对象名={属性名1:属性值1,属性名2:属性值2,属性名3:属性值3......}

varUser={name:"mr",pwd:"mrsoft"}语法格式

创建对象User

直接创建自定义对象document.write(U);document.write(User.pwd);输出属性值

document.write(User['name']);document.write(User['pwd']);通过自定义构造函数创建对象functionDate(){

……}

Date对象构造函数

vardate=newDate();创建Date对象

什么是构造函数

构造函数

创建的对象

functionUser(name,pwd){=name;this.pwd=pwd;}

varuser1=newUser("mr","mrsoft");创建对象实例

定义构造函数

应用构造函数创建一个球员的对象Player,然后创建对象实例,通过对象实例获取对象中的属性并输出。实例01运行结果functionUser(name,pwd){=name;this.pwd=pwd;this.showUserInfo=showUserInfo;}functionshowUserInfo(){document.write("用户名:"++"<br>");document.write("密码:"+this.pwd+"<br>");}varuser1=newUser("mr","mrsoft");user1.showUserInfo();定义对象的方法

调用方法

创建对象实例

定义方法使用的函数

初始化对象的方法

用户名:mr

密码:mrsoft输出

functionUser(name,pwd){=name;this.pwd=pwd;this.showUserInfo=function(){document.write("用户名:"++"<br>");document.write("密码:"+this.pwd+"<br>");}}varuser1=newUser("mr","mrsoft");user1.showUserInfo();应用构造函数创建一个图书对象Book,然后创建对象实例,通过对象实例调用对象中的方法。实例02运行结果语法格式

=value要添加的属性名或方法名添加属性的值或执行方法的函数构造函数名prototype属性是JavaScript中所有函数都有的一个属性。该属性可以向对象中添加属性或方法。prototype属性实例03应用构造函数创建一个圆的对象Circle,应用prototype属性向对象中添加属性和方法,实现计算圆的周长和面积的功能。运行结果obj=newObject([value])varuser=newObject(); ="mr";user.pwd="mrsoft";document.write("用户名:"++"<br>");document.write("密码:"+user.pwd+"<br>");赋值为对象的变量名称任意一种基本数据类型用户名:mr

密码:mrsoft输出

语法格式

通过Object对象创建自定义对象Object对象是JavaScript中的内部对象,它提供了对象的最基本功能。varuser=newObject(); ="mr";user.pwd="mrsoft";user.showUserInfo=function(){document.write("用户名:"++"<br>");document.write("密码:"+this.pwd+"<br>");};user.showUserInfo();定义对象的方法

用户名:mr

密码:mrsoft输出

varmyObj1=newObject(10);varmyObj2=newObject("你好JavaScript");varmyObj3=newObject(true);创建Object对象时指定参数

实例04使用Object对象创建一个图书对象Book,通过调用图书对象中的方法获取图书信息。运行结果对象访问语句for...in循环语句with语句for…in循环语句语法格式for(变量in对象){

语句}存储对象的所有属性名指定要遍历属性的对象指定循环体for…in语句用来遍历对象的每一个属性,每次都将属性名作为字符串保存在变量里。应用for…in语句遍历对象的属性,在输出属性值时一定要使用数组的形式(对象名[属性名])进行输出,而不能使用“对象名.属性名”这种形式。实例05应用构造函数创建图书对象Book,然后创建对象实例,应用for…in循环语句输出对象中的所有属性和值。运行结果with语句语法格式with(对象名称){

语句}要执行的语句,可直接引用对象的属性名或方法名要操作的对象名称with语句被用于在访问一个对象的属性或方法时避免重复引用指定对象名。总结对象简介两种对象访问语句for…in语句with语句如何创建自定义对象直接创建自定义对象通过自定义构造函数创建对象

通过Object对象创建自定义对象

什么是对象对象的属性和方法常用内部对象Math对象Number对象Date对象数组对象String对象Math对象Math.成员名称访问Math对象属性或方法

Math对象中的属性

数学常量

Math对象中的方法

数学函数

属性描述属性描述E自然对数的底数(2.718281828459045)LOG2E以2为底数的e的对数(1.4426950408889633)LN22的自然对数(0.6931471805599453)LOG10E以10为底数的e的对数(0.4342944819032518)LN1010的自然对数(2.3025850994046)PI圆周率常数π(3.141592653589793)SQRT22的平方根(1.4142135623730951)SQRT1_20.5的平方根(0.7071067811865476)Math对象的属性Math.PI获取圆周率

Math.SQRT2获取2的平方根

实例01已知一个圆的半径是5,计算这个圆的周长和面积。运行结果常用方法描述abs(x)返回x的绝对值pow(x,y)返回x对y的次方min(n1,n2……)返回参数列表中的最小值max(n1,n2……)返回参数列表中的最大值ceil(x)返回大于或等于x的最小整数floor(x)返回小于或等于x的最大整数round(x)返回最接近x的整数,即四舍五入random()返回0和1之间的随机数Math对象的方法实例02生成指定位数的随机数。运行结果Number对象创建Number对象Number对象的属性Number对象的方法numObj=newNumber(value)

语法格式

创建的数字对象名可选项,创建数字对象的数字

创建Number对象varnumObj1=newNumber();varnumObj2=newNumber(0);varnumObj3=newNumber(-1);创建Number对象

该属性用于返回Number对象的最大可能值。value=Number.MAX_VALUE语法格式

存储最大可能值的变量该属性用于返回Number对象的最小可能值。value=Number.MIN_VALUE语法格式

存储最小可能值的变量Number对象的属性MAX_VALUE属性MIN_VALUE属性该属性用于返回Number对象的负无穷大的值。value=Number.NEGATIVE_INFINITY语法格式

存储负无穷大的变量该属性用于返回Number对象的正无穷大的值。value=Number.POSITIVE_INFINITY语法格式

存储正无穷大的变量NEGATIVE_INFINITY属性POSITIVE_INFINITY属性该方法可以把Number对象转换成一个字符串,并返回结果。NumberObject.toString(radix)语法格式

要操作的数字对象可选项,指定将数字值转换为字符串时的进制Number对象的方法toString()方法该方法可以把Number对象转换为本地格式的字符串。NumberObject.toLocaleString()语法格式

要操作的数字对象该方法将Number对象四舍五入为指定小数位数的数字,然后转换成字符串。NumberObject.toFixed(num)语法格式

要操作的数字对象可选项,规定保留小数的位数toLocaleString()方法toFixed()方法该方法利用科学计数法计算Number对象的值,然后将其转换成字符串。NumberObject.toExponential(num)语法格式

要操作的数字对象可选项,规定科学计数法中的小数位数toExponential()方法该方法会根据不同的情况选择定点计数法或科学计数法,然后再把转换后的数字转换成字符串。NumberObject.toPrecision(num)语法格式

要操作的数字对象可选项,规定结果中有效数字的位数toPrecision()方法1.2300.056有效数字

Date对象创建Date对象Date对象的属性Date对象的方法dateObj=newDate()创建的日期对象名dateObj=newDate(dateVal)创建的日期对象名数值或字符串dateObj=newDate(year,month,date[,hours[,minutes[,seconds[,ms]]]])完整的年份月份日期小时分钟秒数毫秒数语法格式1

语法格式2

语法格式3

创建Date对象object.constructor语法格式对象的名称varnewDate=newDate();if(newDate.constructor==Date)document.write("日期型对象");日期型对象

输出

Date对象的属性

constructor属性prototype属性constructor属性可以判断一个对象的类型,该属性引用的是对象的构造函数。Date对象的属性constructor属性语法格式

D=value要添加的属性名或方法名添加属性的值或执行方法的函数该属性可以为Date对象添加自定义的属性或方法。prototype属性varnewDate=newDate(); Dtotype.mark=newDate.getFullYear();alert(newDate.mark);2015

输出

Date对象的方法Date对象中的方法

获取日期和时间设置日期和时间转换为字符串方法说明getYear()从Date对象以两位或4位数字返回年份getFullYear()从Date对象以四位数字返回年份getMonth()从Date对象返回月份(0~11)getDate()从Date对象返回一个月中的某一天(1~31)getDay()从Date对象返回一周中的某一天(0~6)getHours()返回Date对象的小时(0~23)getMinutes()返回Date对象的分钟(0~59)getSeconds()返回Date对象的秒数(0~59)getMilliseconds()返回Date对象的毫秒(0~999)getTime()返回1970年1月1日午夜至指定时间的毫秒数获取日期和时间的方法vardate=newDate();alert("现在是:"+date.getMonth()+"月");正确的程序vardate=newDate();alert("现在是:"+(date.getMonth()+1)+"月");实例03应用Date对象中的方法输出当前的日期和时间。运行结果方法说明setYear()设置Date对象中的年份(两位或四位数字)setFullYear()设置Date对象中的年份(四位数字)setMonth()设置Date对象中月份(0~11)setDate()设置Date对象中月的某一天(1~31)setHours()设置Date对象中的小时(0~23)setMinutes()设置Date对象中的分钟(0~59)setSeconds()设置Date对象中的秒钟(0~59)setMilliseconds()设置Date对象中的毫秒(0~999)setTime()使用毫秒数设置日期和时间设置日期和时间的方法实例04应用Date对象中的方法获取当前日期距离明年元旦的天数。运行结果方法说明toString()把Date对象转换为字符串toTimeString()把Date对象的时间部分转换为字符串toDateString()把Date对象的日期部分转换为字符串toLocaleString()根据本地时间格式,把Date对象转换为字符串toLocaleTimeString()根据本地时间格式,把Date对象的时间部分转换为字符串toLocaleDateString()根据本地时间格式,把Date对象的日期部分转换为字符串转换为字符串的方法数组介绍定义数组操作数组元素数组的属性数组的方法数组介绍数组概念数组元素姓名计算机成绩郭靖80张无忌95乔峰70石中玉96杨过85元素1元素2元素3元素4元素5数组(Array)就是一组数据的集合。数组是JavaScript中用来存储和操作有序数据集的数据结构。100“abc”true……数字型数据

字符串型数据

布尔型数据

数组概念100200300……

012......数组元素

数组的下标

数组是数组元素的集合。每个数组元素都有一个下标,通过下标可以方便地引用数组元素。

数组元素定义数组定义空数组指定数组长度指定数组元素直接定义数组语法格式

arrayObject=newArray()新创建的数组对象名

vararr=newArray();arr[0]="功夫JavaScript";arr[1]="功夫PHP";arr[2]="功夫Java";varuser="明日科技";varuser=newArray();user[0]="张三";user[1]="李四";document.write(user);定义的数组对象名和已存在的变量重名使用不带参数的构造函数可以定义一个空数组,在定义空数组后再向数组中添加数组元素。定义空数组语法格式

arrayObject=newArray(size)新创建的数组对象名

vararr=newArray(3);arr[0]=1;arr[1]=2;arr[2]=3;

温馨提示

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

评论

0/150

提交评论