UNIT 3: WEB DEVELOPMENT BASICS

Elements of Web Design: There are basically two elements of web design i.e., visual
elements and functional elements.
1. Visual Elements:
Visual elements simply mean an aspect or representation of something that we see. There are
various visual elements and some of them are given below:
• Layout: Layout simply represents the overall structure of the website that includes
graphics, ads, texts, headers, menus, content, etc. The website layout is very important as it
helps to guide users and tell them where they want to look. A good layout will also make it
easy for one to have access to information and give a clear path for navigation. There are
different layouts available nowadays and one can choose any one of them as there are no
such rules when choosing a layout.
• Shapes: Shapes simply mark the boundaries of content. It also plays important role in
branding. Each geometrical or graphical shape has its own meaning that influences our
mind. Shapes simply represent a concept, create movement, affect the composition, help to
create complex drawings and paintings, provide depth and texture, etc. It also helps to
increase the number of visitors on the website as appearance influence peoples that in turn
improve your business.
• Colors: Choosing appropriate colors for web design is very essential and important. It can
be considered a powerful element in developing a website successfully. It is a way to
connect to users or visitors and increase brand recognition. Effective usage of color attracts
people and increases the number of visitors. One can choose different colors as per their
choice.
• Images and Icons: Images and icons are the best way to improve the user experience of
your website as well as attract the attention of users. It is the best and most compatible way
to present information and explaining concepts. It makes the website look professional and
more interesting. It also supports text content and gives a quick summary of the text.
2. Functional Elements:
Functional elements simply mean aspect or rep0resentation of functionalities of websites. It
simply represents what the website can do and how it works. There are various functional
elements and some of them are given below:
• Navigation: Navigation simply means the process of monitoring and controlling the
movement around websites or screens, etc. It simply directs visitors or users to various web
pages and will allow searching websites for longer. It is one of the best ways to determine
whether the website is working properly or not.
• User Interaction: The user interface is very important as it will either make and increase
visitors to your website or break the user base. It simply attracts users and simplifies their
activities. It is basically a point where users interact with websites such as scrolling,
clicking, typing, etc.
• Animation: Animations play a very important role to attract more users and enhance the
user experience. Animation simply demonstrates a product or images and are mostly made
with CGI (Computer Generated Imagery). It allows one to do more with less, interacts with
people in a better way, and communicate clearly and effectively.
 Client-side scripting : Client-side scripting is a technique that allows a browser to run scripts
without connecting to a server, usually on the user's device. It's a way to enhance the
interactivity of websites and online pages, and is often used on the front end where the user can
see what's happening through their browser.
Client-side scripting can be used for a variety of purposes, including:
• User event functionality: For example, running scripts when a form loads, after it's submitted,
or when a field changes value
• Data processing: For example, getting data from a user's screen or browser
• Data validation
• Creating cookies
Client-side scripting is historically associated with HTML, but JavaScript is now the most
popular language for it because it's universally compatible across browsers and platforms. Other
scripting languages can also be used if the user's browser supports them.
Client-side scripting simply means running scripts, such as JavaScript, on the client device,
usually within a browser.

Server-side scripting
Server-side scripting is a web development technique that uses scripts on a web server to
generate dynamic content for each user's request. These scripts can communicate with databases
and other resources to produce HTML, CSS, and JavaScript code that can be displayed in a
user's browser.

Server-side scripting can be used to create dynamic web pages that can be customized based on
user input or other data. It can also allow for secure authentication and access to
databases. Server-side scripting can have several advantages, including:
• Faster loading times
• Improved Google rating
• Fewer users abandoning the site due to slow loading times
• Avoids issues like freezing, high CPU consumption, and slow loading
Server-side scripts can be written in a variety of languages that the server supports, including
JavaScript.
Difference between client-side scripting and server-side scripting :
Client-side scripting Server-side scripting

Source code is not visible to the user because its

output
Source code is visible to the user.
of server-sideside is an HTML page.

Its main function is to provide the Its primary function is to manipulate and provide
requested output to the end user. access to the respective database as per the request.

In this any server-side technology can be used and

It usually depends on the browser and it does not
its version. depend on the client.

It runs on the user’s computer. It runs on the webserver.

There are many advantages linked with

