Monday, October 31, 2016
Wednesday, October 26, 2016
Code explanation for Ajax with XML lab
The required work with Ajax and XML using examples from w3schools might require some clarifications on how each line of code there works. Understanding this clearly you can somehow reuse the code dynamically creating HTML code for certain parts of the page (like a table) for presenting XML data. Explanations in this video will also allow you to make the examples more complicated and thus learn more.
Ajax code made simple
An HTTP request consists of four parts:
the URL being requested
an optional set of request headers, which may include authentication information
an optional request body
The "GET" and "POST" methods are universally supported. "GET" is used for most "regular" requests, and it is appropriate when the URL completely specifies the requested resource, when the request has no side effects on the server, and when the server’s response is cacheable. The "POST" method is what is typically used by HTML forms. The parts of an HTTP request have a specific order: the request method and URL must come first, then the request headers, and finally the request body. XMLHttpRequest implementations generally do not initiate any networking until the send() method is called.
The HTTP response sent by a server has three parts:
a set of response headers (you do not have to use these)
the response body (your information from the server)
<html>
<head>
<script>
function loadData()
{
var xhr;
xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.status==200 && xmlhttp.readyState==4 )
{document.getElementById("myDiv").innerHTML=xhr.responseText;}
}
xhr.open("GET","ajax_info.txt",true); // or just xhr.open("GET", url);
xhr.send(); // GET requests never have a body, so pass null or omit
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadData()">Change Content</button>
</body>
</html>
XMLHttpRequest Properties
An event handler for an event that fires at every state change.
readyStateThe readyState property defines the current state of the XMLHttpRequest object.
Here are the possible values for the readyState propery:
State
|
Description
|
| 0 | The request is not initialized |
| 1 | The request has been set up |
| 2 | The request has been sent |
| 3 | The request is in process |
| 4 | The request is completed and data received |
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been completely received from the server.
responseText
Returns the response as a string.
responseXML
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
status
Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").
statusText
Returns the status as a string (e.g. "Not Found" or "OK").
How Ajax changed web development
In this video lecture I will be talking not about the details in the code that uses XMLHttpRequest object but about the changes in Web development approach with the use of Ajax. This simple http technology is the foundation of switching from page-based interaction with the server to application based interaction when a number of small independent or communicating apps can create a coherent integral view seen as one page. You all saw such elements of pages as Google AdSense, Google Maps, Suggest, auto-complete, chats and IM, login portion of the page where independent functionality of such pieces does not require for the whole page to be reloaded and all client -side execution to be stopped until the server returns data in each Ajax section.
Working with smarterasp.net
See the short video on how to use folders and files on smarterasp server
Tuesday, October 4, 2016
Simple JS Debugging
In this video lecture you will learn some simple methods of HTML and JavaScript debugging. Of course, there are more powerful tools on the market, but the ones shown in the lecture are simple and easily accessible. In really big projects you can use whole studios of tools...
Commentary to Objects in JavaScript
By now you've learned/refreshed a quite standard set of flow control operations that are used in almost all programming languages. Now we are moving to more advanced data types such as arrays and objects.
Although arrays form an important topic in any language, objects are the key to modern software development. They allow for a piece of complex software to be broken into smaller and simpler parts that can be debugged independently and then reused in various combinations.
Modern JavaScript extensively uses objects in any serious approach to the software development. Here I am offering three short lessons that are based on your use of w3schools in some creative ways and will help you understand the topic better.
Objects. Part 1
Since your software can activate many different objects for communication with each other – anything that you want object to store, retrieve or do requires the use of a particular object name because otherwise it will be unclear who you are talking to (in your command). This can be achieved by calling first the name of a particular object followed by the operation on its data or invoking one of its methods (small programs).
Experiment with it live (http://www.w3schools.com/js/tryit.asp?filename=tryjs_create_object1 ) by adding and retrieving new properties, like making it say: “John is 50 years old and 4 feet tall.”
Although arrays form an important topic in any language, objects are the key to modern software development. They allow for a piece of complex software to be broken into smaller and simpler parts that can be debugged independently and then reused in various combinations.
Modern JavaScript extensively uses objects in any serious approach to the software development. Here I am offering three short lessons that are based on your use of w3schools in some creative ways and will help you understand the topic better.
Objects. Part 1
Objects are an extremely important topic in many modern programming languages, as well as in JavaScript. They dramatically increase your programming power, richness, effectiveness and efficiency. There are many tutorials on any part of JavaScript and you are encouraged to browse through some of them in order to find the ones that explain a particular topic in a way best for your learning methods and current understanding. Here I talk about something that will allow you to get into the tutorials on objects easier, compensating for often neglected efforts in letting students understand the nature of objects deep enough to be more comfortable with specific explanations.
Objects are complex data types that might contain data (properties) and a bunch of small programs (methods). Therefore they are like combinations of files with data and a library of programs in one system. Such system can be activated by just its name, can be send somewhere as one thing and then used in all its aspects, like getting data (properties) stored in it and/or running some programs that are contained in objects. In comparison with having files and programs separate – such complex systems (data types) like objects can be easily created and handled as one universal package where we can use its functional capabilities (by running the programs), its data storage capabilities by adding, changing, and retrieving data, or by both at the same time when newly obtained by an object data can be processed by its own programs (methods) either changing its own data or controlling input and output of data processing in and out of an object.
Object-oriented analysis, design and programming tends to see any real life object, process, concept, and so on as potential software objects with their structural and behavioral characteristics. Having these features, program objects can model real life objects that usually also have properties and can doo something (or something can be done to them). Examples: a car, a computer, a pen (with its size and weight, as well as an ability to touch paper, leave a line of ink, etc.) and so on. Once you are trained in such vision – you can quickly create models of real situations (or virtual and game situations) and make them interact with each other using their properties and behaviors in response to initiatives of other objects. Thus you can create real virtual/game worlds that react to actions of their own objects or physical objects like players.
ExampleA: myCar. CurrentMileage = 2000;
ExampleB: myCar.showYourCurrentMileage();
Here the first example shows how to store data in one of the properties of myCar object (CurrentMileage), while the second shows how to run a small program (showYourCurrentMileage()) that might be programmed to get that property and show it on the page. See below an example from w3schools of an object “person” and a link allowing to experiment with it by adding and retrieving more properties.
Example 1. Properties:
<body>
<article id="demo"></article>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Then create more interesting objects with properties and something printed out about that object. Later you will be adding code for changing the properties and adding new properties dynamically.
Objects. Part 2. Methods
After you watch Lecture 1 (What are objects?) we can continue to the discussion of the second part of objects - programs that are stored in them. They are called methods. In this video lecture I will be talking about ways of using w3schools as a debugging and development platform
Objects. Part 3. More Advanced Stuff (optional reading)
First read http://www.w3schools.com/js/js_object_prototypes.asp about prototypes and experiment with them in included exercises. Important to understand that compared to the old typical object-oriented languages (VB, C++, C#, Java, etc.) that are strongly typed and have such forms as objects being created during the compilation time – dynamic languages (such as Perl, Ruby, Smalltalk, and… JavaScript, along with the number of others) allow to change the program and its data types during the execution depending on the situation. For example var x = 5; dynamically becomes and integer, but if later you use x=”hello”; then it becomes a string. You saw in the examples from w3schools how it is possible to change, add, delete properties and methods in objects. Same is possible to do in constructors using prototypes. This allows to change whole groups (types of objects) like instead of changing properties of a student Bob – you can change properties of the constructor which changes properties of ALL students that were derived (using “new”) from that constructor. For example in games, objects operating on the screen might change properties (like colors, shapes, etc.) and behaviors under various conditions DURING the game. In general program can change itself depending on the situation and an old saying that computer can do ONLY what it was programmed to do is incorrect. Software systems can LEARN (using various learning algorithms) and evolve to become more adequate to the situation when after a while the creators might not even know how and why the system does some new tricks.
This leads to the situation when in systems that were intended to be dynamic – the programmers do not know what properties and how many of them their objects will have after a while depending on various situations. This leads to the need in using safer forms of handling objects where their properties are treated as arrays and are accessed in a loop like is shown in http://www.w3schools.com/js/tryit.asp?filename=tryjs_object_for_in where the code uses it:
var txt = "";
var person = {fname:"John", lname:"Doe", age:25};
var x;
for (x in person) {
txt += person[x] + " ";}
Here x (better would have been to use conventional i, j as indexes) is just an index reflecting the position of an attribute in the object “person”. Using a tricky construction (for (x in person)) we can enumerate the properties and then treat them like an array using their relative number in the enumerated sequence treating it as person[x] instead of giving a name of each property as you did before.
An example of how useful objects are in making your code more compact and logic more clear can be seen in operating whole objects as variables by passing them to other objects or functions:
var father = {
firstname:"John",
lastname:"Doe",
age:65,
eyecolor:"blue"
};
function canRetire (person){
if (person.age > 62) {
return true;
return true;
} else {
return false;
}
Here, assuming that object father is an instance (derived from) of the type (class) person, we are passing the whole object to the function checking if that particular person (particular object) can retire. In a similar fashion once a function gets an object as a parameter – it can internally use all its properties and functions. Notice that instead of sending a bunch or parameters to a function we are sending just one (of type person) that can have a very complex and rich structure.
Subscribe to:
Comments (Atom)