1、javascript的基本语法

L/O/G/OWeb客户端开发1、JavaScript的基本语法指导教师：白蕾电话：[phone]电子邮件：[e-mail]2课程地位HTMLSQLServerJavaScriptProject2:B/SJSP/Servlet/JavaBean/WebServiceStruts/Hibernate/Spring/AjaxProject3:Net/JavaHR/CRM/OA/B2CB/SPrevLogicJavaSTBJavaOOPJSPOracalFlex就业技能结构图本门课程目标•使用JavaScript实现表单验证•使用JavaScript制作网页广告特效•使用JavaSctipt制作弹出窗口特效•使用JavaScript实现时钟特效•使用JavaScript实现级联显示功能•使用JavaScript+CSS实现CSS样式特效•使用JavaScript动态创建页面元素课程项目展示回顾HTML-1•常用的HTML标签有哪些？•请说明表格的基本结构以及跨行、跨列的用法？标签名称说明html定义一个完整的HTML文档head定义文档的头部title定义显示在浏览器左上方的标题内容body定义文档的主体h1…h6定义标题1至标题6p定义文本的段落br在文本中插入一个换行img插入一张图像hr插入一条水平分线a定义超级链接!--定义注释tableborder=1trtdcolspan=3学生成绩/td/trtrtdrowspan=2张三/tdtd语文/tdtd85/td/trtrtd数学/tdtd96/td/tr/table跨列跨行回顾HTML-2•请简述表单的基本结构？常用表单元素有哪些？formaction==post……/form表单的基本结构：常用的表单元素有：文本框（text）、密码框（password）、多行文本框（textarea）单选按钮（radio）、复选框（checkbox）、列表框（select和option）按钮（button、submit和reset）练习---制作简易计算器•需求说明–使用表格布局参考代码完成时间：30分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解预习检查•大家已经学习了HTML，为什么还要学习JavaScript？•如何编写JavaScript脚本程序？•JavaScript与Java基本语法的异同？本章任务本章目标•掌握脚本的基本结构•掌握JavaScript的执行原理•使用JavaScript实现在页面上打印三角形为什么要学JavaScript•表单验证－减轻服务器端压力页面动态效果演示示例：层的切换和树形菜单等演示示例：注册表单验证动态改变页面内容演示示例：动态改变表格内容什么是JavaScriptDOMJavaScriptECMAScriptBOM•JavaScript组成ECMAScript•语法标准–语法–变量和数据类型–运算符–逻辑控制语句–关键字、保留字–对象•编码遵循ECMAScript标准浏览器对象模型•BOMwindowdocumenthistorylocationformLinkanchorbuttoncheckboxtextradioselecttextarea……演示示例：弹出窗口文档对象模型•DOM文档：document根节点：html元素：head元素：body元素：title文本：“文档标题”元素：h1元素：a属性：href文本：“我的链接”文本：“我的标题”演示示例：使用DOM改变超链接脚本的基本结构•脚本的基本结构scripttype=text/javascript!--JavaScript语句;--/script脚本执行原理应用服务器IEIE解析HTML标签和JavaScript脚本从服务器端下载含JavaScript的页面返回响应客户端请求包含JS的页面发送请求1浏览器输入23输出HelloWorld……title输出HelloWordl/titlescripttype=text/javascriptdocument.write(使用JavaScript脚本循环输出helloworld);for(vari=0;i5;i++){document.write(h3HelloWorld/h3);}document.write(h1HelloWorld/h1);/script/headbody页面主体内容/body/html演示示例：输出HelloWorldJavaScript的使用方式•Html页面内嵌JS代码•外部JS文件•简短缩写方式scriptsrc=hello.jslanguage=javascript/scriptinputname=btntype=buttonvalue=弹出消息框onclick=javascript:alert('欢迎你');/演示示例：外部JS文件和弹出消息框JavaScript核心语法核心语法数据类型变量运算符号控制语句注释语法约定输入/输出变量的声明和赋值varwidth;width=5;先声明变量再赋值var－用于声明变量的关键字width－变量名varx,y,z=10;varcatName=“皮皮”;同时声明和赋值变量不声明直接赋值Width=5;数据类型•typeof检测变量的返回值•数据类型–undefined–boolean–string–number–nulltypeof•typeof运算符返回值如下：–undefined：变量被声明后，但未被赋值–string：用单引号或双引号来声明的字符串–boolean：true或false–number：整数或浮点数–object：javascript中的对象、数组和null演示示例：typeof的功能和用法演示运算符号类型运算符算术运算符+-*/%++--赋值运算符=比较运算符====!=逻辑运算符&&||!逻辑控制语句if条件语句switch多分支语句for、while循环语句if(条件){//JavaScript代码;}else{//JavaScript代码;}switch(表达式){case常量1:JavaScript语句1;break;case常量2:JavaScript语句2;break;...default:JavaScript语句3;}for(初始化;条件;增量){JavaScript代码;}while(条件){JavaScript代码;}循环中断•break•continuescripttype=text/javascriptvari=0;for(i=0;i=5;i++){if(i==3){break;}document.write(这个数字是：+i+br/);}/scriptscripttype=text/javascriptvari=0;for(i=0;i=5;i++){if(i==3){continue;}document.write(这个数字是：+i+br/);}/script注释alert(恭喜你！注册会员成功);//在页同上弹出注册会员成功的提示框/*使用for循环运行“document.write(h3HelloWorld/h3);”5次使用document.write在页面上输出“HelloWorld”*/单行注释以//开始，以行末结束，例如：多行注释以/*开始，以*/结束，符号/*……*/指示中间的语句是该程序中的注释。例如：常用的输入/输出•alert()alert(“提示信息”);•prompt()prompt(“提示信息”,“输入框的默认信息”);prompt(“请输入姓名”,“张三”);prompt(“请输入姓名”);案例演示•根据输入的次数，多次输出“HelloWorld”scripttype=text/javascriptdocument.write(HelloWorld);varj=prompt(请输入连续输出标题3的次数：,);for(vari=0;ij;i++){document.write(h3HelloWorld/h3);}document.write(h1HelloWorld/h1);alert(共连续输出标题：+j+次);/script演示示例：输出HelloWorld语法约定•代码区分大小写•变量、对象和函数的名称•分号练习——打印三角形•需求说明–使用prompt提示输入显示三角形的行数参考代码完成时间：25分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解程序调试•Firebug工具–单步进入–单步跳过–单步退出•alert()方法演示示例：程序调试练习——调试程序•需求说明–使用alert()或Firebug工具调试程序调试后参考代码完成时间：10分钟共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解总结•大家简述一下JavaScript脚本的基本结构？•JavaScript在页面中的应用有哪几种？请举例说明•下面使用typeof返回的值分别是什么？–Typeof(“rose”)–Typeof(105.58)–Typeof(false)知识点总结•JavaScript由三部分组成，分别是ECMAScript、DOM和BOM，其中ECMAScript是JavaScript的标准规范，BOM与浏览器窗口进行交互，DOM可以控制页面中的每一个元素，实现页面中的各种动态效果。•在HTML页面中引用JavaScript有三种方式，直接把javaScript代码写在标签script和/script之间，使用外部JavaScript文件或直接把简短的JavaScript代码写在html标签中•JavaScript的核心语法有变量的声明和赋值、数据类型、逻辑控制语句、注释，在JavaScript中代码区分大小写，而且建议每一句的末尾使用分号（；）结束•在JavaScript·中常用的输入/输出是prompt()和alert()方法•使用Firebug工具或者alert()方法调试程序L/O/G/OThankYou!