FrontEnd
--------------
HTML,HTML 5
CSS,CSS3
- Bootstrap Framework
JavaScript
-jQuery Framework
Angular
---------------------------------------
HTML - Hypertext markup language
- Used to design web pages
- file extension is .htm, .html
- Constructed with elements.
HTML can be divided into 2 parts
1. Header
- can contain reference files
- Document name
2. Body
- Content inside body part creates the web page.
Elements:
- elements can contain start and end tag.
- Element can create content in html page.
<html> </html>
<p> </p>
<span> </span>
Attribute:
- Attribute changes the behaviour of the element.
<p style="color:green" >My text document</p>
Table - used to display content in row column format.
Static Content Vs Dynamic Content
----------------------------------
Static content are fixed content. they are changed rarely. Ex)web sites . Used to
promote business
Dynamic contents keep changing time to time. Ex)Web Application.
Used to manage an organization
HTML 5 Introduction
-------------------
New Semantic Elements
header
nav
section
content
aside
footer
Inline vs Block Elements
-------------------------
Inline elements starts from next space available in the same line
Ex) span, img, a
block elements takes full line and push the next element to next line
ex) table, p ,div, all new semantic elements
DAY 2
CSS- Cascadding Stylesheet
--------------------------
Its Used to change appearance of the element.
Its divided in 3 types based on the usage.
1 .inline Stylesheet - the styles are created in the same element.
2. Embedded Stylesheet - collection of styles created on the page and used with in
the page.
3. External Stylesheet - collection of styles created and used for all the pages in
the application.
Syntax:
--------
Property_Name1: value1;
Property_Name2: value2;
Inline Stylesheet
-----------------
<div style=" " >
</div>
Embedded Stylesheet
-------------------
mupltiple styles are created and grouped as collection.
syntax:
----------
.class_name{ --- class selector
Property_Name1:value1;
Property_Name2:value2;
}
#id{ ---- # selector
Property_Name1:value1;
Property_Name2:value2;
}
class vs id
-------------
Class can be used in mupltiple elements in page.
created with .
Id is unique in a page. can be used more than once.
created with #.
External Stylesheet
------------------
.css file is created with selector which will be applied in the page elements.
add reference to .css file with following line
<link rel="stylesheet" href="mycss.css">
Day3:
-----
selectors - find the matching element and apply the mentioned styles to the
element.
- Simple element selector - Class, ID
- Combinatory element selector - can contain more than 1 element or class
selector
- Psuedo Class selector- styles applied to link :
- Psuedo element selector - applies to text elements, ::
- Attribute element selector - applies to Attribute mateched elements
BoxModel:
---------
Margin - Border -padding -Content
Shorthand Notation-
-------------------
border: 2px solid red;
padding: 5px 12px 14px 14px;
Width- MinWidth
---------------
Responsive WebDesign
----------------------
Our application should display the without beaking the content.
Developer Tools
-----------------
Explore - elements, Responsive view
DAY 4
Position :
---------
Placing element in webpage at mentioned location.
Postion:
static,
relative,
absoloute,
fixed,
sticky
Hiding an element
Display:none/block
Visiblity: hidden/Visible
Media Query
------------
decducts the screen size and apply new class styles
.mediaDiv{
background-color:blue;
}
@media screen and (properties){
css selector1
css selector2
.....
}
@media screen and (max-width:400px)
{
.mediaDiv{
background-color:red;
}
}
DAY 5
Display:
-------
flex is non dimensional
table
------
Display :grid is dimensional means ex: 2 X3
Background-image : url(file name);
Background-repeat:repeat;
Opacity: decides the transparency
opacity: 0.4;
(0.1 to 0.9)
background-color:rgba(255,0,255, 0.4);
Its giving background color and opacity. 2 in 1.
CSS Gradients: - generates mixed colors
--------------
Linear Gradients (goes down/up/left/right/diagonally)
background-image: linear-gradient(red, yellow);
Radial Gradients (defined by their center)
background-image: radial-gradient(red, yellow, green);
Conic Gradients (rotated around a center point)
background-image: conic-gradient(red, yellow, green);
text-shadow
text-shadow: 2px 2px red;
box-shadow
box-shadow: 10px 10px lightblue;
Display
-------
inline
block
none
flex
grid
DAY 6
HTML 5 Advanced tags
--------------------
header
nav
section
aside
footer
2D Transformation
-----------------
translate() - move an object to another position
rotate() -
scaleX() - make large size
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
Style="text-transform:translate(20px,25px)";
3D Transformation
-----------------
rotateX(20deg);
rotateY(20deg);
rotateZ(20deg);
CSS Gradients: - generates mixed colors
--------------
Linear Gradients (goes down/up/left/right/diagonally)
background-image: linear-gradient(red, yellow);
Radial Gradients (defined by their center)
background-image: radial-gradient(red, yellow, green);
Conic Gradients (rotated around a center point)
background-image: conic-gradient(red, yellow, green);
text-shadow
text-shadow: 2px 2px red;
box-shadow
box-shadow: 10px 10px lightblue;
Bootstrap Framework
-------------------
DAY 7
BootStrap
---------
Layout building
container
container-fluid
rows -12 columns
Break Points-Screen Size
Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px
DAY 8
What is JavaScript?
Scripting Language:
--------------------
JavaScript is a scripting language, meaning it's interpreted by a web browser line
by line, without needing to be compiled beforehand. This makes it quick and easy to
work with.
Client-Side:
------------
JavaScript primarily runs in the user's web browser (the "client-side"). This
allows it to manipulate web page content, respond to user actions (like clicks and
hovers), and update information without needing to constantly reload the page.
Dynamic:
---------
JavaScript enables you to create dynamic and interactive web experiences
Variables
-----------
All JavaScript variables must be identified with unique names.
unique names are called identifiers.
Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter.
Names can also begin with _.
Names are case sensitive (y and Y are different variables).
Reserved words (like JavaScript keywords) cannot be used as names.
strings
---------
muthu
sathish
date
----
14-5-2025
boolean
--------
yes
no
number
-------
14500
25.35
implicit declarations.
Scope:
------
var
let
const
Scope in JavaScript determines the accessibility or visibility of variables. It
essentially defines where in your code you can use a particular variable. There are
three main types of scope in JavaScript:
Global Scope: Variables declared outside any function or block have global scope.
They can be accessed and modified from anywhere in your code, including within
functions and blocks.
Function Scope: Variables declared inside a function have function scope. They are
only accessible within that specific function and are not visible outside of it.
Each function creates its own scope.
Block Scope: Variables declared using let or const inside a block (e.g., within
curly braces {} in an if statement, for loop, or any other block) have block scope.
They are only accessible within that specific block.
-------------------------------------------------------------------------
// Global scope
var globalVar = "I'm global";
function myFunction() {
// Function scope
var functionVar = "I'm in the function";
let blockVar = "I'm in the block";
console.log(globalVar); // Accessible here
console.log(functionVar); // Accessible here
console.log(blockVar); // Accessible here
if (true) {
// Block scope
let anotherBlockVar = "I'm in another block";
console.log(globalVar); // Accessible here
console.log(functionVar); // Accessible here
console.log(blockVar); // Accessible here
console.log(anotherBlockVar); // Accessible here
}
console.log(anotherBlockVar); // Error: not accessible here
}
console.log(globalVar); // Accessible here
console.log(functionVar); // Error: not accessible here
console.log(blockVar); // Error: not accessible here
console.log(anotherBlockVar); // Error: not accessible here
myFunction();
-------------------------------------------------------------------
var vs let vs const
redeclaration - not - not
Feature var let
const
-----------------------------------------------------------------------------------
--------------
Scope - Function or Global Block Block
Hoisting - Hoisted, initialized to undefined Hoisted, not initialized
Hoisted, not initialized
Reassignment - Allowed Allowed
Not allowed
--------------------------------------------------------------------
Data Types
-----------
JavaScript has several data types, which can be broadly categorized into primitive
(or value) types and non-primitive (or reference) types.
Primitive Data Types:
--------------------
These data types are immutable, meaning their values cannot be changed directly.
When you reassign a primitive value, you're actually creating a new value in
memory.
Number: Represents numeric values, including integers and floating-point numbers.
String: Represents textual data. Strings are enclosed in single quotes (') or
double quotes (").
Boolean: Represents a logical value: true or false.
Undefined: Represents the absence of a value. A variable that has been declared
but not assigned a value is undefined.
Null: Represents the intentional absence of a value. It's used to explicitly
indicate that a variable has no value. null is an assignment value. You set a
variable to null.
Non-Primitive Data Types (Reference Types):
-------------------------------------------
These data types are mutable, meaning their values can be changed. When you work
with reference types, you're working with a reference (pointer) to the object in
memory, not the object itself.
Object: A collection of key-value pairs (properties). Objects are versatile and
can represent complex data structures. Arrays and functions are also special kinds
of objects in JavaScript.
JavaScript
let person = {
name: "Jane Doe",
age: 25,
city: "New York"
};
let car = new Object();
car.make = "Toyota";
car.model = "Camry";
Array: An ordered collection of values. Arrays can hold values of any data type.
JavaScript
let numbers = [1, 2, 3, 4, 5];
let mixedArray = [1, "hello", true, { name: "John" }];
Function:
A block of code designed to perform a specific task.
Functions are first-class citizens in JavaScript, meaning they can be treated like
any other data type (e.g., passed as arguments to other functions, returned from
functions, assigned to variables).
JavaScript
function greet(name) {
return "Hello, " + name + "!";
}
Operators
---------
JavaScript has a wide variety of operators that allow you to perform various
operations on values (operands). Here's a breakdown of the common operator
categories:
1. Arithmetic Operators:
------------------------------
These operators perform mathematical calculations.
+ (Addition): Adds two operands.
- (Subtraction): Subtracts the second operand from the first.
* (Multiplication): Multiplies two operands.
/ (Division): Divides the first operand by the second.
% (Remainder/Modulo): Returns the remainder of a division.
++ (Increment): Increases the operand by 1.
-- (Decrement): Decreases the operand by 1.
2. Assignment Operators:
------------------------
These operators assign values to variables.
= (Assignment): Assigns the value on the right to the variable on the left.
+= (Addition assignment): Adds the right operand to the left operand and assigns
the result to the left operand. (e.g., x += 5 is equivalent to x = x + 5)
-= (Subtraction assignment): Subtracts the right operand from the left operand and
assigns the result.
*= (Multiplication assignment): Multiplies the left operand by the right operand
and assigns the result.
/= (Division assignment): Divides the left operand by the right operand and assigns
the result.
%= (Remainder assignment): Calculates the remainder and assigns it to the left
operand.
3. Comparison Operators:
-------------------------
These operators compare two operands and return a boolean value (true or false).
== (Equal to): Checks if two operands are equal (loose equality). Type coercion may
occur.
=== (Strict equal to): Checks if two operands are equal and of the same type
(strict equality).
!= (Not equal to): Checks if two operands are not equal (loose inequality).
!== (Strict not equal to): Checks if two operands are not equal or not of the same
type (strict inequality).
> (Greater than): Checks if the left operand is greater than the right operand.
< (Less than): Checks if the left operand is less than the right operand.
>= (Greater than or equal to): Checks if the left operand is greater than or equal
to the right operand.
<= (Less than or equal to): Checks if the left operand is less than or equal to the
right operand.
4. Logical Operators:
----------------------
These operators perform logical operations on boolean values.
&& (Logical AND): Returns true if both operands are true, otherwise returns false.
|| (Logical OR): Returns true if at least one operand is true, otherwise returns
false.
! (Logical NOT): Returns the opposite boolean value of the operand.
6. String Operators:
----------------------
+ (Concatenation): Used to combine strings.
7. Conditional (Ternary) Operator:
-----------------------------------
A shorthand for if...else statements.
condition ? expressionIfTrue : expressionIfFalse;
8. Type Operators:
------------------
typeof: Returns the data type of an operand (e.g., typeof 10 returns "number").
instanceof: Checks if an object is an instance of a particular class or constructor
function.
Operator Precedence:
--------------------
Operators have a specific order of precedence, which determines the order in which
they are evaluated in an expression. Parentheses () can be used to override the
default precedence.
Statements:
-----------
A program is essentially a sequence of statements. Every statement in JavaScript
is terminated by a semicolon (;). Although the semicolon is optional
Conditional Statements:
if -else
if statement:
if (condition) {
// Code to execute if the condition is true
}
else if statement:
if (condition1) {
// ...
} else if (condition2) {
// ...
} else {
// ...
}
if (condition1) {
// ...
} else if (condition2) {
// ...
} else {
// ...
}
swith:
switch statement: Used to select one block of code to execute from multiple blocks
based on a value.
switch (expression) {
case value1:
// ...
break;
case value2:
// ...
break;
default:
// ...
}
Loop Statements:
These statements allow you to repeat a block of code multiple times.
for loop:
for (initialization; condition; increment) {
// Code to be executed repeatedly
}
while loop:
while (condition) {
// Code to be executed repeatedly
}
do...while loop:
do {
// Code to be executed repeatedly (at least once)
} while (condition);
Jump Statements:
These statements control the flow of execution within loops and other structures.
break statement: Exits a loop or switch statement.
continue statement: Skips the rest of the current iteration of a loop and proceeds
to the next iteration.
return statement: Exits a function and optionally returns a value.
throw statement: Throws an exception.
Functions:
-----------
a function is a block of organized, reusable code that performs a specific task.
Functions are fundamental building blocks in JavaScript and are essential for
creating modular, maintainable, and efficient code.
A function is defined using the function keyword, followed by a function name, a
set of parentheses (), and a block of code enclosed in curly braces {}
function functionName(parameter1, parameter2, ...) {
// Function body (code to be executed)
// ...
return value; // Optional return statement
}
functionName:
The name of the function. It should be descriptive and follow naming conventions.
parameter1, parameter2, ...:
Optional parameters (inputs) that the function can receive. These are variables
that are used within the function's body.
{}:
The curly braces enclose the function body, which contains the code that the
function executes.
return value;:
An optional statement that specifies the value the function returns. If a return
statement is not present, the function implicitly returns undefined.
implicit declarations.
Scope:
------
var
let
const
Scope in JavaScript determines the accessibility or visibility of variables. It
essentially defines where in your code you can use a particular variable. There are
three main types of scope in JavaScript:
Global Scope: Variables declared outside any function or block have global scope.
They can be accessed and modified from anywhere in your code, including within
functions and blocks.
Function Scope: Variables declared inside a function have function scope. They are
only accessible within that specific function and are not visible outside of it.
Each function creates its own scope.
Block Scope: Variables declared using let or const inside a block (e.g., within
curly braces {} in an if statement, for loop, or any other block) have block scope.
They are only accessible within that specific block.
-------------------------------------------------------------------------
// Global scope
var globalVar = "I'm global";
function myFunction() {
// Function scope
var functionVar = "I'm in the function";
let blockVar = "I'm in the block";
console.log(globalVar); // Accessible here
console.log(functionVar); // Accessible here
console.log(blockVar); // Accessible here
if (true) {
// Block scope
let anotherBlockVar = "I'm in another block";
console.log(globalVar); // Accessible here
console.log(functionVar); // Accessible here
console.log(blockVar); // Accessible here
console.log(anotherBlockVar); // Accessible here
}
console.log(anotherBlockVar); // Error: not accessible here
}
console.log(globalVar); // Accessible here
console.log(functionVar); // Error: not accessible here
console.log(blockVar); // Error: not accessible here
console.log(anotherBlockVar); // Error: not accessible here
myFunction();
-----------------------------------------------------------------------------------
--------------
DAY 9
class
------
class is a blueprint for creating objects with shared properties and methods.
constructor
-----------
Its a special method which is called automatically when an object is created.
program:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
Creating an Object
-------------------
const person1 = new Person('Muthu', 30);
person1.greet(); // Output: Hello, my name is Muthu
Inheritance
------------
class Student extends Person {
constructor(name, age, grade) {
super(name, age); // calls the parent constructor
this.grade = grade;
}
study() {
console.log(`${this.name} is studying.`);
}
}
Prototype
---------
Prototype is the mechanism by which JavaScript objects inherit features from one
another.
function Person(name) {
this.name = name;
}
Person.prototype.greet = function () {
console.log(`Hello, I'm ${this.name}`);
};
const alice = new Person("Muthu");
alice.greet(); // Output: Hello, I'm Muthu
get and set are special methods that define how to access or update the value of an
object’s property.
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
set name(value) {
this._name = value.toUpperCase();
}
}
const p = new Person('Muthu');
console.log(p.name); // Muthu
p.name = 'raj';
console.log(p.name); // Raj
Getter (get): Called when you read a property (obj.name).
Setter (set): Called when you assign a value (obj.name = "Raj").
Call back function:
------------------
A callback is a function passed as an argument to another function
function sample(num1, name,test)
{
function test()
{
Asynchrnous:
------------
setInterval
setTimeout(() => {
console.log("This runs after 2 seconds");
}, 2000);
Arrow function
--------------
()=>{}
inline function
function add(a,b)
{
return (a+b);
console.log(a+b)
}
()=>{ }
var x= (a,b)=> { a+b};
function show()
{
console.log("hello");
}
()=>{ console.log("hello")}
Promise Pattern
---------------
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
JSON vs XML
------------
to store data.
no enviroment dependent.
common medium
var muthuObj=new Person('Muthu',35);
JS Object
---------
{'name':'muthu,age:35};
XML Format:
----------
<Person>
<name>muthu</name>
<age>25</age>
</Person>
JSON Format
-----------
{name:'Muthu',
age:35}
JSON.stringify- convert js Object to JSon string.
JSON.parse - convert JSon string to JS Object.
// Storing data:
const myObj = {name: "John", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);
// Retrieving data:
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
The HTML DOM (Document Object Model) is a programming interface that represents
the structure of an HTML document as a tree of objects.
It allows programming languages like JavaScript to access, modify, and interact
with the content and structure of a web page.
getElementById
getElementByClassName
getElementsByTagName
-----------------------------------------_-------------------------------
DAY 10
Promise Pattern
---------------
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
The HTML DOM (Document Object Model) is a programming interface that represents
the structure of an HTML document as a tree of objects.
It allows programming languages like JavaScript to access, modify, and interact
with the content and structure of a web page.
getElementById
getElementByClassName
getElementsByTagName
innerHTML
innerText
