JavaScript脚本语言介绍.pdf

了解 JavaScript.编写JavaScript函数第一个 JavaScript 程JavaScript事件处理掌握J avaS cri pt流程控使用JavaScript常用对象PART 01了解 JavaScript1.了角星JavaScript(1)JavaScript语言的!|寺点 简单性：JavaScript的变量类型是采用弱类型，并未使用严格的数据类型。动态性：JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对 用户的反映响应，是采用以事件驱动的方式进行的。跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算 机，并支持JavaScript的浏览器就可正确执行。安全性：JavaScript不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网 络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。有效地防止数据的丢 失。脚本语言：JavaScript是一种脚本语言，它采用/濯序段的方式实现编程。JavaScript是一 种解释性语言，它提供了一个易的开发过程。面向对象的语言：JavaScript是一种基于对象的语言。它能运用自己已经创建的对象。1.了角星JavaScript(2)JavaScript语言的基本语法基疝原则 严格区分大小写；每一条语句以分号(；)结尾；可以利用空格和换行对代码格式化；标识符名字可以含有字母、数字、_、$,不能以数字开头不能使用关键字。1.了角星JavaScript(2)JavaScript语言的基本语法变量和常量 匕VJavaScript变量分为基本变量和引用变量。基本类型变量有字符串类型String、数值类型Number,布尔值类型Bool ean、空值Nul l、未定义Undef ined基本类型保存在栈中。弓I用类型有Object类型、Array类型、Date类型、RegExp类型、Function类型等。常量是一些不可变的值，如果一个变量的值只能被赋予一次，初次赋值之后就不能改变。常量通常 用全大写字母来命名，如果名字包含多个单词则用下划线隔开。1.了角星JavaScript（2）JavaScript语言的基本语法 算术运算符：包括加（+）、减（-）、乘（*）、除（/）、取余（求模%）、自加（+）和自减（-）;关系运算符：包括大于（）、小于（V）、等于（=）、大于等于（=）、小于等于（V=）和 不等于（！=）；位运算符：包括与（&）、异或（八）、或（|）、取反（）、左移（3）、右移（）和右移 补零（）；逻辑运算符：包括逻辑与（&）、逻辑或（|）和逻辑非（！）；赋值运算符：包括赋值运算符（=）、加赋值（+=）、减赋值（-=）、乘赋值（*=）、除赋值（/=）、取模赋值（%=）和按位赋值；一元运算符：一元运算符只需要一个操作。正号（+）、负号卜）；条件运算符：条件运算符语法为：条件表达式？语句1：语句2。1.了角星JavaScript(2)JavaScript语言的基本语法数昼/JavaScript提供了丰富的数组操作方法，下面介绍常用的四个方法：push()该方法可以向数组的末尾添加一个或多个元素，并返回数组的长度;pop()该方法可以删除数组的最后一个元素；unsh曲()该方法向数组开头添加一个或多个元素，并返回新的数组长度；shif t。该方法可以删除第一个元素，并将被删除的元素作为返回值返回。1.了角星JavaScript(2)JavaScript语言的基本语法对象”JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是 拥有属性和方法的数据。函数函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript函数语法，函数就 是包裹在花括号中的代码块，前面使用关键词f unction:当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时)，并且可由JavaScript在任何位置 进行调用。事件JavaScript与HTML之间的交互是通过事件实现的。事件是文档或浏览器窗口中发生的一些特定的 交互瞬间。PART 02第一个J a va S cri pt程序2.第一个JavaScript程序（1）JavaScript代码编写的位置可以将JS代码编写到标签。nl ick的属性中。其用法如下：你点我一下/button可以将JavaScript代码编写在超链接的href属性中，在点击超链接时，会执行JavaScript代码。其用法如 下：你点我一下v/a可以将JS代码写在script标签中。其用法如下：al ert（“我是script标签中的代码）可以将JS代码编写到外部JS文件中，通过script标签引入。其用法如下：2.第一个JavaScript程序(2)JavaScript的输出方式对话框输出 al ert(”al ert();效果展示)2.第一个JavaScript程序(2)JavaScript的输出方式控制台输出 口consol e.I og(”consol e.l og();效果展示”)Q Q_ lemenh Cornote Sources Network Perlormanco y*X3 Q top Dthuh Mds 8 No Iisuh。consok.1啾);效果M示 Indmhtiil:!2.第一个JavaScript程序-MJavaScript 的输出方式dooimentw旅峨哪示10(111716位./7巾3(”010(3111713爪./7巾3()；代码展示”)；G，Elements Cons*Sources Network Redonnance 0 XQ Q top，。例即 CMsuh lv9ls，No Issues I hd&n。PART 03掌握J avaScri pt流程 控制3.掌握JavaScript流程控制(1)顺序结构var a=1;/定义一个变量avar b=2;定义一个变量bconsol e.I og(a+b);控制台输出a+b的值该程序按照代码的先后顺序依次执行Ik fl Elements但$topConsole Sources Network$：Xf。Filter Def ault levels B No Issues。l3.掌握JavaScript流程控制(2)分支结构讦结构 Uvar score=59;定义score变量代表成绩if(scorev60)判断 score 是否小于 60consol e.l og(不及格”);/如果score小于60则控制台输出不及格f t.G(SEl wmentsConsoleSourcesNetworkxO 0 topFilter Def ault 旭vets No Issueso备公格index.html:133.掌握JavaScript流程控制（2）分支结构if结构 匚产白var score=60;定义变量score代表成绩if（score=60）判断score是否大于等于60consol e.l og（及格）;如集score大于等于60控制白el seconsol e.l og（“不及格）/如果score小于60控制台输出不;）var myScore=59;定义变量myScroe代表成绩if（myScore=60）判断 myScore 是否关于等于 60consol e.l og（咬格）如果myScore大于等于60控制台输 el seconsol e.l og（不及格）如果myScore小于60控制台输出。：XG。Elements Console Sources Network0 0 lop 0 Filter Def ault levelsT iNo Issuer 0MlMI Sindex,MM:213.掌握JavaScript流程控制(2)分支结构讦结构/匚广var score=90;定义变量score代表成绩if(score=90&score=80&score=70&score=60&score70)8一00啕()；当500口大于等于60小于70时控制台输出口 el se一00109(旧);当5以)上小于60时控制台输出3.掌握JavaScript流程控制（2）分支结构switch结构var week=3;switch（week）case 1:consol e.l og（“星期一”）;break;case 2:consol e.l og（星期二）break;case 3:consol e.l og（星期三）break;case 4:consol e.l og（星期四）break;case 5:consol e.l og（星期五）break;case 6:consol e.l og（“星期六”）；break;case 7:consol e.l og（“星期七）；break;def aul t:consol e.l og（你输入的数据有误”）;）3.掌握JavaScript流程控制(3)循环结构var i=0;定义变量iwhil e(iv5)判断是否小于5consol eog(“Hel l oWorl d”);如果i小于5执行该代码 i+；使i自增，再返回whil e判断i是否小于5)3.掌握JavaScript流程控制(3)循环结构do-而hil e结构 广学工var i=1;定义变量i=1doconsol e.l og(i);控制台输出i的值i+;使i 自增，i=i+1whil e(iv=10);判断i是否小于等于10 中的代码3.掌握JavaScript流程控制(3)循环结构f or(vari=1;iv=10;i+)定义变量i=1;判断语句iv=10;i自增，i=i+1 consol e.l og(i);/如果判断语句成立,控制带输出i的值3.掌握JavaScript流程控制(3)循环结构var arr=3,2,1;/定义一个数组vair i;定义一个变量f or(i in arr)一00啕(匕”*+”=+2170)；/控制台输出数组中的值3.掌握JavaScript流程控制(3)循环结构var person=创建一个对象，冰给其添加name,sex,age属性name:yutian,sex:女,age:16)；var i;定义一个变量f or(i in person)consol e.I og(person+i+=+person。);控制台输出对象中的属性PART 04 编写JavaScript函数,4.编写JavaScript函数(1)内置函数al ert()函数al ert(Hel l oWorl d);4.编写JavaScript函数（1）内置函数conf irm。函数 乙/conf irm（是否删除数癖）=true）consol e.l og（确定）el seconsol e.l og（取消）4.编写JavaScript函数(1)内置函数parseFl oat。函数var str=12 3;consol e.I og(typeof str);str=parseFl oat(str);consol e.I og(typeof str);Lx Q_ EtemenH Comob Ntf tworiIE 0 IB*literString nueterRb dormancy Memory App)caf tion Uvthouca。：XDetaUt leveh,No hum 0Mel 124.编写JavaScript函数(1)内置函数parsel nt。函数/consol e.l og(parsel nt(F,16);f lSbf ntHbCqhici*SquhmPtoOTHwe AcciilioMhxJuw0axF HtpOf diuh bwb “o h9Ajf0,4.编写JavaScript函数(1)内置函数prompt。函数var a=prompt();if(a=true)consol e.l og(a);4.编写JavaScript函数(1)内置函数prompt。函数var a=prompt();if(a=true)consol e.l og(a);Maf toryU9hthMx*nXbooDef auX No issues4.编写JavaScript函数(1)内置函数sort。函数var arr=3,2,7,5,1,6,8,9,4;arr=arr.sort();arr=arr.reverse();consol e.l og(arr);Q f ij4.编写JavaScript函数(1)内置函数getDay()函数var date=new Date();var week=date.getDay();switch(week)case 0:consol e.l og(“星期日”);break;case 1:consol e.l og(“星期一”);break;case 2:consol e.l og(“星期二”);break;case 3:consol e.l og(星期三)break;(1)内置函数case 4:consol e.l og(星期四)break;case 5:consol e.l ogCBHSf i)；break;case 6:consol e.l og(星期六)break;)4.编写JavaScript函数(2)自定义函数f unction 函数名()语句)var f un=f unction()语句)；PART 05JavaScript事件处理5.JavaScript事件处理(1)事件绑定input typebutton1 val ue=按钮”0门&(1点击按钮在5011 中调南un函数f unction f un()consol e.l og(”Hel l oChina”);控制台输出 Hel l oChina)5.JavaScript事件处理(1)事件绑定在JavaScript代疝中绑定input id=id type=,buttonH val ue=按钮”,给按钮添加idvar id=document.getEl ementByl d(idH);/获取 idicLoncl ick=f unction()为 id 添加点出事日consol e.l og(”Hel l oWorl d”);点击按钮控制台输出 Hel l oWorl d IGi WIcecfms Console Source*f mvonc-Nonrwnce Memory AppicatMn L0hnhcv&e Qt0 Cop F4s DehKX ievris No IssuesMvllcMoeld hl5.JavaScript事件处理(2)常见JavaScript的事件处理及用法鼠标事件 匚7yinput id=id type=,buttonH val ue=按钮”,var id=document.getEl ementByl d(,id);id.onmouseover=f unction()consol e.l og(鼠标移入”)；)id.onmouseout=f unction()consol e.l og(鼠标移出”);)5.JavaScript事件处理(2)常见JavaScript的事件处理及用法onchange内容变化事件 r input id=id type=*textH pl acehol der-请输入信息”,var id=document.getEl ementByl d(,idH);id.onchange=f unction()consol e.l og(内容改变”)；)G Qj,0Consol*NegixtDvUMt Itrmh,6k。：X05.JavaScript事件处理(2)常见JavaScript的事件处理及用法ondbl cl ick 双击1件input id=id type=,buttonH val ue=按钮”,var id=document.getEl ementByl d(,id);id.ondbl cl ick=f unction()consol e.l og(Hel l oWorl d);)(knvnti Cof l ioe M竹 I 的由师 wxt Mtf rcr/A 叩 kMi 油但 0 top，Mh*(MjMt Itvtli No IswttHellowoHd1盛；X05.JavaScript事件处理(2)常见JavaScript的事件处理及用法焦点事件input id=id type=input pl acehol der”请输入内容”,var id=document.getEl ementByl d(,id);id.onf ocus=f unction()consol e Jog(获取焦点)id.onbl ur=f unction()consol e Jog(失去焦点)PART 06使用JavaScript常用对象6,使用JavaScript常用对象(1)string对象concat()函数var b=1,2,3;创建数组bvar c=4,5,6;创建数组 cconsol eog(b.concat);/将数组b和c合并,并在控制台输出6,使用JavaScript常用对象(1)string对象char At()函数var str=Hel l oWorl d”;定义字符串consol eog(str.charAt);获取字符串第五个字母并在输出6,使用JavaScript常用对象(1)string对象repl ace。函数var str=Hel l oWorl cT;定义变量 str=Hel l oWorl cTstr=str.repl ace(”Worl cTJChina”);/将 Worl d 替换为 Chinaconsol e.l og(stij;控制台输出 str6,使用JavaScript常用对象(1)string对象大小写转换函数,var str1=HHel Lo WOrLd”;/定义变量stidvar str2=Hhel l o WORLD”;定义变量str2var str3=nHELLO worl d”;/定义变量 str3if(str1.toLocal eLowerCase=str2.toLocal eLowerCase)判断 sth 和str2本专换为小写后是否相等consol e.l og(”两个字符串一样)if(str1.toLocal eUpperCase=str3.toLocal eUpperCase)判断sth 和str3转换为大写后是否相等consol e.l og(“两个字符串一样)如果相等控制台输出两个字符 串一样6,使用JavaScript常用对象(2)Math对象var num=10.10;var ans=Math.f l oor(num);consol e.l og(ans);6,使用JavaScript常用对象(2)Math对象最值函数 匚var a=5;定义变量avar b=9;定义变量bconsol e.l og(Math.max(a,b);控制台输出 a,b 中的最大值consol e.l ogjMath.min(a,b);控制台输出 a,b 中的最小值6,使用JavaScript常用对象(2)Math对象sqrt()函数var ans=Math.sqrt(4);ans 等于 4 的平方根consol e.l og(ans);/控制台输出 ansQ-jL t,V 口/X|，Ssss/*/我 一.口 、/，-*、感谢一路有你