Scribd
Upload
17 views15 pages

lecture_01

JavaScript is a lightweight, interpreted, client-side scripting language used for web development, capable of handling both front-end and back-end applications. It features dynamic typing, first-class functions, and supports asynchronous programming, making it versatile for various applications including mobile and desktop development. JavaScript allows for variable declaration using var, let, or const, and provides multiple data types, operators, and methods for manipulating HTML elements and handling events.

Uploaded by

bhagaban muduli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views15 pages

lecture_01

JavaScript is a lightweight, interpreted, client-side scripting language used for web development, capable of handling both front-end and back-end applications. It features dynamic typing, first-class functions, and supports asynchronous programming, making it versatile for various applications including mobile and desktop development. JavaScript allows for variable declaration using var, let, or const, and provides multiple data types, operators, and methods for manipulating HTML elements and handling events.

Uploaded by

bhagaban muduli
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

UNIT-III JAVA SCRIPT

LECTURE-1

Introduction:
JavaScript (js) is a light-weight object-oriented programming language which is used by several
websites for scripting the WebPages.

It is also interpreted programming language.

It is written in client side and execute on the client browser which reduce load on server.

JavaScript is a client-side scripting language (though it can also be used server-side with tools like Node.js).

Ceating of

Features:

Interpreted Language

JavaScript runs directly in the browser without needing prior compilation.

Lightweight and Fast

Minimal memory usage and quick execution, ideal for web applications.

Dynamic Typing

You don't need to declare variable types (e.g., let x = 10; vs. int x = 10; in Java).

Object-Oriented (Prototype-Based)

Supports object creation and inheritance using prototypes rather than classical classes .

First-Class Functions

Functions are treated like variables. You can pass them as arguments, return them, and assign them to variables.

Event-Driven Programming

Commonly used for handling user interactions like clicks, mouse movements, keypresses, etc.

Asynchronous and Single-Threaded

Uses event loop and callback functions to handle asynchronous operations like AJAX, fetch, and setTimeout.

Browser Compatibility

Supported by all major web browsers (Chrome, Firefox, Safari, Edge, etc.) without the need for plugins.
Client-Side and Server-Side Usage

Primarily used on the client side but can also be used server-side with platforms like Node.js.

Cross-Platform

Can run on different platforms, including desktops, servers, mobile devices, and even IoT devices.

Applications of JavaScript
Web Development (Front-End)
Web Development (Back-End)
Mobile App Development
Desktop Application Development
Game Development
Data Visualization
Machine Learning (in the Browser)
Automation & Scripting
Internet of Things (IoT)
Progressive Web Apps (PWAs)

Execution of java script


All java script programs can be written in inside script tag. The script tag can be written in head , body or inside in any
element. The <script> tag we use the type attribute to define the scripting language .
So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends:

Another way to execute javascript is a runtime like node.js which can be installed and used to run javascriipt code,

syntax

<script>
// java script code
</script>
Example:
<html>
<body>
<script type="text/javascript">
<!-- java script code can be embeded inside body section -->
document.write("This is my first program abut java script");
</script>
</body>
</html>
Here <script> tag is used to including the script into html document

<!-- - -> is used to display or write the comment text

The document.write command is a standard JavaScript command for writing output to a page.

By entering the document.write command between the <script> and </script> tags, the browser will
recognize it as a JavaScript command and execute the code line.
Java script statement:

JavaScript is a sequence of statements to be executed by the browser. A JavaScript statement is


a command to a browser. The purpose of the command is to tell the browser what to do.

document.write("welcome");

JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.

Each statement is executed by the browser in the sequence they are written.
Example:
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

JavaScript Blocks
JavaScript statements can be grouped together in blocks.
Blocks start with a left curly bracket {, and ends with a right curly bracket }.
The purpose of a block is to make the sequence of statements execute together.

Example:
<script type="text/javascript">
{
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
}
</script>
Link JavaScript File in HTML

JavaScript can be added to HTML file in two ways:

Internal JS:

We can add JavaScript directly to our HTML file by writing the code inside the <script> tag. The <script>
tag can either be placed inside the <head> or the <body> tag according to the requirement.

External JS:

We can write JavaScript code in another files having an extension.js and then link this file inside
the <head> tag of HTML file in which we want to add this code.

Example:
<html>
<head>
<script type="text/javascript" src="abc.js"></script>
</head>
<body>
</body>
</html>

JavaScript can "display" data in different ways:

Writing into an HTML element, using innerHTML or innerText.

Writing into the HTML output using document.write().

Writing into an alert box, using window.alert().

Writing into the browser console, using console.log().

Using inner HTML

To access an HTML element, document.getElementById(id) method or getElementByclassname() is


used. The id attribute or class attribute define HTML element.

Syntax:

document.getElementsByClassName("test")[0];
EXAMPLE

<! DOCTYPE html>


<html>
<body>
<h1>My Web Page</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "<h2>Hello World</h2>";
</script>
</body>
</html>
Using inner Text

Example:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerText = "Hello World";
</script>
</body>
</html>

Using window.alert().

You can use an alert box to display data. Here window keyword is optional.

Example:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

Output
Java script comment
It is a non executable statement which is not executed by the compiler. It Simply ignored by the compiler.

1. Single line comments. starts with //

Example:

<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

2. Multi line comments. Starts with start with /* and end with */.

Example:
<script type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>

Variable:
Variables are "containers" for storing information. JavaScript variables are used to hold values or expressions.

In java script variables are used to hold values or expressions. The values of the variables are allocated using
assignment operator (“=”)

Rules for declaration of variable

Variables are case-sensitive in Javascript. This means that schoolName and schoolname are considered
different variables.

