Web Technology Part 2

1. Unit 2

2. What are the different image file
formats?

3. • Image Format describes how data related to
the image will be stored.
• Data can be stored in compressed,
Uncompressed or vector format.
• Each format of the image have a different
advantage and disadvantage.
• Image types such a TIFF are good for printing
while JPG or PNG, are best for web.

4. • JPEG (.jpg, .jpeg)
Joint Photographic Experts Group is a loss-prone (lossy)
format in which data is lost to reduce size of image.
Due to compression, some data is lost but that loss is
very less. It is a very common format and are good for
digital cameras, nonprofessional prints, E-Mail,
Powerpoint etc., making it ideal for web use.
• GIF (.gif)
GIF or Graphics Interchange Format files are used for
web graphics.They can be animated and are limited to
only 256 colors, can allow for transparency. GIF files
are typically small is size and are portable.
• PNG (.png)
PNG or Portable Network Graphics files are a lossless
image format. It was designed to replace gif format as
gif supported 256 colors unlike PNG which support 16
million colors.

5. Difference between Server Side
Scripting and Client Side Scripting
• 1. Client side scripting :
web browsers execute client side scripting. It is use when
browsers has all code.
• Source code used to transfer from web server to user’s
computer over internet and run directly on browsers. It is
also used for validations and functionality for user events.
• It allows for more interactivity.
• It usually performs several actions without going to user.
• It cannot be basically used to connect to databases on web
server.
• Pages are altered on basis of users choice. It can also used
to create “cookies” that store data on user’s computer

6. Example

8. • 2. Server side scripting :
Web servers are used to execute server side scripting.
They are basically used to create dynamic pages.
• It can also access the file system residing at web server.
Server-side environment that runs on a scripting
language is a web-server.
• Scripts can be written in any of a number of server-side
scripting language available.
• It is used to retrieve and generate content for dynamic
pages. A dynamic page displays different content for
different users while retaining the same layout and
design
• It is used to require to download plugins. In this load
times are generally faster than client-side scripting.
When you need to store and retrieve information a
database will be used to contain data. It can use huge
resources of server.
• It reduces client-side computation overhead. Server
sends pages to request of user/client.

9. For example in a social media site, if you request info about @myFriend
the server will look up that user and return his profile if found.

11. What is JavaScript
• JavaScript (js) is a light-weight object-oriented
programming language which is used by several
websites for scripting the webpages.
• It is an interpreted, full-fledged programming
language that enables dynamic interactivity on
websites when applied to an HTML document.
• It was introduced in the year 1995 for adding
programs to the webpages in the Netscape
Navigator browser.
• Since then, it has been adopted by all other
graphical web browsers. A process is said to be lightweight if it occupies
less Memory and takes less processor time to
complete.

12. Advantages and Disadvantages of
JavaScript

14. JavaScript Example
The write() method in HTML is used to write some
content or JavaScript code in a Document. This method
is mostly used for testing purpose.

15. JavaScript Example
• Javascript example is easy to code.
• JavaScript provides 3 places to put the
JavaScript code: within body tag, within head
tag and external JavaScript file.
• Let’s create the first JavaScript example.

16. • The text/javascript is the content type that
provides information to the browser about the
data.
• The document.write() function is used to
display dynamic content through JavaScript.
We will learn about document object in detail
later.

17. 3 Places to put JavaScript code
1. Between the body tag of html
2. Between the head tag of html
3. In .js file (external javaScript)

18. 1) JavaScript Example : code between
the body tag
• In the above example, we have displayed the
dynamic content using JavaScript.
• Let’s see the simple example of JavaScript that
displays alert dialog box

21. 2) JavaScript Example : code between
the head tag
• Let’s see the same example of displaying alert
dialog box of JavaScript that is contained
inside the head tag.
• In this example, we are creating a function
msg().
• To create function in JavaScript, you need to
write function with function_name as given
below.
• To call function, you need to work on event.
Here we are using onclick event to call msg()
function.

23. output

25. 3. External JavaScript file
• We can create external JavaScript file and
embed it in many html page.
• It provides code re usability because single
JavaScript file can be used in several html
pages.
• An external JavaScript file must be saved by .js
extension. It is recommended to embed all
JavaScript files into a single file. It increases
the speed of the webpage.

