UNIT - 4 Introduction to Dynamic Websites Using JavaScript

Section-1: Introduction to JavaScript

Section-2: Data Types and Variables
Section-3: Operators
Section-4: Dialog Boxes
Section-5: Decision making using if and switch
Section-6: Looping Structure

Section-1: Introduction to JavaScript

History:- JavaScript was developed in 1995 by Brendan Eich, at Netscape, and first released with
Netscape 2 early in 1996. it was initially called LiveScript, but was renamed JavaScriptto capitalize the
popularity of sun Microsystems’s Java language. the basic purpose ofJavaScript language was to enable
web authors to design interactive sites. JavaScriptcan interact with HTML source code, enabling web
authors to modify their sites with dynamic contents. JavaScript is supported by a number of software
companies and is an open language that anyone can use without purchasing a license. JavaScript language
is interpreted and executed by the browser.

Features:- features of JavaScript are discussed below.

1. Browser Support: all browsers accept JavaScript as a scripting language and provide integrated support
for it. For example, to access flash content, you need to install flash and plug-in in your browser. But to
use JavaScript, you don’t have to use any plug-in at all.

2. Client and Server-Side Support: JavaScript can be used on client side as well as on server side: JavaScript
has access to Document Object Model (DOM) of the browser. You can change the structure of web pages
at a runtime. Thus, JavaScript can be used to add different effects to web pages. on the other hand,
JavaScript can be used on the server side as well.

3. Functional Programming Language: in JavaScript, a function can be assigned to variables just like any
other data types. a function can accept another function as a parameter and can also return a function.
this provides you the ability to code in functional programming style.

4. Support for Objects: JavaScript is an object-oriented language. However, the way JavaScript handles
objects and inheritance is a bit different from the conventional object-oriented programming languages
like c++/ Java. JavaScript supports most of the object-oriented concepts while being simple to learn and
use.

5. Run-Time Environment: JavaScript typically relies through upon a run-time environment (e.g., in a web
browser) to provide objects and methods by which scripts can interact with the outside world. in fact, it
relies upon the environment to provide the ability to include/import scripts (e.g. HTML)
6. Vendor-specific extensions: JavaScript is officially managed by Mozilla Foundation, and new language
features are added periodically. however, only some JavaScript engines support these new features.

7. Object based features Supported by JavaScript: JavaScript supports various features of object-based
languages and JavaScript is sometimes referred as an object-based programming language

Applications/Uses of JavaScript:
1. Developing Multimedia Applications: the users can use JavaScript to add multimedia elements. With
JavaScript you can show, hide, change, resize images and create images rollovers. you can create scrolling
text across the status bar, thus making multimedia applications more interactive.

2. Create Pages Dynamically: based on the user’s choice, JavaScript can generate pages that are
customized by the user.

3. Interact with the user: JavaScript can do some processing of forms and can validate user input when
the user submits the form.

4. JavaScript objects are similar to dictionaries: in JavaScript, objects are just a collection of name-value
pairs. JavaScript objects are considered as a dictionary with string keys. The users can get and set the
properties of an object using either the familiar “.” (dot) operator, or the “()” operator, which is typically
used when dealing with a dictionary.

5. Extension: JavaScript can be extended for different purposes by supplementing it with additional
objects.

6. Client-Side JavaScript: It extends the core language by supplying objects to control a browser (navigator
or another web browser) and its document object Model (DOM). For example, client-side extensions allow
an application to place elements on an HTML form and respond to the user events such as mouse clicks,
form input and page navigation.

7. Server-Side JavaScript: extends the core language by supplying objects relevant to running JavaScript
on a server.

Limitations of JavaScript
JavaScript has some limitations which are natural and unavoidable.

1. JavaScript works in the browser and having less communication with the webserver. For this reason, it
cannot handle some server tasks if it is required to do in the browser.

2. JavaScript has not any method or way to create the graphic or picture. It can manipulate the existing
pictures.

3. Core JavaScript works somewhat differently in different browsers.

4. JavaScript is not used to read or write the files on client machines.

5. It does not support inheritance, public, private and protected terms hence do not follow the object-
oriented concept completely.

Basic Structure of JavaScript program

<!DOCTYPE>

<HTML>

<HEAD> <TITLE> </TITLE> </HEAD>

<BODY>

<script type=”text/javasript”>

document.write(“Hello how are you ?”)

</script>

</body>

</html>

JavaScript Syntax Rules

JavaScript syntax is the set of rules that define a structured JavaScript. Here are sometips to remember
when writing your first JavaScript program.

Case Sensitivity: JavaScript is case sensitive i.e., upper case letter and lower-case letter has different
meaning. For example, the word “alert” has a lower case “a”. so, if we type the word with an uppercase
“a” then JavaScript will show an error and the alert box will not be displayed.

Whitespace & Semi Colon: JavaScript ignores spaces, tabs, and newlines that appear in JavaScript
programs. You can use spaces, tabs, and newlines freely in your program and you are free to format and
indent the programs in a neat and consistent way that makes the code easy to read and understand. The
following code could be written without semicolons.

<script language=”javascript” type=”text/javascript”>

<!—

X=10

Y=20

//-->

</script>

But when formatted in a single line as follows, you must use semicolons-
<script language=”javascript” type=”text/javascript”>

<!—

X=10; Y=20;

//-->

</script>

Write()Method :-This method is used to write a string value to the page. Following code
write the “Hello JavaScript” in the body o HTML document.
<body>
<script language=”javascript” type=”text/javascript”>

document.write(“Hello Java Script”);

</script>

</body>

Writeln() Method:- This method is same as the write() method with one exception that is
adds a JavaScript newline character (\n) at the end of the statement. However, it does not affect
the appearance of page. Following code shows the concept which print the “Hello JavaScript” in
two lines.
<body>
<script language=”javascript” type=”text/javascript”>

document.write(“Hello”);

document.write(“Java Script”);

</script>

</body>

Programme1:- Write a Java Script program to calculate sum of two number.

Solution:

<!DOCTYPE>

<HTML>

<HEAD> <TITLE> </TITLE> </HEAD>

 <BODY>

<script type=”text/javasript”>

x=10

y=20

z=x+y

document.write(z)

</script>

</body>

</html>

Programme2:- Write a Java Script program to calculate simple interest .

Solution:

<!DOCTYPE>

<HTML>

<HEAD> <TITLE> </TITLE> </HEAD>

<BODY>

<script type=”text/javasript”>

p=1500

r=18

t=2

s=(p*r*t)/100

document.write(s)

</script></body></html>

Programme3:- Write a Java Script program to calculate v=u+at .

Solution:

<!DOCTYPE>

<HTML>

<HEAD> <TITLE> </TITLE> </HEAD>

<BODY>

<script type=”text/javasript”>
 u=5.5

a=12.6

t=2.2

v=u+a*t

document.write(v)

</script></body></html>

Programme4:- Write a Java Script program to calculate s=ut+1/2at2 .

Solution:

<!DOCTYPE>

<HTML>

<HEAD> <TITLE> </TITLE> </HEAD>

<BODY>

<script type=”text/javasript”>

u=5.5

a=12.6

t=2.2

s=(u*t)+(0.5*a*(t*t))

document.write(s)

</script></body></html>

Programme5:- Write a Java Script program to calculate Area of a Circle .

Solution:

<!DOCTYPE>

<HTML>

<HEAD> <TITLE> </TITLE> </HEAD>

<BODY>

<script type=”text/javasript”>

r=5.5

a=3.14*(r*r)

document.write(a)
</script></body></html>