The primary advantage is its ability to highly
this like faster.
customize, response
response times, a more interactive
requirements, access rights based on user.
application.

It does not provide security for data. It provides more security for data.

It is a technique used in web It is a technique that uses scripts on the webserver

development in which scripts run on to produce a response that is customized for each
the client’s browser. client’s request.

HTML, CSS, and javascript are used. PHP, Python, Java, Ruby are used.

No need of interaction with the server. It is all about interacting with the servers.
 Client-side scripting Server-side scripting

It reduces load on processing unit of

It surge the processing load on the server.
the server.

Model View Controller Architecture For Web Application Development

Model-View-Controller (MVC) is a software design pattern that separates a web application
into three main components: the model, the view, and the controller. The goal of MVC is to
split a large application into specific sections that all have their own purpose.

• Model
Defines the data and business logic the app should contain. For example, a shopping list app
might specify the data for each item, including its name and price.
• View
Defines how the app's data should be displayed. For example, a shopping list app might define
how the list is presented to the user.
• Controller
Contains logic that updates the model and/or view in response to input from the users of the
app. For example, a shopping list app might have input forms and buttons that allow users to
add or delete items. In web applications, controllers also handle HTTP requests and
responses.

Client Side Technologies:

HTML:

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML Element
• An HTML element is defined by a start tag, some content, and an end tag:
• <tagname> Content goes here... </tagname>
• The HTML element is everything from the start tag to the end tag:
• <h1>My First Heading</h1>
 • <p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None none

• Note: Some HTML elements have no content (like the <br> element). These elements are
called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the
document:

HTML Page Structure

Below is a visualization of an HTML page structure:

Note: The content inside the <body> section will be displayed in a browser. The content inside
the <title> element will be shown in the browser's title bar or in the page's tab.
Java Script
JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Placing scripts at the bottom of the <body> element improves the display speed, because script
interpretation slows down the display.
External JavaScript
Scripts can also be placed in external files:
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of
a <script> tag:
Example
<script src="myScript.js"></script>
You can place an external script reference in <head> or <body> as you like.
The script will behave as if it was located exactly where the <script> tag is located.
External scripts cannot contain <script> tags.

External JavaScript Advantages

Placing scripts in external files has some advantages:
• It separates HTML and code
• It makes HTML and JavaScript easier to read and maintain
• Cached JavaScript files can speed up page loads
To add several script files to one page - use several script tags:
Example
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
External References
An external script can be referenced in 3 different ways:
• With a full URL (a full web address)
• With a file path (like /js/)
• Without any path
This example uses a full URL to link to myScript.js:
Example
<script src="https://www.w3schools.com/js/myScript.js"></script>
This example uses a file path to link to myScript.js:
Example
<script src="/js/myScript.js"></script>
This example uses no path to link to myScript.js:
Example
<script src="myScript.js"></script>
JavaScript Statements
A JavaScript program is a list of programming statements.
In HTML, JavaScript programs are executed by the web browser.
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log().
Using innerHTML
To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML
content:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>
Changing the innerHTML property of an HTML element is a common way to display
data in HTML. Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>

</body>
</html>
Using document.write() after an HTML document is loaded, will delete all existing HTML:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

The document.write() method should only be used for testing.

Using window.alert()
You can use an alert box to display data:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>
JavaScript Print
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in the browser to print the
content of the current window.
Example
<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</button>

</body>
</html>

JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write "Hello Dolly." inside an HTML element with
id="demo":
Example
document.getElementById("demo").innerHTML = "Hello Dolly.";
Most JavaScript programs contain many JavaScript statements.
The statements are executed, one by one, in the same order as they are written.
JavaScript programs (and JavaScript statements) are often called JavaScript code.

