0

0

小强的HTML5移动开发之路(26)—— JavaScript回顾1

黄舟

黄舟

发布时间:2017-02-04 14:13:57

|

1455人浏览过

|

来源于php中文网

原创

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

一、JavaScript的作用

1、数据验证

2、操作网页(网页的动态效果)

3、操作窗口

立即学习Java免费学习笔记(深入)”;

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等)的途径以及操作方法。

839.jpg

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

Bardeen AI
Bardeen AI

使用AI自动执行人工任务

下载

2、复杂数据类型

Array

Function

Math

Date

Number

String

RegExp

Error

Aguments

Object

四、JavaScript中的事件处理机制

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

(1)绑定到html标记上
 
(2)绑定到dom节点上
 var obj = document.getElementById(id);
 obj.onclick = f1; //绑定到dom节点之上

  
      
      
          
         
      
          
          
      

html代码与javascript代码分开存放

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

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

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

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

2、事件对象

(1)如何获得事件对象

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

(2)事件对象的作用

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

  
      
          
      
      
        only ie not firefox

ie and firefox

找到事件源(产生事件的那个对象)

ie: event.srcElement
firefox: event.target

  
      
          
      
      
        get the first resorce

get the second resorce

3、事件冒泡

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

  
      
          
          
      
      
          
      

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

  
      
          
          
      
      
          
      

以上就是 小强的HTML5移动开发之路(26)—— JavaScript回顾1的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

70

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

73

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

298

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

471

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

17

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

114

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

79

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

94

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

74

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.8万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.7万人学习

前端开发(基础+实战项目合集)
前端开发(基础+实战项目合集)

共60课时 | 3.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号