《Javascript入门PPT课件》由会员分享，可在线阅读，更多相关《Javascript入门PPT课件（40页珍藏版）》请在金锄头文库上搜索。
1、JAVASCRIPTJAVASCRIPT基础基础放飞梦想，成就梦想放飞梦想，成就梦想什么是什么是javascript?Javascipt是一种脚本语言，由web浏览器进行解释和执行。ECMAScriptDOMBOMJavaScriptECMAScript :核心DOM :文档对象模型BOM :浏览器对象模型怎样将怎样将Javascript应用到网页中？应用到网页中？方法一：将方法一：将javascript代码插入代码插入html文档文档部分的部分的标签中标签中例：/javascript代码alert(hello world);方法二：将方法二：将javascript代码存放在一个独立的文件。代
2、码存放在一个独立的文件。用.js作为文件的扩展名，再利用标签的src属性指向该文件。例：test.jsalert(helloworld);test.htmlJavaScript语法语法一、变量1.变量由var运算符加变量名定义。var age = 25;var mood = happy;2.变量名命名规则：第一个字符必须是字母、下划线(_)、或美元符号($);变量名中不能包含空格或标点符号（下划线(_)和$除外);变量名区分大小写;不能使用保留字、关键字为了让变量名有更好的可读性，可以在变量名中适当的插入下划线分隔，如：var my_mood= happy;二、二、javascript的注释的
3、注释/单行注释/* */多行注释注意：多行注释不能互相嵌套注意：多行注释不能互相嵌套+拼接作用当+存在于变量与字符串中间位置的时候就代表是拼接或者连接的作用+=代表什么意思var a = 1; a += 3; a = a+3;给当前这个变量增加多少三、数据类型三、数据类型1.字符串字符串(String)字符串由零个或多个字符构成，字符包括字母，数字，标点符号和空格;字符串必须放在引号里（单引号或双引号）;var mood = “happy”;var mood = happy;2.数值数值(number)var age = 25;var price = 33.25;3.布尔类型布尔类型(bool
4、ean)布尔型数据只能有两种种值true和false;var married = true;var married = false;与字符串不同，不要把布尔值用引号括起来。布尔值false与 字符串false是两回事。4.对象对象(object)Javascript是一种面向对象的语言，因此可以使用面向对象的思想来进行对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体。例如：Date日期对象Date对象用来处理日期和时间。代码：var today = new Date();var year =today.getFullYear();var month =today.getMont
5、h() + 1;var day =today.getDay();5.Array数组数组(object)我们的变量一般都只能存储一个内容 所以它其实是一个单一的容器我们的数组一般可以存一个或者是多个值 ，所以数组是一个大的容器组成部分:数组其实是由多个(键-值)所组成的一个多容器数组的索引 默认是从0开始的定义数组var arr= new Array(23,23,45,56,435);var arr2 = 23,34,546;var arr3 = new Array();arr30 = 234;arr31 = 234;6.JavaScript - null, undefinedNull在Java
6、Script中null表示什么都没有。null是一个只有一个值的特殊类型。表示一个空对象引用。var person = null;你可以设置为null来清空对象:Undefined在JavaScript中, undefined是一个没有设置值的变量。typeof一个没有值的变量会返回undefined。var person = undefined;你可以设置为undefined来清空对象:Undefined和Null的区别typeof undefined / undefinedtypeof null / objectnull = undefined / falsenull = undefine
7、d / true四、数据类型的查看和转换四、数据类型的查看和转换1.查看数据类型查看数据类型typeofvar mood = happy;alert(typeof mood);alert(typeof 95);2.转换成字符串转换成字符串var married = false;alert(married.toString(); / outputs “false”var age = 25;alert(age.toString(); /outputs “25”3.转换成数字转换成数字parseInt()转换成整数parseFloat()转换成浮点数例：var test =parseInt(“blu
8、e”); /returnsNaNvar test =parseInt(“1234blue”); /returns 1234var test =parseInt(“22.5”); /returns 22var test =parseFloat(“1234blue”); /returns 1234var test =parseFloat(“22.5”); /returns 22.54.判断变量类型判断变量类型A,判断字符串typeof(a)=stringB,判断数值typeof(a)=numberC如果是一个数值类型，但内容不是一个有效的数字，会显示NaN,判断NaNisNaN(a)D,判断变量是
9、否为空（未定义变量。或定义变量但没进行初始化就会出现）typeof(a)=undefined四、运算符四、运算符1.算术运算符算术运算符(+ - * /%)加、减、乘、除、求余，其中%是求余运算var total = (1 + 4) * 5;var i= 100;var temp = (i 20) / 2;alert(“10”+ 20) /return 1020;alert(10 + 20) /return 30;2.后增量后增量/后减量运算符后减量运算符+ ,-var i= 10;var a =i+; /i=i+ 1;alert(a);3.比较运算符比较运算符(, =, 5 );/outpu
10、tstruevar i= 100;var n = 100;alert(i= n);/outputs true;alert(i!= n);/outputs false;alert(i= n) /数据类型，值相等4.逻辑运算符逻辑运算符( &, | , !)&： 逻辑与| :逻辑或！ ：逻辑非var i= 8;alert (i5 &i 100 |i 5);/outputs false六、程序流程控制六、程序流程控制一、条件语句一、条件语句if语法：if(condition) statements1 else statement2例：if(10 5) alert(“hello world”);var
11、 i= 90;if(i 100) alert(i+ “大于100”);else if(i 80) alert(i+ “大于80”);elsealert(i+ “小于100”);课堂练习：接收学生的分数提交，用课堂练习：接收学生的分数提交，用if语句来判断学生分数的水平。语句来判断学生分数的水平。二、二、switch语句语句语法：switch(expression)case value:/statementbreak;case value:/statementbreak;default:/statement例：vari= 25;switch(i)case 25:alert(i + 等于25);b
12、reak;case 100:alert(100);break;default:alert(other);课堂练习：接收学生的分数提交，用课堂练习：接收学生的分数提交，用switch语句来判断学生分数的水平。语句来判断学生分数的水平。七、循环语句七、循环语句1.While语法：while (exp) /statements;说明：while (变量=结束值) 需执行的代码例1：var i= 1;while(i 3)alert(i);i+;课堂练习：用课堂练习：用js计算从计算从1累加到累加到100的总和。的总和。2. Dowhiledo /statements;while (condition)
13、;do 需执行的代码 while (变量=结束值)例：var i= 1;do alert(i);i+;while(i 3);3.for循环语句循环语句for(initial; expression; post-loop-expression)/statement;for (变量=开始值;变量=结束值;变量=变量+步进值) 需执行的代码例：for(var count = 1; count 11; count+)alert(count);forEach循环语句循环语句var arryAll = ;arryAll.push(1);arryAll.push(2);arryAll.push(3);arr
14、yAll.push(4);/匿名方式匿名方式arryAll.forEach(function(e)console.log(e);)function t1(arg)console.log(arg);/非匿名方式非匿名方式arryAll.forEach(t1);4. break语句和语句和continue语句语句break语句可以立即退出循环;continue语句只是退出当前循环;例：var n = 0;for(var i= 1;i 10;i+)if(i= 4)continue;n+;alert(n);例：var n = 0;for(var i=1;i 5)break;n+;alert(n);课堂
15、练习：用课堂练习：用for循环，实现循环，实现1到到100偶数数字的累加偶数数字的累加七、函数七、函数函数就是完成某个功能的一组语句，函数由关键字function +函数名+一组参数定义;函数在定义后可以被重复调用，通常将常用的功能写成一个函数，利用函数可以使代码的组织结构更多清晰。基本语法：functionfunName(arg0, arg1, argN)/statements例1：function say_hello(name,msg)alert(“hello”+ name + “:”+msg);say_hello(“david”, “how are you today?”);例2：使用r
16、eturn语句从函数返回值function sum (num1, num2)return num1 + num2;var s = sum(1, 2);alert(s);注意：注意：1.位于位于return语句之后的任何代码都永远不会执行！语句之后的任何代码都永远不会执行！2.在在JavaScript中，不一定要指定返回值！中，不一定要指定返回值！3.定义函数的参数时，如果调用函数时没有传进参数，并不会报错，但可以在函数里面判定义函数的参数时，如果调用函数时没有传进参数，并不会报错，但可以在函数里面判断一下是否有传进参数，例如可以这样判断断一下是否有传进参数，例如可以这样判断:if(variab
17、le = undefined | variable = null)variable=1;/可以给他一个默认值可以给他一个默认值课堂练习：课堂练习：编写一个函数求N的阶乘;3! = 3 * 2 * 110! = 10 * (10 -1)n! = n* (n-1)!八、变量的作用域八、变量的作用域变量既可以是全局，也可以是局部的。变量既可以是全局，也可以是局部的。全局变量：可以在脚本中的任何位置被引用，一旦你在某个脚本里声明了全局变量，你就可以在这个脚本的任何位置（包括函数内部）引用它，全局变量的作用域是整个脚本;局部变量：只存在于对它做出声明的函数内部，在函数的外部无法相用它，局部变量的作用域仅
18、限于函数内部;例：function square(num)var total;total =num*num;return total;var total = 50;alert(total);var number = square(20);alert(total);var global = global; /全局变量function test()var local=local; /局部变量global2=global2; /全局变量在函数 外 用var声明的变量定义在函数当中，但是没有用var声明的是全局变量定义在函数当中，用var声明的是局部变量在JavaScript中，函数也是对象，实际上，
19、JavaScript里一切都是对象。 函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。 其中一个内部属性是Scope，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问当一个函数创建后，它实际上保存一个作用域链，并且作用域链会被创建此函数的作用域中可访问的数据对象填充。例如定义下面这样一个函数：function func() var num = 1;alert(num);func();在函数func创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示（注意
20、：图片只例举了全部变量中的一部分）：作用域链函数add的作用域将会在执行时用到。例如执行如下代码：function add(num1,num2) var sum = num1 + num2; return sum; var total = add(5,10);执行此函数时会创建一个称为“运行期上下文(execution context)”（有人称为运行环境）的内部对象，运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析，当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的Scope所包含的对象。这些值按照它们出现在函数中的顺序被复制到运行期上下文的作
21、用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：闭包就是能够读取其他函数内部变量的函数由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包的概念闭包的用途闭包可以用在许多地方。它的最大用处有两个.一个是前面提到的可以读取函数内部的变量，另一个就是让这些
22、变量的值始终保持在内存中.怎么来理解这句话呢？请看下面的代码function f1()var n=999;nAdd=function() n+=1 function f2()alert(n);return f2;var result=f1();result(); / 999nAdd();result(); / 1000在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在
23、内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。这段代码中另一个值得注意的地方，就是“nAdd=function()n+=1”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个 匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。使用闭包的注意点1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造
24、成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。闭包DEMOvar name = The Window; var object = name : My Object, getNameFunc : function() return function() return this.name;
25、; ; alert(object.getNameFunc()(); /The Window闭包DEMO-2function outerFun() var a=0; function innerFun() a+; alert(a); return innerFun; /注意这里var obj = outerFun();obj(); /结果为1obj(); /结果为2var obj2 = outerFun();obj2(); /结果为1obj2(); /结果为2九、九、JavaScript内部函数内部函数在javascript中有一些功能是很常用的，它们以全局函数的形式提供给用户，这些函数称为内部
26、函数。1.eval()eval接受一个字符串类型的参数，将这个字符串作为代码在上下文环境中执行，并返回执行的结果;例：vari= 1;eval(“i=i+ 1”);eval(“alert(i);”);2.parseInt和和parseFloat将字符串转换为数字将字符串转换为数字3. escape和和unescape进行进行URL编码和解码编码和解码例：varurl= “http:/ escape(url);alert(url);alert(unescape(url);utf-8编码：多国语言编码GB2312/GBK:中文简体十、十、JavaScript调试调试在编写JavaScript时，如
27、果没有调试工具将是一件很痛苦的事情。没有调试工具是很难去编写JavaScript程序的。你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。通常，如果JavaScript出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。JavaScript调试工具在程序代码中寻找错误叫做代码调试。调试很难，但幸运的是，很多浏览器都内置了调试工具。内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。有了调试工具，我们就可以设置断点(代码停止执行的位置),且可以在代码执行时检测变量。浏览器启用调试工具一般是按下F12键，并在调试菜单中选择Console。实例：console.log(“hello world！”);部分资料从网络收集整理而来，供大家参考，感谢您的关注！
