Javascript Tutorials

« Previous Entries

Archive

Next Entries »

Why you should use prototype to define object methods. I wont go over the basics of object oriented programming in javascript, and this article assumes that you know your way around with js oop at least a little bit, but.. for completeness sake

When defining an object in javascript you start with the constructor function. A function is used to construct an object as soon as it is called with the "new" keyword. You can then define methods and properties of the object by using the this keyword.

Now, when creating the methods of the object there are several common ways people go about it, the first and most common way that iv'e seen is directly defining the methods in the constructor function.

It is also the way i've been doing it for the past year or so.



Compressing your javascript Commenting your code and having good, readable formating goes a long way. That's true for javascript as well as it is true for any other programming / scripting language.

However when it comes to javascript or any other script that needs to be downloaded by the user you will want a version of your code that has it's comments removed and takes a up as little space as possible in order to decrease data transfer.

If you have access to a linux box you can do this fairly easily with a command line script and perl.


AJAX Series: Tutorial #4 - When bandwidth is an issue When i was working on my browser-based mmorpg i had to decide on the way in which the server and client communicate.

The client being the browser based javascript app and the server being handled by PHP and mySQL.
At first i was using an iframe system that would execute javascript code that was built by the PHP scripts on the server side.

This turned out to be working fine but in-efficiently, plus the amount of data transfer was a lot, considering the game sent a requests every few seconds.

Then a friend pointed me to AJAX style development, which, needless to say turned out to be exactly what i needed. I still had to work out one issue though and that was deciding whether to stick to the XML protocol or design my own protocol for it. I decided to design my own protocol because XML, while convenient still was too much bandwidth usage for this project.


AJAX Series: Tutorial #1 - Sending a simple request I like to write my tutorials in a way that on the code side of things a lot will be explained via comments embedded in the code examples. As this should be more readable by the user and keeps my writing flow going in fluid way :).

It is probably a redundant thing for me to explain what AJAX does and how to crate the XMLHttpRequest object, as there are a million tutorials out there already that tell you how to do that. I will still do so for completeness sake though, but i will try to keep it short.


AJAX Series: Tutorial #3 - The X in AJAX stands for XML The X in AJAX stands for XML, however most AJAX tutorials i come across online only seem to deal with the raw content responseText property.

I imagine it is because it is sufficient most of the time. However using XML as transfer protocol can be an advantage because you do not need to parse the content manually and can work with the data in a structured way right way.

Whenever the content type of the content received by the xml request is xml the responseXML property is set. It holds a DOM object created from the XML received that we can walk through as we would do with any other DOM object.

Let's start by making a XML document for our client application to request. We do this by making a simple php script.


AJAX Series: Tutorial #2 - Sending POST requests Sending GET requests via ajax is easy, parameters are simply attached to the url of the request via ? & delimiters.

If you want to send huge amounts of data though this is not sufficient because there is a limit to how long the url string can be. In this case you will want to use the POST method instead.

If you're new to ajax development make sure you read the previous tutorial where i talk about creating and using the XMLHttpRequest object.


Replacing characters throughout the page A member over at CodingForums had a problem where he needed to replace certain characters in his page using javascript.

I usually dont copy the stuff i post over at coding forums to this page, but here is one solution to his problem.

We create a function that allows us to recursively loop through all the elements on the page. We will call this function scanNodes.


Unselectable text in absolutue positioned elements in IE Internet Explorer has a problem with text selection in absolute positioned HTML nodes. It only occurs if the node is positioned outside the dimensions of the BODY element.

The problem is that Internet explorer does not adjust the body size if you move or resize absolute positioned nodes. So if, for example, you position your node at 500,500 and the body element is only 200 pixels high then your node will be outside of the body element's dimensions and anything inside that node will become un-selectable in internet explorer.

To fix that simply adjust the body size to cover where the Node is moved. Either manually as you're moving the node, or you could try setting the body width and height to 100% in css, although i have never tried that.

« Previous Entries

Show Overview

Next Entries »

---