1 / 36

JAVASCRIPT 语言

JAVASCRIPT 语言. 教师:朱振宇. 一、 JavaScript 基础. 1.1 、 JavaScript 的语法 1.2 、变量 1.3 、数据类型 1.4 、条件语句 1.5 、循环语句 1.6 、函数. 1.1 JavaScript 的语法. 1 、区分大小写 2 、弱类型变量 var age =25; var myName=“zhuzhenyu”; var school =“cjxy” ; var male =true; 3 、每行结尾的分号可有可无 4 、括号用于代码块 if(myName == “zzy”){

feivel
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语言 教师:朱振宇

  2. 一、JavaScript基础 • 1.1、JavaScript的语法 • 1.2、变量 • 1.3、数据类型 • 1.4、条件语句 • 1.5、循环语句 • 1.6、函数

  3. 1.1 JavaScript的语法 • 1、区分大小写 • 2、弱类型变量 var age =25; var myName=“zhuzhenyu”; var school =“cjxy” ; var male =true; • 3、每行结尾的分号可有可无 • 4、括号用于代码块 if(myName == “zzy”){ var age = 18; alert9age); } • 5、注释的方式与C语言、Java相同

  4. 1.2 变量 • JavaScript中变量是通过var关键字(variable的缩写)来声明的。 • 首字符必须是字母(大小写均可)、下划线(_)或者美元符号($)。 • 余下的字母可以是下划线、美元符号、任意字母或者数字字符。 • 变量名不能是关键字或者保留字。

  5. 1.3 数据类型 • 字符串(例:字符.html) • 数值 • 布尔值 • 数组

  6. 1.4 条件语句 • 比较操作符 • 逻辑操作符 • if语句 • switch语句

  7. 1.5 循环语句 • while语句 • for语句 for( var i=0; i<n; i++){ //循环代码段 }

  8. 1.6 函数 • function functionName([arg0,arg1,…, argN]){ statements [return [expression]] } 例:function sayName(sName){ alert(“Hello”+sName); } sayName(“大家好”);

  9. 二、DOM模型 • 2.1. DOM模型框架 • 2.2、DOM模型中的节点 • 2.3、使用DOM • 2.4、innerHTML

  10. 2.1DOM模型框架 • 文档对象模型DOM(Document Object Module)定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新,它使得用户对HTML有了空前的访问能力。

  11. 2.1DOM模型框架 <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM Page</title> </head> <body> <h2><a href="#zzy">标题1</a></h2> <p>段落1</p> <ul id="myUl"> <li>JavaScript</li> <li>DOM</li> <li>CSS</li> </ul> </body> </html>

  12. 2.1DOM模型框架

  13. 2.2 DOM模型中的节点 • 元素节点 • 文本节点 • 属性节点 <a title=“CSS” href=“http://www.cjc.edu.cn”> 昌吉学院</a>

  14. 2.3 使用节点 • 访问节点(例)getElementsByTagName(例:访问节点1.html)getElementById (例:访问节点2.html) • 父子关系 • 节点的属性 • 创建新节点

  15. 2.4 innerHTML • innerHTML这个属性由于使用方便,也得到了目前主流浏览器的支持 • 该属性表示某个标记之间的所有内容,包括代码本身 • 该属性可以读取,同时还可以设置

  16. 三、JavaScript事件 • 3.1、事件流 • 3.2、事件监听 • 3.3、事件对象

  17. 3.1 事件流 • 冒泡型事件 • 捕获型事件

  18. 3.2 事件监听 • 简单的通用方法 • IE的方法 • 标准DOM的方法

  19. 3.3 事件对象 • IE浏览器中事件对象是window对象的一个属性event

  20. 四、表格与表单 • 4.1、动态控制表格 • 4.2、表单基础 • 4.3、文本框

  21. 4.1、动态控制表格 • 动态添加 • 动态删除

  22. 4.2、表单基础 • 可以通过document.form集合来引用表单,例如一个name属性为“myForm1”的表单可以用如下语句来获得:document.forms[”myForm1″]。 • 基本的表单元素

  23. 4.3、文本框 • 控制字符个数 • 单行文本框的maxlength属性 • 自动选择文本 • 鼠标经过时自动聚焦,并且能够选中默认值以便用户直接删除

  24. 五、jQuery概述 • 5.1 jQuery概述 • 5.2 jQuery中的“$” • 5.3 选择器

  25. 5.1 jQuery概述 • jQuery是一个优秀的JavaScript框架 • 主要提供如下功能 • - 访问页面框架的局部 • - 修改页面的表现 • - 更改页面的内容 • - 响应事件 • - 为页面添加动画 • - 与服务器异步交互 • - 简化常用的JavaScript操作 • 隔行变色的表格 • - CSS的实现方法 • - JavaScript的实现方法 • - jQuery的实现方法 • 下载并使用jQuery • - 官方网站(http://jquery.com/) • - 不需要任何安装过程

  26. 5.2 jQuery的“$” • 选择器 • 功能函数前缀 • window.onload • - window.onload的冲突 • - ready()方法 • 创建DOM元素

  27. 5.3选择器 • 属性选择器 • 位置选择器

  28. 六、jQuery控制页面 • 6.1 标记的属性 • 6.2 元素的样式 • 6.3 页面的元素 • 6.4 jQuery处理事件

  29. 6.1 标记的属性 • 获取属性的值 • 设置属性的值

  30. 6.2 元素的样式 • 添加CSS类 • 动态切换

  31. 6.3 页面的元素 • 直接获取、编辑内容 • 克隆元素

  32. 6.4 jQuery处理事件 • 事件监听 • 移除事件监听

  33. 七、jQuery动画特效 • 7.1 元素的显示与隐藏 • 7.2 渐入渐出的变幻 • 7.3 幻灯片效果

  34. 7.1 元素的显示与隐藏 • show()和hide()

  35. 7.2渐入渐出的变幻 • show()和hide() • fadeIn()和 fadeOut()

  36. 7.3 幻灯片效果 • slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

More Related