26. • Let's create an external JavaScript file that
prints Hello Javatpoint in a alert dialog box.
message.js
function msg(){
alert("Hello JavatScript");
}
• Let's include the JavaScript file into html page.
• It calls the JavaScript function on button click.

31. JavaScript String replace() Method
• The JavaScript string replace() method is used
to replace a part of a given string with a new
substring.
• This method searches for specified regular
expression in a given string and then replace it
if the match occurs.
• We can use global search modifier with
replace() method to replace all the match
elements otherwise the method replace only
first match. JavaScript also provides ignore flag
to make the method case-insensitive.

33. Parameter
• originalstr - It represents the string to be
searched and replaced.
• Newstr - It represents the new string that
replaced with the searched string.

37. JavaScript String charAt() Method
• The JavaScript string charAt() method is used
to find out a char value present at the
specified index in a string.
• The index number starts from 0 and goes to n-
1, where n is the length of the string.
• The index value can't be a negative, greater
than or equal to the length of the string.

39. • Parameter
• index - It represent the position of a character.

42. JavaScript Math abs() method
• The JavaScript math abs() method returns an
absolute value of a given number.
• The abs() is a static method of Math.

44. JavaScript Math abs() method
example

48. JavaScript Date getDate() method
• The JavaScript date getDate() method returns
the day for the specified date on the basis of
local time.

51. Difference between var and let in
JavaScript
• var and let are both used for variable
declaration in javascript but the difference
between them is that var is function scoped
and let is block scoped.
It can be said that a variable declared with var
is defined throughout the program as
compared to let.

53. Output

55. Javascript Data Types
• JavaScript provides different data types to
hold different types of values.
• There are two types of data types in
JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type

56. • JavaScript is a dynamic type language, means
you don't need to specify type of the variable
because it is dynamically used by JavaScript
engine.
• You need to use var here to specify the data
type.
• It can hold any type of values such as
numbers, strings etc.
• For example:

57. JavaScript primitive data types
• There are five types of primitive data types in
JavaScript.
• They are as follows:

58. JavaScript non-primitive data types
• The non-primitive data types are as follows:

69. JavaScript Operators
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

70. JavaScript Arithmetic Operators
• Arithmetic operators are used to perform
arithmetic operations on the operands.
• The following operators are known as
JavaScript arithmetic operators.

72. JavaScript Comparison Operators
• The JavaScript comparison operator compares
the two operands.
• The comparison operators are as follows:

75. JavaScript Bitwise Operators
• The bitwise operators perform bitwise
operations on operands.
• The bitwise operators are as follows:

76. Bitwise Operator </h2>

77. Bitwise Operator

78. JavaScript Logical Operators
• The following operators are known as
JavaScript logical operators.

81. JavaScript Assignment Operators
• The following operators are known as
JavaScript assignment operators.

82. JavaScript Special Operators
• The following operators are known as
JavaScript special operators.

89. assignment operator<h2>

91. assignment operator

95. Output

98. JavaScript Loops
• The JavaScript loops are used to iterate the
piece of code using for, while, do while or for-
in loops.
• It makes the code compact.
• It is mostly used in array.
• There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
4. for-in loop

99. 1) JavaScript For loop
• The JavaScript for loop iterates the elements
for the fixed number of times.
• It should be used if number of iteration is
known.
• The syntax of for loop is given below.

100. Let’s see the simple example of for
loop in javascript.

102. 2) JavaScript while loop
• The JavaScript while loop iterates the
elements for the infinite number of times.
• It should be used if number of iteration is not
known.
• The syntax of while loop is given below.

103. Let’s see the simple example of while
loop in javascript.

105. 3) JavaScript do while loop
• The JavaScript do while loop iterates the
elements for the infinite number of times like
while loop.
• But, code is executed at least once whether
condition is true or false.
• The syntax of do while loop is given below.

106. Let’s see the simple example of do
while loop in javascript.

108. 4) JavaScript for in loop
• The JavaScript for in loop is used to iterate the
properties of an object.

