Scribd
Upload
3 views

UNIT1 JavaScript

The document provides an introduction to JavaScript, highlighting its role as a scripting language essential for web development alongside HTML and CSS. It covers the features, applications, and variable declarations in JavaScript, explaining the differences between 'var', 'let', and 'const'. Additionally, it includes examples of JavaScript code and emphasizes the importance of learning JavaScript for creating dynamic and interactive web applications.

Uploaded by

abinishi222
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

UNIT1 JavaScript

The document provides an introduction to JavaScript, highlighting its role as a scripting language essential for web development alongside HTML and CSS. It covers the features, applications, and variable declarations in JavaScript, explaining the differences between 'var', 'let', and 'const'. Additionally, it includes examples of JavaScript code and emphasizes the importance of learning JavaScript for creating dynamic and interactive web applications.

Uploaded by

abinishi222
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

UNIT-1

JavaScript
(Up to
Variables)
Introduction to JavaScript

• JavaScript is a scripting language that is used to create and manage dynamic web pages, basically anything that
moves on your screen without requiring you to refresh your browser.

• It can be anything from animated graphics to an automatically generated Facebook timeline.

• When most people get interested in web development, they start with good old HTML and CSS.

• From there, they move on to JavaScript, which makes sense, because, these three elements together form the
backbone of web development.

• HTML is the structure of your page like the headers, the body text, any images you want to include.

• It basically defines the contents of a web page.

• CSS controls how that page looks (it’s what you’ll use to customize fonts, background colors, etc.).

• JavaScript is the third element. Once you’ve created your structure (HTML) and your aesthetic vibe (CSS),
JavaScript makes your site dynamic (automatically updateable).
Why JavaScript?

• JavaScript is an essential programming language, almost compulsory to learn for students or software developers
that are gravitated towards web development.

• Wondering why? Here’s the answer:

1. Javascript is the most popular programming language in the world and that makes it a default choice for web
development.

2. JavaScript offers lots of flexibility. We can create stunning and fast web applications with tons of customizations to
provide users with the most relevant graphical user interface.

3. JavaScript is now also used in mobile app development, desktop app development, and game development.

4. The incredible thing about Javascript is that we can find tons of frameworks and libraries already developed, which
can be used directly in web development. That reduces the development time and enhances the graphical user
interface.
What is JavaScript?

• JavaScript is an open-source programming language.

• It is designed for creating web-centric applications.

• JavaScript is lightweight and interpreted, which makes it much swifter than other languages.

• Being integrated with HTML, JavaScript is easier to implement in web applications.

• 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.
The traditional website uses js to provide several forms of interactivity and simplicity.
What is JavaScript Used For?

JavaScript is used in various fields from the web to servers, and here’s a quick list of the significant areas it’s
used in:

1. Web Applications: JavaScript is used for adding interactivity and automation to websites.

2. Mobile Applications: JavaScript isn’t just for developing web applications; it is also used for developing
applications for phones and tablets.

• With frameworks like React Native, we can develop full-fledged mobile applications with all those fancy
animations.

3. Web-based Games: If we’ve ever played a game directly on the web browser, JavaScript was probably used to
make that happen.

4. Back-end Web Development: JavaScript has traditionally been used for developing the front-end parts of a
web application. However, with the introduction of NodeJS, a prevalent back-end JavaScript framework, things
have changed. And now, JavaScript is used for developing the back-end structure also.
Say “Hello World” in JavaScript

• The next step is to write code.

• Here’s how you can write a simple JavaScript code that prints Hello World on the browser window.

<html> OUTPUT:
Hello World!
<body>

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

document.write("Hello World!");

</script>

</body>

</html>
1. JavaScript can be easily integrated into the HTML code, and that’s exactly what’s happening here.

2. For those of you not familiar with HTML, this code might seem a bit unfamiliar. But it is perfectly understandable
even to the web development beginners.

3. <html> tag is required to define a HTML web page. <head> tag. The web page contents are defined inside the
<body> tag.

4. Any JavaScript that you add to the web page has to be within the <script> tag.

5. document.write is a JavaScript function that writes the contents onto the web page. In this case, it prints “Hello
World!” on screen.

While HTML and CSS are absolutely required to code a basic web page, JavaScript is the language that will help you
bring that page to life, making it more attractive to the audience. Taking the time to learn JavaScript will help you in
the web development world.
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.


Application of JavaScript

JavaScript is used to create interactive websites. It is mainly used for:

• Client-side validation,

• Dynamic drop-down menus,

• Displaying date and time,

• Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt
dialog box),

• Displaying clocks etc.


<html> OUTPUT:
<body>
<h2>Welcome to JavaScript</h2> Welcome to JavaScript
<script> Hello JavaScript by JavaScript
document.write("Hello JavaScript by JavaScript");
</script>
</body>
</html>
JavaScript Variable

• A JavaScript variable is simply a name of storage location.

• There are two types of variables in JavaScript :

1. local variable and

2. global variable.

• There are some rules while declaring a JavaScript variable (also known as identifiers).

• 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.
Correct JavaScript variables
1.var x = 10;
2.var _value="Hello";

Incorrect JavaScript variables


3.var 123=30;
4.var *aa=320;
<html>
<body>
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
</body>
</html>

OUTPUT:30
JavaScript local variable

• A JavaScript local variable is declared inside block or function.

• It is accessible within the function or block only.

For example:

<script>
function abc(){
<script>
var x=10;//local variable
If(10<13){
} var y=20;//JavaScript local variable
</script> }
Or, </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:
<html> OUTPUT:
<body>
<script> 200 200
var data=200;//gloabal variable
function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();

