Javascript: by - Y.Poojitha M.Manjulatha

JAVASCRIPT
By –
Y.Poojitha
M.Manjulatha
In 1995
What is JavaScript?
Javascript is an object based, client side scripting
language which is used for creating dynamic web pages
in web applications.
 JavaScript is a lightweight, interpreted programming

language.
 Designed for creating network-centric applications.
 Complementary to and integrated with HTML.
 Open and cross-platform.
Client-Side JavaScript
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.
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
We cannot treat JavaScript as a full-fledged programming
language. It lacks the following important features:
 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 multithreading or
multiprocessor capabilities.
Different ways to write JS in html
1.JavaScript in <head>...</head> Section
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
Click here for the result

<input type="button" onclick=“ SayHello()“
value=“SayHello" />
</body>
</html>
Output:
2.JavaScript in <body>...</body> Section
<html>
<head>
</head>
<body>

</script>
</body>
</html>
Output:
3.JavaScript in <body> and <head> Sections
<html>
<head>

</script>
</head>
<body>

</script>
<input type="button" onclick="sayHello()" value="Say Hello"
/>
</body>
</html>
Output:
Simple example for internal JS:
<html>
<head>
<title>Internal JavaScript</title>
document.write("This is Internal Javascript");
</script>
</head>
<body></body>
</html>
Output:
This is Internal Javascript
Simple example for external JS:
<html>
<head>
<title>External JavaScript</title>
<script type="text/javascript” src="external.js">
</script>
</head>
</html>
external.js
document.write("This is External Javascript");
Output:This is External Javascript

Variables in Javascript
Regular
ex
Primitive data types:
Specify the size and type of variable values. They are the building
blocks of data manipulation and cannot be further divided into simpler
data types.
Primitive data types are number, string, boolean, NULL, Infinity and
symbol.
Non-primitive data types :

The ‘object’ is a non-primitive data type in JavaScript. Arrays and
Functions in JavaScript belong to the ‘object’ data type.
They are created by the programmer. Non-Primitive data types refer to
objects and hence they are called reference types.
JavaScript primitive data types are data types that refer to a single value.
Example: var a = 5;
The variable ‘a’ refers to a single value in memory. If we want to change the value of a,
we would have to assign a new value to a.
When we create a variable, it reserves a space for itself in the memory.
The variable ‘a’ has space in memory which holds its value. When we try to change
the value of ‘a’ by assigning another value like var a = 6, it doesn’t alter the value of
the original a, it just creates a new variable ‘a’ with the new value 6.
var a1=a;
Here the variable ‘a1’ is assigned the value of ‘a’, not the address of ‘a’ in memory.
JavaScript Variable
A JavaScript variable is simply a name of storage location.
There are some rules while declaring a JavaScript variable.
• Name must start with a letter (a to z or A to Z), underscore( _ ), or

dollar( $ ) sign.
• After first letter we can use digits (0 to 9), for example value1.
• JavaScript variables are case sensitive, for example x and X are
different variables.
Numbers in Javascript:
A number data type can be an integer, a floating point value, an exponential value, a ‘NaN’
or a ‘Infinity’.
var a=250; // integer value
var b=25.5000000; // a number containing a decimal
var c = 10e4 // an exponential value which evaluates to 10*10000;
If a number is divided by 0, the resulting value is infinity.
5/0; // results in infinity

typeof(infinity); // returns number
A ‘NaN’ results when we try to perform an operation on a number with a non-numeric

value.
‘hi’ * 5; // returns NaN
typeof(NaN); // returns a number
Boolean:
The boolean data type has only two values, true and false. It is mostly used to check a
logical condition.
typeof(true) // returns boolean
typeof(false) // returns Boolean
Example:
var a =5;
var b=6;
a==b // returns false
Or
var check = Boolean(expression); // If the expression evaluates to true, the value of
(a==b) ‘check’ will be true or else it will be false.
Example 2:
var mystring = ‘hi there’;
Boolean(mystring); // This will result in true because the ‘mystring’ value exists
Strings:
The string data type in JavaScript can be any group of characters enclosed by a single or
double-quotes or by backticks.
var str1 = “This is a string1”; // This is a string primitive type or string literal
var str2= ‘This is a string2’;
Alternatively, we can use the String() function to create a new string.