We can use letters, digits, symbols like dollar sign ($) and underscore ( _ ) in a variable name.

We cannot start a variable name with a digit (0-9).

We cannot use any of the reserved keywords (function, return, typeof, break, etc.) of Javascript as a variable
name.

Declaration of variable
JavaScript variable can be declared in 4 ways

1. Automatically
2. Using var
3. Using let
4. Using const

Automatically
JavaScript allows the automatic or implicit declaration of variables by assigning a value to a name without
using var, let, or const.

Syntax:

myNumber = 10;

Using var

The var keyword was the standard way to declare variables.

Syntax:

var myName = 'John Doe';

var s=5;

Using let

Variable can also be declared using let keyword.

Syntax:

let age = 25;

Using const

const is utilized for defining variables with values that are intended to remain constant and unchangeable.

Syntax:

const <variable-name> = <value>;

const PI = 3.14; // Block-scoped constant

The constant must be initialized when you declare it, otherwise, it will throw a " SyntaxError: Missing
initializer in const declaration ".

Once assigned a value to a constant, you can’t re-assign values afterward. That is, a value is fixed to a
constant

Example 1:
var ages; //we can declare a variable without initializing it.

const age; //It will throw an error as we haven't initialized the constant.

Example 2:

var age = 20;

age = 25; //We can update values of variables like this

const pi = 3.142;

pi = 5; // This line will throw a TypeError: Assignment to constant variable.

Note: Though we cannot change the value of the constant, but if the constant value is an object, then we
can modify the object's properties.

Example 3:

const car = { company: 'BMW' };

car = { company: 'Audi' };

//The above line will throw an error, because we are trying to reassign

// value to a constant, which is not correct.

//To change the company name we can do the following trick

car.company = 'Audi';

console.log(car.company); //output: 'Audi'

Java script data type:


Java script provides different data types to hold different types of values . there are two types of data
types in java script.

Primitive data type

Non primitive data type

Primitive data type: They can hold a single simple value.


There are five types of primitive data types in java script.

Data type Description

String Represents sequence of characters that are surrounded by single or double


quotes. Ex: let str = "Hello, world!"; let str=’Good Morning’;

Number Represents numeric values, including integers and floating-point numbers.

let num = 10;

let num = 12.4;

Boolean This data type can accept only two values i.e. true and false.

let x = true;

let y = false;

Undefined variable has been declared but has not been assigned a value .

let x;

Null Represents NULL i.e no value at all

let x = null;

Bigint Represents integers of arbitrary precision, exceeding the limits of the number type

let bigInt = 9007199254740992n;

symbol Symbol data type is used to create objects which will always be unique.

let sym = Symbol("Hello");

Non primitive data type: Non-primitive data types in JavaScript, also known as reference types, can
hold collections of values and more complex entities.
Object: Objects are collections of key-value pairs, where keys are strings (or symbols) and values can be of any
data type, including other objects.

Example:

let person = { name: "John Doe", age: 30, city: "New York" };

Array: Arrays are ordered lists of values. Each value in an array is called an element, and elements can be of
any data type.
Example:
let numbers = [1, 2, 3, 4, 5];
let mixedArray = [1, "hello", true, null];

Function: Functions are blocks of reusable code that perform specific tasks.
Example:
function add(a, b) {
return a + b;
}
Date: The Date object is used to work with dates and times. It provides methods for creating, manipulating, and
formatting dates.
Example:
let now = new Date();
let christmas = new Date(2025, 11, 25); // Month is 0-indexed

RegExp: Regular expressions are used to define search patterns for matching text in strings. They are objects
that can be used to search, replace, and validate text.
Example:
let pattern = /hello/i; // Case-insensitive match for "hello"
let result = pattern.test("Hello world"); // true
Map: The Map object holds key-value pairs where keys can be any data type. It remembers the insertion order
of entries.
Example:
const myMap = new Map();
myMap.set('a', 1);
myMap.set('b', 2);
Set: The Set object lets you store unique values of any type, whether primitive values or object references.
Example:
const mySet = new Set();
mySet.add(1);
mySet.add(2);
mySet.add(2); // Only one 2 will be stored

Java script keyword:


Keywords are reserved words that are part of the syntax in the programming language. cannot use these reserved words
as variables, labels, or function names:

Java script operator

An Operator is a symbol that tells to perform specific operation.

Types of operator
JavaScript supports the following types of operators.
1. Arithmetic Operators
2. Comparison Operators
3. Logical (or Relational) Operators
4. Assignment Operators
5. Conditional (or ternary) Operators
6. Bitwise operator

Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations on the operands

Example:
<html>
<body>
<script type="text/javascript">
var a = 5;
var b = 2;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
document.write(linebreak);
a = a++;
document.write("a++ = ");
result = a++;
document.write(result);
document.write(linebreak);
document.write(linebreak);
b = b--;
document.write("b-- = ");
result = b--;
document.write(result);
document.write(linebreak);
document.write(linebreak);
</script>
<p>Set the variables to different values and then try...</p>
</body>
</html>

Comparison operator
Comparison operators in JavaScript are used to compare two values and return a Boolean value
(true or false).

Logical (or Relational) Operators


Logical operators are used to determine the logic between variables or values.

Here x=3 and y=6

Assignment operator
Assignment operators assign values to JavaScript variables.

Ternary operator:
A ternary operator evaluates a condition and executes a block of code based on the condition.

Syntax:
Condition? expression1:expression2

If the condition is true, expression1 is executed.


If the condition is false, expression2 is executed.

Bitwise operator
Bitwise operators treat its operands as a set of 32-bit binary digits (zeros and ones) and perform
actions.

You might also like