</script>
</body>
</html>
JavaScript Identifiers

JavaScript variables must have unique names. These names are called Identifiers.

1. Basic rules to declare a variable in JavaScript:

2. These are case-sensitive

3. Can only begin with a letter, underscore(“_”) or “$” symbol

4. It can contain letters, numbers, underscore, or “$” symbol

5. A variable name cannot be a reserved keyword.


• JavaScript is a dynamically typed language so the type of variables is decided at runtime.

• Therefore there is no need to explicitly define the type of a variable.

• We can declare variables in JavaScript in three ways:

1. JavaScript var keyword

2. JavaScript let keyword

3. JavaScript const keyword

JavaScript Variables can also be declared Automatically


• In this first example, x, y, and z are undeclared variables.

• They are automatically declared when first used:

Refer program autovar.html

Note

It is considered good programming practice to always declare variables before use.


Now Let’s see about all three ways of
declaring variables
JavaScript var:

• The JavaScript var statement declares variables with function scope or globally. Before ES6, var was the sole
keyword for variable declaration, without block scope, unlike let and const.

Syntax:

var variableName = valueOfVar;

Function Scope

• The variables declared inside a function are function-scoped and cannot be accessed outside the function.

• The variables declared using the var statement are hoisted at the top and are initialized before the execution of
code with a default value of undefined.

• The variables declared in the global scope that is outside any function cannot be deleted
• In JavaScript, we can declare a variable multiple times using the var keyword without causing an error.

• This is because var has function scope or global scope, depending on where it's declared, and does not
have block scope.

• When we redeclare a variable using var, it doesn't throw an error, and the variable will simply get
reassigned to the new value.

• This can lead to unexpected behavior and is one of the reasons why let and const were introduced.
• Using var we can use it in 4 ways as four cases:

1. we will declare a global variable and access it anywhere inside the program

var test = 12

function f(){

console.log(test);

f();

output:12
2. we will declare multiple variables in a single statement

Output:
var test1 = 12,
12 14 16
test2= 14,
test3 = 16
function fun(){
console.log(test1, test2, test3);
}
fun();
3. we will see the hoisting of variables declared using var

Output:
console.log(test);
undefined
var test = 12;

Explanation: We get the output without any error because the variable test is hoisted at the top even before the execution of the
program began and the variable is initialized with a default value of undefined

4. we will redeclare a variable in the same global block

Output:
var test = 12;
100
var test = 100;
console.log(test);

Explanation: We did not get any error when redeclaring the variable if we did the same with the let keyword an error would be
thrown
2. JavaScript Let

• The let keyword in JavaScript is used to make variables that are scoped to the block they’re declared in.

• Once you’ve used let to define a variable, you cannot declare it again within the same block. It’s important to declare let variables
before using them.

• The let keyword was introduced in the ES6 or ES2015 version of JavaScript.

• It’s usually recommended to use let when you’re working with JavaScript.

Syntax:

let variable_name = value;


Output:
console.log(test);
undefined
var test = 12;
1. Block Scope

The variables which are declared inside the { } block are known as block-scoped variables. variables declared by the var keyword
cannot be block-scoped.

Example: In this example, the num variable is block-scoped and it cannot be accessed outside the block. If we try to access the
variable outside the block it throws a reference error.
Output:
{
10
let num = 10; Uncaught ReferenceError: num is not defined

// calling the function inside block


console.log(num)
}

// Calling a function outside


// block throws an Error
console.log(num)
2. Global Scope

• A global scope variable is a variable declared in the main body of the source code, outside all functions.

• Example: In this example, the num variable is a globally scoped variable and it can be accessed from anywhere in the progra

Output:
let num = 10;
10
console.log(num); 10
function fun() {
console.log(num);
}

fun(); // Calling the function


3. Function Scope

• A function scope variable is a variable declared inside a function and cannot be accessed outside the function.

• Example: In this example, the num variable is declared inside the function and cannot be accessed outside the function.

Output:
function fun() {
10
let num = 10; "ReferenceError: num is not defined
console.log(num);
}

fun(); // Calling the function

console.log(num);
1. Redeclaring Variables in different blocks

• The variables declared using let can be redeclared inside other blocks.

• Example: In this example, variable x is redeclared inside other blocks.

Output:
let x = 77;
23
77
{
let x = 23;
console.log(x);
}

console.log(x);
2. Redeclaring Variables in the same blocks

• We cannot redeclare variables using the let keyword inside the same blocks. It will throw an error.

• Example: In this example, variable x is redeclared inside the same blocks.

Output:
let x = 77;
Uncaught SyntaxError: Identifier 'x' has already been
declared
{
let x = 23; // legal
console.log(x);
}

let x = 67; // illegal

console.log(x);
3. JavaScript Const

• The const keyword in JavaScript is used to define variables that cannot be changed once they’re assigned a value. This prevents
any modifications to the variable’s value.

• Additionally, const doesn’t allow redeclaration of the same variable within the same block, and it provides block scope. It was
introduced in ES2015 (ES6) for creating immutable variables.

Output:
Syntax:
Uncaught SyntaxError: Identifier 'x' has already been
declared
const const_name;
const x;
SUMMARY OF VARIABLE DECLARATIONS (var,let & const)

S.No var let const

Declaration and
var a=10; let b=20; const auth=”Herb”;
initialization

Re-Declaration is possible Re-Declaration is possible


Re-declaration Multiple declarations are possible within block scope and also within block scope but not
outside the block scope outside the block scope

Not Possible within the


Possible within the block not block and also outside the
Re-assigning Possible
outside the block block

You might also like