Basic concepts of JavaScript

1. Java Script
Session No 1
1
Developed By: Saif Ullah Dar
11/22/2013

2. Session Objectives
1)
2)
3)
4)
5)
6)
7)
8)
9)
10)
What is Java Script?
How a Java Script Work?
What Java Script Can Do?
Browsers Issue.
When Not To Use Java Script?
Java & Java Script.
Usage of Java Script?
How to Use the Java Script?
Types of Scripting.
Your First Program in Java Script.
2
Developed By: Saif Ullah Dar
11/22/2013

3. What is Java Script ?
•
JavaScript was originally developed by Brendan Eich of Netscape under the
name Mocha, which was later renamed to LiveScript, and finally to JavaScript
•
A lightweight programming language that runs in a Web browser
•
JavaScript is a Client Side Scripting Language.
•
Also known as ECMAScript
•
Interpreted, not compiled.
•
JavaScript Syntax are similar to C and Java Language.
•
JavaScript code is usually embedded directly into HTML pages
•
JavaScript is reasonably platform-independent
3
Developed By: Saif Ullah Dar
11/22/2013

4. What is code can be inserted directly inthe HTML or
Java Script ?
 JavaScript



can place it in a separate file with the .js extension and
link the web page with the .js file.
Use in web browser for making a website more dynamic.
Supported by Netscape 2+, Internet Explorer 3+, Opera
3+ and most of the other modern web browsers.
Contains variable, array,object,operators and function.
4
Developed By: Saif Ullah Dar
11/22/2013

5. What is Java Script ?





Browser downloads the code and run it.
Manipulates HTML object also known as DOM, such as
form items, anchors.
Unrelated to Java, despite the name.
It was developed to create a dynamic website.
AJAX has given a brand new look to JavaScript; Now
JavaScript has become more important than ever.
5
Developed By: Saif Ullah Dar
11/22/2013

6. How a Java Script Work?
6
Developed By: Saif Ullah Dar
11/22/2013

7. What a Java Script Can Do ?
•
JavaScript gives HTML designers a programming tool
•
JavaScript can put dynamic text into an HTML page
•
JavaScript can react to events
•
JavaScript can read and write HTML elements
•
JavaScript can be used to validate input data
•
JavaScript can be used to detect the visitor's browser
•
JavaScript can be used to create cookies
7
Developed By: Saif Ullah Dar
11/22/2013

8. Browsers Issue




Different browsers implements different versions of
JavaScript.
Some browsers like Internet Explorer even add their own
functions to enhance the code.
Every JavaScript codes does not work in every browser;
therefore code should be written with the user
demographic in mind.
Newer browsers are adopting standard JavaScript; also
known as “Class A” browsers.
8
Developed By: Saif Ullah Dar
11/22/2013

9. When Not access other resources. Script
To Use Java
• When you need to
•
•
•
Files Programs
Databases
When you are using sensitive or copyrighted data or algorithms.
• Your JavaScript code is open to the public
9
Developed By: Saif Ullah Dar
11/22/2013

10. JavaJavaScriptJava Scriptlanguages in both concept and design!
& are two completely different
Java and
1)
2)
JavaScript has some features that resemble features in Java:
1)
2)
JavaScript has qualified names; for example, document.write("Hello World");
3)
JavaScript has Events and event handlers
4)
3)
JavaScript has Objects and primitive data types
Exception handling in JavaScript is almost the same as in Java
JavaScript has some features unlike anything in Java:
1)
Variable names are untyped: the type of a variable depends on the value it is currently holding
2)
Objects and arrays are defined in quite a different way
3)
JavaScript is an interpreted language but java is both interpreted and compiled
10
Developed By: Saif Ullah Dar
11/22/2013

11. Java & Java Script
Java
JavaScript
Sun Microsystems
Netscape
Much larger and advanced set of
commands.
Much smaller and simpler set of
commands .
Applets distinct from HTML
(accessed from HTML pages).
Code integrated with, and
embedded in, HTML.
Variable data types must be
declared (strong typing).
Variable data types not declared
(loose typing).
Compiled on server before
execution on client.
Interpreted (not compiled) by
client.
11
Developed By: Saif Ullah Dar
11/22/2013

12. Usage of Java Script that would otherwise
 Used to perform operations



encumber the server, like form validation input.
Can be easily used to interact with HTML elements such
as validate text fields, disable buttons, validate forms, or
change the background color of page.
Create dynamic page
React to events such the user enter name whenever the
page load for 1st time. User can used entered value for
welcome page.
12
Developed By: Saif Ullah Dar
11/22/2013

13. How To Use Java Script?
 JavaScript can be implemented in three basic styles.




Embed in Body of the document.
Embed in Header of the document.
Load from an external (.js) file.
Embed in Body of the document





This is the easiest way to implement JavaScript.
Embed where needed using <script>…</script>.
This is very poor way of implementation as the functions
cannot be easily reused.
Script is not available for the part of the document which is
above the implantation.
Difficult to manage codes.
13
Developed By: Saif Ullah Dar
11/22/2013

14. How To Use Java Script?

Embed in Header of the document