Semicolons ;
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
Examples
let a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
When separated by semicolons, multiple statements on one line are allowed:
a = 5; b = 6; c = a + b;
JavaScript White Space
JavaScript ignores multiple spaces. You can add white space to your script to make it more
readable.
The following lines are equivalent:
let person = "Hege";
let person="Hege";
A good practice is to put spaces around operators ( = + - * / ):
let x = y + z;
JavaScript Line Length and Line Breaks
For best readability, programmers often like to avoid code lines longer than 80 characters.
If a JavaScript statement does not fit on one line, the best place to break it is after an operator:
Example
document.getElementById("demo").innerHTML =
"Hello Dolly!";
JavaScript Code Blocks
JavaScript statements can be grouped together in code blocks, inside curly brackets {...}.
The purpose of code blocks is to define statements to be executed together.
One place you will find statements grouped together in blocks, is in JavaScript functions:
Example
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
JavaScript statements often start with a keyword to identify the JavaScript action to be
performed.
Keyword Description
var Declares a variable
let Declares a block variable
const Declares a block constant
if Marks a block of statements to be executed on a condition
switch Marks a block of statements to be executed in different cases
for Marks a block of statements to be executed in a loop
function Declares a function
return Exits a function
try Implements error handling to a block of statements

JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are constructed:
// How to create variables:
var x;
let y;

// How to use variables:

x = 5;
y = 6;
let z = x + y;

JavaScript Values
The JavaScript syntax defines two types of values:
• Fixed values
• Variable values
Fixed values are called Literals.
Variable values are called Variables.

JavaScript Literals
The two most important syntax rules for fixed values are:
1. Numbers are written with or without decimals:
10.50
1001
2. Strings are text, written within double or single quotes:
"John Doe"

'John Doe'
JavaScript Variables
In a programming language, variables are used to store data values.
JavaScript uses the keywords var, let and const to declare variables.
An equal sign is used to assign values to variables.
In this example, x is defined as a variable. Then, x is assigned (given) the value 6:
let x;
x = 6;
JavaScript Operators
JavaScript uses arithmetic operators ( + - * / ) to compute values:
(5 + 6) * 10
JavaScript uses an assignment operator ( = ) to assign values to variables:
let x, y;
x = 5;
y = 6;
JavaScript Expressions
An expression is a combination of values, variables, and operators, which computes to a value.
The computation is called an evaluation.
For example, 5 * 10 evaluates to 50:
5 * 10
Expressions can also contain variable values:
x * 10
The values can be of various types, such as numbers and strings.
For example, "John" + " " + "Doe", evaluates to "John Doe":
"John" + " " + "Doe"
JavaScript Keywords
JavaScript keywords are used to identify actions to be performed.
The let keyword tells the browser to create variables:
let x, y;
x = 5 + 6;
y = x * 10;
The var keyword also tells the browser to create variables:
var x, y;
x = 5 + 6;
y = x * 10;
In these examples, using var or let will produce the same result.
You will learn more about var and let later in this tutorial.

JavaScript Comments
Not all JavaScript statements are "executed".
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:
In these examples, using var or let will produce the same result.
You will learn more about var and let later in this tutorial.

JavaScript Comments
Not all JavaScript statements are "executed".
Code after double slashes // or between /* and */ is treated as a comment.
Comments are ignored, and will not be executed:
let x = 5; // I will be executed

// x = 6; I will NOT be executed

JavaScript Identifiers / Names
Identifiers are JavaScript names.
Identifiers are used to name variables and keywords, and functions.
The rules for legal names are the same in most programming languages.
A JavaScript name must begin with:
• A letter (A-Z or a-z)
• A dollar sign ($)
• Or an underscore (_)
Subsequent characters may be letters, digits, underscores, or dollar signs.
Note
Numbers are not allowed as the first character in names.
This way JavaScript can easily distinguish identifiers from numbers.

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two different variables:
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
JavaScript Variables
Variables are Containers for Storing Data
JavaScript Variables can be declared in 4 ways:
• Automatically
• Using var
• Using let
• Using const
In this first example, x, y, and z are undeclared variables.
They are automatically declared when first used:
Example
x = 5;
y = 6;
z = x + y;
Example using var
var x = 5;
var y = 6;
var z = x + y;
Note
The var keyword was used in all JavaScript code from 1995 to 2015.
The let and const keywords were added to JavaScript in 2015.
The var keyword should only be used in code written for older browsers.
Example using let
let x = 5;
let y = 6;
let z = x + y;
Example using const
const x = 5;
const y = 6;
const z = x + y;
Mixed Example
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
When to Use var, let, or const
1. Always declare variables
2. Always use const if the value should not be changed
3. Always use const if the type should not be changed (Arrays and Objects)
4. Only use let if you can't use const
5. Only use var if you MUST support old browsers.
JavaScript Identifiers
All JavaScript variables must be identified with unique names.
These unique names are called identifiers.
Identifiers can be short names (like x and y) or more descriptive names (age, sum,
totalVolume).
The general rules for constructing names for variables (unique identifiers) are:
• Names can contain letters, digits, underscores, and dollar signs.
• Names must begin with a letter.
• Names can also begin with $ and _ (but we will not use it in this tutorial).
• Names are case sensitive (y and Y are different variables).
• Reserved words (like JavaScript keywords) cannot be used as names.
Note
JavaScript identifiers are case-sensitive.
The Assignment Operator
In JavaScript, the equal sign (=) is an "assignment" operator, not an "equal to" operator.
This is different from algebra. The following does not make sense in algebra:
x=x+5
In JavaScript, however, it makes perfect sense: it assigns the value of x + 5 to x.

