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>
<p class=“section2”> This is section 2</p>
<p class=“section3”> This is section 3</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>
<p class=“section3”> This is section 3</p>
</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
<script type="text/javascript">var name;name=“Islington”;document.write(name);document.write("<br />");name=“Computer”;document.write(name);
</script>
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>
Top Related