Here <script>…</script> is implemented before the <body>
tag.
This ensures that JavaScript functions are available for all the
parts of the documents (DOMs).
Cannot be applied across multiple documents (webpages).
Changes have to be replicated across multiple documents
manually.
Does not make the JavaScript code independent.
More codes.
14
Developed By: Saif Ullah Dar
11/22/2013

15. How To Useexternal (.js) file
Java Script?
 Load from an






Most efficient way of implementing JavaScript Codes.
Multiple documents can reference single JavaScript files using <script
src=“JSPATH”></script>.
Changes in the script file with automatically reflected to all the
documents that references it.
This enables true separation of header components.
One weakness of this implementation is that a page has to load all
the JavaScript codes regardless it uses it or not. This is helped by
caching; but what if the js file becomes multiple megabytes in size
(this has become true in newer AJAX-enabled website).
One way to overcome this weakness is that breaking up the file into
multiple files and load dynamically only when a function is needed.
AJAX makes this possible.
15
Developed By: Saif Ullah Dar
11/22/2013

16. Dynamic Load of JavaScript File






With the explosion of AJAX enabled components like JavaScript
trees and grids, JS files tend to become very large – often in multiple
megabytes.
Large files makes the web application slow due to net transfer and
browser processing of large files.
An ideal solution will be only download only the part of the file,
whose function is called.
This can be accomplished by creating multiple files with relevant
piece of the code.
When the function that resides in a file is called; dynamically
download the JS file with that function and load it to the browser –
after it loads to the browser then only execute the function.
All this process should happen within few seconds.
16
Developed By: Saif Ullah Dar
11/22/2013

17. When to Use JavaScript?





Previously JavaScript was restricted to form validation and
interaction with HTML objects.
Now AJAX (which is basically a JavaScript
implementation) enables us to do more than just
validation.
It is used to fetch data without refreshing the page.
It is used to fetch only the required data and modify only
the part of the webpage.
If you have a high traffic website, JavaScript is a must for
form validation so that it is less burden for the server.
17
Developed By: Saif Ullah Dar
11/22/2013

18. When NOT to use
JavaScript?



Since all the codes of JavaScript is available to the public; it is
advisable not to put confidential business logic in the JavaScript
code.
As JavaScript runs in client machine you cannot use it to
interact with the files and databases in the server.You would
need an intermediary language like ASP.Net, PHP and CGI to
do the server functions.
If you need some of your data to be indexed by Search
Engines; it is advisable to fetch data in static manner, instead of
using AJAX. Till date Search Engines are not very AJAX friendly.
18
Developed By: Saif Ullah Dar
11/22/2013

19. Types Of Scripting
Scripting refers to a series of commands that are
interpreted and executed sequentially and immediately on
an occurrence of an event
19
Developed By: Saif Ullah Dar
11/22/2013

20. Types Of Scripting


Client side Scripting: Refer to a script being executed on the client’s
machine by the browser.
Server side Scripting: Refer to a script being executed on Web
server to generate dynamic HTML pages.
20
Developed By: Saif Ullah Dar
11/22/2013

21. <SCRIPT> Tag




The <SCRIPT> tag defines a script for an HTML page to make
them interactive
There are two main purpose of the <SCRIPT> tag, which are:
Identifies a given segment of script in the HTML page.
Load an external script file .
21
Developed By: Saif Ullah Dar
11/22/2013

22. Your First Code:
Ex.1
(Output)
Java Script at the first
sight.
22
Developed By: Saif Ullah Dar
11/22/2013

23. Your First Code:
Ex.1
html opening
tag
23
Developed By: Saif Ullah Dar
11/22/2013

24. Your First Code:
Ex.1
html opening tag
Usually Java Scripts
are included within
the head tag, it
also could be
included in the
body tag.
24
Developed By: Saif Ullah Dar
11/22/2013

25. Your First Code:
Ex.1
html opening tag
One reason
JavaScript is so
popular is that it's
relatively easy to
add JavaScript to a
web page
25
JavaScript
Code block
Developed By: Saif Ullah Dar
Usually Java Scripts
are included within
the head tag, it
also could be
included in the
body tag.
11/22/2013

26. Your First Code:
Ex.1
<script> tag: Indicate
that the text is part of a
script
26
Developed By: Saif Ullah Dar
11/22/2013

27. Your First Code:
Ex.1
type attribute:
Specifies the type of file and
the scripting language use.
27
Developed By: Saif Ullah Dar
11/22/2013

28. Code:
Ex.1
<script> tag:
Indicate that the text
is part of a script
type attribute:
Specifies the type of
file and the scripting
language use.
</script>
End or Close
Tag
28
Developed By: Saif Ullah Dar
11/22/2013

29. Your First Code:
Ex.1
A Method used
to output a
string onto the
Browser
29
Developed By: Saif Ullah Dar
11/22/2013

30. Your First Code:
Ex.1
The string, that writeln method
takes and printout on the
browser.
Whatever between the
quotations mark will be printed
as is.
A Method used to output a string
onto the Browser
30
Developed By: Saif Ullah Dar
11/22/2013

31. Execute Ex.1:
31
Output
Developed By: Saif Ullah Dar
11/22/2013

32. Thank You
Saif Ullah Dar
32
Developed By: Saif Ullah Dar
11/22/2013