HTML5移动开发之路（26）—— JavaScript回顾1

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（26）—— JavaScript回顾1

很久没有怎么用过JavaScript了，感觉有点生疏，最近在看关于HTML5移动开发方面的资料，有一种直觉告诉我，JavaScript昨天、今天很重要，明天会更重要。现在好多基于JavaScript的框架给我们的开发带来了很大便利，但是要更好的使用这些工具，我们就必须对JavaScript有一个更高的认识，翻开以前的笔记，开始复习吧。

一、JavaScript的作用

1、数据验证

2、操作网页（网页的动态效果）

3、操作窗口

4、ajax技术核心之一

二、JavaScript的组成

1、ECMAScript规范

ECMAScript 规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。
ECMAScript 标准定义了 JavaScript 脚本中最为核心的内容，是 JavaScript 脚本的“骨架”，有了“骨架”，就可以在它上面进行扩展，如 DOM（文档对象模型）和 BOM（浏览器对象模型）。

历史：1995年12月升阳公司与网景通讯公司一起引入了JavaScript。1996年3月，网景通讯公司发表了支持JavaScript的网景导航者2.0。由于JavaScript作为网页的客户端脚本语言非常成功，微软于1996年8月引入了Internet Explorer3.0，这个软件支持一个“约”与JavaScript相容的JScript。

1996年11月网景通讯公司将JavaScript提交给欧洲计算机制造商协会进行标准化。ECMA-262的第一个版本于1997年6月被Ecma组织采纳。

ECMAScript是由ECMA-262标准化的脚本语言的名称。JavaScript和JScript与ECMAScript相容，但包含超出ECMAScript的功能。

2、DOM

DOM 是“ Document Object Model ”的缩写，简称“ 文件对象模型 ”，由W3C制定规范。
DOM 定义了 JavaScript 操作 HTML 文档的接口，提供了访问 HTML 文档（如body、form、div、textarea等）的途径以及操作方法。

3、HTML DOM
w3c dom是规范  出现的时间比较晚
html dom不是规范(各个浏览器自己的)出现的时间比较早，w3c dom还没有出现(dom 0)
很多浏览器还支持一下一些对象
Select
Option
Table
TableRow
TableCell

4、BOM

BOM 是“ Browser Object Model ”的缩写，简称“ 浏览器对象模型 ”。
BOM 定义了 JavaScript 操作浏览器的接口，提供了访问某些功能（如浏览器窗口大小、版本信息、浏览历史记录等）的途径以及操作方法。
遗憾的是，BOM 只是 ECMAScript 的一个扩展，没有任何相关标准，W3C也没有对该部分作出规范，每个浏览器厂商都有自己的 BOM 实现，这可以说是 BOM 的软肋所在。
通常情况下，浏览器特定的（即非 W3C 标准规定的）JavaScript 扩展都被看作 BOM 的一部分，主要包括：

  • 关闭、移动浏览器及调整浏览器窗口大小；
  • 弹出新的浏览器窗口；
  • 提供浏览器详细信息的定位对象；
  • 提供载入到浏览器窗口的文档详细信息的定位对象；
  • 提供用户屏幕分辨率详细信息的屏幕对象；
  • 提供对cookie的支持；
  • 加入ActiveXObject类扩展BOM，通过JavaScript实例化ActiveX对象。

三、JavaScript数据类型

1、基本数据类型

number

string

boolean

null

undefined

2、复杂数据类型

Array

Function

Math

Date

Number

String

RegExp

Error

Aguments

Object

四、JavaScript中的事件处理机制

1、绑定事件处理代码的方式

（1）绑定到html标记上
 <input type="button" onclick="f1()"/>
（2）绑定到dom节点上
 var obj = document.getElementById(id);
 obj.onclick = f1; //绑定到dom节点之上

[html] view plain copy

print?

  1. <html>
  2. <!--  绑定事件处理代码   -->
  3. <head>
  4. <script>
  5. <!--这部分代码保存到活动对象里面，script里面执行完还没有生成树-->
  6. function f1(){
  7. alert(‘hello‘);
  8. }
  9. </script>
  10. </head>
  11. <body style="font-size:30px;">
  12. <input id="b1" type="button" value="点我吧"/>
  13. <script>
  14. var obj = document.getElementById(‘b1‘);
  15. obj.onclick = f1; //绑定到dom节点上
  16. //好处：可以将js代码和html代码分开
  17. </script>
  18. </body>
  19. </html>

