JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解-阿里云开发者社区

开发者社区> 谙忆> 正文

JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

简介: 这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+""); } function print(param){ document.write(param); } 什么是 DOM? DOM 是 W3C(万维网联盟)的标准。
+关注继续查看

这节博客主要讲解Dom模型概念~和JSON的简单介绍

首先,还是先上out.js的代码:

function println(param){
    document.write(param+"<br/>");
}

function print(param){
    document.write(param);
}

什么是 DOM?

DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

在这里,我们学的是HTML-DOM。

什么是 JSON ?

JSON 比 XML 更小、更快,更易解析。
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *,存储和交换文本信息的语法。类似 XML。
JSON 具有自我描述性,更易理解
* JSON 使用 Javascript语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态(PHP,JSP,.NET)编程语言都支持JSON。

JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 JavaScript 对象。

  • JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。
    文本可以被任何编程语言读取及作为数据格式传递。

JSON 语法规则
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

演示代码:

<html>
    <head>
        <title>自定义对象--json的用法演示</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <script type="text/javascript" src="out.js">
        </script>
        <!-- 用js来描述我们自己的对象,如类似java当中的Person类 -->
        <!-- 方式3 -->
        <script type="text/javascript">
            //json---在JavaScript中封装数据对象
            //map
            var pp = {
                //"name":"张三","age":"23", //key:value
                name: "张三",
                age: "23",//这句和上面一句等效---key的名称可以省略引号
                getName: function(){
                    //"getName":function(){//这句和上面一句等效
                    return this.name;
                }
            };

            println(pp.name + "," + pp.age);
            println(pp["name"] + "," + pp["age"]);//表示可以访问pp对象中的“name”和“age”属性
            //注意这里属性是名称而不是变量,所以必须用引用

            println(pp.getName());//调用函数
            println(pp["getName"]);//显示出函数的代码
            println(pp["getName"]());//调用函数
            var map = {
                8: "张三",
                3: "李四",
                5: "Jack"
            };
            println(map["8"]); //原理同前。json中冒号前面的那个是key,后面的是value
            println(map[8]); //8是数字,不可能是变量名,因此引号省略照样能解析出来
        </script>
        <script type="text/javascript">

            var myObj = {
                name:"张三丰",age:23
            };
            println(myObj.name+","+myObj["age"]);//分别用了两种读取属性的方式
        </script>

        <script type="text/javascript">
            var myMap={
                names:["Jack1","Jack2","Tom1","Tom2"],
                nums:[10,20,30,40]
            }

            println(myMap.names[1]+","+myMap.nums[1]);

            var myMap={
                names:[{name:"Jack111"},{name:"Jack222"},{name:"Jack333"}]   
            }

            println(myMap.names[1].name);
            println(myMap.names[1]["name"]);//与上面的访问一样的



        </script>

    </body>
</html>

360浏览器8.1 演示结果:

Dom模型概念讲解

DOM: Document Object Model 文档对象模型
主要用来将标记型文档(html,xml)封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象
既然都封装成了对象,那么就可以通过这些对象很方便地操作这些文档内容,达到操作页面内容–页面显示。

DOM树中的几个名词:
结点(节点):dom树中的标签、文本和属性等都称为结点(节点).
元素:dom树中的标签。
子节点 父节点(元素) 兄弟
父结点
主要用来将标记型文档(html,xml)封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象
既然都封装成了对象,那么就可以通过这些对象很方便地操作这些文档内容,达到操作页面内容–页面显示。

DHTML技术:
动态的HTML —-html + css + dom +javascript 配合使用,来做动态html页面
HTML—负责提供标签,同时用标签封装数据
CSS—-负责显示样式
dom—-把整个页面中的标签、属性和文字内容封装成对象。
js—–提供程序设计语言,for,while,if

我们可以通过这个对象树来加深对DOM的了解。

(最下面部分未画出)对象树如下:
代码随便写写哒、

代码:

<html>
  <head>
     <title>湖南城院</title>
  </head>
  <body>
      <div>div区域</div>
      <dl>
         <dt>上层项目</dt>
         <dd>下层项目</dd>
      </dl>
      <table>
         <tr> <th>姓名</th> </tr>
         <tr> <td>张三</td> </tr>
      </table>
      <form>
         <input type="text">
      </form>
      <a href="1.html">查看</a>
  </body>
</html>

window对象中的对象

window 对象:
代表浏览器中一个打开的窗口。

navigator 对象
包含关于 Web 浏览器的信息。

