Java script

1. Introduction to
JavaScript

2. What is Java?
• Totally different
• A full programming language
• Much harder!
• A compiled language
• Independent of the web
• Sometimes used together

3. What is JavaScript?
• Browsers have limited functionality
• Text, images, tables, frames
• JavaScript allows for interactivity
• Browser/page manipulation
• Reacting to user actions
• A type of programming language
• Easy to learn
• Developed by Netscape

4. Java vs JavaScript
• Java - Programming Language (PL)
• Interactive Web Graphics
• Creating web browser applications
• Writing stand-alone applications
• JavaScript - Scripting Language
• Runs within the context of the Web browser
• Customizing pages based on browser version
• Visual Feedback to user actions
• Validating data entered on HTML Forms
• In reality, Java and JavaScript are unrelated…

5. JavaScript = ECMAScript
• JavaScript is an implementation of the ECMAScript language
standard. ECMA-262 is the official JavaScript standard.
• JavaScript was invented by Brendan Eich at Netscape (with
Navigator 2.0), and has appeared in all browsers since 1996.
• The official standardization was adopted by the
ECMA organization (an industry standardization association) in
1997.
• The ECMA standard (called ECMAScript-262) was approved as
an international ISO (ISO/IEC 16262) standard in 1998.
• The development is still in progress.
• ECMA-European Computer Manufacturers Association

6. What JavaScript is NOT
• JavaScript is -
• -- NOT Java
• -- NOT typically used for server-side processing, like PHP (PHP
Hypertext Preprocessor ) or ASP (Active Server Pages)
• -- NOT good for data-processing
• -- NOT as difficult to master as programming languages like C#
or Java

7. 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 react to events - A JavaScript can be set to
execute when something happens, like when a page has
finished loading or when a user clicks on an HTML element

8. Cont- JavaScript do’s
• JavaScript can manipulate HTML elements - A JavaScript can
read and change the content of an HTML element
• JavaScript can be used to validate data - A JavaScript can be used
to validate form input
• JavaScript can be used to detect the visitor's browser - A
JavaScript 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 can be
used to store and retrieve information on the visitor's computer

9. Learning JavaScript
• Special syntax to learn
• Learn the basics and then use other people's
(lots of free sites)
• Write it in a text editor, view results in browser
• You need to revise your HTML
• You need patience and good eyesight!

10. How Does JS Work?
• Embedded within HTML page
• View source
• Executes on client
• Fast, no connection needed once loaded
• Simple programming statements combined with HTML tags
• Interpreted (not compiled)
• No special tools required

11. “Three Legged Stool”
• -- JavaScript works with HTML & CSS (Cascading Style
Sheets)
• -- Content is separated from Presentation & Behavior
HTML
Content
CSS
(Cascading Style
Sheets)
Presentation
JavaScript
Behavior

12. Source Code
• The simplest JavaScript "Hello World" program is pretty much
as follows:
• 1: <script type="text/javascript">
• 2: <!-- to hide script contents from old browsers
• 3: document.write("Hello World!")
• 4: // end hiding contents from old browsers -->
• 5: </script>

13. Definition:
• Lines 1 and 5 are the HTML tags (<script> ... </script>) that
define what's between them as a script of some sort that is to
be executed by your browser.
• HTML itself doesn't care what kind of script it is and other
scripting languages besides JavaScript, e.g. VBScript or TCL,
may be supported by a browser. In this case the type attribute
of the SCRIPT tag declares the script to be JavaScript. These
are called "client-side" scripts to distinguish them from
"server-side" scripts that would be executed by the HTTP
server before it delivers the document.
• Note: You may see the language="JavaScript" attribute
appearing in a SCRIPT tag.

14. Def-2
• Lines 2 and 4 are very odd looking. Line 2 starts an HTML
comment, which ends at the end of line 4.
• Thus everything between them looks like an HTML comment
to browsers that don't support JavaScript.
• But a JavaScript interpreter will just ignore line 3, and will
treat line 4 as a JavaScript comment because it starts with "//".

15. JavaScript Allows
Interactivity
• Improve appearance
• Especially graphics
• Visual feedback
• Site navigation
• Perform calculations
• Validation of input
• Other technologies

16. JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first →
JavaScript Page');
</script>
</body>
</html> Note the symbol for
line continuation

17. JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript">
document.write('<h1>This is my first →
JavaScript Page</h1>');
</script>
</body>
</html>
HTML written
inside JavaScript

18. JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');">
My Page</A>
</p>
</body>
</html>
JavaScript written
inside HTML
An Event

19. Example Statements
<script language="JavaScript">
window.prompt('Enter your name:','');
</script>
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');">
</form>
Another event
Note quotes: " and '

20. HTML Forms and
JavaScript
• JavaScript is very good at processing user input in the web
browser
• HTML <form> elements receive input
• Forms and form elements have unique names
• Each unique element can be identified
• Uses JavaScript Document Object Model (DOM)

21. Naming Form Elements in
HTML
<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>

22. Forms and JavaScript
document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value

23. Using Form Data
Personalising an alert box
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' + →
document.alertform.yourname.value);">
</form>