Dynamic HTML with Javascript

Dynamic HTML with Javascript.

Aim

Our aim was to create a dynamic HTML webpage with Javascript.

Description:

We were given an HTML page that had a table created and designed with CSS style sheet. There were menus and editors created in DIV tags but were made invisible and had an absolute position which means that their position is not affected by the position of the parent element/tag. Some ONCLICK events were given to some of the HTML elements that would the functions in the script to perform some changes to the current or original HTML page.

Objectives

Our objective was to let the table respond to the onclick event by showing a popup menu or make a popup menu visible. Again the popup menu should appear at the position of the mouse click. Also the row that was clicked should be highlighted. It should be possible to add, edit and rows of the table that has been created. Again, when you click on edit in the popup menu, the contents of the row that was clicked must appear in the edit row text fields.

Implementation

The first function that is called when the page registers a click is the showPopupMenu(obj). This function shows the popup menu that gives the user the option of either edit, add, delete and a cancel option.

deleteRow()

The delete function just calls an inbuilt function called deleteRow with the index as arguement. This removes the specified row from the HTML.

addRow()

The addRow() function adds a row at the end of the last row. This is done getting the total number number of rows in the table so that the new row could be added after the last row. After the row is added, cells for row are created. Moreover, since the rows should have an onclick event, you set the attribute for the new Row that is created. Again, I added a code that would alternate the background colors of the rows switching between blue and white. Since by default all the even numbers were blue, I calculated for the modulus of the row index by 2 and when the remainder is zero, the background becomes zero. The problem with this is that, when a row is deleted, the colours of the rows mess up. Lastly what I did was to make the browser that the addRow() function has been called by changing the byAdd Boolean variable to true. The addRow() then calls the showPopupEditor().

showPopupEditor()

This function basically makes the <div> that has the editor for the rows visible. The editor will have as default content the information on the current row that is clicked. In a situation where there is not current row clicked ie the add function was called first by the testAddRow link, then there are no values in the text fields. In this function, it checks which function called it and therefore determine whether to add the Row at the end of the table or to modify the content of an existing row when save link is clicked. After the save click link is clicked, the <div> becomes invisible.

SavePopupEditor()

This function actually does the adding or editing of the cells of the table. This function works with information of whether the it was called by the addRow function or the user just wanted to edit the rows and cell.

Data validation with Javascript

Validating a web form with Javascript

Aim:

The aim of this practical is to ensure that the data that is entered is valid with respect to the formatting and the types of characters that are present within it. For example, A name should not have numbers, an email is supposed to have the @ sign and the @ sign is supposed to before the last dot.

Objective:

Our objectives are to create an HTML form with input boxes that receive user inputs and calling the respective functions that checks the validity of the values of the inputs boxes before submitting it the data to the server. All errors were to be displayed in the innerHTML attribute of the span element of the HTML page.

Implementation:

With this page, I used a table to hold all my objects on screen. I gave all the objects I would be referring to in the script “ids” so that I could get access them. To get an object in the HTML page with script to use, the getElementById(“objectID”) method of the document class is used. From one of the examples we did in class, I realized I could use the form id in the script directly without having to get the form object (document.getElementById(“formId”)) in the script like using the form Id to call methods of the form object and even get access to the other elements of the form. For example take a form with id = myForm. In the script, one can just say myForm.elements(“myTextBoxId”). When I used this format to get my input boxes object in the form, it seemed to work however after sometime, I realised the browser did not respond to the event triggers and no error registered in the debugger’s console. After speaking to some of my friends who explicitly got the form object before using it, I realised later the code format I used (ie using the form id directly) might not be supported by all browsers.

With the validation of data, we used mechanisms like comparing the string the user entered with a regular-expression object. This mechanism also came with its own problems. First of all, one had to know the format of the regular expression parameter to correctly specify the behaviour/characteristic of the regular expression object. For example [A-z] or [A-Z,a-z] is for characters from capital A through to small z. The regex can get complex once you want a quite a complex characteristic. For the regex I used ([A-z]), I intend it to be used only alphabets, however after doing the comparison, it was able reject only numbers but accepted the combination of numbers and alphabets.

  

Static HTML page

Creating Webpages with HTML   Blog1

Aim:

In this assignment, we were supposed to create static web pages with HTML. The HTML page should consist of images, hyperlinks, lists, table, headings and formatted text.

Objective:

Our objective for this assignment was to create two Web pages that were linked together with the use of hyperlinks. The first page should basically have the information about the company whereas the second page informs the visitor of site about the company’s executives and directors.

Implementation

After looking at a couple of web pages I had created in my freshmen year during the programming one course, I was ready to start with the assignment. With the basic knowledge I had in the creation of Web pages, I thought using a table to represent all the information that will be displayed on the screen. I also designed some images that were later added to the page to make it more visual appealing. 

The arrangement of the HTML objects in the table was a bit of a problem because I did not really understand the manipulations of the rows and columns of a table using the colspan. Usually if I wanted some text or image to occupy a whole row, I assign a large number like 7 to the colspan attribute of a row. I later got to understand that the colspan attribute expands a columns across a row thereby making other colums smaller or deleted. With the knowledge of this, I used this to form the layout of table and hence determining where images, text and hyperlinks are located.

Again, another issue concerning the creation of the web page was the size of the images used. It was a bit hard determining what size of photo to be used. I had to do a little trial and error to fit the images appropriately. I also realized that every image I tried setting was tiled at the position I put it so that also added to my experimentation on the size property of the cell I was insert the image.

Google Sites:

For this, our aim was to web development technologies from google to create web pages without writing HTML code. This seemed easier since everything you wanted to see was just a click away. I was given an array of templates to choose from for everything I wanted to do.

The only problem with this was that it was hard to figure out how to reverse changes made to your web page. Apart this, everything else was quite straight forward.