属性— 描述
appCodeName— 获取浏览器的代码名称。
appMinorVersion— 获取应用程序的次版本值。
appName —获取浏览器的名称。
appVersion —获取浏览器运行的平台和版本。
browserLanguage —获取浏览器的当前语言。
cookieEnabled— 获取客户端的永久 cookie 是否在浏览器中启用。永久
cookies— 是储存在客户端计算机上的。
cpuClass— 获取指示 CPU 等级的字符串。
onLine —获取表明系统是否处于全局脱机模式的值。
platform —获取用户的操作系统名称。
systemLanguage— 获取操作系统适用的默认语言。
userAgent —获取等同于 HTTP 用户代理请求头的字符串。
userLanguage —获取操作系统的自然语言设置。

演示代码:

<html>
  <head>
    <title>Bom模型演示----window对象中的对象</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>

  <body>
    <!--
       window中的所有对象在调用时,可以省略: window.
    -->

    <script type="text/javascript" src="out.js">
    </script>

    <script type="text/javascript">
        function windowObjDemo(){
            var name = window.navigator.appName;//获取浏览器的名称。
            //var version = window.navigator.appVersion;
            var version = navigator.appVersion;//获取浏览器运行的平台和版本。
            println(name+"----"+version);
            var pro = location.protocol; //设置或获取 URL 的协议部分。
            println(pro);
            var addr = location.href;//设置或获取整个 URL 为字符串。
            println(addr);
        }   
        function windowObjDemo2(){
            //location.href ="http://www.baidu.com";//点击按钮,跳转到百度
            location.href ="5a.html";
        }   
        function windowObjDemo3(){
            history.forward();//从历史列表中装入下一个 URL。//相对定位-相对的下一个-相当于浏览器中的前进按钮
        }   
    </script>
    <input type="button" value="演示window中的对象1" onclick="windowObjDemo()" />
    <input type="button" value="演示window中的对象2" onclick="windowObjDemo2()" />
    <input type="button" value="演示window中的对象3" onclick="windowObjDemo3()" />
  </body>
</html>

5a.html:

<html>
  <head>
    <title>aa</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>

  <body>
    <script type="text/javascript">
        function windowObjDemo(){
            history.back();//从历史列表中装入前一个 URL。---相对定位,相对的前一个。-相当于浏览器中的后退按钮
        }   
    </script>
    <input type="button" value="演示window中的对象" onClick="windowObjDemo()" />
  </body>
</html>

这里很简单,就不贴浏览器演示结果图片了。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript 使用面向对象的技术创建高级 Web 应用程序
最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员。四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 JavaScript 知之甚少。
2792 0
手把手教你完成MaxCompute JDBC自定义日志配置
本文讲述了如何在MaxCompute JDBC 2.0 beta版本中完成日志功能的相关配置,并进一步对logback的配置文件进行了示例及说明。
5114 0
TensorFlow新功能:TensorFlow Probability概率编程工具箱介绍
2018年,tensorflow开发者峰会上,tensorflow管理人员发布了:TensorFlow Probability——一种概率编程工具箱,用于机器学习研究人员和从业人员快速可靠地构建利用最先进硬件的复杂模型。快来学习一下吧~
3345 0
JavaScript轻应用网络模块介绍
JavaScript轻应用提供了网络管理相关的功能,APP可以通过JSAPI获取网络相关的信息,并且可以接收网络连接、断开的事件。
49 0
JavaScript面向对象的编程指南学习笔记
JavaScript面向对象的编程指南学习笔记 第一章 1,用自己的语言描述出,什么是对象、类、封装、聚合、继承、多态? 对象,拥有属性和方法的任何抽象概念。 类,可以实例化,有共同属性或方法(行为)的相似对象,的模板 封装,提供接口,隐藏接口的实现 聚合,将大功能(对象)拆分成小功能(小对象)去实现的逆过程。
8848 0
《JavaScript启示录》——1.4 用户自定义/非原生对象构造函数
关于构造函数比较复杂的一点就是this值在函数内部的使用方式。请记住,构造函数只是一个饼干模具,在将它与new关键字一起使用时,它会创建一个拥有构造函数内部定义的属性和值的对象。在使用new关键字时,this值的字面意思是基于构造函数内部的语句创建的新对象/新实例。
1035 0
JavaScript 面向对象编程之一
一:Class and private And public JS 中的类以 function 进行声明,同时 JS 也支持声明私有 private 和公有 public 成员,只不过跟 C# 不一样,它们不是使用这两个关键字实现的。
672 0
JavaScript之函数定义以及类型
今天在网上做到一道面试题,代码如下: var f = function g() { return 23; }; typeof g(); 问:以上代码的输出结果是() A “number” B “undefined” C “function” D Error 我第一反应选择的答案是A/C。
578 0
精通SpringBoot——第十一篇:使用自定义配置
spring boot 实现自定义配置的几种方式
2815 0
+关注
谙忆
GitHub: https://github.com/chenhaoxiang
714
文章
40
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载