javascript入门教程

一次实习,一生受益神州数码知识学院Gjun巨匠IT培训方少群EMAIL:[e-mail]一次实习,一生受益JavaScript网页开发技术一次实习,一生受益课程目标•掌握JavaScript的语法、程序控制结构•熟练使用JavaScript内置基本对象•熟悉JavaScript调用DHTML元素•掌握用JavaScript编写客户端脚本程序的技能•能创建功能强大的互动网页一次实习,一生受益主题内容•JavaScript概述•JavaScript基础语法•JavaScript常用内置对象•JavaScript常用DHTML对象一次实习,一生受益概念•JavaScript是一种网页编程技术，大部分使用者将它用于创建动态交互网页•JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与Java和C语言类似的语法•JavaScript是一种使用简单，功能强大的编程语言一次实习,一生受益分类•JavaScript的基础为核心JavaScript，在实现上分为客户端JavaScript、服务器端JavaScriptJavaScript核心JavaScript客户端JavaScript服务器端JavaScript浏览器对象服务器对象内置对象一次实习,一生受益关系•JavaScript与ASP、JScript.Net及JSP等编程语言之间的关系高级程序语言JScript.NETWeb编程Window客户端编程Web客户端JavaScriptJScriptVBScriptVB/VC/DelphiWeb服务器端ASP/PHP/JSPC#.NETVB.NET一次实习,一生受益重要性•面向对象的敲门砖•具备完整的语法•随着Web浏览器的改进，功能越来越强大•是搭配服务器端技术的主要客户端编程语言一次实习,一生受益发展历史•网景公司在Netscape2.0首先推出了JavaScript•微软公司从IE3.0开始提供对客户端JavaScript的支持，并另取名为JScript•微软公司从IIS3.0开始提供对服务器端JScript的支持•微软推出JScript.NET，基于.NET框架的JScript具备了和C#.NET和VB.NET一样强大的功能一次实习,一生受益特点•简单易用简洁易用，与Java有类似的语法可以使用任何文本编辑工具编写只需要浏览器就可以执行程序•解释执行事先不编译逐行执行无需进行严格的变量声明•基于对象内置大量现成对象，编写少量程序可以完成目标一次实习,一生受益使用范围•适合做哪些事情客户端数据计算客户端表单合法性验证浏览器对象的调用浏览器事件的触发网页特殊显示效果制作•不适合做哪些事情大型应用程序图像、多媒体处理网络实时通讯应用一次实习,一生受益JavaScript与Java的区别…•JavaScript与Java运行方式不一样JavaScript是解释执行Java是编译，解释执行•JavaScript不是Java的简化版本逻辑运算符、语句结构类似变量申明、对象调用等不同•JavaScript和Java功能实现不一样JavaScript通过浏览器实现程序功能Java通过Java虚拟机实现程序功能一次实习,一生受益编写工具•JavaScript的编辑工具很多，如MicrosoftFrontPage、DreamWeaver、MicrosoftVisualInterDev，Eclipse,JBuilter,NetBean等IDE开展工具等，都可以用来进行JavaScript网页制作•针对简单的程序，我们使用文本编辑器直接书写源代码一次实习,一生受益同步练习•本练习主要针对事件驱动和基于对象，该例子在网页的一个按钮中设置了onclick属性，当鼠标单击该按钮时，将会弹出一个窗口，浏览google搜索网站window是客户端JavaScript中浏览器对象之一，open是window对象的一个方法，意思是打开窗口，在参数中设置好网址，就可以打开指定的网站。在将来学习DHTML的时候将会详细讲解window对象的使用方法打开记事本，将以下代码输入，保存为D:\hello.htmhtmlbodyinputtype=buttononClick=window.open(')/body/html保存好以后双击该文件打开，试一试单击按钮后运行的结果一次实习,一生受益事件定义方式…•在定义事件时直接写入JavaScript脚本inputtype=buttonvalue=打开google网站onClick=window.open(')一次实习,一生受益…事件定义方式•运行结果用记事本输入程序，以文件名test1_1.htm保存，用IE打开该文件鼠标单击按钮[打开google网站]后弹出新的google站点IE窗口一次实习,一生受益scriptlanguage=JavaScript!--/*程序功能：书写方法说明开始和结束的标志的书写方法单行和多行JavaScript注释的写法*/functionsayhello(){//在HTML文档中显示hellodocument.write(hello);}sayhello();--/script直接嵌入式…•在网页中直接嵌入JavaScript脚本开始声明HTML注释JavaScript多行注释JavaScript单行注释脚本结束声明语句结尾一次实习,一生受益…直接嵌入式•运行结果用记事本输入程序，以文件名test1-2.htm保存，用IE打开该文件IE浏览器执行JavaScript时忽略了JS注释部分，只输出运行结果一次实习,一生受益文件调用式…•在网页中调用独立JavaScript文件scriptlanguage=JavaScriptsrc=test1-3.js/script!--functionsayhello(){//在HTML文档中显示hellodocument.write(hellofromjs);}sayhello();--JS脚本文件中不需要脚本开始和结束声明HTML文件一次实习,一生受益…直接嵌入式•运行结果用记事本分别创建test1_3.htm和test1-3.js，用IE打开test1_3.htm文件文件调入JavaScript代码和直接嵌入一样可以正常运行一次实习,一生受益JavaScript运行环境的介绍…•在Windows、Linux、Unix操作系统都可以运行JavaScript，只要安装了支持JavaScript的浏览器•不同的浏览器甚至同一浏览器的不同版本对JavaScript的支持程度都不一样•大部分常见的浏览器都对JavaScript提供支持，在本教程中以IE7.0作为主要的调试运行环境一次实习,一生受益…JavaScript运行环境的介绍浏览器WindowsLinuxUnixIE3.0--6.0√×√Netscape3.0--7.0√√√Mozilla1.0--1.6√√√Opera5.0—7.0√√√Firebird×√√Konqueror×√×Galeon×√×支持：√不支持：×支持JavaScript的浏览器与操作系统一次实习,一生受益JavaScript运行环境的建立...•IE的升级为什么要升级IE•更加完善与稳定•对ECMAv3国际标准的支持更加完整如何升级IE•下载安装一次实习,一生受益...JavaScript运行环境的建立•Mozilla的安装为什么要安装Mozilla•完全符合ECMAv3国际标准•Netscape6采用与其一致的内核•支持Windows、Linux和Unix等更多操作系统•源代码开放、程序短小、装卸方便•可用于检查JavaScript在非IE环境运行情况如何安装Mozilla•下载Mozilla•运行Mozilla安装程序一次实习,一生受益调试运行JavaScript程序•如果程序出现错误双击左下角出现的感叹号弹出错误显示窗口，详细信息框中将会提示错误所在的行号一次实习,一生受益主题内容•JavaScript概述•JavaScript基础语法•JavaScript常用内置对象•JavaScript常用DHTML对象一次实习,一生受益字符集•JavaScript程序是由Unicode字符集编写的，每个字符和汉字都是采用2个字节进行编码ASCII码由大小写英文字母、数字、英文符号等组成，采用1个字节中的低7位进行编码，是Unicode编码的子集Unicode是一种国际编码，可以表达几乎任何书写语言，它是采用16位编码的字符集010000011001111011000000ASCII编码：7位编码Unicode编码：16位编码A你一次实习,一生受益大小写敏感性•在HTML中大小写是不敏感的，但是在JavaScript程序中大小写是敏感的HTML都是大小写不敏感的标准的JavaScript语法定义中是区分大小写inputtype=buttonname=HelloBtnvalue=playonClick=myclick()scriptlanguage=JavaScriptfunctionmyclick(){HelloBtn.value=pause;}/script大小写须一致一次实习,一生受益换行与空格•换行、分号•空格、TABa=1;b=2;a=1b=2{a=1;b=2;}{a=1;b=2;}==有换行，分号允许不加提倡加上空格或TAB增强程序可读性a=1;b=2;=推荐加上分号减少错误和歧义的发生一次实习,一生受益常量与标识符…•常量直接在程序中出现的数据值•标识符由不以数字开头的字母、数字、下划线(_)、美元符号($)组成常用于表示函数、变量等的名称•例如：_abc,$abc,abc,abc123是标识符，而1abc不是JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符一次实习,一生受益…常量与标识符…•ECMAv3标准保留的JavaScript的关键字breakcasecatchcontinuedefaultdeletedoelsefalsefinallyforfunctionifininstanceofnewnullreturnswitchthisthrowtruetrytypeofvarvoidwhilewith一次实习,一生受益…常量与标识符•使用范例scriptlanguage=JavaScript!—functionsayHello(){varhellostr=您好;document.write(hellostr);}sayHello();--/scriptfunction、var是保留字sayHello是自定义标识符字符串常量一次实习,一生受益内容线索词法结构•数据类型数据类型分类数字类型字符串类型类型转换•运算符•语句•变量与函数•对象一次实习,一生受益数据类型分类JavaScript数据类型基本类型特殊类型组合类型Number：数字String：字符串Boolean：布尔Null：空Undefined：未定义Array：数组Object：对象一次实习,一生受益数字类型…•简介最基本的数据类型不区分整型数值和浮点型数值所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式能表示的最大值是±1.7976931348623157x10308能表示的最小值是±5x10-324一次实习,一生受益…数字类型…•整数在JavaScript中10进制的整数由数字的序列组成精确表达的范围是-9007199254740992(-253)到90071992