Full Stack Development-BIS601 Dr.
Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
Full Stack Development-BIS601
Module 1
Basic Javascript Instructions
1. Understanding JavaScript
• JavaScript is a programming language used for adding interactivity to web pages.
• Like any language, it has syntax (rules) and vocabulary (keywords, operators, and
functions).
• Web browsers execute JavaScript by following instructions (statements).
2. JavaScript Basics
a. Statements
• A script is a series of statements (instructions executed in order).
• Each statement ends with a semicolon (;).
• Statements are grouped into code blocks using {}.
Example:
var today = new Date();
var hourNow = today.getHours();
var greeting;
if (hourNow > 18) {
greeting = "Good evening";
} else if (hourNow > 12) {
greeting = "Good afternoon";
} else {
greeting = "Good morning";
}
document.write(greeting);
b. Comments in JavaScript
• Single-line comments: Start with //
• Multi-line comments: Start with /* and end with */
Example:
// This is a single-line comment
/*
1
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
This is a multi-line comment.
Used to explain complex code.
*/
3. Variables and Data Types
a. What is a Variable?
• A variable stores information that JavaScript can manipulate.
• Declared using var, let, or const.
Example:
var width = 5;
var height = 10;
var area = width * height; // 50
b. Data Types in JavaScript
1. Number – Represents numeric values.
var price = 10.5;
var quantity = 2;
var total = price * quantity; // 21
2. String – A sequence of characters, enclosed in ' or "
var name = "John";
var greeting = 'Hello, ' + name; // "Hello, John"
3. Boolean – true or false values.
var isAvailable = true;
4. Undefined – A variable that has been declared but has not been assigned a value.
5. Null – Represents an empty or non-existent value.
4. Arrays in JavaScript
• An array stores multiple values in a single variable.
Example:
var colors = ["red", "green", "blue"];
console.log(colors[0]); // Output: "red"
• Accessing an array element: array[index] (index starts from 0).
• Modifying an element:
2
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
colors[1] = "yellow"; // Replaces "green" with "yellow"
• Getting the length of an array:
console.log(colors.length); // 3
5. Operators in JavaScript
a. Arithmetic Operators
Operator Description Example
+ Addition 5 + 2 = 7
- Subtraction 5 - 2 = 3
* Multiplication 5 * 2 = 10
/ Division 10 / 2 = 5
% Modulus (Remainder) 10 % 3 = 1
Example:
var total = (5 + 2) * 3; // 21
b. String Concatenation (+ Operator)
• Used to join two or more strings.
Example:
var firstName = "John";
var lastName = "Doe";
var fullName = firstName + " " + lastName; // "John Doe"
• Mixing Numbers and Strings:
var x = 5 + " apples"; // "5 apples"
var y = "10" + 5; // "105" (number converted to string)
6. Expressions and Assignment Operators
• An expression results in a single value.
• Example:
var area = 3 * 2; // Expression evaluates to 6
Assignment Operators
3
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
Operator Example Equivalent To
= x = 10 x is assigned 10
+= x += 5 x = x + 5
-= x -= 3 x = x - 3
*= x *= 2 x = x * 2
/= x /= 2 x = x / 2
7. Example Code Combining Concepts
var greeting = "Hello";
var name = "Molly";
var message = greeting + " " + name + ", welcome!";
var price = 5;
var quantity = 14;
var total = price * quantity;
var shipping = 7;
var grandTotal = total + shipping;
document.write(message + "<br>");
document.write("Total Cost: $" + grandTotal);
Expected Output:
Hello Molly, welcome!
Total Cost: $77
8. Summary
✔ JavaScript uses statements and comments to structure code.
✔ Variables store data, and data types include numbers, strings, and Booleans.
✔ Arrays store multiple values, and elements are accessed via an index.
✔ Operators perform calculations and string manipulations.
✔ Expressions evaluate values, and assignment operators update variables.
4
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
Functions, Methods and Objects
1. Functions in JavaScript
• Functions group reusable code that performs a specific task.
• Functions can take parameters (input values) and return a result.
• Functions are called (executed) by using their name followed by parentheses ().
Example:
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // Output: Hello, Alice!
a. Function Declarations & Expressions
1. Function Declaration: Can be called before being defined (hoisted).
function square(num) {
return num * num;
}
2. Function Expression: Stored in a variable and not hoisted.
var square = function(num) {
return num * num;
};
b. Anonymous & Immediately Invoked Functions (IIFE)
• Anonymous Function: A function without a name, often used inside expressions.
• IIFE (Immediately Invoked Function Expression): Runs immediately after being
defined.
(function() {
console.log("This runs immediately!");
})();
2. Variable Scope
• Local Scope: Variables inside a function are only accessible within that function.
• Global Scope: Variables declared outside functions can be accessed anywhere in the
script.
Example:
var globalVar = "I am global"; // Global
5
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
function showScope() {
var localVar = "I am local"; // Local
console.log(globalVar); // Accessible
}
console.log(localVar); // Error: localVar is not defined
Best Practice: Use let or const to prevent accidental global variable declarations.
3. Objects in JavaScript
• Objects store key-value pairs (properties & methods).
• Objects model real-world entities like a hotel, a user, or a car.
a. Object Creation Methods
1. Object Literal Notation
var car = {
brand: "Toyota",
model: "Corolla",
year: 2023
};
console.log(car.brand); // Toyota
2. Object Constructor Notation
function Car(brand, model, year) {
this.brand = brand;
this.model = model;
this.year = year;
}
var myCar = new Car("Honda", "Civic", 2022);
console.log(myCar.model); // Civic
b. Object Methods (Functions in Objects)
• Methods allow objects to perform actions.
var user = {
name: "Alice",
greet: function() {
return "Hello, " + this.name;
}
};
console.log(user.greet()); // Hello, Alice
4. Built-in JavaScript Objects
JavaScript provides predefined objects to handle common operations.
6
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
a. Math Object
• Provides mathematical operations.
• Useful Methods:
Math.round(4.7); // 5
Math.floor(4.9); // 4
Math.ceil(4.1); // 5
Math.random(); // Generates a random number between 0 and 1
b. String Object
• Allows manipulation of text values.
• Common String Methods:
var text = "Hello, World!";
text.length; // 13
text.toUpperCase(); // "HELLO, WORLD!"
text.toLowerCase(); // "hello, world!"
text.indexOf("o"); // 4
text.slice(0, 5); // "Hello"
c. Date Object
• Manages date and time operations.
• Common Date Methods:
var today = new Date();
today.getFullYear(); // 2024
today.getMonth(); // 0 (January, as months are 0-indexed)
today.getDate(); // 17
5. The this Keyword in JavaScript
• this refers to the object that is calling the function.
• It behaves differently in different contexts.
a. this in a Method
var person = {
name: "John",
sayHello: function() {
return "Hello, " + this.name;
}
};
console.log(person.sayHello()); // Hello, John
b. this in the Global Context
• Refers to the window object in a browser.
console.log(this); // Window object
7
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
6. Recap: Key Takeaways
✔ Functions help organize and reuse code efficiently.
✔ Objects store data (properties) and behaviors (methods).
✔ this refers to the object that owns the function being executed.
✔ Built-in objects like Math, String, and Date provide useful functionalities.
8
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
Decision and Loops
1. Flow Control in JavaScript
• Scripts can take different paths based on conditions.
• Three key concepts:
1. Evaluations – Checking if values match expected results.
2. Decisions – Using evaluations to determine code execution.
3. Loops – Repeating actions based on conditions.
2. Comparison Operators
• Used to compare two values and return true or false.
• Example:
var pass = 50;
var score = 90;
var hasPassed = score >= pass; // true
• Can also compare multiple expressions:
var totalScore = score1 + score2;
var comparison = totalScore > (highScore1 + highScore2);
3. Logical Operators
• AND (&&) – Both conditions must be true.
• OR (||) – At least one condition must be true.
• NOT (!) – Inverts the Boolean result.
Example:
var passBoth = (score1 >= pass1) && (score2 >= pass2);
var minPass = (score1 >= pass1) || (score2 >= pass2);
4. Conditional Statements
1. If Statement – Executes code when the condition is true.
if (score >= 50) {
msg = "Congratulations!";
}
2. If-Else Statement – Runs one block of code if true, another if false.
if (score >= pass) {
msg = "You passed!";
9
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
} else {
msg = "Try again!";
}
3. Switch Statement – Compares a value against multiple cases.
switch (level) {
case 1: msg = "Level 1"; break;
case 2: msg = "Level 2"; break;
default: msg = "Unknown";
}
5. Type Coercion & Weak Typing
• JavaScript automatically converts data types when needed (e.g., '1' + 1 becomes
"11").
• Strict equality (===) is preferred over loose equality (==).
console.log('5' == 5); // true (type coercion)
console.log('5' === 5); // false (strict equality)
6. Truthy & Falsy Values
• Falsy Values: false, 0, "", null, undefined, NaN.
• Truthy Values: Everything else (e.g., non-empty strings, numbers other than 0).
Example:
if (0) { console.log("Falsy"); } // Won't run
if ('Hello') { console.log("Truthy"); } // Runs
7. Loops in JavaScript
1. For Loop – Iterates a set number of times.
for (var i = 0; i < 10; i++) {
console.log(i);
}
2. While Loop – Runs as long as the condition is true.
var i = 1;
while (i <= 5) {
console.log(i);
i++;
}
3. Do-While Loop – Runs at least once before checking the condition.
10
Full Stack Development-BIS601 Dr. Aravinda Thejas Chandra Dept of ISE SJCIT Chickballapur
var i = 1;
do {
console.log(i);
i++;
} while (i <= 5);
Summary
✔ Conditional statements (if-else, switch) help make decisions.
✔ Comparison and logical operators evaluate conditions.
✔ Loops (for, while, do-while) help execute repetitive tasks.
✔ Type coercion can cause unexpected results,
so strict comparisons (===) are recommended.
✔ Truthy & Falsy values affect conditional checks.
11