html代码与javascript代码分开存放

[javascript] view plain copy

print?

  1. function f1(){
  2. alert(‘hello‘);
  3. }
  4. //window.onload表示当整个html文档全部解析完毕，
  5. //也就是说整个dom树已经生成之后，浏览器会产生一个load事件
  6. window.onload = function(){
  7. var obj = document.getElementById(‘b1‘);
  8. obj.onclick = f1;
  9. };
  10. //load事件不是用户参与产生的，是浏览器自己产生的
  11. //下面事件是用于触发的
  12. //click  blur  mouseover submit change

[html] view plain copy

print?

  1. <html>
  2. <!--  绑定事件处理代码   -->
  3. <head>
  4. <script src="myjs2.js"></script>
  5. </head>
  6. <body style="font-size:30px;">
  7. <input id="b1" type="button" value="点我吧"/>
  8. </body>
  9. </html>

这种绑定方式的优点是：可以js代码与html代码分离，方便代码的维护
但是这种方式的缺点是：不方便传参，需要使用匿名函数实现参数的传递

[javascript] view plain copy

print?

  1. //如果想传参数可以写一个匿名函数
  2. function f1(info){
  3. alert(‘hello‘+info);
  4. }
  5. //window.onload表示当整个html文档全部解析完毕，
  6. //也就是说整个dom树已经生成之后，浏览器会产生一个load事件
  7. window.onload = function(){
  8. var obj = document.getElementById(‘b1‘);
  9. obj.onclick = function(){  //匿名函数
  10. f1(‘zs‘);  //传参数
  11. };
  12. };
  13. //load事件不是用户参与产生的，是浏览器自己产生的
  14. //下面事件是用于触发的
  15. //click  blur  mouseover submit change

（3）使用每个浏览器自己的绑定方式
建议少用，因为浏览器兼容性问题

2、事件对象

（1）如何获得事件对象

点击按钮－－－>产生事件对象－－－>找到事件源
IE:直接使用event
firefox:需要在方法当中添加event参数
如果要同时兼容ie,firefox只需要在方法当中添加event参数

（2）事件对象的作用

clientX,clientY获得鼠标点击的坐标

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <script>
  4. //只能在IE上运行
  5. function f1(){ //输出用户点击时鼠标的坐标
  6. //window省略不写
  7. alert(event.clientX + ‘ ‘ + event.clientY);
  8. }
  9. //在firefox上面运行,IE也支持
  10. function f2(event){
  11. alert(event.clientX + ‘ ‘ + event.clientY);
  12. }
  13. </script>
  14. </head>
  15. <body style="font-size:30px;font-style:italic;">
  16. <a href="javascript:;" onclick="f1();">only ie not firefox</a><br/><br/>
  17. <a href="javascript:;" onclick="f2(event);">ie and firefox</a>
  18. </body>
  19. </html>

找到事件源（产生事件的那个对象）

ie: event.srcElement
firefox: event.target

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <script>
  4. //只能在火狐上运行
  5. function f3(e){
  6. //通过事件对象找到事件源
  7. var obj = e.target; //obj就是那个链接<a>
  8. alert(obj.innerHTML);
  9. }
  10. //只能在IE上面运行
  11. function f4(e){
  12. var obj = e.srcElement;
  13. alert(obj.innerHTML);
  14. }
  15. //可以在IE和火狐上面运行
  16. function f5(e){
  17. //js当中任意数据类型都可以转换成true或者false
  18. var obj = e.target || e.srcElement;
  19. alert(obj.innerHTML);
  20. }
  21. </script>
  22. </head>
  23. <body style="font-size:30px;font-style:italic;">
  24. <a href="javascript:;" onclick="f5(event);
  25. ">get the first resorce</a><br/><br/>
  26. <a href="javascript:;" onclick="f5(event);
  27. ">get the second resorce</a>
  28. </body>
  29. </html>

