Introduction to JavaScript
• JavaScript is a cross-platform, object-oriented scripting language for creating dynamic
web pages that have elements like complex animations, clickable buttons, and popup
menus.
• There are also complex server-side JavaScript versions and frameworks, such as [Link],
that help when developing new applications. JavaScript frameworks aid in performance
and provide ready-to-use solutions
• The JavaScript language can be attached to the objects of its environment inside a host
environment - for instance, a web browser window or webpage - to allow programmatic
control over them.
• A standard library of objects, such as Array, Date, and Math, as well as a basic set of
language components, such as operators, control structures, and statements, are
included in JavaScript. By extending Core JavaScript with additional objects, it can be used
for a variety of applications, such as Client-side and Server-side JavaScript.
• Client-side JavaScript adds to the fundamental language by providing objects for
controlling a browser's Document Object Model (DOM). Client-side extensions, for
example, allow a program to add HTML elements to an HTML file and respond to user
actions like mouse clicks, form input, and page navigation.
• Server-side JavaScript extends the basic language by providing objects required for
server-side JavaScript execution. For instance, it allows application developers to create
a connection between the application and the database or support file I/O operations.
What are the Main Features of JavaScript?
To get a proper introduction to JavaScript, you must understand the language’s main features.
Below we discuss the top 8 features that JavaScript offers.
a. Lightweight: JavaScript is a lightweight scripting language developed mainly for data
handling in browsers. Because it is not a general-purpose language, it has a limited
1
number of libraries. The lightweight nature of JavaScript Code is also a good feature
because it is only intended for client-side execution, specifically for web apps
b. Dynamic Typing: Dynamic typing is possible with JavaScript. Dynamic typing means that
the data type of a variable is only declared during runtime. This means that programmers
do not need to declare the data type of variables while programming, making code
simpler and easier to implement.
To declare a variable in JavaScript, we simply use the var or let keyword before the
variable name without the need to specify a data type.
c. Object-Oriented Programming: Object Creation Patterns, or encapsulation. Code Reuse
Patterns, or inheritance, are also key aspects of OOP in JavaScript. Although JavaScript
developers rarely use this capability, it is available to all users.
d. Functional Style: This means that JavaScript is a functional programming language; even
objects are built using constructor functions, and each constructor function represents a
different object type. JavaScript functions can also be utilized as objects and given to
other functions.
e. Platform Independent: Being platform-independent or portable means that you can
write JavaScript code once and run it anywhere at any time. In principle, JavaScript
programs can be written and run on any platform or browser without changing the script's
output.
f. Prototype Based: Instead of classes or inheritance, prototypes are used in JavaScript. We
build a class in a language like Java, and then we construct objects for those classes.
However, in JavaScript, we specify an object prototype, which can subsequently be used
to generate more objects.
g. Interpreted Language: Scripts written in JavaScript are executed line by line. The
JavaScript interpreter, which is a built-in component of the Web browser, interprets these
scripts. However, many JavaScript engines in browsers today use just-in-time compilation
for JavaScript code.
h. Async Processing: Asynchronous programming is a technique that allows your software
to begin a long-running task and then, rather than having to wait for that work to
2
complete, continue to respond to other events while the task is running. These functions
are not executed sequentially but rather in parallel, which greatly reduces processing
time. When the process is completed, the result is displayed in your software.
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.
Hello World!
<script type="text/javascript">
var mytext = "Hello World!"
[Link](mytext, '<br>Hello again!');
</script>
Alert
<script>
alert( 'Hello, world!' );
</script>
Places to put JavaScript code
o Between the body tag of html
<html>
<body>
<script type="text/javascript">
alert("Hello Javatpoint");
</script>
</body>
3
</html>
o Between the head tag of html
<html>
<head>
<script type="text/javascript">
function msg(){
alert("Hello Javatpoint");
}
</script>
</head>
<body>
<p>Welcome to Javascript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
o In .js file (external JavaScript)
We can create external JavaScript file and embed it in many html pages. 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.
<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>
4
Advantages of External JavaScript
There will be the following benefits if a user creates an external javascript:
a. It helps in the reusability of code in more than one HTML file.
b. It allows easy code readability.
c. It is time-efficient as web browsers cache the external js files, which further reduces the
page loading time.
d. It enables both web designers and coders to work with html and js files parallelly and
separately, i.e., without facing any code conflicts.
e. 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:
a. The stealer may download the coder's code using the url of the js file.
b. If two js files are dependent on one another, then a failure in one file may affect the
execution of the other dependent file.
c. The web browser needs to make an additional HTTP request to get the js code.
d. A tiny to a large change in the js code may cause unexpected results in all its dependent
files.
e. We need to check each file that depends on the commonly created external javascript
file.
f. If it is a few lines of code, then better to implement the internal javascript code.
5
Commenting
Single line Comment It is represented by double forward slashes (//). It can be used before and
after the statement.
<html>
<body>
<script>
var a=10;
var b=20;
var c=a+b;//It adds values of a and b variable
[Link](c);//prints sum of 10 and 20
</script>
</body>
</html>
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 a forward slash with an asterisk then an asterisk with
a forward slash. For example:
/* your code here */
<html>
<body>
<script>
/* It is multi line comment.
It will not be displayed */
[Link]("example of javascript multiline comment");
</script>
</body>
</html>
JavaScript Variable
A JavaScript variable is simply the name of the storage location. There are two types of variables
in JavaScript: local variable and global variable. There are some rules while declaring a JavaScript
variable (also known as identifiers).
6
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After the first letter we can use digits (0 to 9), for example, value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.
Examples;
var x = 10;
var _value="John";
JavaScript local variable
A JavaScript local variable is declared inside a block or function. It is accessible within the
function or block only. For example:
<script>
function abc(){
var x=10;//local variable
}
</script>
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e. declared outside the
function or declared with window object is known as global variable. For example:
<script>
var data=200;//gloabal variable
function a(){
[Link](data);
}
function b(){
[Link](data);
}
a();//calling JavaScript function
b();
</script>