JavaScript Data Types

JavaScript variables can hold numbers like 100 and text values like "John Doe".
In programming, text values are called text strings.
JavaScript can handle many types of data, but for now, just think of numbers and strings.
Strings are written inside double or single quotes. Numbers are written without quotes.
If you put a number in quotes, it will be treated as a text string.
JavaScript has 8 Datatypes
String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object
The Object Datatype
The object data type can contain both built-in objects, and user defined objects:
Built-in object types can be:
objects, arrays, dates, maps, sets, intarrays, floatarrays, promises, and more.
JavaScript Types are Dynamic
JavaScript has dynamic types. This means that the same variable can be used to hold different
data types:
Example
let x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
JavaScript Strings
A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes:
Example
// Using double quotes:
let carName1 = "Volvo XC60";

// Using single quotes:

let carName2 = 'Volvo XC60';
You can use quotes inside a string, as long as they don't match the quotes surrounding the
string:
Example
// Single quote inside double quotes:
let answer1 = "It's alright";

// Single quotes inside double quotes:

let answer2 = "He is called 'Johnny'";

// Double quotes inside single quotes:

let answer3 = 'He is called "Johnny"';
JavaScript Numbers
All JavaScript numbers are stored as decimal numbers (floating point).
Numbers can be written with, or without decimals:
Example
// With decimals:
let x1 = 34.00;

// Without decimals:
let x2 = 34;
Exponential Notation
Extra large or extra small numbers can be written with scientific (exponential) notation:
Example
let y = 123e5; // 12300000
let z = 123e-5; // 0.00123
JavaScript Booleans
Booleans can only have two values: true or false.
Example
let x = 5;
let y = 5;
let z = 6;
(x == y) // Returns true
(x == z) // Returns false
JavaScript Arrays
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three items (car names):
Example
const cars = ["Saab", "Volvo", "BMW"];
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
JavaScript Objects
JavaScript objects are written with curly braces {}.
Object properties are written as name:value pairs, separated by commas.
Example
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
The typeof Operator
You can use the JavaScript typeof operator to find the type of a JavaScript variable.
The typeof operator returns the type of a variable or an expression:
Example
typeof "" // Returns "string"
typeof "John" // Returns "string"
typeof "John Doe" // Returns "string"
Undefined
In JavaScript, a variable without a value, has the value undefined. The type is also undefined.
Example
let car; // Value is undefined, type is undefined
Any variable can be emptied, by setting the value to undefined. The type will also
be undefined.

Empty Values
An empty value has nothing to do with undefined.
An empty string has both a legal value and a type.
Example
let car = ""; // The value is "", the typeof is "string"

