LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2.

1

LECTURE 921/11/12

2

Comments in JavaScript• // This is a single line JavaScript comment

• <!-- -- >

For Loops

• Executes a statement or statements for a number of times – iteration.

• Syntaxfor(initialize; test; increment){// statements to be executed}

• Initial Value is the starting number of the loop.• If the condition(test) is true the code is

executed.• The initial value is changed by the step size.

3

For Loops• The expression is evaluated, if it is false, JavaScript moves to the next statement in the program

• If it is true then the statement is executed and expression is evaluated again

• Again if the expression is false the JavaScript moves on the next statement in script, otherwise it executes the statement that forms the body of the loop

4

For Loops <html>

<head><title> For</title>

</head><body>

<script type="text/javascript">

for (i=0;i<= 5; i++) //the position of the ++ here does not have an impact on the output it will always start at 0

{document.write("The number is " + i);// change to i++ and ++i here to see the impact on the outputdocument.write("<br />");}

</script>

</body></html>

5

6

Another Example<html>


</head><body>



{

document.write("The number is " + i++);

document.write("<br />");}</script>

</body></html>

The number is 0The number is 2The number is 4

7

Another Example<html>


</head><body>



{document.write("The number is " + ++i);document.write("<br />");}</script>

</body></html>

The number is 1The number is 3The number is 5

8

For Loop Another Example• The counter variable is something

that is created and usually used only in the for loop to count how many times the for loop has looped.

• i is the normal label for this counter variable and what we will be using.

• The conditional statement - • It is what decides whether the for

loop continues executing or not. This check usually includes the counter variable in some way.

• The counter variable is incremented after every loop in the increment section of the for loop.

• The code that is executed for each loop through the for loop.

<html>


<!--

var linebreak = "<br />";

document.write("For loop code is beginning");

document.write(linebreak);

for(i = 2; i < 10; i++)

{

document.write("Counter i = " + i);


}

document.write("For loop code is finished!");

</script>

</html>

While Loops:

• While a condition is true execute one or more statements.

• “While Loops” are especially useful when you do not know how many times you have to loop

• but you know you should stop when you meet the condition, i.e. an indeterminate loop

9

While Loop• The while Loop is the basic statement that allows

JavaScript to perform repetitive actions. It has the following syntax.

while (expression)

{

// Statement to be executed

}

… more code…

10

While Loops• This cycle continues until the expression evaluates to

false

• It is important that a Loop counter that is used within the body of the Loop is declared outside it.

11

<html><body>

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

12

13

While Loops

<html>

<body>


i=1;

while (i<=5)

{

document.write("The number is " + i);

document.write("<br />");

i++;

}

</script>

</body>

</html>

What happens in this example?

<html>

<body>


i=6;while (i<=5)

{

document.write("The number is " + i);


i++;

}

</script>

</body>

</html>

Loop DOES not run

14

While Another Example

• There are two key parts to a JavaScript while loop:

• The conditional statement which must be True for the while loop's code to be executed.

• The while loop's code that is contained in curly braces "{ and }" will be executed if the condition is True.

<html>


<!--

var myCounter = 0;

var linebreak = "<br />";

document.write("While loop is beginning");


while(myCounter < 10){

document.write("myCounter = " + myCounter);


myCounter++;

}

document.write("While loop is finished!");

</script>

</html>

15

Do While Loops

<html>

<body>


var i=0;

do

{

document.write("Output= " + i);


i++;

}

while (i<=12);

</script>

</body>

</html>

Will run once to evaluate condition –

<html>

<body>


var i=13;

do

{

document.write("Output= " + i);


i++;

}

while (i<=12);

</script>

</body>

</html>

16

Do While Another Example..




</script>

17

Why use Loops?

• When you want the same block of code to run over and over again in a row

• Instead of adding several almost equal lines in a script we can use loops to perform a task like this

While v For• A while loop doesn't initialize or

increment any fields automatically as part of the command, it just tests a condition and executes the loop for as long as the condition remains true

• A while loop can easily be substituted wherever you have a for loop by moving the initialization statement (e.g. i=1) in front of the loop and the increment statement (e.g. i++) to just inside the end of the loop

• This may make the loop easier to read

18

Length()


var myString = "123456";

document.write("The string is this long: " + myString.length);

myString = myString + "7890";

document.write("<br />The string is now this long: " + myString.length);

</script>

19

IndexOf Another Example…

<html>


var aURL = "http://www.ucc.ie";

var aPosition = aURL.indexOf("ucc");

document.write("The position of ucc = " + aPosition);

</script>

</html>

20

Substring and substr another example..


var str="End of term is near!";

document.write(str.substring(4)+"<br />");

document.write(str.substring(4,7));

</script>


var str="Hello world!";

document.write(str.substr(3)+"<br />");

document.write(str.substr(3,4));

</script>

21

CharAt ()<html>

<head>

<title>JavaScript String charAt() Method</title>

</head>

<body>


var str = new String( "This is string" );

document.writeln("str.charAt(0) is:" + str.charAt(0));

document.writeln("<br />str.charAt(1) is:" + str.charAt(1));





</script>

</body>

</html>

22

Operators…

<script type="text/JavaScript"></script></body>

23

Another If Else<script type="text/javascript">

var username = "Agent006";

if(username == "Agent007")

document.write("Welcome special agent 007");

else

document.write("Access Denied!");

document.write("<br /><br />Would you like to try again?<br /><br />");

// User enters a different name

username = "Agent007";

if(username == "Agent007")

document.write("Welcome special agent 007");

else

document.write("Access Denied!");

</script>

24

Form Validation Example<html><head><script language="javascript">var x;var firstname;var country1;var email;var phone1;var comment1;var at;var dot;

function validate1(){

x=document.myForm;at=x.myEmail.value.indexOf("@");dot=x.myEmail.value.indexOf(".");firstname=x.myname.value;country1=x.country.value;email=x.myEmail.value;phone1=x.phone.value;comment1=x.comment.value;

25

if (firstname =="") { alert("You must complete the name field");

x.myname.focus();return false;}

else if(isNaN(firstname)== false){alert("Please enter your name correctly");x.myname.focus();return false;}

else if (country1 =="") { alert("You must complete the country field");

x.country.focus();return false;}

else if(isNaN(country1)== false){alert("Please enter country correctly");x.country.focus();return false;}

else if(email == "") {

alert("Please enter a vaild e-mail address");x.myEmail.focus();return false;

}

26

else if (at==-1) {alert("Please enter a vaild e-mail address ");x.myEmail.focus();return false;

}else if (dot==-1)

{alert("Please enter a vaild e-mail address ");x.myEmail.focus();return false;

}else if(phone1=="")

{alert("Please enter your phone number");x.phone.focus();return false;}

else if(isNaN(phone1)==true){alert("That phone number is not valid");x.phone.focus();return false;}

else if(comment1==""){alert("Please enter your comment!");x.comment.focus();return false;}

return true;} </script>

27</head><body><form name="myForm" action="submitform.html" onSubmit="return validate1();">

Enter your First Name: <input type="text" name="myname"> <br>

Enter your Country: <input type="text" name="country"> <br>

Enter your e-mail: <input type="text" name="myEmail"> <br>

Enter your Phone Number: <input type="text" name="phone"> <br>Your Comment: <input type="textarea" name="comment"> <br>

<input type="submit" value="Send input"> </form></body></html>

28

CSS Recap • Inline • Internal• External • Browser Default

• Ref to external CSS

<head>< link rel="stylesheet" type="text/css" href="mystyle.css" />< /head>

29

CSS Rules • Inline – <p style="color:red;margin-left:20px">This is a paragraph.</p>

• Internal <head>

<style type="text/css">hr {color:blue;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}< /style>

</head>

• External

Create page and save as style1.css (example) h3{text-align:right;font-size:20pt;}

30

CSS• Relative Font Measurements

• em, ex, px• Absolute

• in, cm, mm, pt, pc

• Positioning• Absolute – When you specify position:absolute, the

element is removed from the document and placed exactly where you tell it to go.

• Relative – If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

• Z-index - The z-index property specifies the stack order of an element.

• An element with greater stack order is always in front of an element with a lower stack order.

• Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

• <div> • The <div> tag defines a division or a

section in an HTML document.• The <div> tag is often used to group

block-elements to format them with styles.

• Div id • Specifies a unique id for an element• Generally ids are used for the main

elements of the page, such as header, main content, sidebar, footer, etc. id attribute

31

MCQ – IS6116• MONDAY 5TH DEC 1PM• 10%• BRING PENCIL• 30 MINUTES• 30 QUESTIONS• NEGATIVE MARKING +3 -1• NO ANSWER 0

32

Course Content to 5/12/11

• Website Design and Usability

• Introduction to xHTML

• Basic xHTML Tags

• Additonal xHTML tag

• Cascading Style Sheets

• Introduction to Client Side Processing

33

Summary• JavaScript-Variables and Operators

• Control Flow Structures

• Forms and String Object

• Every JavaScript statement should end with a _______a) Colon

b) Semi-colon

c) Curly bracket

d) None of the above

• Methods ____ and ____ of the _____ object write xHTML text into an xHTML document.

a) Document, window and string

b) write, writeln and document

c) Lastindexof, indexof and string

d) None of the above

• Like JAVA variables JavaScript variables are typed.• True or False.

• You may only place JavaScript in the <head> tag in the xHTML document.• True or False.

34

35

Sample Question What is the outcome from the following JavaScript code?

<html>

<head>


function mymessage()

{

alert("Hello World")

}

</script>

</head>

<body onload="mymessage()">

</body>

</html>

a) A syntax error occurs

b) “Hello World” is printed to the browser window

c) An alert box is triggered by the onload event

d) The function triggers the onload event

36

Sample Question

What is the output from the following JavaScript code?

<html>

<head>

<title> Char At</title>

<script language="javascript">

var a;

a="MCQ’s are great!";

document.write(x.charAt(6));

</script>

</head>

<html>

a) s

b) ’

c) a

d) It will generate an error.

LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2.

Documents

Transcript of LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2.