Unit 1 : basics of javacript programming
Syllabus :
1.1 Feature of javascript
1.2 object name, property, method, dot syntax, main event.
1.3 values and variables
1.4 operators and expressions - primary expressions, object and array initializers, function
definition expression, property access expression, invocation expressions.
1.5 if statement, if…….else, if…….elseif, nested if statement.
1.6 switch case statement.
1.7 loop statement – for loop, for….in loop, while loop, do….while loop, continue statement.
1.8 Querying and setting properties and deleting properties, property getters and setters
What is scripting language?
All scripting languages are programming languages.
The scripting language is basically a language where instruction are written for runtime
environment.
They do not require the compilation step rather interpreted by browser.
A scripting language is a programming language designed for integrating and
communicating with other programming languages
What is javascript ?
Javascript Is popular, lightweight And open source client side language supported by all
browser
It is scripting language beacause it can be used along with another languages.
It is not purely programming language and hence it doesn’t need compilation.
It is an interpreted programming language with object oriented capabilities.
Usually software developers use Programming languages like C, C++, Java On the other
hand, web developer use javascript.
1 To make web pages dynamic.
2 To respond to events.
3 To create interactive forms.
4 To validate data inputed by user.
5 To control browser data.
Difference between Java and javascript
Java and javascript are two completely different languages in both concept and design.
However the syntax is similar.
Java powerful and much more complex programming language like C and C++ where ,
JS is not full-featured programming language rather, it is interpreted scripting language.
Java program needs compilation Whereas javascript program does not need compile.
Javascript only executed in browser
Java programs are executed in Java compatible application whereas, JS programs are
executed in all browsers.
Working of JS program :
1.1features of javacript
1. Lightweight and Interpreted Language
JavaScript is a lightweight, interpreted language, which means it doesn't need to be
compiled before running. It is executed line by line in the web browser.
2.Object-Oriented Programming Support
JavaScript supports object-oriented programming (OOP). And OOPs concepts.
3.Event-Driven Programming
respond to user interactions, such as clicks, keypresses, and other events.
4.Dynamic Typing
JavaScript is dynamically typed, which means variable types are determined at runtime.
You don't need to specify the data type of a variable when you declare it.
5.Platform Independence
JavaScript is platform-independent. Any browser with a JavaScript engine can interpret
and run JavaScript code.
7.Built-In Functions and Methods
JS comes with a variety of built-in functions and methods for performing common tasks,
such as string manipulation, array operations, and mathematical computations.
8.Extensive Libraries and Frameworks
The JavaScript ecosystem includes a vast number of libraries and frameworks (e.g.,
React, Angular, Vue.js, jQuery) that simplify and enhance web development.
9.Integration with HTML/CSS
JS seamlessly integrates with HTML and CSS, making it easy to create interactive web
pages. It can manipulate HTML elements and apply CSS styles dynamically.
How to write javascript?
Javascript is implemented by adding <script>………</script> tag within a html tag.
In a web page script tag can be inserted within web page by 2 ways.
<head>
<script>
//javascript code
</script>
</head>
OR
<body>
<script>
//javascript code
</script>
</body>
Attributes of <script> tag
1 Language
2 Type
Language : specify scripting language of embeded code. The browser assumes JavaScript as the
default scripting language.
Type: the type attribute tells the browser that the script is in plain text and the text is organized
in the format of javascript. Default value is “text/javascript”.
Note : both attributes are optional and we should not use them.
<script language="javascript" type="text/javascript">
document.write("hi its dev");
</script>
Datatypes in JS :
There are two types of datatypes :
A) Primitive
B) Non-primitive
A) primitive datatypes :
1. String : It is used to store string or sequence of character
Ex: let str = “ dev”;
2. number : it is used to store integer number of floting point value.
Ex : let num1 = 10;
Let num2 = 20.56;
3.boolean : It is used to store either true or false.
Ex: let flag = true ;
4.undefined : it represent the undefined value that is not assigned/initialized.
Ex: let x = undefined;
5. null : it indicate absense of value
Ex: let email = null;
B) non - primitive datatypes :
1.object : it represent the instance to to which we can access the member.
Ex: let student = {
Name : “dev”,
Marks : 92
2. array : it is used to store multiple values in single variable
Ex: let arr = {“dev”, 06, “kinhavali”};
Operators in JS :
1. arithmetic
2. comparison
3. logical
4. bitwise
5. assignment
6. conditional/ternary
1. Arithmetic Operators :
Sr no Operator Meaning
1 + addition
2 - Substraction
3 * Multiplication
4 / division
5 % Modulus/remainder
WAP to implement arithmetic operator.
<body>
<script>
let a = 10;
let b = 5;
document.write("<br> Addition = " + (a + b));
document.write("<br> Substraction = " + (a - b));
document.write("<br> Multiplication = " + (a * b));
document.write("<br> Division = " + (a / b));
document.write("<br> Remainder = " + (a % b));
</script>
</body>
Output :
Addition = 15
Substraction = 5
Multiplication = 50
Division = 2
Remainder = 0
2. Comparison Operators :
SR no Operator Meaning
1 < Less than
2 <= Less than or equal to
3 > Greater than
4 >= Greater than or equal to
5 == Exact equal to
6 != Not equal to
WAP to implement comparison operators
<body>
<script>
let a = 5;
let b = 10;
document.write("<br> a < b = " + (a < b));
document.write("<br> a <= b = " + (a <= b));
document.write("<br> a > b = " + (a > b));
document.write("<br> a >= b = " + (a >= b));
document.write("<br> a == b = " + (a == b));
document.write("<br> a != b = " + (a != b));
</script>
</body>
Output :
a < b = true
a <= b = true
a > b = false
a >= b = false
a == b = false
a != b = true
3. Logical Operators :
Sr no Operator Meaning
1 && Logical and
2 || Logical or
3 ! Logical not
WAP to implement logical operator
<body>
<script>
let a = 5;
let b = 10;
document.write("<br>Logical AND : " + ((a < b) && (b > a)));
document.write("<br>Logical OR : " + ((a < b) || (a > b)));
document.write("<br>Logical NOT : " + !(a < b));
</script>
</body>
Output :
Logical AND : true
Logical OR : true
Logical NOT : false
4. Bitwise Operators :
SR no Opertor Meaning
1 & Bitwise AND
2 | Bitwise OR
3 ^ Bitwise XOR
4 ~ Bitwise NOT
5 << Bitwise Left shift
6 >> Bitwise right shift
WAP to implement bitwise operators.
<body>
<script>
let a = 4;
document.write("<br>Bitwise AND(5&3) : " + (5 & 3));
document.write("<br>Bitwise OR(5|3) : " + (5 | 3));
document.write("<br>Bitwise XOR(5^3) : " + (5 ^ 3));
document.write("<br>Bitwise NOT(~7) : " + (~7));
document.write("<br>Bitwise left shift(4<<1) : " + (4 << 1));
document.write("<br>Bitwise right shift(4>>1) : " + (4 >> 1));
</script>
</body>
Output :
Bitwise AND(5&3) : 1
Bitwise OR(5|3) : 7
Bitwise XOR(5^3) : 6
Bitwise NOT(~7) : -8
Bitwise left shift(4<<1) : 8
Bitwise right shift(4>>1) : 2
5. Assignment Operators :
SR no operator
1 +=
2 -=
3 *=
4 /=
WAP to implement assignment operators.
<body>
<script>
let a = 5;
let b = 5;
a += b; //a = a + b
document.write("<br>" + a);
a -= b; //a = a - b
document.write("<br>" + a);
a *= b; //a = a * b
document.write("<br>" + a);
a /= b; //a = a / b
document.write("<br>" + a);
</script>
</body>
Output :
10
5
25
5
6. Conditional/ternary Operators :
i) ternary operator consist of condition if the condition is true then first(true) part
will execute and if condition is false then second(false) part will execute.
ii) syntax :
<condition> ? <true_part> : <false_part>;
WAP to implement conditional/ternary operator.
<body>
<script>
let a = 5;
let b = 10;
let greatest = (a > b) ? a : b;
document.write("<br>Greatest = " + greatest);
</script>
</body>
Output :
Greatest = 10
1.2 Object name, property, method, dot syntax, main event.
1.2.1 Object Name:
Define : An object in JavaScript is a collection of properties and methods. The object name is
the name you give to that collection.
let car = {
brand: "Toyota",
model: "Corolla"
};
document.write("Object Name: car<br>"); //Object Name : car
Here, car is the object name.
1.2.2 Property:
Define :A property is a value that belongs to an object. It's like a variable that is tied to the
object.
let car = {
brand: "Toyota",
model: "Corolla"
};
document.write("Car Brand: " + car.brand + "<br>"); //Car Brand : Toyota
document.write("Car Model: " + car.model + "<br>"); //Car Model : Corolla
Here, brand and model are properties of the car object.
1.2.3 Method:
Define :A method is a function that belongs to an object. It's a way to perform actions or
calculations based on the object’s properties.
let car = {
brand: "Toyota",
model: "Corolla",
start: function() {
document.write("The car has started.<br>");
};
car.start(); //The car has started.
Here, start is a method of the car object.
1.2.4 Dot syntax :
Define : Dot syntax is how you access an object's properties or methods using a period (.)
between the object name and the property or method.
let car = {
brand: "Toyota",
model: "Corolla",
start: function() {
document.write("The car has started.<br>");
};
// Accessing a property
document.write("Car Brand: " + car.brand + "<br>"); // Car Brand: Toyota
// Calling a method
car.start(); // The car has started.
1.2.5 Main Event :
Define : In JavaScript, an event is an action or occurrence detected by the browser, like a user
clicking a button or loading a webpage.
<body>
<script>
function showEvent() {
document.write("Button clicked!<br>");
function vinu(){
alert("do you want to exit app?");
</script>
<button onclick="showEvent()">Click me</button> //output : Button
clicked! (on brower)
<button onclick="vinu()">exit</button> //output : do you want to exit app?
(pop up msg)
</body>
Note : A button is included with an onclick event that triggers the showEvent() function,
which writes "Button clicked!" to the webpage.
1.3values and variables
1.3.1 value:
Define: A value is any data that you can assign to a variable. It can be a number, string, boolean,
or any other data type in JavaScript.
1.3.2 Variables :
Define : A variable is a container that stores a value. You can create a variable, assign a value to
it, and then use or modify that value later in your code.
How to Declare Variables: In JavaScript, you can declare variables using var, let, or const.
<script>
let a = 10;
document.write(a);
</script>
Note : Here a is variable and 10 is value assign to that variable.
1.4 operators and expressions - primary expressions, object and array
initializers, function definition expression, property access expression,
invocation expressions.
1.4.1 Primary Expressions :
Define : Primary expressions are the simplest, most basic expressions in JavaScript. They don't
involve any operators or complex syntax; they are just simple values.
Ex:
let number = 10; // number is a primary expression
let greeting = "Hello"; // greeting is a primary expression
1.4.2 Object and Array initializer :
These are ways to create new objects or arrays with specific properties or elements.
Object initilizer :
Creates an object with key-value pairs.
Ex:
let car = {
brand: "Toyota",
model: "Corolla"
};
Note : Here, car is an object with brand and model as its properties.
Array initializer :
Creates an array with elements.
Ex :
let arr = [1,2,3,4,5]; // initializing values at creation of array
document.write("<br>"+arr); //output : 1,2,3,4,5
let arr2 = new Array(7);
arr2[0]=11; //initializing values after creation of array
document.write("<br>"+arr2[0]); //output : 11
1.4.3 Function Defination Expression :
Define : A function definition expression is a way to create a function in JavaScript. Functions
are blocks of code that can be executed when called.
Ex1: fuction returning something
<script>
let greet = function (name) {
return "<br>" + "Hello" + name;
let x = greet("Dev");
document.write(x);
</script>
output : Hello Dev
Ex2 : function not returning anything
<script>
let firealert = function () {
document.write("fire caught!");
firealert(); // Call the function directly
</script>
Output : fire caught!
1.4.4 Property Access Expression:
Define : Property access expressions are used to access the properties of an object. This can be
done using dot notation (.) or bracket notation ([]).
Ex :
<script>
let car = {
brand: "Toyota",
model: "Corolla"
};
document.write(car.brand); // using (.) notation
document.write(car["model"]); // using [ ] notation
</script>
Output : Toyota Corolla
1.4.5 Invocation Expressions:
Define : Invocation expressions are used to call (or invoke) functions. When you call a function,
you use an invocation expression.
Ex :
function greet(name) {
return "Hello, " + name;
let message = greet("John"); // Invocation expression
document.write(message); // Outputs: Hello, John
Note : Here, greet("John") is an invocation expression that calls the greet function with
the argument "John".
1.5 if statement, if…….else, if…….elseif, nested if statement.
1.5.1 If statement :
Define : if specified condition is true then code under if statement will be executed.
Ex:
<script>
let age = 20;
if (age >= 18) {
document.write("You are an adult.");
</script>
Output : You are an adult.
1.5.2 If…….else statement
Define : if specified condition is true then code of if block will be execute if specified condition
is false then code of else block will be execute.
Ex :
<script>
let age = 16;
if (age >= 18) {
document.write("You are an adult.<br>");
else {
document.write("You are a minor.<br>");
}
</script>
Output : You are a minor.
1.5.3 If……elseif statement
Define : this statement allows to test multiple conditions.if condition1 is true then only block of
code under condition1 will be executed, if condition2 is true then only block of code under
condition2 will be executed, if none of the condition is true then block of code of else will be
executed.
Syntax :
if (condition1) {
// Code to run if condition1 is true
} else if (condition2) {
// Code to run if condition2 is true
} else {
// Code to run if none of the above conditions are true
Ex:
let marks = 85;
if (marks >= 90) {
document.write("Grade: A+<br>");
} else if (marks >= 80) {
document.write("Grade: A<br>");
} else if (marks >= 70) {
document.write("Grade: B<br>");
} else {
document.write("Grade: C<br>");
Output : Grade: A
1.5.4 Nested if statement
Define : A nested if statement is an if statement inside another if statement. This allows you to
check a condition only if a previous condition is true.
Syntax :
if (condition1) {
// Code to run if condition1 is true
if (condition2) {
// Code to run if condition2 is true
Ex:
let age = 20;
let hasID = true;
if (age >= 18) {
if (hasID) {
document.write("You are allowed to enter.<br>");
} else {
document.write("You need an ID to enter.<br>");
} else {
document.write("You are not old enough to enter.<br>");
Output : You are allowed to enter.
1.6 switch case statement.
Define : The switch statement allows you to compare a variable against multiple values easily.
It is often clearer than using multiple if...else if statements, especially when you have many
cases to handle.
Ex:
let day = 3;
let dayName;
switch (day) {
case 1:
dayName = "Monday";
break;
case 2:
dayName = "Tuesday";
break;
case 3:
dayName = "Wednesday";
break;
case 4:
dayName = "Thursday";
break;
case 5:
dayName = "Friday";
break;
case 6:
dayName = "Saturday";
break;
case 7:
dayName = "Sunday";
break;
default:
dayName = "Invalid day"; // Runs if 'day' is not between 1 and 7
document.write("The day is: " + dayName);
Output : The day is: Wednesday
1.6 loop statement – for loop, for….in loop, while loop, do….while loop,
continue statement.
1.6.1 For loop
Define : A for loop is used to run a block of code a specific number of times. It is often used
when you know in advance how many times you want to iterate.
Syntax :
for (initialization; condition; increment) {
// Code to run in each iteration
Ex:
for (let i = 0; i < 5; i++) {
document.write( i + " ");
Output: 0 1 2 3 4
1.6.2 1.6.2 While loop
Define : A while loop continues to execute a block of code as long as a specified condition is
true. It is useful when you don’t know in advance how many times you want to loop
Syntax :
while (condition) {
// Code to run while the condition is true
Ex:
<script>
let i = 0;
while (i < 5) {
document.write(i + " ");
i++; // Don't forget to increment the counter!
</script>
Output : 0 1 2 3 4
1.6.3 do….while loop
Define : A do...while loop is similar to a while loop, but it guarantees that the code block runs at
least once before checking the condition.
Syntax :
do {
// Code to run at least once
} while (condition);
Ex:
let num = 10;
do {
document.write(num + " ");
num++;
} while (num < 5);
Output : 10
Note : here condition is false still code under do block has run for once.
1.6.4 continue statement.
Define : The continue statement is used inside loops to skip the current iteration and move
on to the next one. It is useful when you want to skip certain values without breaking out of the
loop.
Ex:
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // Skip the rest of the loop for i = 2
document.write(i + " ");
Output : 0 1 3 4
1.6.5 for….in loop
Define : The for...in loop is a powerful way to iterate over the properties of an object,
allowing you to access both keys and values easily.
Ex:
let car = {
brand: "Toyota",
model: "Corolla",
year: 2020,
color: "red"
};
// Using for...in to iterate over the car object
for (let property in car) {
document.write(property + ": " + car[property] + "<br>");
Output :
brand: Toyota
model: Corolla
year: 2020
color: red
Execution explanation :
Object Creation:
The car object is created with four properties: brand, model, year, and color.
Initialization of the Loop:
The for...in loop starts, and the property variable will hold the name of each property in the car
object during each iteration.
First Iteration:
The first property in the car object is brand.
property is assigned the value "brand".
document.write(property + ": " + car[property] + "<br>") executes:
This translates to document.write("brand: " + car["brand"] + "<br>").
It writes brand: Toyota to the document, followed by a line break.
Second Iteration:
The next property is model.
property is now "model".
document.write(property + ": " + car[property] + "<br>") executes:
This becomes document.write("model: " + car["model"] + "<br>").
It writes model: Corolla to the document, followed by a line break.
1.7Querying and setting properties and deleting properties, property getters
and setters
1.7.1 Querying properties :
Querying properties in JavaScript involves accessing the value of a property in an object. There
are two main ways to do this:
1.7.1.1dot notatation :
Syntax: object.property
Ex:
let person = {
name: "John",
age: 30
};
document.write(person.name);
Output: John
1.7.1.2 Bracket Notation :
Syntax: object["property"]
Ex :
let person = {
name: "John",
age: 30
};
document.write(person["age"]);
Output: 30
1.7.2 Setting Properties
Setting properties means adding a new property or modifying the value of an existing property
in an object.
Syntax: object.property = value
let car = {
brand: "Toyota"
};
car.model = "Corolla"; // Setting a new property
document.write(car.model);
Output: Corolla
1.7.3 Deleting Property :
Deleting properties involves removing a property from an object.
Syntax: delete object.property
Ex :
let car = {
brand: "Toyota",
model: "Corolla"
};
delete car.model; // Deletes the 'model' property
document.write(car.model);
Output: undefined
1.7.4 Getter Property :
A getter allows you to define a method that is called when you access a property.this function
has no any argument.
Syntax :
get propertyName() {
// code to return the value
Ex:
let person = {
firstName: "John",
lastName: "Doe",
age: 30,
get fullName() {
return this.firstName + " " + this.lastName;
};
document.write(person.fullName);
Output: John Doe
1.7.4 Setter Property :
A setter allows you to define a method that is called when you assign a value to a property.this
function have argument.
Syntax :
set propertyName(value) {
// code to set the value
Ex:
let car = {
brand: "Toyota",
color: "red",
set company(value) {
this.brand = value;
};
document.write("<br>" + car.brand + " " + car.color);
car.company = "Audi"; //assign value don’t pass into paranthesis
document.write("<br>" + car.brand + " " + car.color);
Output :
Toyota red
Audi red