3、事件冒泡

当一个事件产生后，浏览器会在该事件的节点上查找有没有相应的事件处理代码，如果有则浏览器调用相应的事件处理代码来处理，处理完成后，该事件会继续向上抛给父节点继续处理如果没有，也会将事件继续向上抛给父节点继续处理

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <script>
  4. function clickA(){
  5. alert(‘你点击了连接‘);
  6. }
  7. function clickDiv(){
  8. alert(‘你点击了Div‘);
  9. }
  10. </script>
  11. <style>
  12. #d1{
  13. width:200px;
  14. height:200px;
  15. background-color:red;
  16. }
  17. </style>
  18. </head>
  19. <body style="font-size:30px;font-style:italic;">
  20. <div id="d1" onclick="clickDiv();">
  21. <a href="javascript:;" onclick="clickA();">click5</a>
  22. </div>
  23. </body>
  24. </html>

如何取消事件冒泡：event.cancelBubble = true;

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <script>
  4. function clickA(e){
  5. alert(‘你点击了连接‘);
  6. e.cancelBubble = true;
  7. }
  8. function clickDiv(e){
  9. alert(‘你点击了Div‘);
  10. }
  11. </script>
  12. <style>
  13. #d1{
  14. width:200px;
  15. height:200px;
  16. background-color:red;
  17. }
  18. </style>
  19. </head>
  20. <body style="font-size:30px;font-style:italic;">
  21. <div id="d1" onclick="clickDiv(event);">
  22. <a href="javascript:;" onclick="clickA(event);">click5</a>
  23. </div>
  24. </body>
  25. </html>
时间： 2024-12-10 14:31:04

HTML5移动开发之路（26）—— JavaScript回顾1的相关文章

HTML5移动开发之路（29）—— JavaScript回顾4

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(29)-- JavaScript回顾4 一.变量的作用域 JavaScript脚本的执行过程分为两个阶段: 第一阶段,js引擎()先扫描整个javascript代码.当碰到<script>时,会先创建一个全局的活动对象,将<script>中出现的变量的声明,函数的定义保存在活动对 象里面.如果碰到函数,则创建对应的局部活动对象,将函数内部的变量的声明及函数的定义保存在该活动对象里面. 第二阶段

HTML5移动开发之路（30）—— JavaScript回顾5

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(30)-- JavaScript回顾5 一.查找 第一种方式:依据id查找 var obj = document.getElementById(id);   //document是HTMLDocument的实例 [html] view plain copy print? <html> <head> <script> function f1(){ var obj = document

HTML5移动开发之路（27）—— JavaScript回顾2

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(27)-- JavaScript回顾2 JavaScript面向对象基础知识 1.如何定义一个类,使用如下语法来创建一个类 [javascript] view plain copy print? function Person(name, age){ //习惯上第一个字母大写 //this修饰的变量称为属性 this.name = name; this.age = age; //如果属性值是一个函数,则这个

HTML5移动开发之路（28）—— JavaScript回顾3

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(28)-- JavaScript回顾3 一.基本数据类型 number:数字类型 string:字符串 (注意s小写:string是基本类型) boolean:布尔类型   //前三个都有对应的包装类 null:空类型 undefined:未定义类型 测试一: [html] view plain copy print? <html> <!--基本类型测试--> <head> <

HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(19)--HTML5 Local Storage(本地存储) 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. 借用网上的一张图来看下目前主流的本地存储方案: Cookie: 在web中得到广泛应用,但局限

HTML5移动开发之路（20）——HTML5 Web SQL Database

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(20)--HTML5 Web SQL Database 一.Web Database介绍 WebSQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome.Firefox.Opera等主流浏览器都已经支持WebSQL Database WebSQL数据库有三个核心方法: 1)打开数据库openDatabase()方法: 此方法创建数

小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参数取出来.(程序灵活性较弱) 一.以GET方式实现页面间参数传递 <!DOCTYPE html

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互 当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住 直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（53）——jQueryMobile页面间参数传递

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(53)--jQueryMobile页面间参数传递 在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析. 2.通过HTML5的Web Storage进行参数传递. 3.建立当前页面变量,在前一个页面将所需传递的