Home > Developer > JavaScript
This blog mainly explains the DOM model concept ~ and the JSON simple introduction
First, the Out.js code is first:
function println(param){ document.write(param+"<br/>");}function print(param){ document.write(param);}
What is DOM?
DOM is the standard of the World Wide Web Consortium.
The DOM defines the criteria for accessing HTML and XML documents:
The Document Object Model (DOM) is a platform-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. ”
The DOM standard is divided into 3 different parts:
Core DOM-a standard model for any structured document
XML DOM-a standard model for XML documents
HTML DOM-A standard model for HTML documents
The HTML DOM defines the objects and properties of all HTML elements, as well as how to access them.
In other words, the HTML DOM is the standard for how to get, modify, add, or delete HTML elements.
Here, we are learning html-dom.
JSON is smaller, faster, and easier to parse than XML.
JSON refers to JavaScript Object notation (JavaScript Notation)
JSON is a lightweight text data interchange Format
JSON is independent of language *, the syntax for storing and exchanging textual information. Similar to XML.
JSON is self-descriptive and easier to understand
* JSON uses JavaScript syntax to describe data objects, but JSON is still independent of language and platform. The JSON parser and the JSON library support many different programming languages. Currently very much dynamic (php,jsp,. NET) programming language supports JSON.
JSON-Convert to JavaScript object
The JSON text format is syntactically identical to the code that creates the JavaScript object.
Because of this similarity, the JavaScript program can use the built-in eval () function to generate native JavaScript objects with JSON data without a parser.
JSON Syntax Rules
The data is a key/value pair.
Data is separated by commas.
Curly braces Save Object
Square brackets Save Array
Demo Code:
<html>
<head>
<title>Custom Object--Json Usage Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript" src="out.js">
</script>
<!-- Use js to describe our own objects, such as the Person class like java -->
<!-- mode 3 -->
<script type="text/javascript">
//json---encapsulate data objects in JavaScript
//map
Var pp = {
//"name": "Zhang San", "age": "23", //key:value
Name: "Zhang San",
Age: "23", / / this sentence is equivalent to the above sentence --- the name of the key can be omitted
getName: function(){
//"getName":function(){//This sentence is equivalent to the above sentence
Return this.name;
}
};
Println(pp.name + "," + pp.age);
Println(pp["name"] + "," + pp["age"]);// means that you can access the "name" and "age" attributes in the pp object.
/ / Note that the property is a name rather than a variable, so you must use a reference
Println(pp.getName());//call function
Println(pp["getName"]);//Show the function code
Println(pp["getName"]());//call function
Var map = {
8: "Zhang San",
3: "Li Si",
5: "Jack"
};
Println(map["8"]); //The same principle as before. The one in front of the colon in json is the key, followed by the value
Println(map[8]); //8 is a number, it can't be a variable name, so the quotation marks can be parsed out.
</script>
<script type="text/javascript">
Var myObj = {
Name:"张三丰", age: 23
};
Println(myObj.name+","+myObj["age"]);//Use two ways to read attributes respectively
</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"]);// is the same as the above access
</script>
</body>
</html>
360 Browser 8.1 Demo results:
Dom:document Object Model Document objects
Used primarily to encapsulate tagged documents (html,xml) as objects, and to encapsulate all content (labels, text, attributes, and so on) in a tagged document as objects
Since they are encapsulated as objects, it is easy to manipulate the contents of these documents through these objects to reach the Action page Content – Page display.
several nouns in the DOM tree:
Nodes: tags, text, and attributes in the DOM tree are called nodes.
Element: A label in the DOM tree.
Child node parent node (element) brother
Parent node
Used primarily to encapsulate tagged documents (html,xml) as objects, and to encapsulate all content (labels, text, attributes, and so on) in a tagged document as objects
Since they are encapsulated as objects, it is easy to manipulate the contents of these documents through these objects to reach the Action page Content – Page display.
DHTML Technology:
Dynamic html--html + CSS + dom +javascript used to make Dynamic HTML pages
Html-is responsible for providing labels while encapsulating data with labels
css--responsible for displaying styles
dom--encapsulates tags, attributes, and text content throughout the page as objects.
js-– provides programming language, for,while,if
We can use this object tree to deepen our understanding of the DOM.
(the bottom part is not drawn) the object tree is as follows:
Code to write the DA,
Code:
<html>
<head>
<title>Custom Object--Json Usage Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript" src="out.js">
</script>
<!-- Use js to describe our own objects, such as the Person class like java -->
<!-- mode 3 -->
<script type="text/javascript">
//json---encapsulate data objects in JavaScript
//map
Var pp = {
//"name": "Zhang San", "age": "23", //key:value
Name: "Zhang San",
Age: "23", / / this sentence is equivalent to the above sentence --- the name of the key can be omitted
getName: function(){
//"getName":function(){//This sentence is equivalent to the above sentence
Return this.name;
}
};
Println(pp.name + "," + pp.age);
Println(pp["name"] + "," + pp["age"]);// means that you can access the "name" and "age" attributes in the pp object.
/ / Note that the property is a name rather than a variable, so you must use a reference
Println(pp.getName());//call function
Println(pp["getName"]);//Show the function code
Println(pp["getName"]());//call function
Var map = {
8: "Zhang San",
3: "Li Si",
5: "Jack"
};
Println(map["8"]); //The same principle as before. The one in front of the colon in json is the key, followed by the value
Println(map[8]); //8 is a number, it can't be a variable name, so the quotation marks can be parsed out.
</script>
<script type="text/javascript">
Var myObj = {
Name: "Zhang Sanfeng", age: 23
};
Println(myObj.name+","+myObj["age"]);//Use two ways to read attributes respectively
</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"]);// is the same as the above access
</script>
</body>
</html>
objects in the Window object
Window object:
Represents an open window in the browser.
Navigator Object
Contains information about the Web browser.
Properties-Description
Appcodename-Gets the code name of the browser.
Appminorversion-gets the minor version value of the application.
Appname-gets the name of the browser.
Appversion-gets the platform and version that the browser is running on.
Browserlanguage-gets the current language of the browser.
Cookieenabled-gets whether the client's persistent cookie is enabled in the browser. Permanent
The cookies-is stored on the client computer.
Cpuclass-gets a string that indicates the CPU level.
Online-gets a value that indicates whether the system is in global offline mode.
Platform-gets the name of the user's operating system.
Systemlanguage-Gets the default language that the operating system applies to.
Useragent-gets the string equivalent to the HTTP user proxy request header.
Userlanguage-gets the natural language settings for the operating system.
Demo Code:
<html>
<head>
<title>Bom model demo----object in window object</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!--
All objects in the window can be omitted when called: window.
-->
<script type="text/javascript" src="out.js">
</script>
<script type="text/javascript">
Function windowObjDemo(){
Var name = window.navigator.appName;//Get the name of the browser.
//var version = window.navigator.appVersion;
Var version = navigator.appVersion;//Get the platform and version of the browser running.
Println(name+"----"+version);
Var pro = location.protocol; //Set or get the protocol part of the URL.
Println(pro);
Var addr = location.href;//Set or get the entire URL as a string.
Println(addr);
}
Function windowObjDemo2(){
//location.href ="http://www.baidu.com";//Click the button to jump to Baidu
Location.href ="5a.html";
}
Function windowObjDemo3(){
History.forward();//Load the next URL from the history list. / / relative positioning - the opposite next - equivalent to the forward button in the browser
}
</script>
<input type="button" value="Demonize object 1 in window" onclick="windowObjDemo()" />
<input type="button" value="Presentation of object 2 in window" onclick="windowObjDemo2()" />
<input type="button" value="Demonize object 3 in window" onclick="windowObjDemo3()" />
</body>
</html>
5a.html:
<html>
<head>
<title>Bom model demo----object in window object</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!--
All objects in the window can be omitted when called: window.
-->
<script type="text/javascript" src="out.js">
</script>
<script type="text/javascript">
Function windowObjDemo(){
Var name = window.navigator.appName;//Get the name of the browser.
//var version = window.navigator.appVersion;
Var version = navigator.appVersion;//Get the platform and version of the browser running.
Println(name+"----"+version);
Var pro = location.protocol; //Set or get the protocol part of the URL.
Println(pro);
Var addr = location.href;//Set or get the entire URL as a string.
Println(addr);
}
Function windowObjDemo2(){
//location.href ="http://www.baidu.com";//Click the button to jump to Baidu
Location.href ="5a.html";
}
Function windowObjDemo3(){
History.forward();//Load the next URL from the history list. / / relative positioning - the opposite next - equivalent to the forward button in the browser
}
</script>
<input type="button" value="Demonize object 1 in window" onclick="windowObjDemo()" />
<input type="button" value="Presentation of object 2 in window" onclick="windowObjDemo2()" />
<input type="button" value="Demonize object 3 in window" onclick="windowObjDemo3()" />
</body>
</html>
This is very simple, do not paste the browser to show the results of the picture.
JavaScript---Network programming (5)-Custom object JSON, Dom model concept explained
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