111. JavaScript Functions
• JavaScript functions are used to perform
operations.
• We can call JavaScript function many times to
reuse the code.
• Advantage of JavaScript function
• There are mainly two advantages of JavaScript
functions.
• Code reusability:
• We can call a function several times so it save
coding.
• Less coding:
• It makes our program compact.
• We don’t need to write many lines of code each
time to perform a common task.

113. • where, function_name represents the name
of the function and parameter-1, ... ,
parameter-n represents list of parameters.

114. JavaScript Function Syntax
• The syntax of declaring function is given
below.
JavaScript Functions can have 0 or more arguments.

115. JavaScript Function Example
• Let’s see the simple example of function in
JavaScript that does not has arguments.

119. JavaScript Function Arguments
• We can call function by passing arguments.
Let’s see the example of function that has one
argument.

123. Function with Return Value
• We can call function that returns a value and
use it in our program.
• Let’s see the example of function that returns
value.

126. Using Iterative approach
• Here, we are iterating a loop over the
sequence of numbers to get the factorial of a
given number.
• Using this approach, the consumption of
memory is less than the recursive
implementation.
• But the code is lengthier than the recursive
method.

127. Example
• In this example, there is a text field that
requires a number and a button, which gives
us the factorial of the entered number.
• We have to enter a number in the given
textfield to find the factorial of that number.
• Then we need to click the given button
named Factorial to get the result.
• If we enter a negative number, then the
program calculates the factorial of 0, which
is 1.

128. Factorial of a number using JavaScript

132. Using Recursive approach
• In this approach, we are using recursion to
calculate the factorial of a number.
• Here, we call same function again and again to
get the factorial. Using recursion, we have to
code less than the iterative approach.
• Now, we will see an example of finding the
factorial of number using recursion in
JavaScript.

133. Example
• Here there is a function fact(), which accepts a
parameter num. It is a number for which we
need to calculate the factorial.
• The function returns 1 when the value
of num is 0.
• In the output we will see a text field that
requires number and a button which gives us
the factorial of the entered number.
• We have to enter a number in the given
textfield to find the factorial of that number.
Then we need to click the given button named
as Factorial to get the result.

142. JavaScript Objects
• A javaScript object is an entity having state
and behavior (properties and method).
• For example: car, pen, bike, chair, glass,
keyboard, monitor etc.
• JavaScript is an object-based language.
Everything is an object in JavaScript.
• JavaScript is template based not class based.
Here, we don't create class to get the object.
But, we direct create objects.

145. Creating Objects in JavaScript
• There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using
new keyword)
3. By using an object constructor (using new
keyword)

146. 1) JavaScript Object by object literal
• The syntax of creating object using object
literal is given below:
As you can see, property and value is separated by : (colon).

149. 2) By creating instance of Object
• The syntax of creating object directly is given
below:

152. 3) By using an Object constructor
• Here, you need to create function with
arguments.
• Each argument value can be assigned in the
current object by using this keyword.
• The this keyword refers to the current object.
• The example of creating object by object
constructor is given below.

155. Defining method in JavaScript Object
• We can define method in JavaScript object.
But before defining method, we need to add
property in the function with same name as
method.
• The example of defining method in object is
given below.

158. JavaScript Array
• JavaScript array is an object that represents a
collection of similar type of elements.
• There are 3 ways to construct array in
JavaScript
1. By array literal
2. By creating instance of Array directly (using
new keyword)
3. By using an Array constructor (using new
keyword)

159. 1) JavaScript array literal
• The syntax of creating array using array literal
is given below:
As you can see, values are contained inside [ ] and
separated by , (comma).
Note: Literals are constant values that can be assigned to the
variables

160. • Let's see the simple example of creating and
using array in JavaScript

161. Output of the above example

162. 2) JavaScript Array directly (new
keyword)
• The syntax of creating array directly is given
below:
• Here, new keyword is used to create instance
of array.

163. Let's see the example of creating
array directly.

164. output

165. 3) JavaScript array constructor (new
keyword)
• Here, you need to create instance of array by
passing arguments in constructor so that we
don't have to provide value explicitly.

