Module 01 JavaScript
Module 01 JavaScript
Instructions
Full Stack Development (BIS601)
CMR Institute of Technology, ISE,
Bengaluru
M. Vijayashanthi
Introduction to JavaScript
• • JavaScript is a versatile programming
language for web development.
• • It allows dynamic interactions on web pages.
• • Used for client-side and server-side
development.
JavaScript Instructions
• • JavaScript instructions are commands
executed by browsers.
• • Instructions control data manipulation, user
interactions, and program flow.
JavaScript Statements
• • Statements are complete instructions ending
with a semicolon (;).
• • Examples:
• - Variable Declaration
• - Function Calls
• - Conditional Statements
• - Loops
Variables in JavaScript
• • Variables store data values.
• • Declared using var, let, or const.
Declaring Variables
• Example:
• let x = 10;
• const name = 'John';
Difference between var, let, and
const
• • var: Function-scoped, can be redeclared.
• • let: Block-scoped, cannot be redeclared.
• • const: Block-scoped, immutable.
JavaScript Data Types
• • Primitive Types: String, Number, Boolean,
Undefined, Null, Symbol, BigInt.
• • Non-Primitive Types: Object, Array, Function,
Date.
Example of Data Types
• • let str = 'Hello'; // String
• • let num = 25; // Number
• • let isTrue = true; // Boolean
JavaScript Operators
• • Arithmetic (+, -, *, /, %)
• • Comparison (==, !=, >, <, >=, <=)
• • Logical (&&, ||, !)
• • Assignment (=, +=, -=)
Functions in JavaScript
• • Functions are reusable code blocks.
• • Function Declaration vs Function Expression.
Function Declaration Example
• function greet() {
• [Link]('Hello, World!');
• }
• greet();
Function Expression Example
• const add = function(a, b) {
• return a + b;
• };
• [Link](add(5, 10));
Conditional Statements
• • if, else, and else if for decision-making.
Example of if-else
• if (x > 10) {
• [Link]('x is greater than 10');
• } else {
• [Link]('x is not greater than 10');
• }
Looping in JavaScript
• • Loops execute a block of code multiple
times.
for Loop Example
• for (let i = 0; i < 5; i++) {
• [Link](i);
• }
while Loop Example
• let i = 0;
• while (i < 5) {
• [Link](i);
• i++;
• }
JavaScript Objects
• • Objects store key-value pairs.
• Example:
• let car = { brand: 'Toyota', model: 'Camry' };
JavaScript Arrays
• • Arrays store collections of elements.
• Example:
• let fruits = ['apple', 'banana', 'cherry'];
Array Methods
• • push() - Adds an element to the end.
• • pop() - Removes the last element.
• • forEach() - Iterates through array elements.
Example of forEach()
• [Link](fruit => [Link](fruit));
JavaScript Execution Flow
• • Code runs top-down unless altered by loops
or conditionals.
• • JavaScript supports asynchronous
operations.
Asynchronous Example
• setTimeout(function() {
• [Link]('This runs after 2 seconds');
• }, 2000);
JavaScript Events
• • Events allow user interactions like clicks and
keystrokes.
Example of Click Event
• [Link]('btn').addEventList
ener('click', function() {
• alert('Button Clicked!');
• });
Modern JavaScript (ES6+)
• • let & const for variable declarations.
• • Arrow functions for shorter syntax.
• • Template literals using backticks.
Summary
• • JavaScript enables dynamic web
interactions.
• • Variables, functions, conditionals, loops are
fundamental.
• • Objects and arrays allow structured data
storage.
• • JavaScript execution flow includes
synchronous and asynchronous operations.