JavaScript Operators
Javascript operators are used to perform different types of mathematical and logical
computations.
Examples:
The Assignment Operator = assigns values
The Addition Operator + adds values
The Multiplication Operator * multiplies values
The Comparison Operator > compares values
JavaScript Assignment
The Assignment Operator (=) assigns a value to a variable:
Assignment Examples
let x = 10;
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;
JavaScript Addition
The Addition Operator (+) adds numbers:
Adding
let x = 5;
let y = 2;
let z = x + y;
JavaScript Multiplication
The Multiplication Operator (*) multiplies numbers:
Multiplying
let x = 5;
let y = 2;
let z = x * y;
Types of JavaScript Operators
There are different types of JavaScript operators:
• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• String Operators
• Logical Operators
• Bitwise Operators
• Ternary Operators
• Type Operators
JavaScript Arithmetic Operators
Arithmetic Operators are used to perform arithmetic on numbers:
Arithmetic Operators Example
let a = 3;
let x = (100 + 50) * a;
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation (ES2016)
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
JavaScript Assignment Operators
Assignment operators assign values to JavaScript variables.
The Addition Assignment Operator (+=) adds a value to a variable.
Assignment
let x = 10;
x += 5;
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
JavaScript Comparison Operators
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
JavaScript Functions
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
Example
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as
variables).
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
Function parameters are listed inside the parentheses () in the function definition.
Function arguments are the values received by the function when it is invoked.
Inside the function, the arguments (the parameters) behave as local variables.

Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:
• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after
the invoking statement.
Functions often compute a return value. The return value is "returned" back to the "caller":
Example
Calculate the product of two numbers, and return the result:
// Function is called, the return value will end up in x
let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and b
 return a * b;
}
Why Functions?
With functions you can reuse code
You can write code that can be used many times.
You can use the same code with different arguments, to produce different results.

The () Operator
The () operator invokes (calls) the function:
Example
Convert Fahrenheit to Celsius:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

Accessing a function with incorrect parameters can return an incorrect answer:
Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

Accessing a function without () returns the function and not the function result:
Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

Functions Used as Variable Values
Functions can be used the same way as you use variables, in all types of formulas, assignments,
and calculations.
Example
Instead of using a variable to store the return value of a function:
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";
You can use the function directly, as a variable value:
let text = "The temperature is " + toCelsius(77) + " Celsius";
Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
Example
// code here can NOT use carName

function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}

// code here can NOT use carName

Since local variables are only recognized inside their functions, variables with the same name
can be used in different functions.
Local variables are created when a function starts, and deleted when the function is completed.
JavaScript Arrays
An array is a special variable, which can hold more than one value:
const cars = ["Saab", "Volvo", "BMW"];
Why Use Arrays?
If you have a list of items (a list of car names, for example), storing the cars in single variables
could look like this:
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
An array can hold many values under a single name, and you can access the values by referring
to an index number.

Creating an Array
Using an array literal is the easiest way to create a JavaScript Array.
Syntax:
const array_name = [item1, item2, ...];

Accessing Array Elements

You access an array element by referring to the index number:
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Note: Array indexes start with 0.
[0] is the first element. [1] is the second element.
Changing an Array Element
This statement changes the value of the first element in cars:
cars[0] = "Opel";
Example
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Access the Full Array
With JavaScript, the full array can be accessed by referring to the array name:
Example
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
JavaScript if, else, and else if
Conditional statements are used to perform different actions based on different conditions.

Conditional Statements
Very often when you write code, you want to perform different actions for different decisions.
You can use conditional statements in your code to do this.
In JavaScript we have the following conditional statements:
• Use if to specify a block of code to be executed, if a specified condition is true
• Use else to specify a block of code to be executed, if the same condition is false
• Use else if to specify a new condition to test, if the first condition is false
• Use switch to specify many alternative blocks of code to be executed
The if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is true.
Syntax
if (condition) {
// block of code to be executed if the condition is true
}
Note that if is in lowercase letters. Uppercase letters (If or IF) will generate a JavaScript error.
Example
Make a "Good day" greeting if the hour is less than 18:00:
if (hour < 18) {
greeting = "Good day";
}
The else Statement
Use the else statement to specify a block of code to be executed if the condition is false.
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Example
If the hour is less than 18, create a "Good day" greeting, otherwise "Good evening":
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
The result of greeting will be:
Good evening
The else if Statement
Use the else if statement to specify a new condition if the first condition is false.
Syntax
if (condition1) {
// block of code to be executed if condition1 is true
} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false
}
Example
If time is less than 10:00, create a "Good morning" greeting, if not, but time is less than 20:00,
create a "Good day" greeting, otherwise a "Good evening":
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
The result of greeting will be:
Good evening
JavaScript Switch Statement
The switch statement is used to perform different actions based on different conditions.

The JavaScript Switch Statement

