INTRODUCTION OF JAVA

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
 JavaScriptallows 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)
 InteractiveWeb 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 CSS
(Cascading Style
Content 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> Note the symbol for
</body> line continuation
</html>

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> HTML written
</body> inside JavaScript
</html>

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>
An Event JavaScript written
</body> inside HTML
</html>

19. Example Statements
<script language="JavaScript">
window.prompt('Enter your name:','');
</script> Another event
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');">
</form> 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>