Java script Session No 1

04/07/2023Developed By: Saif Ullah Dar

Java Script

Session No 1

1


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


• 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


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.


4


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

J S


How a Java Script Work?

6


• 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


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


• 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


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


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.


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


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


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


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.


15


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.


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.


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


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.


<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 .


Your First Code: Ex.1 (Output)

22

Java Script at the first sight.


Your First Code: Ex.1

23

html opening tag



24

html opening tag

Usually Java Scripts are

included within the head tag, it also could be

included in the body tag.



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



26

<script> tag: Indicate that the text is

part of a script



27

type attribute: Specifies the type of file and the scripting language use.


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.



29

A Method used to output a

string onto the Browser



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.


Execute Ex.1: Output

31

Run


Thank You

Saif Ullah Dar

32

Education

Java script Session No 1