Use the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
This is how it works:
• The switch expression is evaluated once.
• The value of the expression is compared with the values of each case.
• If there is a match, the associated block of code is executed.
• If there is no match, the default code block is executed.
Example
The getDay() method returns the weekday as a number between 0 and 6.
(Sunday=0, Monday=1, Tuesday=2 ..)
This example uses the weekday number to calculate the weekday name:
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
The result of day will be:
Sunday
The break Keyword
When JavaScript reaches a break keyword, it breaks out of the switch block.
This will stop the execution inside the switch block.
It is not necessary to break the last case in a switch block. The block breaks (ends) there
anyway.
Note: If you omit the break statement, the next case will be executed even if the evaluation does
not match the case.
The default Keyword
The default keyword specifies the code to run if there is no case match:
Example
The getDay() method returns the weekday as a number between 0 and 6.
If today is neither Saturday (6) nor Sunday (0), write a default message:
switch (new Date().getDay()) {
case 6:
text = "Today is Saturday";
break;
case 0:
text = "Today is Sunday";
break;
default:
text = "Looking forward to the Weekend";
}
The result of text will be:
Today is Sunday
Switching Details
If multiple cases matches a case value, the first case is selected.
If no matching cases are found, the program continues to the default label.
If no default label is found, the program continues to the statement(s) after the switch.

Strict Comparison
Switch cases use strict comparison (===).
The values must be of the same type to match.
A strict comparison can only be true if the operands are of the same type.
In this example there will be no match for x:
Example
let x = "0";
switch (x) {
case 0:
text = "Off";
break;
case 1:
text = "On";
break;
default:
text = "No value found";
}
JavaScript For Loop
Different Kinds of Loops
JavaScript supports different kinds of loops:
• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• for/of - loops through the values of an iterable object
• while - loops through a block of code while a specified condition is true
• do/while - also loops through a block of code while a specified condition is true

The For Loop

The for statement creates a loop with 3 optional expressions:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}

Loop Scope
Using var in a loop:
Example
var i = 5;

for (var i = 0; i < 10; i++) {

// some code
}

// Here i is 10
JavaScript For In
The For In Loop
The JavaScript for in statement loops through the properties of an Object:
Syntax
for (key in object) {
// code block to be executed
}

Example
const person = {fname:"John", lname:"Doe", age:25};

let text = "";

for (let x in person) {
text += person[x];
}
Array.forEach()
The forEach() method calls a function (a callback function) once for each array element.
Example
const numbers = [45, 4, 9, 16, 25];

let txt = "";

numbers.forEach(myFunction);

function myFunction(value, index, array) {

txt += value;
}
Note that the function takes 3 arguments:
• The item value
• The item index
• The array itself
The example above uses only the value parameter. It can be rewritten to:
Example
const numbers = [45, 4, 9, 16, 25];

let txt = "";

numbers.forEach(myFunction);

function myFunction(value) {
txt += value;
}
JavaScript While Loop
Loops can execute a block of code as long as a specified condition is true.

The While Loop

The while loop loops through a block of code as long as a specified condition is true.
Syntax
while (condition) {
// code block to be executed
}
The Do While Loop
The do while loop is a variant of the while loop. This loop will execute the code block once,
before checking if the condition is true, then it will repeat the loop as long as the condition is
true.
Syntax
do {
// code block to be executed
}
while (condition);
Comparing For and While
If you have read the previous chapter, about the for loop, you will discover that a while loop is
much the same as a for loop, with statement 1 and statement 3 omitted.
The loop in this example uses a for loop to collect the car names from the cars array:
Example
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for (;cars[i];) {
text += cars[i];
i++;
}
The loop in this example uses a while loop to collect the car names from the cars array:
Example
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

while (cars[i]) {
text += cars[i];
i++;
}
JavaScript Break and Continue
The break statement "jumps out" of a loop.
The continue statement "jumps over" one iteration in the loop.

The Break Statement

You have already seen the break statement used in an earlier chapter of this tutorial. It was used
to "jump out" of a switch() statement.
The break statement can also be used to jump out of a loop:
Example
for (let i = 0; i < 10; i++) {
if (i === 3) { break; }
text += "The number is " + i + "<br>";
}
The Continue Statement
The continue statement breaks one iteration (in the loop), if a specified condition occurs, and
continues with the next iteration in the loop.
This example skips the value of 3:
Example
for (let i = 0; i < 10; i++) {
if (i === 3) { continue; }
text += "The number is " + i + "<br>";
}
JavaScript Labels
To label JavaScript statements you precede the statements with a label name and a colon:
label:
statements
The break and the continue statements are the only JavaScript statements that can "jump out of"
a code block.
Syntax:
break labelname;

