JavaScript入门教程解析

2020年2月9日1Web基础之一JavaScript基础刘钰峰2020年2月9日2目标•理解什么是JavaScript•如何将JavaScript嵌入到HTML中•理解变量、数据类型和运算符•掌握if-else和switch语句•掌握函数•掌握内置对象2020年2月9日3什么是JavaScript•脚本程序：嵌入在HTML文件中，提供了和用户进行交互的能力；•常见的脚本语言：VBScript，javascript•JavaScript是NetScape公司的产品–提供用户交互–动态更改内容–数据验证2020年2月9日4将JavaScript嵌入网页•可以将JavaScript语句插入HTML文档，方式如下：–使用SCRIPT标签将语句嵌入文档–将JavaScript源文件链接到HTML文档中–将脚本代码作为HTML标签的属性值2020年2月9日5使用Script标签JavaScript代码HTMLHEADSCRIPTlanguage=JavaScriptdocument.write(欢迎来到JavaScript世界);/SCRIPT/HEADBODYP尽情享受学习的快乐!!!/BODY/HTML脚本代码设置语言2020年2月9日6使用外部JS文件•外部JavaScript文件可以链接到HTML文档中•SCRIPT标签的SRC（源文件）属性可用于包括此外部文件scriptlanguage=“JavaScript”src=“文件名.js/script2020年2月9日7使用外部JS文件JavaScript代码(test.htm)HTMLHEADTITLE使用外部文件/TITLESCRIPTSRC=test.js/SCRIPT/HEADBODYP以上文本是通过访问外部JavaScript文件显示的/BODY/HTMLdocument.write(喂！你好吗?)JavaScript代码(test.js)2020年2月9日8将脚本代码作为HTML标签的属性值•在href属性中必须指明是javascript–ahref=javascript:alert(newDate());当前时间/a•在onclick事件属性中可以不用指明是javascript–FORMMETHOD=POSTACTION=–INPUTTYPE=submitonclick=alert(newDate());–/FORM把script脚本作为属性值.html2020年2月9日9Javascript的基本格式•区分大小写•以；作为语句结束符号(;可加可不加)•以//或/**/组为注释•Javascript的数据类型：•基本类型：存储在栈•引用类型：是存储在堆中的对象。2020年2月9日10Javascript是弱类型的语言字符串地址null布尔值数字undefined对象对象对象对象对象栈堆2020年2月9日11Javascript的数据类型数据类型说明示例数字型整数或实数。JavaScript中的数字不区分整型和浮点型，所有的数字都是以浮点型来表示的487,25.95逻辑型或布尔型执行逻辑运算。即代表真的“true”和代表假的“false”true或false字符串型字符串通常都是用单引号或双引号括起来的。如果在字符串中包括着特殊字符，可以使用转义字符来代替。“Hello”空特殊关键字，表示不存在的值。nullundefined也是一个特殊的数据类型，只有定义了一个变量但没有为该变量赋值、使用了一个并未定义的变量、或者是使用了一个不存的对象的属性时，JavaScript才会返回undefined。2020年2月9日12变量•Javascript采用弱类型的变量形式，即在声明时无需指定变量类型，在赋值的时候自动指定；•变量名必须以字母或下划线（_）开头•变量可以包含数字、从A至Z的大小写字母•JavaScript区分大小写，即变量myVar、myVAR和myvar是不同的变量2020年2月9日13声明变量vara;“var”－用于声明变量的关键字“a”－变量名同时声明和初始化变量vara=10;a=10;声明变量声明多个变量varx,y,z=10;赋值不声明变量，直接使用x=10;2020年2月9日14typeof运算符号•Typeof对变量的运算结果为以下之一：–Undefined–Boolean–Number–String–Objecttypeof(null)结果为object，此为历史遗留的错误。观察以下alert的结果variNum;alert(typeof(null));alert(typeof(iNum));iNum=10;alert(typeof(iNum));varbFlag=true;alert(typeof(bFlag));varaStu=newArray();alert(typeof(aStu));alert(typeof(hello));2020年2月9日15•观察以下运行结果varotemp;varotemp2;alert(typeof(otemp));alert(typeof(otemp2));alert(otemp==undefined);alert(otemp2==undefined);//会导致错误，因为没有定义过的变量只有typeof运算符可以使用，其他运算符都会导致错误。2020年2月9日16声明变量HTMLHEADTITLE使用变量/TITLESCRIPTLANGUAGE=Javascriptvarx;x=prompt(淘宝网竟拍，请出一口价,1);document.write(拍卖价格+x+BR)//+用来连接多个字符串document.write(恭喜您，您以最高价拍卖成功！);alert(欢迎下次光临！);/SCRIPT/HEAD/HTML定义变量赋值输出prompt(“提示信息”,”默认值”)将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。2020年2月9日17变量a、b和c只能在其各自的函数中被访问变量的作用域脚本函数function1局部变量a函数function2局部变量b函数function3局部变量c可由函数1、函数2和函数3访问全局变量gg2020年2月9日18转义字符字符说明示例\b退格符alert(“这是第一句\b这是第二句”)\f换页符alert(“这是第一局\f这是第二句”)\n换行符alert(“这是第一局\n这是第二句”)\r回车符alert(“这是第一局\r这是第二句”)\t制表符alert(“这是第一局\t这是第二句”)2020年2月9日19HTMLHEADSCRIPTLANGUAGE=JavaScriptvarx=100;vary;varz;document.write(H2竞拍SONY数码相机600万像素+x+$起价/H2);y=prompt(加多少银子？,1);z=x+y;alert(您最终的出价\n+z+$);//”\n”用于换行显示/SCRIPT/HEADbody/body/HTMLPrompt函数返回输入的字符串“+”号的用法-110020?bug2002020年2月9日20HTMLHEADSCRIPTLANGUAGE=JavaScriptvarx=100;vary;varz;document.write(H2竞拍SONY数码相机600万像素+x+$起价/H2);y=prompt(加多少银子？,1);z=x+parseFloat(y);alert(您最终的出价\n+z+$);//”\n”用于换行显示/SCRIPT/HEADbody/body/HTMLparseFloat()函数将字符串转换为float数据parseInt()函数将字符串转换为int数据如果转换失败，返回NaN值(notanumber)使用isNaN(z)判断是否为NULL“+”号的用法-22020年2月9日21类型转换－转换为字符串在javascript中数字、字符串和boolean都是伪对象，因此他们都有toString方法。varsColor=red;alert(sColor.toString());varbFound=true;alert(bFound.toString());variNum1=10;variNum2=10.6;alert(iNum1);alert(iNum2);alert(iNum1.toString(2));alert(iNum1.toString(8));alert(iNum1.toString(16));alert(iNum2.toString(8));alert(iNum2.toString(16));2020年2月9日22类型转换－转换为数字•parseInt和parseFloat：其解析方式为从位置0开始查看直到找到无法解析的字符。variNum1=parseInt(123abc);variNum2=parseInt(0xa);variNum3=parseInt(013);variNum4=parseInt(blue);alert(iNum1);alert(iNum2);alert(iNum3);alert(iNum4);variNum1=parseInt(10,2);variNum2=parseInt(10,8);variNum3=parseInt(10,16);alert(iNum1);alert(iNum2);alert(iNum3);2020年2月9日23强制类型转换•Boolean(value)•Number(value)•String(value)varb1=Boolean();varb2=Boolean(hello);varb3=Boolean(100);varb4=Boolean(null);varb5=Boolean(0);varb6=Boolean(newObject());alert(b1=+b1);alert(b2=+b2);alert(b3=+b3);alert(b4=+b4);alert(b5=+b5);alert(b6=+b6);非0、非空串、非空对象为true，其他false2020年2月9日24强制类型转换•Boolean(value)•Number(value)•String(value)alert(Number(false)=+Number(false));alert(Number(true)=+Number(true));alert(Number(undefined)=+Number(undefined));alert(Number(null)=+Number(null));alert(Number('3.6')=+Number(3.6));alert(Number('3.3.3')=+Number(3.3.3));alert(Number(newObject())=+Number(newObject()));Number转换和parseInt，parseFloat转换的不同之处在于Number要求整个值都要有效2020年2月9日25引用类型•Object类•与java中的Object类相似•具体有：•constructor，prototype，tostring，valueof等方法•NewObject()等价于{};2020年2月9日26属性名属性值name“zhangsan”age123getNamefunction(){alert(this.name);}从JavaScript的内部实现的角度来看问题，一个JavaScript对象就是属性集的组合。内部如何组织这些属性集的呢？使用类似于java中的Map?为什么使用for循环遍历属性的时候，没有找到construc