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 visible to the user. Source code is not visible to the user because
its output�
of server-sideside is an HTML page.�
�
Its main function is to provide the requested output to the end user. Its primary
function is to manipulate and provide access to the respective database as per the
request.
It usually depends on the browser and its version. In this any server-side
technology can be used and it does not�
depend on the client.�
�
It runs on the user�s computer. It runs on the webserver.
There are many advantages linked with this like faster.�
response times, a more interactive application.�
� The primary advantage is its ability to highly customize, response�
requirements, access rights based on user.�
�
It does not provide security for data. It provides more security for data.
It is a technique used in web development in which scripts run on the client�s
browser. It is a technique that uses scripts on the webserver to produce a
response that is customized for each 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.
It reduces load on processing unit of the server. It surge the processing load
on 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?

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.
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.
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.
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
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.
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.
Routing and Single-Page Applications (SPAs):
Implement client-side routing to create SPAs.
Handle route parameters and navigation seamlessly.
Services and Dependency Injection:
Services are reusable components that provide specific functionality.
Dependency injection ensures loose coupling between components, making your code
more maintainable.
Custom Directives and Components:
Build reusable components using custom directives.
Isolate scope and communicate between components.
Testing AngularJS Applications:
Write unit tests using Jasmine and Karma.
Explore end-to-end testing with Protractor.
Advanced Topics:
Dive into promises and asynchronous programming.
Interact with RESTful APIs.
Optimize performance and follow best practices.
Applications of AngularJS
Dynamic Forms:
AngularJS excels at creating dynamic forms with real-time validation and feedback.
Real-Time Dashboards:
Build interactive dashboards that update in real time based on user interactions.
Collaborative Apps:
AngularJS is perfect for chat applications and collaborative document editing.
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
Simple
Efficient
Secure
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.