Module IV
Javascript and Web Publishing: - Basics, Javascript Events, Javascript conditions
and loop control structures, Alert, Prompt and Confirm statements, Javascript
validation, Creating the Web Site, Saving the site, working on the website,
Creating website structure, Themes-Publishing web sites.
What is JavaScript
• JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages.
• It is an interpreted, full-fledged programming language that enables
dynamic interactivity on websites when applied to an HTML document.
• It was introduced in the year 1995 for adding programs to the webpages in
the Netscape Navigator browser.
• Since then, it has been adopted by all other graphical web browsers. With
JavaScript, users can build modern web applications to interact directly
without reloading the page every time.
Features of JavaScript
• There are following features of JavaScript:
• All popular web browsers support JavaScript as they provide built-in
execution environments.
• JavaScript follows the syntax and structure of the C programming
language. Thus, it is a structured programming language.
• JavaScript is a weakly typed language, where certain types are implicitly
cast (depending on the operation).
• JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
• It is a light-weighted and interpreted language.
• It is a case-sensitive language.
• JavaScript is supportable in several operating systems including, Windows,
macOS, etc.
• It provides good control to the users over the web browsers.
History of JavaScript
• In 1993, Mosaic, the first popular web browser, came into existence. In
the year 1994, Netscape was founded by Marc Andreessen.
• He realized that the web needed to become more dynamic. Thus, a 'glue
language' was believed to be provided to HTML to make web designing
easy for designers and part-time programmers.
• Consequently, in 1995, the company recruited Brendan Eich intending to
implement and embed Scheme programming language to the browser.
• But, before Brendan could start, the company merged with Sun
Microsystems for adding Java into its Navigator so that it could compete
with Microsoft over the web technologies and platforms.
• Now, two languages were there: Java and the scripting language. Further,
Netscape decided to give a similar name to the scripting language as Java's.
It led to 'Javascript'.
• Finally, in May 1995, Marc Andreessen coined the first code of Javascript
named 'Mocha'. Later, the marketing team replaced the name with
'LiveScript'.
• But, due to trademark reasons and certain other reasons, in December 1995,
the language was finally renamed to 'JavaScript'. From then, JavaScript
came into existence.
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box,
confirm dialog box and prompt dialog box),
o Displaying clocks etc.
JavaScript Example
<script>
[Link]("Hello JavaScript by JavaScript");
</script>
Places to put JavaScript code
1. Between the body tag of html
2. Between the head tag of html
3. In .js file (external javaScript)
1) JavaScript Example: code between the body tag
In the above example, we have displayed the dynamic content using JavaScript. Let’s
see the simple example of JavaScript that displays alert dialog box.
<script type="text/JavaScript">
alert ("Hello Javascript");
</script>
2) JavaScript Example: code between the head tag
Let us see the same example of displaying alert dialog box of JavaScript that is
contained inside the head tag.
In this example, we are creating a function msg(). To create function in JavaScript, you
need to write function with function_name as given below.
To call function, you need to work on event. Here we are using onclick event to call
msg() function.
<html>
<head>
<script type="text/javascript">
function msg(){
alert("Hello Javascript");
}
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
External JavaScript file
• We can create external JavaScript file and embed it in many html page.
• It provides code re usability because single JavaScript file can be used in
several html pages.
• An external JavaScript file must be saved by .js extension. It is recommended to
embed all JavaScript files into a single file. It increases the speed of the
webpage.
[Link]
1. function msg(){
2. alert("Hello Javatpoint");
3. }
Let's include the JavaScript file into html page. It calls the JavaScript function on
button click.
[Link]
<html>
<head>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Advantages of External JavaScript
There will be following benefits if a user creates an external javascript:
1. It helps in the reusability of code in more than one HTML file.
2. It allows easy code readability.
3. It is time-efficient as web browsers cache the external js files, which further
reduces the page loading time.
4. It enables both web designers and coders to work with html and js files parallelly
and separately, i.e., without facing any code conflictions.
5. The length of the code reduces as only we need to specify the location of the js
file.
Disadvantages of External JavaScript
There are the following disadvantages of external files:
1. The stealer may download the coder's code using the url of the js file.
2. If two js files are dependent on one another, then a failure in one file may affect
the execution of the other dependent file.
3. The web browser needs to make an additional http request to get the js code.
4. A tiny to a large change in the js code may cause unexpected results in all its
dependent files.
5. We need to check each file that depends on the commonly created external
javascript file.
6. If it is a few lines of code, then better to implement the internal javascript code.
JavaScript Comment
The JavaScript comments are meaningful way to deliver message. It is used to add
information about the code, warnings or suggestions so that end user can easily
interpret the code.
The JavaScript comment is ignored by the JavaScript engine i.e. embedded in the
browser.
Advantages of JavaScript comments
There are mainly two advantages of JavaScript comments.
1. To make code easy to understand It can be used to elaborate the code so
that end user can easily understand the code.
2. To avoid the unnecessary code It can also be used to avoid the code being
executed. Sometimes, we add the code to perform some action. But after
sometime, there may be need to disable the code. In such case, it is better to
use comments.
Types of JavaScript Comments
There are two types of comments in JavaScript.
1. Single-line Comment
2. Multi-line Comment
JavaScript Single line Comment
It is represented by double forward slashes (//). It can be used before and after the
statement.
Let’s see the example of single-line comment i.e. added before the statement.
<script>
// It is single line comment
[Link]("hello javascript");
</script>
JavaScript Multi line Comment
It can be used to add single as well as multi line comments. So, it is more convenient.
It is represented by forward slash with asterisk then asterisk with forward slash. For
example:
1. /* your code here */
It can be used before, after and middle of the statement.
<script>
/* It is multi line comment.
It will not be displayed */
[Link]("example of javascript multiline comment");
</script>
Dialog boxes
There are three types of dialog boxes supported in JavaScript that are alert,
confirm, and prompt. These dialog boxes can be used to perform specific tasks such
as raise an alert, to get confirmation of an event or an input, and to get input from the
user.
Alert Dialog box
It is used to provide a warning message to users. It is one of the most widely used
dialog box in JavaScript. It has only one 'OK' button to continue and select the next
task.
We can understand it by an example like suppose a textfield is mandatory to be filled
out, but the user has not given any input value to that text field, then we can display a
warning message by using the alert box.
Syntax
1. alert(message);
Example
Let us see the demonstration of an alert dialog box by using the following example.
<html>
<head>
<script type="text/javascript">
function show() {
alert("It is an Alert dialog box");
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to javascript</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>
Confirmation Dialog box
It is widely used for taking the opinion from the user on the specific option. It includes
two buttons, which are OK and Cancel. As an example, suppose a user is required to
delete some data, then the page can confirm it by using the confirmation box that
whether he/she wants to delete it or not.
If a user clicks on the OK button, then the method confirm() returns true. But if the
user clicks on the cancel button, then the confirm() method returns false.
Syntax
1. confirm(message);
Example
Let us understand the demonstration of this dialog box by using the following
example.
<html>
<head>
<script type="text/javascript">
function show() {
var con = confirm ("It is a Confirm dialog box");
if(con == true) {
[Link] ("User Want to continue");
}
else {
[Link] ("User does not want to continue");
}
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to javascript</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>
Prompt Dialog box
The prompt dialog box is used when it is required to pop-up a text box for getting the
user input. Thus, it enables interaction with the user.
The prompt dialog box also has two buttons, which are OK and Cancel. The user needs
to provide input in the textbox and then click OK. When a user clicks on the OK button,
then the dialog box reads that value and returns it to the user. But on clicking
the Cancel button, prompt() method returns null.
Syntax
1. prompt(message, default_string);
Let us understand the prompt dialog box by using the following illustration.
Example
<html>
<head>
<script type="text/javascript">
function show() {
var value = prompt("Enter your Name : ", "Enter your name");
[Link]("Your Name is : " + value);
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to javascript</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>