Date post: | 12-Sep-2014 |
Category: |
Education |
View: | 1,929 times |
Download: | 0 times |
04/07/2023Developed By: Saif Ullah Dar
Java Script
Session No 1
1
04/07/2023Developed By: Saif Ullah Dar
1) What is Java Script?2) How a Java Script Work? 3) What Java Script Can Do?4) Browsers Issue.5) When Not To Use Java Script?6) Java & Java Script.7) Usage of Java Script?8) How to Use the Java Script? 9) Types of Scripting.10) Your First Program in Java Script.
Session Objectives
2
04/07/2023Developed By: Saif Ullah Dar
• 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
What is Java Script ?
3
04/07/2023Developed By: Saif Ullah Dar
JavaScript code can be inserted directly inthe HTML or 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.
What is Java Script ?
4
04/07/2023Developed By: Saif Ullah Dar
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.
What is Java Script ?
5
J S
04/07/2023Developed By: Saif Ullah Dar
How a Java Script Work?
6
04/07/2023Developed By: Saif Ullah Dar
• 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
What a Java Script Can Do ?
7
JS
04/07/2023Developed By: Saif Ullah Dar
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.
Browsers Issue
8
JS
04/07/2023Developed By: Saif Ullah Dar
• When you need to access other resources.• Files Programs• Databases
• When you are using sensitive or copyrighted data or algorithms.• Your JavaScript code is open to the public
When Not To Use Java Script
9
JS
04/07/2023Developed By: Saif Ullah Dar
1) Java and JavaScript are two completely different languages in both concept and design!
2) JavaScript has some features that resemble features in Java:
1) JavaScript has Objects and primitive data types
2) JavaScript has qualified names; for example, document.write("Hello World");
3) JavaScript has Events and event handlers
4) Exception handling in JavaScript is almost the same as in Java
3) 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
Java & Java Script
10
04/07/2023Developed By: Saif Ullah Dar
Java & Java Script
11
Java JavaScriptSun Microsystems NetscapeMuch 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.
04/07/2023Developed By: Saif Ullah Dar
Used to perform operations that would otherwise 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.
Usage of Java Script
12
04/07/2023Developed By: Saif Ullah Dar
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.
How To Use Java Script?
13
04/07/2023Developed By: Saif Ullah Dar
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.
How To Use Java Script?
14
04/07/2023Developed By: Saif Ullah Dar
Load from an external (.js) file 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.
How To Use Java Script?
15
04/07/2023Developed By: Saif Ullah Dar
Dynamic Load of JavaScript File
16
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.
04/07/2023Developed By: Saif Ullah Dar
When to Use JavaScript?
17
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.
04/07/2023Developed By: Saif Ullah Dar
When NOT to use JavaScript?
18
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.
04/07/2023Developed By: Saif Ullah Dar19
Types Of ScriptingScripting refers to a series of commands that
are interpreted and executed sequentially and immediately on an occurrence of an event
04/07/2023Developed By: Saif Ullah Dar20
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.
04/07/2023Developed By: Saif Ullah Dar21
<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 .
04/07/2023Developed By: Saif Ullah Dar
Your First Code: Ex.1 (Output)
22
Java Script at the first sight.
04/07/2023Developed By: Saif Ullah Dar
Your First Code: Ex.1
23
html opening tag
04/07/2023Developed By: Saif Ullah Dar
Your First Code: Ex.1
24
html opening tag
Usually Java Scripts are
included within the head tag, it also could be
included in the body tag.
04/07/2023Developed By: Saif Ullah Dar
Your First Code: Ex.1
25
html opening tag
Usually Java Scripts are
included within the head tag, it also could be
included in the body tag.
JavaScriptCode block
One reason JavaScript is so popular is that it's relatively easy to add
JavaScript to a web page
04/07/2023Developed By: Saif Ullah Dar
Your First Code: Ex.1
26
<script> tag: Indicate that the text is
part of a script
04/07/2023Developed By: Saif Ullah Dar
Your First Code: Ex.1
27
type attribute: Specifies the type of file and the scripting language use.
04/07/2023Developed By: Saif Ullah Dar
Code: Ex.1
28
</script> End or
Close Tag
<script> tag: Indicate that the text is part of a
script
type attribute: Specifies the type of file and the scripting language use.
04/07/2023Developed By: Saif Ullah Dar
Your First Code: Ex.1
29
A Method used to output a
string onto the Browser
04/07/2023Developed By: Saif Ullah Dar
Your First Code: Ex.1
30
A Method used to output a string onto the Browser
The string, that writeln method takes and
printout on the browser.Whatever between the quotations mark will be
printed as is.
04/07/2023Developed By: Saif Ullah Dar
Execute Ex.1: Output
31
Run
04/07/2023Developed By: Saif Ullah Dar
Thank You
Saif Ullah Dar
32