Subject Name: Static Webpage Design Unit No: V Subject Code: 4311603

Unit V: JavaScript
 JavaScript
 JavaScript is a programming language that adds interactivity to your website.

 This happens in games, in the behavior of responses when buttons are pressed or with data entry on
forms; with dynamic styling; with animation, etc.

 What is JavaScript ?

 JavaScript is a dynamic computer programming language.

 It is lightweight and most commonly used as a part of web pages, whose implementations allow client-
side script to interact with the user and make dynamic pages.
 It is an interpreted programming language with object-oriented capabilities.
 JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because
of the excitement being generated by Java.
 JavaScript is a lightweight, interpreted programming language.
 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform

 Client-Side JavaScript
 Client-side JavaScript is the most common form of the language. T

 he script should be included in or referenced by an HTML document for the code to be interpreted by
the browser.

 It means that a web page need not be a static HTML, but can include programs that interact with the
user, control the browser, and dynamically create HTML content.

 The JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts.

 For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form
field.

 The JavaScript code is executed when the user submits the form, and only if all the entries are valid,
they would be submitted to the Web Server.

Department of Computer Engineering Page 1

 Subject Name: Static Webpage Design Unit No: V Subject Code: 4311603

 JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly.

 Advantages of JavaScript

 Less server interaction − You can validate user input before sending the page off to the server. This
saves server traffic, which means less load on your server.
 Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have
forgotten to enter something.
 Increased interactivity − You can create interfaces that react when the user hovers over them with a
mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors.

 Limitations of JavaScript

 Client-side JavaScript does not allow the reading or writing of files. This has been kept for security
reason.
 JavaScript cannot be used for networking applications because there is no such support available.
 JavaScript doesn't have any multi-threading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.

 Why to Learn Javascript

 Javascript is the most popular programming language in the world and that makes it a programmer’s
great choice.

 Once you learnt Javascript, it helps you developing great front-end as well as back-end softwares using
different Javascript based frameworks like jQuery, Node.JS etc.

 Javascript is everywhere, it comes installed on every modern web browser and so to learn Javascript you
really do not need any special environment setup. For example Chrome, Mozilla Firefox , Safari and
every browser you know as of today, supports Javascript.

 Javascript helps you create really beautiful and crazy fast websites. You can develop your website with a
console like look and feel and give your users the best Graphical User Experience.

 JavaScript usage has now extended to mobile app development, desktop app development, and game
development. This opens many opportunities for you as Javascript Programmer.

 Due to high demand, there is tons of job growth and high pay for those who know JavaScript. You can
navigate over to different job sites to see what having JavaScript skills looks like in the job market.

Department of Computer Engineering Page 2

 Subject Name: Static Webpage Design Unit No: V Subject Code: 4311603

 Great thing about Javascript is that you will find tons of frameworks and Libraries already developed
which can be used directly in your software development to reduce your time to market.

 JavaScript – Syntax

 JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.
 You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is
normally recommended that you should keep it within the <head> tags.
 The <script> tag alerts the browser program to start interpreting all the text between these tags as a
script. A simple syntax of your JavaScript will appear as follows.

<script ...>
-- JavaScript code
</script>

The script tag takes two important attributes −

 Language − This attribute specifies what scripting language you are using. Typically, its value will be

javascript. Although recent versions of HTML (and XHTML, its successor) have phased out the use of
this attribute.
 Type − This attribute is what is now recommended to indicate the scripting language in use and its value
should be set to "text/javascript".
So your JavaScript segment will look like –

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

-- JavaScript code
</script>

Your First JavaScript Code

 Let us take a sample example to print out "Hello World".

 We added an optional HTML comment that surrounds our JavaScript code.

 This is to save our code from a browser that does not support JavaScript.

 The comment ends with a "//-->".

 Here "//" signifies a comment in JavaScript, so we add that to prevent a browser from reading the end of
the HTML comment as a piece of JavaScript code.

 Next, we call a function document.write which writes a string into our HTML document.

This function can be used to write text, HTML, or both. Take a look at the following code.

Department of Computer Engineering Page 3

 Subject Name: Static Webpage Design Unit No: V Subject Code: 4311603

<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>
Whitespace and Line Breaks

 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
your programs in a neat and consistent way that makes the code easy to read and understand.

Semicolons are Optional

 Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C,
C++, and Java.
 JavaScript, however, allows you to omit this semicolon if each of your statements are placed on a
separate line.
 For example, the following code could be written without semicolons.

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

<!--
var1 = 10
var2 = 20
//-->
</script>

But when formatted in a single line as follows, you must use semicolons

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

<!--
var1 = 10; var2 = 20;
//-->
</script>

Case Sensitivity

 JavaScript is a case-sensitive language.

 This means that the language keywords, variables, function names, and any other identifiers must
always be typed with a consistent capitalization of letters.
 So the identifiers Time and TIME will convey different meanings in JavaScript.
NOTE − Care should be taken while writing variable and function names in JavaScript.

Department of Computer Engineering Page 4

 Subject Name: Static Webpage Design Unit No: V Subject Code: 4311603

Comments in JavaScript

JavaScript supports both C-style and C++-style comments.

 Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.
 Any text between the characters /* and */ is treated as a comment. This may span multiple lines.
 JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats this as a single-
line comment, just as it does the // comment.
 The HTML comment closing sequence --> is not recognized by JavaScript so it should be written as //--
>.

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

<!--
// This is a comment. It is similar to comments in C++

/*
* This is a multi-line comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>

Department of Computer Engineering Page 5