continue labelname;
The continue statement (with or without a label reference) can only be used to skip one loop
iteration.
The break statement, without a label reference, can only be used to jump out of a loop or a
switch.
With a label reference, the break statement can be used to jump out of any code block:
Example
const cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
break list;
text += cars[2] + "<br>";
text += cars[3] + "<br>";
}
A code block is a block of code between { and }.

Bootstrap: Bootstrap is a free and open-source tool collection used to create responsive websites and web applications. It is
the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites
created using Bootstrap are compatible with all browsers (IE, Firefox, and Chrome) and with all screen sizes (Desktops, Tablets,
Phablets, and Phones). Bootstrap was initially developed by Mark Otto and Jacob Thornton of Twitter, but it was later declared an
open-source project.
Features of Bootstrap:
Bootstrap boasts a treasure trove of pre-built components, including:
• Grid System: Construct layouts with ease using a flexible grid system that adapts
seamlessly to various screen sizes.
• Forms: Craft user-friendly forms with a variety of styles and functionalities like
validation.
• Buttons: Spice up your website with customizable buttons in all shapes and sizes.
• Navigation: Implement user-friendly navigation menus, from simple dropdowns to
complex mega menus.
• Alerts: Convey messages effectively through dismissible alerts, warnings, and
success notifications.
• Images: Enhance your website’s visual appeal with responsive image management.
• JavaScript Plugins: Incorporate interactive elements like modals, tooltips, and
carousels with Bootstrap’s JavaScript plugins.
Building with Bootstrap Components
Bootstrap provides a rich assortment of pre-built components to expedite your
development process. Let’s explore some widely used ones:
• Buttons: Implement buttons with various styles, sizes, and functionalities using
classes like .btn-primary and .btn-outline-success.
• Alerts: Convey messages through dismissible alerts with semantic classes
like .alert-success and .alert-danger.
• Images: Incorporate responsive images using the .img-fluid class, ensuring they
scale appropriately across devices.
• Navigation: Craft navigation menus using Bootstrap’s navbar component, which
includes support for responsive collapsing on smaller screens.

Introduction to AngularJS
AngularJS is a popular open-source framework that simplifies web development
by creating interactive single-page applications (SPAs). Unlike traditional websites
that load new pages for each click, SPAs offer a smoother user experience by updating
content on the same page.
AngularJS makes this possible by transforming static HTML into dynamic content that
adapts to user interactions. Features like data binding and dependency injection
streamline development, saving you time and effort. With regular updates and a large
community, AngularJS ensures your web applications stay modern and efficient.

Why Choose AngularJS?

