lecture 9 21/11/12 1. comments in javascript // this is a single line javascript comment 2
Post on 19-Dec-2015
217 Views
Preview:
TRANSCRIPT
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><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 00
{
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><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 00
{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>
<script type="text/javascript">
<!--
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(linebreak);
}
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>
<script type="text/javascript">
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>
<script type="text/javascript">
i=6;while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
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>
<script type="text/javascript">
<!--
var myCounter = 0;
var linebreak = "<br />";
document.write("While loop is beginning");
document.write(linebreak);
while(myCounter < 10){
document.write("myCounter = " + myCounter);
document.write(linebreak);
myCounter++;
}
document.write("While loop is finished!");
</script>
</html>
15
Do While Loops
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("Output= " + i);
document.write("<br />");
i++;
}
while (i<=12);
</script>
</body>
</html>
Will run once to evaluate condition –
<html>
<body>
<script type="text/javascript">
var i=13;
do
{
document.write("Output= " + i);
document.write("<br />");
i++;
}
while (i<=12);
</script>
</body>
</html>
16
Do While Another Example..
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
Do
{
document.write("Current Count : " + count + "<br />");
count++;
}
while (count < 0);
document.write("Loop stopped!");
//-->
</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()
<script type="text/javascript">
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>
<script type="text/javascript">
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..
<script type="text/javascript">
var str="End of term is near!";
document.write(str.substring(4)+"<br />");
document.write(str.substring(4,7));
</script>
<script type="text/javascript">
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>
<script type="text/javascript">
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));
document.writeln("<br />str.charAt(2) is:" + str.charAt(2));
document.writeln("<br />str.charAt(3) is:" + str.charAt(3));
document.writeln("<br />str.charAt(4) is:" + str.charAt(4));
document.writeln("<br />str.charAt(5) is:" + str.charAt(5));
</script>
</body>
</html>
22
Operators…
<script type="text/JavaScript"><!--var two = 2var ten = 10var linebreak = "<br />"
document.write("two plus ten = ")var result = two + tendocument.write(result)document.write(linebreak)
document.write("ten * ten = ")result = ten * tendocument.write(result)document.write(linebreak)
document.write("ten / two = ")result = ten / twodocument.write(result)//--></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>
<script type="text/javascript">
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.
top related