var str3 = String(‘hi’); // This creates a string literal with value ‘hi’
String(4);//The String() function is also used to convert a non-string value to a
string.
Strings can also be created using new key word.
var str = new String(“hello”);
Undefined :
Undefined data type means a variable that is not defined. The variable is declared but
doesn’t contain any value.
var a;
document.write(a); // This will return undefined else return its value
Null:
The null in JavaScript is a data type that is represented by only one value, the ‘null’
itself. A null value means no value.
var a = null;
document.write (a); // This returns null
typeof(a); // This returns object
This means the type of a null value is an object, not null.
Arrays:
An array in JavaScript is an object data type. An array contains more than one value
with a numerical index, where the index starts from 0. Thus it holds its value in a key-
value pair.
var arr1= [1, 2, 3];
We cannot mutate or change the above array arr1 .
arr1[0] =4;
document.write(arr1) // This will return the array [4, 2, 3]
typeof (arr1) // will return the data type ‘object’.
The array ‘arr1’ refers to the address in memory which contains the value [4, 2, 3].
Arrays can also be created using new key word.

Var colors =new Array(); // length->0
Color[0] =“red”; // length->1
Color[2] =“yellow”; // length->3
<!DOCTYPE html>
<html>
<body> Output:
Creating a JavaScript Object:
<p>Creating a JavaScript Object:</p> Vidya is 50 years old.
<p id="demo"></p>
<script>
const person = {};
person.firstName = "Vidya";
person.lastName = "Mutakuduru";
person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.“;
</script>
</body>
</html>
<p id="demo"></p>
<script> Output:
const person = {
Sathvika is 100 years old.
firstName: "Sathvika",
lastName: "Kammampati",
age:50,
eyeColor: "blue"
};
const x = person;
x.age = 100;
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
Example:
OUTPUT:
JavaScript Scope of Variables
Scope determines the accessibility (visibility) of variables.
JavaScript has 3 types of scope:
• Block scope
• Function scope
• Global scope
Block Scope
ES6 introduced two important new JavaScript keywords: let and const.
These two keywords provide Block Scope in JavaScript.
Variables declared inside a { } block cannot be accessed from outside the block:
Since local variables are only recognized inside their functions, variables with the same name can be used in
different functions.
Local variables are created when a function starts, and deleted when the function is completed.
Function Scope
• JavaScript has function scope: Each function creates a new scope.
• Variables defined inside a function are not accessible (visible) from
outside the function.
• Variables declared with var, let and const are quite similar when declared
inside a function.
A global variable has Global Scope:
All scripts and functions on a web page can access it.
Global Scope
Variables declared Globally (outside any function) have Global Scope.
Global variables can be accessed from anywhere in a JavaScript program.
Variables declared with var, let and const are quite similar when declared
outside a block.
THANK YOU

Javascript: by - Y.Poojitha M.Manjulatha

Uploaded by

Copyright:

Available Formats

Javascript: by - Y.Poojitha M.Manjulatha

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript: by - Y.Poojitha M.Manjulatha

Uploaded by

Copyright:

Available Formats

JAVASCRIPT

 JavaScript is a lightweight, interpreted programming

The JavaScript client-side mechanism provides many

For example, you might use JavaScript to check if the

Click here for the result

Output:This is External Javascript

Non-primitive data types :

There are some rules while declaring a JavaScript variable.

• Name must start with a letter (a to z or A to Z), underscore( _ ), or

If a number is divided by 0, the resulting value is infinity.

5/0; // results in infinity

A ‘NaN’ results when we try to perform an operation on a number with a non-numeric

Alternatively, we can use the String() function to create a new string.

Arrays can also be created using new key word.

You might also like