![Page 1: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/1.jpg)
INTERNET PROGRAMMING
Software Engineering Branch / 4th Class
Computer Engineering Department
University of Technology
JavaScript
![Page 2: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/2.jpg)
OUTLINES
2
JavaScript Basic
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 3: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/3.jpg)
HTML & CSS & JAVASCRIPT DOCUMENTS
3
HTML to define the content of web pages.
CSS to specify the layout of web pages.
JavaScript to program the behavior of web pages.
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 4: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/4.jpg)
WHAT IS JAVASCRIPT?
JavaScript was designed to add interactivity to
HTML pages.
JavaScript is a scripting language.
A scripting language is a lightweight programming
language.
JavaScript is usually embedded directly into HTML
pages.
JavaScript is an interpreted language (means that
scripts execute without preliminary compilation).
Everyone can use JavaScript without purchasing a
license. 4
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 5: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/5.jpg)
ARE JAVA AND JAVASCRIPT THE SAME?
No, they are not. Java and JavaScript are two
completely different languages in both concept and
design.
Java (developed by Sun Microsystems) is a
powerful and much more complex programming
language in the same category as C and C++.
5
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 6: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/6.jpg)
WHAT CAN JAVASCRIPT DO?
JavaScript gives HTML designers a programming tool. HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax. Almost anyone can put small “snippets” of code into their HTML pages.
JavaScript can put dynamic text into an HTML page. A JavaScript statement like document.write(“<h1>” + name + “</h1>”) can write a variable text into an HTML page.
JavaScript can react to events. A JavaScript script can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.
JavaScript can read and write HTML elements. A JavaScript script can read and change the content of an HTML element.
6
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 7: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/7.jpg)
WHAT CAN JAVASCRIPT DO?
JavaScript can be used to validate data. A
JavaScript script can be used to validate form data
before it is submitted to a server. This saves the
server from extra processing.
JavaScript can be used to detect the visitor’s
browser. A JavaScript script can be used to detect
the visitor’s browser, and depending on the
browser, load another page specifically designed
for that browser.
JavaScript can be used to create cookies. A
JavaScript script can be used to store and retrieve
information on the visitor’s computer.
7
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 8: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/8.jpg)
WHERE TO PUT THE JAVASCRIPT
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!";}
</script>
</body>
</html> 8
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 9: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/9.jpg)
WHERE TO PUT THE JAVASCRIPT
Internal JavaScript: You can place any number of
scripts in an HTML document. Scripts can be placed
in the <body>, or in the <head> section of an HTML
page, or in both.
External JavaScript: Scripts can also be placed in
external files. External scripts are practical when the
same code is used in many different web pages.
9
<script>
document.getElementById("demo").innerHTML
= "My First JavaScript";
</script>
<script src="myScript.js"> </script> © Omar Janeh, 2015 | University of Technology, Baghdad
![Page 10: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/10.jpg)
JAVASCRIPT STATEMENTS
<html>
<body>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
</body>
</html>
10
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 11: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/11.jpg)
JAVASCRIPT COMMENTS
<html>
<body>
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
</body>
</html> 11
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 12: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/12.jpg)
JAVASCRIPT VARIABLES
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
12
<!DOCTYPE html>
<html>
<body>
<p>Create a variable, assign a
value to it, and display it:</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").
innerHTML = carName;
</script>
</body>
</html>
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 13: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/13.jpg)
JAVASCRIPT OPERATORS
13
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 14: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/14.jpg)
JAVASCRIPT OPERATORS
14
<html>
<body>
<script type="text/javascript">
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
document.write("<br />");
x=5+"5";
document.write(x);
document.write("<br />");
x="5"+5;
document.write(x);
document.write("<br />");
</script>
<p>The rule is: If you add a
number and a string, the
result
will be a string.</p>
</body>
</html>
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 15: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/15.jpg)
JAVASCRIPT COMPARISONS
15
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 16: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/16.jpg)
JAVASCRIPT IF...ELSE STATEMENTS
<html>
<body>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("<b>Good
morning</b>");
}
else
{
document.write("<b>Good day</b>");
}
</script> 16
<p>
This example demonstrates the
If...Else statement.</p>
<p>
If the time on your browser
is less than 10,
you will get a "Good morning"
greeting.
Otherwise you will get a
"Good day" greeting.</p>
</body>
</html>
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 17: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/17.jpg)
JAVASCRIPT LOOPS
The for Loop:
<html>
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
<p>Explanation:</p>
<p>This for loop starts with i=0.</p>
<p>As long as <b>i</b> is less than, or equal to 5, the loop
will continue to run.</p>
<p><b>i</b> will increase by 1 each time the loop runs.</p>
</body>
</html> 17
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 18: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/18.jpg)
JAVASCRIPT LOOPS
The while Loop:
<html>
<body>
<script type="text/javascript">
i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
} </script> <p>Explanation:</p> <p><b>i</b> is equal to
0.</p> <p>While <b>i</b> is less than, or equal to,
5, the loop will continue to run.</p> <p><b>i</b>
will increase by 1 each time the loop runs.</p>
</body>
</html>
18
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 19: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/19.jpg)
JAVASCRIPT POPUP BOXES
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
19
else
{
alert("You pressed
Cancel!");
}
}
</script>
</head>
<body>
<input type="button"
onclick="show_confirm()"
value="Show a
confirm box" />
</body>
</html>
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 20: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/20.jpg)
JAVASCRIPT FUNCTIONS
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="displaymessage()" />
</form>
<p>By pressing the button above, a function will be called.
The function will alert a message.</p>
</body>
</html> 20
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 21: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/21.jpg)
JAVASCRIPT EVENTS
onClick: <input type="button" name="language" value="Click for Spanish"
onclick="translate()">
onMouseOver and onMouseOut: <a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver
event');return false"><img src="w3s.gif“ alt="w3schools" /></a>.
onSubmit:
<form method="post" action="xxx.htm" onsubmit="return checkForm()">
onFocus, onBlur, and onChange <input type="text" size="30" id="email“ onchange="checkEmail()"> 21
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 22: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/22.jpg)
JAVASCRIPT EVENTS
22
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 23: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/23.jpg)
JAVASCRIPT EVENTS
23
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 24: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/24.jpg)
JAVASCRIPT TRY…CATCH STATEMENTS
<html>
<head>
<script
type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Welcome
guest!");
}
catch(err)
{
txt="There was an error on
this page.\n\n"; 24
txt+="Error message: " +
err.message + "\n\n";
txt+="Click OK to
continue.\n\n";
alert(txt);
}
}
</script>
</head>.
<body>
<input type="button"
value="View message"
onclick="message()"
/>
</body>
</html>
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 25: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/25.jpg)
JAVASCRIPT SPECIAL CHARACTERS
25
var txt="We are the so-called \"Vikings\" from the north.";
document.write(txt);
JavaScript will now output the proper text string:
We are the so-called “Vikings” from the north.
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 26: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/26.jpg)
REFERENCES
26
© Omar Janeh, 2015 | University of Technology, Baghdad
![Page 27: JavaScript - University of Technology, Iraq 2014/omar... · JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting language. A scripting language is](https://reader034.vdocuments.site/reader034/viewer/2022052023/60388380a7886602073a8664/html5/thumbnails/27.jpg)
27
Next Lecture JavaScript (JS)