CC1003N Week 6 More CSS and Javascript.

Objectives: ● More CSS Examples ● Javascript – introduction ● Uses of Javascript ● Variables ● Comments ● Control structure ● Functions ● Objects in Javascript ● Date Object ● Form validation

Styling Hyperlinks A:link { FONT-WEIGHT: normal; COLOR: #336699; TEXT-DECORATION: underline } A:visited { FONT-WEIGHT: bold; COLOR: #336699; TEXT-DECORATION: underline } A:hover{ TEXT-DECORATION: underline; background-color: #FFFFFF; }

Class Selector CSS Classes p.section1 {color:blue; font-size:20pt} p.section2 {color:green; font-size:16pt} p.section3 {color:magenta; font-size:12pt} This is section 1 This is section 2 This is section 3

Anonymous classes CSS Classes.section1 {color:blue; font-size:20pt}.section2 {color:green; font-size:16pt}.section3 {color:magenta; font-size:12pt} This is section 1 This is section 2 This is section 3

Division The tag defines a division/section in a document. Example This is a header in a div section This is a paragraph in a div section

Navigation menu ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} Link one Link two Link three Link four Example !

Javascript ● JavaScript was designed to add interactivity to HTML pages ● JavaScript is a scripting language ● A scripting language is a lightweight programming language ● Everyone can use JavaScript without purchasing a license

Uses of Javascript ● JavaScript gives HTML designers a programming tool ● JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has loaded or when a user clicks on an HTML element ● JavaScript can read and write HTML elements – A JavaScript can read and change the content of an HTML element ● JavaScript can be used to validate data – A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing

Using Javascript inside HTML ● The HTML tag is used to insert a JavaScript into an HTML page. some Javascript here......

Events ● onload ● onclick ● onsubmit ● onreset ● Example :

Variables ● variables are used to hold values or expressions. ● Rules for JavaScript variable names: ● Variable names are case sensitive (y and Y are two different variables) ● Variable names must begin with a letter or the underscore character. ● Examples of variables ● Declaring variables:var name; var id; ● Initializing variables:var name=”Islington”; var id=20; ● When you assign a text value to a variable, use quotes around the value

var name; name=“Islington”; document.write(name); document.write(" "); name=“Computer”; document.write(name);

Comments ● Single line comment // this is a single line comment ● Multi-line comment /* this is a multi-line comment */

Javascript arithmetic ● var a=5; ● var b=20; ● var c = b-a; ● var d = a+b;

Control structure – loop ● for loop for(variable=startvalue;variable<=endvalue;variable=variable+incremen t) { code to be executed }

for loop(Contd..) var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write(" "); }

while loop while (variable<=endvalue) { code to be executed }

while loop(Contd..) var i=0; while (i<=5) { document.write("The number is " + i); document.write(" "); i++; }

do....while loop do { code to be executed } while (variable<=endvalue);

do....while loop(Contd..) var i=0; do { document.write("The number is " + i); document.write(" "); i++; } while (i<=5);

Control structure - decision if (condition) { code to be executed if condition is true } else{ code to be executed if condition is false }

Control structure – decision (contd….) var d=new Date(); var time=d.getHours(); if (time<10) { document.write(" Good morning "); } Else document.write(" Good afternoon ");

Functions ● A function contains code that will be executed by an event or by a call to the function. ● You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external.js file). ● Functions can be defined both in the and in the section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the section.

Defining functions function functionname(var1,var2,...,varX) { some code } ● The parameters var1, var2, etc. are variables or values passed into the function. The { and the } defines the start and end of the function.

Example of function function displaymessage() { alert("Hello World!"); }

return statement ● The return statement is used to specify the value that is returned from the function. function product(a,b) { return a*b; } document.write(“result = ” product(4,3));

Objects in Javascript ● Objects in Javascript JavaScript is an Object Oriented Programming (OOP) language. JavaScript has built-in objects. Objects have different methods in it. Example: method var str="Hello world!"; document.write(str.toUpperCase()); Output:HELLO WORLD!

Date Object ● The Date object is used to work with dates and times. ● Date objects are created with the Date() constructor. ● There are differrent ways of instantiating a date: new Date() // current date and time new Date(year, month, day, hours, minutes, seconds, milliseconds)

Opening a new window ● The open() method opens a new browser window. - window.open(URL)

Opening a new window(Contd..) function open() { window.open(" }

window.open() – URL of new page – Name of new page – Feature string e.g. sizes ● E.g. window.open ("page1.html", "_parent","width=100, height=150");

Form validation ● JavaScript can be used to validate data inHTML forms before sending off the content to a server. ● Form data that typically are checked by a JavaScript could be: has the user left required fields empty? has the user entered a valid address? has the user entered a valid date? has the user entered text in a numeric field?

Form validation(Contd..) Create function to validate data Call the function when submitting the form <form onsubmit="return myvalidate()"... Alert if errors

Form validation(Contd..) function validateForm(form) { var x=form.fname.value; if (x==null || x=="") { alert("First name must be filled out"); } <form name="nameForm" action="first.html" onsubmit="return validateForm(nameForm)" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="Submit">