JavaScript内部培训

JavaScript内部培训基础篇课程概述主要是介绍JavaScript语言的语法和对象，如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入，可选择的控件进行校验等。主要内容第一章JavaScript简介第二章JavaScript基础第三章JavaScript对象第四章JavaScript事件第一章JavaScript简介1.JavaScript是什么?JavaScript是一种可以嵌入Web页面中的基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言，它能与用户实现交互，并且能与服务端实现通信。2.JavaScript的特点1.基于对象2.事件驱动3.解释性语言4.弱类型语言5.安全，与平台无关(跨平台)第二章JavaScript基础2.1JavaScript声明2.2JavaScript变量与数据类型2.3JavaScript操作符与表达式2.4JavaScript函数2.1JavaScript声明基本格式JavaScript脚本可以嵌入在Web页面中，如:也可以将以.js为后缀名的JavaScript文件单独放在一个位置,然后在Web页面引用它,句型如下:（Ps:.js文件中不能有script/script）JavaScript可以出现在Web页面的任意地方scriptlanguage=JavaScript...JavaScript代码;.../scriptscriptlanguage=JavaScript“src=“joyque.js”/script2.2JavaScript变量与数据类型2.2.1变量变量的主要作用是存取数据、提供存放信息的容器。对于变量必须明确变量的命名、变量的类型、变量的声明及其变量的作用域。在JavaScript语言中通过var关键字来声明一个变量例如：varx=5;varflag=true;变量也可以不作声明，而在使用时再根据数据的类型来确定变量的类型。carname=“bmw”;y=4;其中carname为字符串型，y为整型。变量的作用域在JavaScript中同样有全局变量和局部变量。全局变量是定义在所有函数体之外，其作用范围是整个函数；而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。2.2.2数据类型JavaScript支持的数据类型：1.数值型(number):其中包括整型数和浮点型数2.布尔值(boolean):即逻辑值，true或flase3.字符串型(string):由单个或多个文本字符组成4.空值(null):由关键字null代表5.undefined:表示变量还没有赋值的状态或一个对象的属性不存在JavaScript变量是弱类型JavaScript变量对大小写敏感未作声明的变量默认是全局变量2.3JavaScript操作符与表达式2.3.1操作符赋值操作符：=、+=、-=、*=、/=、%=、=、=、=、&=、^=、|=；条件表达式：status=(age=18)?adult:minor；算数操作符：+、-、*、/、%、++和--，y=++x；位逻辑运算符：&、|、^;、、布尔操作符：&&、||、!比较操作符：有==、、=、、=、!=；连接操作符+用于连接两个字符串：x=Hello;y=World!;x+y为HelloWorld!其他操作符in,typeofinstanceof等2.3JavaScript操作符与表达式2.3.1表达式在定义完变量后，就可以对它们进行赋值、改变、计算等一系列操作，这一过程通常又叫一个表达式来完成，可以说它是变量、常量、布尔及运算符的集合，因此表达式可以分为算术表达式、字符串表达式、赋值表达式以及布尔表达式等。示例:算术表达式:varx=5;vary=4;varz=x+y;//结果是9字符串表达式:varstr=“joy”,str1=“que”;varstr2=str+str1;//结果是”joyque”2.4JavaScript函数2.4.1函数函数是什么？函数是若干段JavaScript代码的集合,可以根据需要将一段功能代码编写成一个函数，然后在需要时调用它，并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。JavaScript函数定义:函数由function关键字定义functionmyFunction([参数]){//执行的语句(函数体)[return[值];]}函数不指定返回类型参数不指定类型函数名对大小写是敏感的函数示例1htmlheadscriptfunctionfun1(txt){alert(txt);}/script/headbodyforminputtype=buttononclick=fun1('hello')value=调用函数/form/body/html2.4JavaScript函数参数不指定类型2.4JavaScript函数函数例2htmlheadscriptfunctionadd(a,b){returna+b;}/script/headbody6+5=scriptdocument.write(add(6,5))/script/body/html有返回值的函数仍不要指定函数类型当页面载入时，会执行位于body部分的JavaScript2.4JavaScript函数JavaScript常规函数9个常规函数：alert函数：显示一个警告对话框，包括一个OK按钮。confirm函数：显示一个确认对话框，包括OK、Cancel按钮。prompt函数：显示一个输入对话框，提示等待用户输入。parseInt函数：将符串转换成整数数字形式(可指定几进制)。√parseFloat函数：将字符串转换成符点数字形式。√escape函数：将字符转换成Unicode码。eval函数：计算表达式的结果。isNaN函数：测试是(true)否(false)不是一个数字。消息框第三章JavaScript对象JavaScript语言是基于对象的（Object-Based），而不是面向对象的（object-oriented）。有对象的概念：数据和操作的封装,但没有继承的概念。从定义的角度看,JavaScript程序中有两种对象：JavaScript提供的内置对象(基础对象和客户端对象)和根据需要创建自己的对象。对象的基础知识对象的基本结构如何创建对象引用对象的途径有关对象操作语句对象属性的引用对象的方法的引用第三章JavaScript对象对象的基本结构JavaScript中的对象由属性和方法(也既函数)两个基本元素构成。前者体现了对象的特征，后者体现了对象的行为。对象模型:varcar={};//创建了一个car对象obj.name=“bmw”;//给car对象添加一个name属性obj.run=function(){alert(“car会跑”);}//给car对象添加一个run方法第三章JavaScript对象如何创建对象在JavaScript中创建对象有多种方式,很灵活。方式一:直接定义示例1:varperson={};//创建了无任何属性和方法的对象示例2：varperson={};//创建带有name属性和eat方法的对象person.name;person.eat=function(){alert(吃饭);};方式二:采用json的方式示例3:varperson={name:小强,eat:function(){alert(吃饭);}};json是一种数据格式第三章JavaScript对象引用对象的途径一个对象要真正地被使用，可采用以下几种方式：1.引用JavaScript内部对象；2.由浏览器环境中提供3.创建新对象。这就是说一个对象在被引用之前，这个对象必须存在，否则引用将毫无意义，而出现错误信息。从上面中我们可以看出JavaScript引用对象可通过三种方式获取。要么创建新的对象，要么利用现存的对象。第三章JavaScript对象有关对象操作语句for...in语句with语句this关键字new运算符第三章JavaScript对象For…in语句该语句的功能是用于对已知对象的所有属性进行操作的控制循环。无需知道对象的属性个数即可进行操作。格式如下:for(对象的属性名in已知对象名)示例如下:functiongetValue(obj){for(varpropinobj){document.write(obj[prop]);}}第三章JavaScript对象with语句使用该语句的意思是：在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。withobject{...}所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。示例如下:scriptlanguage=javascriptvarperson={};person.name=小强;person.age=100;with(person){alert(name);alert(age);}/script第三章JavaScript对象this关键字this是指对”当前”对象的引用，在不同的角度，this引用的对象不同。首先分析this所在的函数是当做哪个对象的方法调用的，那这个对象就是this所引用的对象。也可以说在JavaScript中的this是对象和函数结合的概念。示例1:varobj={};obj.x=10;obj.y=function(){alert(this.x)};obj.y();当执行obj.y()时,函数是作为对象obj的方法调用的，因此函数体内的this指向的是obj对象，所以会弹出10。第三章JavaScript对象new运算符使用new运算符可以创建一个新的对象。其创建对象使用如下格式：Newobject=newObject(Parameterstable);其中Newobject创建的新对象：Object是已经存在的对象；parameterstable参数表；new是JavaScript中的命令语句。如创建一个日期新对象newData=newDate()birthday=newDate(December12.1998)之后就可使newData、birthday作为一个新的日期对象了。示例1:functionperson(name){this.name=name;this.eat=function(){alert(吃饭);}}varemployee=newperson(小强);第三章JavaScript对象对象的属性引用1.使用点（.）运算符:university.Name=“江苏”2.通过对象的下标实现引用:university[0]=“江苏”3.通过字符串的形式实现:university[“Name”]=“江苏”对象的方法引用objectName.methodName();实际上methodName()=FuctionName方法实质上是一个函数。如果引用university对象的show()方法，即可使用:university.show();第三章JavaScript对象常用对象的属性和方法JavaScript为我们提供了一些非常有用的常用内部对象和方法。用户不需要用脚本来实现这些功能。这正是基于对象编程的真正目的。在JavaScript提供了string（字符串）、Math（数值计算）和Date（日期）,Boolean(布尔),Array(数组)等对象和其它一些相关的方法。第三章JavaScript对象1.String对象:代表一串字符串属性：length返回字符中的字符的个数。方法:方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的Un