166. The example of creating object by
array constructor is given below.

167. output

168. Array Methods
• The following table lists the standard methods
of the Array object.

186. JavaScript Built-in Objects
• Built-in Objects
• Built-in objects are not related to any Window
or DOM object model.
• These objects are used for simple data
processing in the JavaScript.

191. Example: Simple Program on Math
Object Properties

203. JavaScript Events
• The change in the state of an object is known as
an Event.
• In html, there are various events which represents that
some activity is performed by the user or by the
browser.
• When javascript code is included in HTML, js react over
these events and allow the execution. This process of
reacting over the events is called Event Handling.
• Thus, js handles the HTML events via Event Handlers.
• For example, when a user clicks over the browser, add
js code, which will execute the task to be performed on
the event.
• Some of the HTML events and their event handlers are:

227. JavaScript onclick event

229. JavaScript addEventListener()
• The addEventListener() method is used to attach
an event handler to a particular element.
• It does not override the existing event handlers.
Events are said to be an essential part of the
JavaScript.
• A web page responds according to the event that
occurred.
• Events can be user-generated or generated by
API's. An event listener is a JavaScript's procedure
that waits for the occurrence of an event.
• The addEventListener() method is an inbuilt
function of JavaScript. We can add multiple event
handlers to a particular element without
overwriting the existing event handlers.

231. Parameter Values

232. Example
• It is a simple example of using the
addEventListener() method.
• We have to click the given HTML button to see
the effect.

236. • Now, in the next example we will see how to
add many events to the same element
without overwriting the existing events.

241. Example
• In this example, we are adding multiple events
of a different type to the same element.

246. Using JavaScript
• In this example, we are using
JavaScript's onclick event.
• Here we are using the onclick event with the
paragraph element.
• When the user clicks on
the paragraph element, the corresponding
function will get executed, and the text of the
paragraph gets changed.
• On clicking the <p> element, the background
color, size, border, and color of the text will
also get change.

250. Using addEventListener() method
• In this example, we are using
JavaScript's addEventListener() method to
attach a click event to the paragraph element.
• When the user clicks the paragraph element,
the text of the paragraph gets changed.
• On clicking the paragraph, the background
color and font-size of elements will also
change.

254. Window Object
• The window object represents a window in
browser.
• An object of window is created automatically
by the browser.
• Window is the object of browser, it is not the
object of javascript.
• The javascript objects are string, array, date
etc.

255. Methods of window object

256. Example of alert() in javascript
• It displays alert dialog box.
• It has message and ok button.

259. Example of confirm() in javascript
• It displays the confirm dialog box.
• It has message with ok and cancel buttons.

263. Example of prompt() in javascript
• It displays prompt dialog box for input.
• It has message and textfield.

268. Example of open() in javascript
• It displays the content in a new window.

272. Example of setTimeout() in javascript
• It performs its task after the given
milliseconds.

275. What is CSS
• CSS stands for Cascading Style Sheets.
• It is a style sheet language which is used to
describe the look and formatting of a document
written in markup language.
• It provides an additional feature to HTML.
• It is generally used with HTML to change the
style of web pages and user interfaces.
• It can also be used with any kind of XML
documents including plain XML, SVG and XUL.
• CSS is used along with HTML and JavaScript in
most websites to create user interfaces for web
applications and user interfaces for many mobile
applications.

276. • The major points of CSS are given below:
• CSS stands for Cascading Style Sheet.
• CSS is used to design HTML tags.
• CSS is a widely used language on the web.
• HTML, CSS and JavaScript are used for web
designing.
• It helps the web designers to apply style on
HTML tags.

277. selector

279. CSS Syntax
• A CSS rule set contains a selector and a
declaration block.

280. • Selector:
• Selector indicates the HTML element you want
to style.
• It could be any tag like <h1>, <title> etc.
• Declaration Block:
• The declaration block can contain one or more
declarations separated by a semicolon.
• For the above example, there are two
declarations:
• color: yellow;
• font-size: 11 px;

281. • Each declaration contains a property name
and value, separated by a colon.
Property:
• A Property is a type of attribute of HTML
element.
• It could be color, border etc.
Value:
• Values are assigned to CSS properties.
• In the above example, value "yellow" is
assigned to color property.