1. Easy to Work With: AngularJS requires only basic knowledge of HTML, CSS, and
JavaScript. You don’t need to be an expert; just bring your curiosity and creativity.
2. Time-Saving Components: AngularJS allows you to work with reusable
components, saving time and reducing unnecessary code. Components are the
building blocks of your application.
3. Ready-to-Use Templates: AngularJS leverages plain HTML templates, which it
compiles and makes ready for use. No complex setup—just write your HTML and let
AngularJS do the heavy lifting.
4. Directives: AngularJS extends HTML with custom elements and attributes called
directives. These enable you to create reusable components and define custom
behaviors for your application. Directives make it easier to manipulate the DOM,
handle events, and encapsulate complex UI logic within a single component.
Key Features of AngularJS
1. Model-View-Controller (MVC) Architecture:
• Model: Manages data and logic, responding to requests from the view and instructions from
the controller.
• View: Displays application data to users.
• Controller: Orchestrates communication between the model and view, updating the model
based on user interactions.
2. Filters and Data Transformation:
• AngularJS provides powerful filters for transforming data before displaying it in templates.
Common filters include filter, orderBy, and currency.
• You can also create custom filters tailored to your application’s needs.
3. Routing and Single-Page Applications (SPAs):
• Implement client-side routing to create SPAs.
• Handle route parameters and navigation seamlessly.
4. Services and Dependency Injection:
• Services are reusable components that provide specific functionality.
• Dependency injection ensures loose coupling between components, making your code more
maintainable.
5. Custom Directives and Components:
• Build reusable components using custom directives.
• Isolate scope and communicate between components.
6. Testing AngularJS Applications:
• Write unit tests using Jasmine and Karma.
• Explore end-to-end testing with Protractor.
7. Advanced Topics:
• Dive into promises and asynchronous programming.
• Interact with RESTful APIs.
• Optimize performance and follow best practices.
Applications of AngularJS
1. Dynamic Forms:
• AngularJS excels at creating dynamic forms with real-time validation and feedback.
2. Real-Time Dashboards:
• Build interactive dashboards that update in real time based on user interactions.
3. Collaborative Apps:
• AngularJS is perfect for chat applications and collaborative document editing.
4. E-Commerce Platforms:
• Create seamless shopping experiences with AngularJS-powered product catalogs and
checkout processes.
Advantages of AngularJS
• It facilitates the Two-way Binding that helps to render correspondingly the changes made to the
view or the model.
• It helps to create a responsive web application, along with providing the prototyping that can be
utilized to load the application faster.
• It uses the concept of directive that helps to add functionality to the application. For this, the
overall length of the code reduces along with discarding the repetition of the code that is
specific to perform the particular task.

PHP
PHP is a popular scripting language used for creating dynamic web pages and web
applications. The term PHP is an acronym of Hypertext Preprocessor. It is an open-
source, interpreted, object-oriented server-side scripting language.

Features of PHP
• Open-Source and Free: PHP is firstly open source which means anyone can use
PHP code without any licensing. Along with this one can run PHP on any operating
system like Windows, macOS, Linux, Unix and more.
• PHP Server-Side Scripting: PHP code executes on the server before sending HTML
content to the user’s browser, allowing for the dynamic generation of web pages and
handling user interactions.
• Interpreted language: PHP code is interpreted line by line, eliminating the need for
compilation and simplifying development and testing processes.
• Database connectivity: PHP integrates seamlessly with various databases like
MySQL, PostgreSQL, and Oracle, facilitating data storage and retrieval for web
applications.
• Object-oriented programming (OOP): PHP supports OOP concepts like classes,
objects, inheritance, and polymorphism, enabling better code organization and
modularity.
• Built-in functions: PHP comes with a rich set of built-in functions for various tasks
such as string manipulation, date and time handling, file handling, and more, reducing
the need for external libraries.
• Session management: PHP allows for user session management, enabling
personalized experiences and storing user data across multiple page visits.
• Security features: While security considerations are essential for any development
language, PHP offers several built-in security features and best practices to help
mitigate vulnerabilities.
PHP Characteristics
1. Simple
2. Efficient
3. Secure
4. Flexible

Why We Learn PHP ?

PHP is one of the widely used open-source general-purpose scripting languages for
backend Development. Apart from this, let’s see why we should learn it.
• Easy to Learn: It is easier to learn for anyone who has come across any
programming language for the first time.
• Free of Cost: Since it is an open-source language, therefore developers are allowed
to use its components and all methods for free.
• Flexible: Since It is a dynamically typed language, therefore there are no hard rules
on how to build features using it.
• Supports nearly all databases: It supports all the widely used databases, including
MySQL, ODBC, SQLite etc.
• Secured: It has multiple security levels and provides us with a secure platform for
developing websites as it has multiple security levels.
• Huge Community Support: It is loved and used by a huge number of developers.
The developers share their knowledge with other people in the community who want
to know about it.

Node.js
Node.js (Node js) is an open-source and cross-platform JavaScript runtime
environment. It runs on Chrome’s V8 JavaScript engine. It allows developers to run
JavaScript code on the server. Node.js enables developers to get into the server-side
world.

Node.js is an open source server environment that uses JavaScript on server. A

Node.js application runs within a single process, without generating a new thread for
each request. Node.js includes asynchronous I/O primitives as a part of its standard
library, which prevents JavaScript code from blocking and, in general, libraries in Node.js
are developed using non-blocking paradigms. This makes blocking behaviour the
exception instead of the rule.