cc1003n week 6 more css and javascript.. objectives: ● more css examples ● javascript –...

CC1003NWeek 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<html>

<head>

<title> CSS Classes</title>

<style type=“text/css”>

p.section1 {color:blue; font-size:20pt}

p.section2 {color:green; font-size:16pt}

p.section3 {color:magenta; font-size:12pt}

</style>

</head>

<body>

<p class=“section1”> This is section 1</p>



</body>

</html>

Anonymous classes<html>

<head>

<title> CSS Classes</title>

<style type=“text/css”>

.section1 {color:blue; font-size:20pt}

.section2 {color:green; font-size:16pt}

.section3 {color:magenta; font-size:12pt}

</style>

</head>

<body>

<div class=“section1”> This is section 1</div>

<div class=“section2”> This is section 2</div>


</body>

</html>

Division

The <div> tag defines a division/section in a document.

Example<div style="color:#FF0000;"><h4>This is a header in a div section</h4><p>This is a paragraph in a div section</p></div>

Navigation menu<html><head><style type="text/css">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}</style></head>

<body><ul><li><a href="http://www.bbc.co.uk">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul><p> Example !</p></body></html>

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 <script> tag is used to insert a JavaScript into an HTML page.<script type=”text/javascript”>some Javascript here......</script>

Events

● onload● onclick● onsubmit● onreset● Example : <input type=”button” value=”click me”onclick='alert(“Hi

there!!”)'>

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

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

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

for loop(Contd..)<script type="text/javascript">var i=0;for (i=0;i<=5;i++){document.write("The number is " + i);document.write("<br />");}</script>

while loop

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

while loop(Contd..)<script type="text/javascript">var i=0;while (i<=5){document.write("The number is " + i);document.write("<br />");i++;}</script>

do....while loop

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

do....while loop(Contd..)<script type="text/javascript">var i=0;do{document.write("The number is " + i);document.write("<br />");i++;}while (i<=5);</script>

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….)<script type="text/javascript">var d=new Date();var time=d.getHours();

if (time<10){document.write("<b>Good morning</b>");}Elsedocument.write("<b>Good afternoon</b>");</script>

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 <head> and in the <body> 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 <head> section.

Defining functions

Defining functionsfunction 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

<html><head>

<script type="text/javascript">function displaymessage()

{alert("Hello World!");}

</script></head>

</html>

return statement

● The return statement is used to specify the value that is returned from the function.

<html> <head> <script type="text/javascript"> function product(a,b) { return a*b; } </script></head>

<body> <script type="text/javascript"> document.write(“result = ” product(4,3)); </script></body></html>

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: <script type="text/javascript"> method

var str="Hello world!";document.write(str.toUpperCase());</script>

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..)<html>

<head><script type="text/javascript">

function open(){window.open("http://www.w3schools.com");}

</script></head><body>

<form><input type=button value="Open Window" onclick="open()">

</form></body>

</html>

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 e-mail 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..)<html><head><script type="text/javascript">function validateForm(form){var x=form.fname.value;if (x==null || x==""){alert("First name must be filled out");}}</script></head>

<body><form name="nameForm"action="first.html" onsubmit="returnvalidateForm(nameForm)"method="post">First name: <input type="text"name="fname"><input type="submit"value="Submit"></form></body></html>

cc1003n week 6 more css and javascript.. objectives: ● more css examples ● javascript –...

Documents