1 / 40

JavaScript 课程第一课 李 伟

JavaScript 课程第一课 李 伟. JavaScript 语言基础. 知识回顾. CSS 的分类 CSS 的引用方式 常用的 CSS 样式 Div 概念 CSS+Div 盒子模型 CSS+Div 网页布局思路. 内容摘要. 理解什么是 JavaScript 如何将 JavaScript 嵌入到 HTML 中 理解变量、数据类型和运算符 掌握 if-else 和 switch 语句. JavaScript 由来.

hadley-franco
Download Presentation

JavaScript 课程第一课 李 伟

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript课程第一课 李 伟 JavaScript语言基础

  2. 知识回顾 • CSS的分类 • CSS的引用方式 • 常用的CSS样式 • Div概念 • CSS+Div盒子模型 • CSS+Div网页布局思路

  3. 内容摘要 • 理解什么是JavaScript • 如何将 JavaScript 嵌入到 HTML 中 • 理解变量、数据类型和运算符 • 掌握 if-else 和 switch 语句

  4. JavaScript由来 • Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言 • 主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。于是Netscape的浏览器Navigator加入了Javascript， • 提供了数据验证的基本功能。

  5. JavaScript是Java的变种吗 • JavaScript最初的确是受Java启发而开始设计的，而且设计的目的之一就是“看上去像Java”[2]，因此语法上有很多类似之处，许多名称和命名规范也借自Java。 • 但是实际上，JavaScript的主要设计原则源自Self和Scheme[3]，它与Java本质上是不同的 • 本质上讲javascript更像是一门函数式编程语言.而非面向对象的语言，它使用一些智能的语法和语义来仿真高度复杂的行为。其对象模型极为灵活、开放和强大，具有全部的反射性

  6. JavaScript与Jscript比较 • 1.最开始web上只有静态的html • 2.为了满足更好的交互需求，netscape开发了在Navigator中使用的LiveScript语言，后改名为JavaScript • 3.Microsoft发行jscript用于internet explorer. • 4.最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。

  7. JavaScript与Jscript比较 • 5.我们写程序的时候最好写<script language=javascript>而不是<script language=jscript>因为javascript是一个通用的名称，所有浏览器都认识，而jscript只有IE认识。 • 6.其他语言细节上的区别，不是一两下能说完的。不过我个人认为编程时最好遵循ECMAscript标准。这样可以保证兼容性。 • 7.顺便说一下,javascript原来叫Livescript，后来Sun的java风头正盛的时候netscape就把名字改成javascript

  8. JavaScript 应用实例 J. Smiss .. dollar $ Swiss BankFlorida, USA “67 89 005 90” ’11’00’89’778 验证 Jeny 帐户详细信息 Jeny 想在银行存钱 瑞士银行 Jeny Smiss 一万元整 帐号 10,000/- A/c No. 010077 签名 余额 帐户验证完毕 Jeny Smiss

  9. 什么是JavaScript 3-2 错误消息 密码不能 少于六位 ! OK 请等待，正在 创建您的帐户 提交 提交 提交 提交 • 同样， 帐户 Id： 密码： 年龄： 国家： Jeny@hotmail.com *** 24 US ****** Jeny Jeny 想创建一个电子邮件帐户 这样，JavaScript 将验证数据并给出错误信息（如有）

  10. 什么是JavaScript 3-2 • 从上面应用中可看出 • 是写在HTML文档中的一种基于对象（Object）和事件驱动（EventDriven)、并具有安全性能的脚本语言。 • 当用户在客户端的浏览器中显示该网页时，浏览器就会执行JavaScript程序，让用户通过交互式的操作变换网页显示的内容，以实现HTML语言所不能实现的一些功能。

  11. 什么是JavaScript • JavaScript的特点 • 解释性：由浏览器直接解释执行 • 用于客户端 • 基于对象：将显示在网页中的任何一种元素都作为“对象”处理。 • 与Java比较：是两个公司开发的两个不同的产品，作用与用途大不一样，但两者语法上有很多多相似之处，JavaScript并不是Java的子集。

  12. 什么是JavaScript • JavaScript的作用 • 校验用户输入的内容：用户输入内容的校验常分为两种 • 格式性校验：JavaScript • 功能性校验 • 有效地组织网页内容 • 动态地显示网页内容：时钟显示等 • 动画显示

  13. JavaScript脚本编写过程 • 编写JavaScript脚本：可以使用任何一种文字编辑器来编写,我们使用Dreamweaver。 • 执行：与HTML文档配合，将其插入到HTML文档中，然后执行HTML文档即可。

  14. 将JavaScript嵌入网页方式 • 可以将 JavaScript 语句插入 HTML 文档，方式 如下： • 使用 <SCRIPT> 标签将语句嵌入文档 • 将 JavaScript 源文件链接到 HTML 文档中

  15. 第一个JavaScript案例 • 实现第一个Javascript案例

  16. 浮点型－浮点型字面量至少必须含有一个数字。此数字可包含小数点或采用科学记数法表示的数字。科学记数法中的整数可以是正整数(+)或负整数(-)，指数(e)表示“十次幂”。例如10.24、1.20e+22、4E-8、.1815等。浮点型－浮点型字面量至少必须含有一个数字。此数字可包含小数点或采用科学记数法表示的数字。科学记数法中的整数可以是正整数(+)或负整数(-)，指数(e)表示“十次幂”。例如10.24、1.20e+22、4E-8、.1815等。 常量 • 整型 • 浮点型 • 字符串型

  17. 数据类型

  18. 特殊数据类型 • （1）“空”数据类型。 • （2）“无定义”数据类型。

  19. 特殊数据类型 • （1）“数组”数据类型。 • （2）“函数”数据类型。 • （3）“对象”数据类型。

  20. 转义字符 和C语言一样，js也有转义字符，常用的就是：“ \n ”

  21. 常用的全局方法 • alert(str):弹出提示框，内容为str，例如下图的 alert(‘你好’); • confirm(str):弹出确认框，让你点击是和否，是则返回true,选否则返回false confirm(“确实要删除吗”) • prompt(str,default):弹出输入框,返回输入的字符串 prompt('请输入姓名','张三')

  22. “+”号的用法-1 <HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> var x=100; var y; var z; document.write("<H2>竞拍SONY数码相机 600万像素" +x+"$起价</H2>"); y=prompt("加多少银子？","1"); z=x+y; alert("您最终的出价\n"+z+"$"); //”\n”用于换行显示 </SCRIPT> </HEAD> <body> </body> </HTML> 10020? bug 200 Prompt函数返回输入的字符串 +字符串相连：100+”200”

  23. “+”号的用法-2 <HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> var x=100; var y; var z; document.write("<H2>竞拍SONY数码相机 600万像素" +x+"$起价</H2>"); y=prompt("加多少银子？","1"); z=x+parseFloat( y ); alert("您最终的出价\n"+z+"$"); //”\n”用于换行显示 </SCRIPT> </HEAD> <body> </body> </HTML> parseFloat( )函数将字符串转换为float数据 parseInt( )函数将字符串转换为int数据 如果转换失败，返回NaN值(not a number)

  24. 运算符 • 运算符对一个或多个变量或值（操作数）进行运算，并返 回一个新值 • 根据所执行的运算，运算符可分为以下类别： • 算术运算符 • 比较运算符 • 逻辑运算符

  25. 运算符

  26. 算术运算符-1 num1 num2 result 实现步骤： 1.使用DreamWeaver设计页面 2.指定各个文本框的名称 3.切换为代码视图，编写脚本代码 4.浏览并调试

  27. 算术运算符-2 <HEAD> <SCRIPT language = "JavaScript"> function calcu( ) { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total=parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; } </SCRIPT> </HEAD> 定义calcu( )计算函数,实现两个数相乘的功能.定义函数的语法： function 函数名(参数列表) { //JavaScript语句； } 获取表单中输入的数据： document.表单名.表单元素名.value 计算总价并显示 添加单击事件，单击按钮时调用“calcu()” 函数 … <INPUT name="getAnswer" TYPE="button" onClick="calcu( )" value="计算看看">

  28. 比较运算符

  29. 比较运算符 <HTML> <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if (total>500) alert("购买总价超过500\n支付时将赠送超级Q币2枚！"); } </SCRIPT> </HEAD> ….其他代码略，同上例 购买总价超过500， 赠送超级Q币2枚！

  30. 运算符 逻辑运算符

  31. 逻辑运算符 <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if ((total>500) &&(total<=1000)) alert("购买总价超过500\n支付时将赠送超级Q币2枚！"); if ((total>1000) &&(total<=2000)) alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！"); if ((total>2000)) alert("购买总价超过2000\n请直接与贵宾台联系！"); } </SCRIPT> </HEAD>….其他代码略，同上例 500－1000 之间，赠送超级Q币两枚； 1000－2000之间，赠送IBM智能鼠标一只； 2000以上，直接与贵宾台联系。

  32. 特殊运算符

  33. if 语句 2-1 条件语句用于测试条件。 语法： if(条件) { JavaScript代码; } 如果要执行多个语句，必须将这些语句放在一对大括号 ({ }) 内。但如果只要执行一个语句，则可以省略大括号

  34. If语句 2-2 <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if ((numb1!="") && (numb2!="")) { var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if ((total>500) &&(total<=1000)) alert("购买总价超过500\n支付时将赠送超级Q币2枚！"); if ((total>1000) &&(total<=2000)) alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！"); if ((total>2000)) alert("购买总价超过2000\n请直接与贵宾台联系！"); } } </SCRIPT> </HEAD>….其他代码略，同上例 如果输入框中的数据用户漏填了， 出现NaN的 bug 为什么呢?

  35. If-else语句 2-2 <HEAD> <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if ((numb1!="") && (numb2!="")) { var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; if ((total>500) &&(total<=1000)) alert("购买总价超过500\n支付时将赠送超级Q币2枚！"); if ((total>1000) &&(total<=2000)) alert("购买总价超过1000\n支付时将赠送IBM光电智能鼠标1只！"); if ((total>2000)) alert("购买总价超过2000\n请直接与贵宾台联系！"); } else alert("购买数量或竞拍价格没有填写\n请重新输入！"); } </SCRIPT> 提示没有填写购买数量或者竞拍价格?

  36. 嵌套If语句 2-2 <SCRIPT LANGUAGE = "JavaScript"> function calcu() { var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if ((numb1!="") && (numb2!="")) { if (parseFloat(numb1)<0) { alert("竞拍价格不能小于零！\n请重填"); return; //函数返回，不再执行后面的代码 } if (parseFloat(numb2)<0) { alert("购买数量不能小于零！\n请重填"); return; } var total= parseFloat(numb1)*parseFloat(numb2); document.calc.result.value=total; ….. 购买数量无意中输入负数，出现 bug 怎么办?

  37. switch 语句 2-1 语法： switch (表达式) { case 常量1 : JavaScript语句; break; case 常量2 : JavaScript语句; break; ... default : JavaScript语句; }

  38. switch语句 2-2 ..... var f=document.calc.pay.value; //支付方式代号 var grade; //折扣率 var total= parseFloat(numb1)*parseFloat(numb2); switch(parseInt(f)) { case 1: grade=0.6 ; //打6折优惠 break; case 2: …….同理其他方式打7折、八折 case 4: grade=0.9 ; //打9折优惠 break; default: alert("请重新选择支付方式！"); return; } var money=total*grade; //根据折扣率，计算实际总价 document.calc.result.value=money; alert("您享受了"+grade*10+"折优惠！"); ….. 银行转帐－ 打6折 电话支付－ 打7折 邮政汇款－ 打8折 Q币支付－ 打9折 下拉列表框pay的选项和值

  39. 课堂重点 • 网页中嵌入脚本有两种方式：使用<Script>标签或外部 *. js文件 • JavaScript 中声明变量：var变量名 • “+”可以用于两个数相加，还可以用于连接字符串 • parseInt() 和 parseFloat() 函数将字符串分别转换为整型和小数 • 运算符号分为算术运算符、比较运算符、逻辑运算符 • 条件语句分为if语句，if-else语句、if的嵌套 • 多分支语句switch根据表达式的值，进入不同的分支执行

  40. 有问有答

More Related