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