Week 1
In the first week we were told the module contents of Com311 this semester. I
learnt that we will be covering client-side web design as the main topic,
including standard, browser object model, (X)HTML, HTML(5), CSS, scripting
languages such as Javascript and jQuery, Dynamic web design, Cookies and
security and Advance web design. This weeks lecture was a recap of what we
learnt in first year.
Our first assessment will be a weekly learning log from week 1-6. To include the
practical’s we do every week, what we learnt in lectures, and my reflection of
thought. Which is to be submitted through blackboard at the end of week 6.
Practical 1 – to create a form
COM311.html
Week 2
In this weeks lecture we got feedback from the forms we done as part of the
practical for week 1. Learnt about Cascading stylesheets, XHTML, web
accessibility, User experiences and tables. Again a recap over what we learnt in
first year, to refresh our memory.
NB. What I thought was important
- Href attribute is used to provide the name and location of the stylesheets
- XHTML consists od the element set of HTML reformulated to adhere to
the syntax rules of XML
In this weeks practical we updated our learning log and uploaded the live link
into the submission box.
Week 3
This week we learnt about Javascript. I learnt that it is an object-orientated
programming language that is different from Java. Which I’m glad I found out, as
I believed Java was just short for Javascript. Javascript code is integrated directly
into common HTML documents and is split into three parts:
1. Document object model (DOM)
2. Browser object model (BOM)
3. Core javascript
I learnt that DOM is an internal road map of objects on a webpage, allowing
programmers generic access (adding, deleing and manipulating). It is a standard
for representing HTML or XML and is best suited for applications that will be
accessed frequently.
BOM is a collection of objects that define the browser window and its contents
for the browser software. It makes objects of elements that are proper to the
browser.
NB. What I thought was important
- scripts can go in the HEAD or BODY
For week 3s practical we created a rollover image, in which I have added the link
below.
- wk3Q3.html
Then I created a javascript template file as shown in the links below.
- wk3Q5.html
- wk3Q6.html
Week 4
In this weeks lecture we learnt about Arrays and Functions. I learnt that an array
is a special type of variable, a collection of data. Each element of an array is a
variable. In which an array is a container to hold multiple values. A javascript
Array is an array object.
Array e.g.
Var ulster = [“Magee”, “Jordanstown”, “Coleraine”, “Belfast”]
A function is a set of statements for a designed task. All variables declared in
function are called local and do not exist outside current function. Parameters
are also local variables and it promotes reusability.
Function e.g.
Function twoAdd (a, b) {
var theResult = a+b;
return theResult;
}
Also learnt about logic and debugging. Debugging is the act of tracing and
resolving errors in a programs. There are three types of errors:
1. Syntax – invalid or incorrect statements
2. Run-time – call to function that hasn’t been defined
3. Logic – performing one operation when another is intended
In this weeks practical we started off by correcting the errors in an example
script, as shown in the link below.
- wk4Q1.html
Then we used the Firefox error console to debug and correct scripts
- wk4Q2.html
Next we created an array using javascript to say the sentence “I’m a second year
INTERACTIVE MULTIMEDIA DESIGN student in ULSTER UNIVERSITY at
JORDANSTOWN”
- wk4Q3.html
We then worked on the function to change the sentence to “I’m a second year
INTERACTIVE MULTIMEDIA DESIGN student in JORDANSTOWN at ULSTER
UNIVERSITY”
- wk4Q4.html
Week 5
In week 5 lecture we continued on learning about arrays and functions, following
last week.
I learnt that in finding errors you are to check HTML structure and add the
character set <meta http-equiv=”content-type” content=”text/html;charset=utf8”/>
On using object namesVar visitorname = document.myform.visitor.value;
On using element IDsVar visitorname = document.getElementById(‘visitorid’).value;
I learnt a lot of useful code in this lecture which will help me understand
javascript more.
Week 5 practical we created a calculator, that adds two numbers together and
displays the results, as shown in the link below.
- calculator2.html
We also had to create a form using the data from week 4 practical, shown below.
- wk5Q1.html
Week 6
There was no lecture this week form Com 311, giving us time to complete our
assignment due for this week. As well as time to revise notes from weeks 1 to 6.
The practical this week was to create a form allowing the user to write their
name and using javascript to send back the users full name. Below is the link.
- wk6.html
Week 7
This week we learnt about looping statements. I learnt that loops do things
repeatedly. Loop control specifies what condition is necessary for the continued
execution of the loop. Loop body is where the statements are placed, which will
be repeatedly executed as long as the control condition is satisfied.
There are 3 types of looping statements in javascript: for, while and do… while.
For (initial expr.; test condition ; update expr.) {
}
while (condition) {
}
do {
} while (condition);
For week 7s practical we where to use the, for statement to create a count-up
from 1 to 5, shown below.
- 7a.html
The For statement was then replaced to a while and do.. while statement.
- 7b.html
Next a start button was added to the script, so the counting will start when the
button is clicked.
- 7c.html
Then the script was modified to do the opposite and now be a count-down from
5 to 1.
- 7d.html
The script was then modified to count-up to any number the user inputs.
- 7e.html
The final stage was creating a loop through an array, where the user will be able
to input their name, select their university and campus. When they click “show
information” the details they put it in will be shown as well as all the possible
options.
- 7f.html
Week 8
During week 8s lecture we learnt about branch statements. Conditional branch
statements are
1. if..
2. if.. else
3. if.. else if.. else…
4. switch
1.
if (condition) {
statements to execute if true
}
2.
if (condition) {
statements to execute if true
}
else
{
statements to execute are false
}
3.
if (condition) {
statements to execute if true
}
else if (condition)
statements to execute if true
}
else {
statements to execute if false
}
4.
switch (expression){
case value_1:
statements;
break;
case value_2:
statements;
break;
defulut:
statements;
}
For this weeks practical we were to create an input box to allow a user to enter
their name, in return a message will display “John, welcome to my homepage!” If
nothing is entered an alert message will appear asking the user to enter their
name.
- 8a.html
The next task was when a user selects a university, its displays the selected
university information. If user doesn’t make a selection, an alert message will
appear asking users to select a university.
- 8b.html
Next, we created a javascript application to calculate the average of four marks
that the user inputs.
- 8c.html
The code was then modified to display the average and the grade they received
using an if.. else if.. else statement.
- 8d.html
The code was modified again to display a message depending on the grade using
a switch statement.
- 8e.html
Week 9
This weeks lecture was on form validation. I learnt that form validation forces a
user to fill out all required fields in a web form, where a developer can set up the
rules in javascript. As well as learning how to detect and change the format of
information in a text field, learning how to work with radio buttons, check boxes
and selection menus and how to create simple self-grading tests.
Form validation types are:
- Checking the data the visitor enters on the form
- Reminding the visitor to enter missing data
- Reformat the visitors data as needed
Week 9 practical was to create a multiplication table using nested loop
statements, shown below.
- 9a.html
The next task was to create a webpage to check car insurance. The visitor is
required to input their name, age and marital status and their information will be
returned about their car insurance class, depending on their age.
- 9b.html
Week 10
Week 10s lecture was continuation on form validation. We learnt about string
properties and methods, including facts such as:
- A string is an array
- length is the number of characters in a string
- chart(n) method is used to get the character in the string object at the
position of n
- IndexOf (a character, n) is the position of the character in the string,
searching from the position n
- Subtring(n1, n2) method is used to obtain the substring of characters in
the string of the object from the position n1 to n2
Email validation was covered in the lecture, including conditions that an email
address needs to have and how to validate radio buttons, check boxes and
selection menus.
This week there was no practical as we had a class test, worth 10% of the
module.
Week 11
This week we learnt about image swapping and learnt a lot of useful code on
how to do this. We looked at image rollovers that are more advanced as they
involved multiple images and various different elements to make it work. I
attempted the examples in lab class and understood how to create a rollover
image.
In this weeks practical, we were to create a survey on users favourite book. The
user would input their details and when submitted an email would be sent to
suvery@worldbook.com
- 11a.html
For the next practical we were to create a double image rollover of 5 images of
our choice. The first image is a title “My favourite website” which I linked to my
Com311 weekly log. The next 5 images where of pugs, when each image is
hovered over the current image will be displayed at the bottom of the page. Each
image is linked to a different pug related webpage, shown below in the link.
- 11b.html
Week 12
In week 12s lecture we learnt about slide shows and animation banners. Basic
steps on how to create a slide show:
- Array in slide show
- Conditional branching
- Preloading multiple images can be applied
- buttons or links with onclick handlers can be used to trigger image swaps
Steps on how to create an animated advertising banner:
- using setTimeout() method
- can schedule tasks for the web browser to preform after a given delay
- task can be cancelled using the clearTimeout () method
For the final practical of the semester we had to create a slideshow with
functional buttons to move forward and back to each picture with an animation
banner to skip each image after a set timing period.
- 12a.hmtl
- 12b.html