Chapter (1)
Introduction To JavaScript And The
Web
Faculty of Information Science 1
What is JavaScript?
JavaScript is a programming language
designed for Web pages.
Faculty of Information Science 2
History in JavaScript
Faculty of Information Science 3
Why should we use JavaScript?
• Decoration and Special effects
• Navigation improvement
• Form validation
• Rich user interface
• Ajax
Faculty of Information Science 4
Development environment for JavaScript
• HTML / JavaScript Editor
Aptana Studio http://www.aptana.com
Firebug http://www.getfirebug.com
• Web browser
Mozilla Firefox
Internet Explorer
• JavaScript reference
Core JavaScript Reference 1.5
JavaScript and Browser Objects Quick
Reference (PDF)
Faculty of Information Science 5
JavaScript Basic
Faculty of Information Science 6
What is JavaScript?
• Event driven – JavaScript program is executed only when
an event occurs.
• Client-side – It runs on the client (Web browser). There
are some server-side implementations, though not
popular.
• Scripting language – No compilation required.
• Requires host application, and interacts with it – Can be a
kind of “macro” language for the host application.
• It is NOT Java at all – Completely different language
(though some syntax may look similar).
• Prototype-based Object-Oriented language – Quite
different from typical Class-based object-oriented
languages (such as Java, C++, etc.).
Faculty of Information Science 7
How it works?
Faculty of Information Science 8
Basic Usage
• 3 ways to attach JavaScript program in a Web
page
• URI to a separate file
<script type="text/javascript" src="/js/external.js"></script>
• write the script directly into the HTML file with
in the <script> tag
<script type="text/javascript">
........JavaScript Code...........
</script>
• write the script directly within an HTML
element <p onMouseOver="alert('WoW')">Move mouse here!</p>
Faculty of Information Science 9
Good Usage of JavaScript
Faculty of Information Science 10
Typical Programming Process
Faculty of Information Science 11
When will the script be executed?
• When an event occurred.
• Mouse movement or Click / Key press
• Page load, move to another page, etc.
• It will NOT be executed until associated event
occurs.
Faculty of Information Science 12
Statement and Comment
Faculty of Information Science 13
ch1_examp1
<html>
<body bgcolor="WHITE">
<p>Paragraph 1</p>
<script type="text/javascript">
document.bgColor = 'RED'; //statement
</script>
</body>
</html>
Faculty of Information Science 14
ch1_examp2
<html>
<body bgcolor="WHITE">
<p>Paragraph 1</p>
<script type="text/javascript">
// Script block 1
alert("First Script Block");
</script>
<p>Paragraph 2</p>
<script type="text/javascript">
// Script block 2
document.bgColor = "RED";
alert("Second Script Block");
</script>
<p>Paragraph 3</p>
</body>
</html>
Faculty of Information Science 15
ch1_examp3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body >
<p id="ResultsP”></p>
<script type="text/javascript">
// Script block 1
document.getElementById('ResultsP').innerHTML = 'Hello World!';
</script>
</body>
</html>
Faculty of Information Science 16
