Practical 2 (introduction to javascript)

In the second practical, the task was to create a form that would allow user to your site register for a conference. The objectives was to learn about the HTML Form and its properties, the elements on the HTML form, introduction to the use of JAVA-SCRIPT and essentially how to validate the input a user gives from the browser side before sending the data to the server.

As usual i started out this practical with designing the interface of the webpage. For me, getting the concept about the interface and getting it right, makes it easy to figure out the functionality that would follow later. Honestly, i spent a lot of time putting the various elements of the interface together, because in this practical i want to learn the use of the DIV and SPAN tags instead of using the TABLEs i was used to. In addition to that, i took this practical as an opportunity to explore the role of the Cascading Style Sheet (CSS) components of web technologies.

Design of the form

As i mentioned earlier on in my first post, the only way i knew how to nicely organize the content of a web page was to use tables. But in using the DIV and SPAN elements i realized that they was more control and room to alter the properties of these elements that would give a very appealing design structure. The STYLE attribute of the element i tired included, rounding the borders of the elements of the page, changing the border colors,  centering the elements, hiding and showing elements when needed and using the positioning of objects to make certain elements overlap other (with that knowledge i decided to add a loading mask effect to the form).

the loading mask

One thing i realized was that it was very easy to alter the properties set in the CSS using JavaScript also. JavaScript was not entirely new to me, i had actually used it in a web application i worked on during my summer internship last year(2011). However, at the time i used it i was not really familiar with the language, though it is a lot like java, i did not understand some fundamental concept underlying the structure of the language. This time around, what i did was to go through the w3school tutorial on JavaScript to understand the concept and structure of the language. 

Having said that, i realized that the online tutorials available, had very good content but they lacked very practical examples. Most of the examples were so basic and not varied at all. Also considering the very limited debugging functionality of web browsers, fixing a bug was very annoying and frustrating. What i resolved to do was to Google almost anything i needed to do. I realized the questions i had were not new ones and i found many sites (especially stack overflow) that had forums discussing most of the issues i had.

From hindsight, i would say that this practical was really helpful, i learnt and practically witnessed the use and application of CSS and JavaScript in web designing and the powerful results one can get from combining the two, regular expressions, the use of the DIV and SPAN tags, and most importantly i got a fair understanding of what most of the error messages during debugging really means.