lecture 9 21/11/12 1. comments in javascript // this is a single line javascript comment 2
Post on 19-Dec-2015
225 views
TRANSCRIPT
![Page 1: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/1.jpg)
1
LECTURE 921/11/12
![Page 2: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/2.jpg)
2
Comments in JavaScript• // This is a single line JavaScript comment
• <!-- -- >
![Page 3: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/3.jpg)
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
![Page 4: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/4.jpg)
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
![Page 5: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/5.jpg)
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
![Page 6: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/6.jpg)
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
![Page 7: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/7.jpg)
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
![Page 8: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/8.jpg)
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>
![Page 9: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/9.jpg)
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
![Page 10: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/10.jpg)
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
![Page 11: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/11.jpg)
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
![Page 12: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/12.jpg)
<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
![Page 13: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/13.jpg)
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
![Page 14: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/14.jpg)
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>
![Page 15: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/15.jpg)
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>
![Page 16: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/16.jpg)
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>
![Page 17: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/17.jpg)
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
![Page 18: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/18.jpg)
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>
![Page 19: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/19.jpg)
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>
![Page 20: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/20.jpg)
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>
![Page 21: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/21.jpg)
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>
![Page 22: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/22.jpg)
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>
![Page 23: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/23.jpg)
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>
![Page 24: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/24.jpg)
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;
![Page 25: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/25.jpg)
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;
}
![Page 26: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/26.jpg)
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>
![Page 27: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/27.jpg)
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>
![Page 28: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/28.jpg)
28
CSS Recap • Inline • Internal• External • Browser Default
• Ref to external CSS
<head>< link rel="stylesheet" type="text/css" href="mystyle.css" />< /head>
![Page 29: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/29.jpg)
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;}
![Page 30: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/30.jpg)
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
![Page 31: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/31.jpg)
31
MCQ – IS6116• MONDAY 5TH DEC 1PM• 10%• BRING PENCIL• 30 MINUTES• 30 QUESTIONS• NEGATIVE MARKING +3 -1• NO ANSWER 0
![Page 32: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/32.jpg)
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
![Page 33: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/33.jpg)
33
Summary• JavaScript-Variables and Operators
• Control Flow Structures
• Forms and String Object
![Page 34: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/34.jpg)
• 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
![Page 35: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/35.jpg)
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
![Page 36: LECTURE 9 21/11/12 1. Comments in JavaScript // This is a single line JavaScript comment 2](https://reader030.vdocuments.net/reader030/viewer/2022032800/56649d2c5503460f94a01e8c/html5/thumbnails/36.jpg)
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.