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