JavaScript总结(二) 系统分析

学习Javascript的时候,遇到了一个问题。

看了牛腩的视频,感觉讲的太简单和基础,像认识一位新朋友,但仅有一面之缘就结束了。

再看姜浩的视频,又看得迷迷糊糊,让我找到了当初看两位台湾专家讲VB.net视频的感觉。学习显然不能到这儿就结束了。

结束了中间的自考之后,又翻了翻给的学习资料,发现还有不少关于Javascript的内容。相对视频,我还是更喜欢看书,因为书的结构能一目了然,能很容易把握全局(也反映出一个问题,不少视频在开篇都没有很系统地写出来到底你都要讲什么,没有结构图这些明眼就能看出来的东西,只是简单说几句就一带而过了)。

于是用半天的时间先看了一本基础的书,都是很基础、很浅显的东西,但基本说明了Javascript的框架内容。看的过程中,发现结构上还是“VB6.0的东西”,只是语言的功能不同,应用不同罢了。

所以学习不同的语言其实很像一个CSS+HTML的过程,抽象出他们的样式(这个样式是类似的),分析不同的内容就可以了。

好了,看一下这张基本的JS导图吧。

要说的有以下几点:1、JS的对象;2、BOM和DOM;3、与CSS和HTML的关系。

1、Javascript作为一种基于对象的语言,没有类,所以它本身拥有很多自身的对象。这些对象就相当于类的功能,如Math、Array这些内置对象和BOM、DOM这些对象模型。

上述是对象类型的简单介绍,跟以往的语言比也算比较特殊的了,毕竟不用实例化。对其访问也比较简单,就是普通的调用。来看看它的创建:

有两种方法:1、直接定义并创建对象的实例;2、使用函数来定义对象,然后创建新的对象实例。

例子:

fruit=new Object();
fruit.name="apple";
fruit.color="red";
fruit.weight=100;
/* 用方法一定义了一个水果对象,并创建了其实例*/
function fruit(name,color,weight)
{
this.name=name;
this.color=color;
this.weight=weight;
}
/* 用第二种方法定义了一个水果对象*/

创建该对象的实例:

var myfruit=new fruit("banana","yellow",100);  /* 方法二中水果对象的实例 */

2、BOM又叫浏览器对象模型,DOM叫文档对象模型。看名字就知道它们之间必然是有关系的,其实,DOM也是一种BOM。为什么?看下图:

红色圈起来的是BOM,绿色的是DOM(也就是document下的部分),它们的连接点就是document项。每条竖线都相当于一个“调用”关系,上级调用下级。

BOM提供了独立于内容,而与浏览器进行交互的对象。描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,如弹出窗口,改变状态栏中的文本等。

在BOM中,window对象是核心,它表示整个浏览器窗口,但不必表示其中包含的内容。

DOM描述了处理网页内容的方法和接口,它是HTML和XML的API,DOM把整个页面划成由节点层级构成的文档。它本身是与语言无关的,且不与Java,Javascript等其他语言绑定。

在DOM中,document是核心,他也是window对象的一个属性。它由一系列集合构成,这些集合可以访问文档的各部分。

3、网页的前台分为三个关系:内容、样式和行为,这些网页要素分别对应起来就是HTML(内容)、CSS(样式)、Javascript(脚本)。

HTML划分了不同的元素,也形成了不同的层次结构,使得各种元素都能获得标识;CSS利用这些标识改变HTML元素的样式,达到控制和布局的效果;Javascript则使这些元素活动起来,与用户交互,让HTML元素去“做事”。

这篇博客的定位还是初级,简单梳理一下js的基本概况。下面几篇就是一些高级的内容了,包括一本内容比较高级的书和姜昊视频的梳理和总结。

时间: 2024-11-02 02:19:30

JavaScript总结(二) 系统分析的相关文章

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

Head first javascript(二)

three basic data types text number boolean 变量 var var_name; 用'='初始化变量 var var_name = ini_value; const (不是所有浏览器都支持const) const const_name = ini_value; nan: not a number 使用一些未初始化的变量进行计算的时候会产生nan,如: const unknown; total = (1 + 2) * unknown; 这里total在计算的时

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

Javascript生成二维码(QR)

网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网站,虽然有服务器端缓存,毕竟需要大量的CPU运算时间,这或多或少也是很大的一块压力.所以就想,有没有一种不靠服务器,就只靠JS就生成二维码呢,毕竟二维码就是一堆黑白点而已.我也没有刻意去找网络上是否已经存在这样的解决方案,而且自己一直想深入分析二维码的生成细节,现有的项目也有这样的需求,于是我自己研

javaScript生成二维码(改造jquery.qrcode.js,使之支持中文,能带logo)

最近公司要求使用javaScript生成二维码,在网上搜了很多相关的资料,都不是很全面,俗话说:自己动手,丰衣足食. (这里吐槽下,有网友有了解决方案,却刻意把源代码压缩了,导致不知道改了什么东西,知识大家一起学习嘛,授人与鱼不如授人与渔!) 总结如下: 资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrcode.js,支持中文. 支持中文 1 //q

向ES6看齐,用更好的JavaScript(二)

向ES6看齐,用更好的JavaScript(二) 上一篇 中介绍了关于变量部分的新特性,本篇将从现有对象的拓展来展开介绍 1 增加了模板字符串 先看一下,ES6之前我们是如何实现输出模板的: document.getElementById('root').innerHTML = "the user name is " + username + "\nthe user age is " + age; 这样通过字符串相加拼接确实挺繁琐的,很容易出错,ES6引入了模板字符

Java 之 JavaScript (二)

1.DOM a.作用:通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素 b.功能: ①JavaScript 能够改变页面中的所有 HTML 元素 ②JavaScript 能够改变页面中的所有 HTML 属性 ③JavaScript 能够改变页面中的所有 CSS 样式 ④JavaScript 能够对页面中的所有事件做出反应 2.获取与更改 a.获取元素: var x=document.getElementById("intro"); //通过id获取元素 v

QRCode.js -- 用 Javascript 生产二维码

QRCode.js是一个生成二维码的JS库.QRCode.js支持在DOM中使用跨浏览器Canvas和table标签的. QRCode.js不依赖其他JS库. 基本用法: <div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "http://jindo.

JavaScript(二)--实现分栏

Javascript中讲到了分栏的小实例,这篇文章就写一个小的例子吧,从这个例子中看看我们都学到什么? (一)源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

刘强1109 JavaScript基础二(分支与循环结构)

[if-else结构] 1.结构的写法: 1 if(判断条件){ 2 条件为true时,执行if{} 3 } else{ 4 条件为false时,执行else{} 5 } 2.注意事项: ① else{}语句块,可以根据情况进行省略. ② if和else后面的{}可以省略,但是省略后,if和else后面只能跟一条语句,所以不建议省略{}. 3. if中的()中的判断条件,支持的情况:① Bolleam:true为真,false为假:② String:空字符串为假,所有非空字符串为真:③ Numb