282. CSS Selector
• CSS selectors are used to select the content
you want to style.
• Selectors are the part of CSS rule set.
• CSS selectors select HTML elements according
to its id, class, type, attribute etc.

283. • There are several different types of selectors
in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

284. 1) CSS Element Selector
• The element selector selects the HTML
element by name.

287. 2) CSS Id Selector
• The id selector selects the id attribute of an
HTML element to select a specific element.
• An id is always unique within the page so it is
chosen to select a single, unique element.
• It is written with the hash character (#),
followed by the id of the element.
• Let?s take an example with the id "para1".

290. 3) CSS Class Selector
• The class selector selects HTML elements with
a specific class attribute.
• It is used with a period character .
(full stop symbol) followed by the class name.

293. CSS Class Selector for specific element
• If you want to specify that only one specific
HTML element should be affected then you
should use the element name with class
selector.
• Let's see an example.

296. 4) CSS Universal Selector
• The universal selector is used as a wildcard
character.
• It selects all the elements on the pages.

299. 5) CSS Group Selector
• The grouping selector is used to select all the
elements with the same style definitions.
• Grouping selector is used to minimize the
code. Commas are used to separate each
selector in grouping.
• Let's see the CSS code without group selector.

301. • As you can see, you need to define CSS
properties for all the elements.
• It can be grouped in following ways:

304. How to add CSS
• CSS is added to HTML pages to format the
document according to information in the
style sheet.
• There are three ways to insert CSS in HTML
documents.
1. Inline CSS
2. Internal CSS
3. External CSS

305. 1) Inline CSS
• Inline CSS is used to apply CSS on a single line
or element.

306. • Inline CSS: Inline CSS contains the CSS
property in the body section attached with
element is known as inline CSS.
• This kind of style is specified within an HTML
tag using the style attribute.

309. Example 2

311. Disadvantages of Inline CSS
• You cannot use quotations within inline CSS.
• If you use quotations the browser will
interpret this as an end of your style value.
• These styles cannot be reused anywhere else.
• These styles are tough to be edited because
they are not stored at a single place.
• It is not possible to style pseudo-codes and
pseudo-classes with inline CSS.
• Inline CSS does not provide browser cache
advantages.

312. 2) Internal CSS
• Internal CSS is used to apply CSS on a single
document or page.
• It can affect all the elements of the page.
• It is written inside the style tag within head
section of html.
• For example:

313. • Internal or Embedded CSS:
• This can be used when a single HTML
document must be styled uniquely.
• The CSS rule set should be within the HTML
file in the head section i.e the CSS is
embedded within the HTML file.

316. Example 2

318. 3) External CSS
• External CSS is used to apply CSS on multiple
pages or all pages.
• Here, we write all the CSS code in a css file.
• Its extension must be .css for example
style.css.

320. • External CSS:
• External CSS contains separate CSS file which
contains only style property with the help of
tag attributes (For example class, id, heading,
… etc).
• CSS property written in a separate file with
.css extension and should be linked to the
HTML document using link tag.
• This means that for each element, style can be
set only once and that will be applied across
web pages.

324. CSS text-indent Property

329. CSS text-decoration Property

335. CSS text-transform Property

338. CSS text-align Property

343. CSS white-space Property

348. Advantages of CSS
• Saves time: It allows you define a style for
each HTML element. You can apply this style
to as many web pages as you want.
• Easy maintenance: You can easily update
document formatting and maintain
consistency in multiple documents.
• Faster page loading: It allows multiple pages
to share formatting that reduces file transfer
size which helps pages load faster.

349. • Platform Independence:
• It offers platform independence and also
supports the latest browsers.
• Multiple device compatibility:
• It allows you optimize content for more than
one type of devices.
• You can present a HTML document in
different viewing styles for different devices
like computer, cell phone and printer.

350. Superior styles to HTML:
It has more presentation capabilities than HTML.
It allows you enhance the look of your HTML
pages better than using HTML presentational
elements and attributes.

351. Pizza Restaurant

354. output