N00Blog


JQuery
July 14, 2008, 6:15 am
Filed under: Web Applications | Tags: , , , , , ,

JQuery is a Javascript library which aims to simplify the use of javascript within html and make it more efficient. it is able to perform actions with one line of code which would normally take numerous lines of javascript.

Minifying is the automated process of minimizing the number of characters used in each action to the smallest amount, then used by JQuery. The resulting code will have the same functionality as the previous code, but load and run faster, and is often easier to understand.

JQuery has an inbuilt function :

$(document).ready(function(){ // Your code here });

which allows scripts to be run after the page has been loaded. In regular javascript, this type of action would require use of the onload attribute, often within the body tag. While this would require multiple lines of code, the built in ready function needs only one.

another useful part of JQuery is its chainability, meaning that actions previously spanning lines of code may be seperated by full stops in order to have each action follow on from one another.eg:

$(“p.surprise”).addClass(“ohMy”).show(“Slow”);

first finds any paragraphs named “surprise”, then adds a class to these called “ohMy”, and finally displays the content slowly

 $("a").click(function(event){   event.preventDefault();   $(this).hide("slow"); });

with this code, as far as i can tell, it works when the specified link is clicked on. It stops the link performing the default action (opening the location), and instead hide the link slowly.



HTML Document Object Model
June 23, 2008, 8:35 am
Filed under: Web Applications | Tags: , , , ,

The HTML Document object model is a w3 standard for accessing and working with HTML. It provides a hierarchial, tree like structure, where “objects” within the document contain attributes, and even other objects. Using scripts, these “parent nodes” (higher level objects), and their “child nodes” (contained objects) can be viewed and altered according to the author’s will, and user inputs. To view or alter these elements, “GetElementById” may be used in Javascript eg:

document.GetElementById(“Div1″).innerHTML = “this text”

would select the element with the id “Div1″ and change the text it contains to “this text”. Following this, exclusive to IE, DOM, enables the use of document..all”Div1″) to select all of the objects below “Div1″ in the heirarchy.

Events can be used within scripts in objects, to provide user interactivity, and to access other elements of the DOM. Events such as OnKeyPress, and OnKeyDown allow such events (as user presses keys) to run scripts within the HTML. The difference between OnKeyPress and OnKeyDown, is that while OnKeyPress will trigger an event repeatedly as long as the key is held down, OnKeyDown will trigger only on the initial keypress.

Event Bubbling is a function performed within the DOM process, which occurs when events are triggered by the user. If an event is triggered by an element, but no associated process is included within the object, the event is shifted up the DOM heirarchy in a ‘bubbling’ process, until it reaches an element which can process the event.

Source:

MSDN: About the DHTML Object Model



The <form> tag
May 28, 2008, 1:51 am
Filed under: Web Applications | Tags: , , , , ,

The <form> tag in xhtml inserts a form, and allows for associated objects (buttons, drop down boxes etc) to be inserted, into an html page.

between the opening and closing tags, there is typically text, asking the user to input or select from some data, along with the code allowing this process to occur. For example

<input type=”textfield” name=”UserName”>

to allow the user to enter their name into a text box.

Three important attributes can be entered within the opening tag:

Method: Such as “GET” or “POST” which dictates the method that is used to handle the data in sending it to the webserver

Action: The URL to which the data is to be sent

Enctype: The format in which the data is sent, whether as plaintext, ciphertext etc.

Sources:

http://www.topxml.com/xhtml/xhtml_tag_form.asp