WebTechnology II
WebTechnology II
Introduction .................................................................................................................................................. 2
Web Development ........................................................................................................................................ 2
Server side and client-side programming ..................................................................................................... 2
Client-Side Scripting programming ........................................................................................................... 2
Server-Side Scripting programming .......................................................................................................... 3
Comparison between Client-side and Server-side Scripting ......................................................................... 4
Application area of Scripting Language......................................................................................................... 4
Differences between Server-side scripting and Client-side scripting ............................................................ 4
Some popular Languages .............................................................................................................................. 5
Front-End, Back-End and Full-Stack Developers ........................................................................................... 5
Front-End Developers: .............................................................................................................................. 5
Back-End Developers................................................................................................................................. 6
Full-Stack Developers ................................................................................................................................ 6
Difference between Scripting Language and Programming Language ......................................................... 6
Internet Technology ...................................................................................................................................... 6
Static Website ............................................................................................................................................... 6
Dynamic Website .......................................................................................................................................... 7
JavaScript ...................................................................................................................................................... 7
Introduction .............................................................................................................................................. 7
Features of JavaScript ............................................................................................................................... 7
Advantages ................................................................................................................................................ 8
Uses of JavaScript...................................................................................................................................... 8
Embedding JavaScript to HTML................................................................................................................. 8
Inline JavaScript..................................................................................................................................... 9
Internal JavaScript ................................................................................................................................. 9
External JavaScript ................................................................................................................................ 9
JavaScript Fundamental .............................................................................................................................. 10
Script ....................................................................................................................................................... 10
Statements .............................................................................................................................................. 10
JavaScript comments .................................................................................................................................. 11
Whitespace and Line Breaks ....................................................................................................................... 11
Web Technology II
Introduction
Web Technology is the tools and techniques which enables two or more computing devices to
communicate over a network i.e. Internet. Web Technology consist of two words, the web refers to the
World Wide Web generally known as www. WWW is the cyber space containing webpages, documents,
and any other resources which are identified and located with the help of their URLs. Technology refers to
the tools and techniques that makes these resources available on the Web such as, web browsers to view
content of web, Programming languages and frameworks for the development of websites, Database to
store data at back end, protocols for communicating on the web, multimedia elements etc.
Web Development
It is the process of designing and developing website which are hosted through internet or intranet. The
process of developing web can range from developing static page to a complex web software such as web-
based application social media sites, E-commerce. Web development includes web design, web content
development, client-side scripting, server-side scripting, web engineering etc. Since, web development
consists of several inter-related task which can be accomplish by different types of developer who focuses
on different aspect of web creation.
The client-side scripting can be used to layout the content of the web. For example, when a user makes a
request through web browser for a webpage to the server, it just sent the HTML and CSS as plain text, and
the browser interprets and renders the content of web in the client end (user).
Client-side scripting is designed to run as a scripting language which can be executed by web browser.
Front end developer is someone who design and develop client side of a website. Generally, he or she
The client-side scripting emphasizes making the interface of the web application or website (UI) more
appealing and functional. Whereas, server-side scripting emphasizes on data accessing methods, error
handling and fast processing etc.
1. The client-side script is executed at the front-end in the client’s browser while the server-side
script is executed at the back end with a web server.
2. The client-side script is visible to the user of the web browser while the server-side script is
hidden.
3. The client-side script is not secure while the server-side script is secure.
4. The client-side script does not need to interact with the server while the server-side script needs
a web server to be processed.
5. The client-side script is executed on a local computer while the server-side script is executed on
a remote computer.
6. The client-side script has a faster response time than the server-side script.
7. Client-side script is executed after the browser receives the web pages sent by the server while
the server-side script cannot execute the client-side script.
8. The client-side script cannot connect with the database while the server-side script can connect
with the database present on the server-side.
9. The client-side script cannot access files while the server-side script can access and manipulate
the files present at the webserver.
10. The client-side script helps create interactive web pages while the server-side script helps create
web pages with dynamic data.
2. Perl: Practical Extraction and Reporting Language, first released in 1987 is a powerful language with
advance features. Perl is a stable, cross platform programming language. It is a general-purpose
programming language originally developed for text manipulation and now used for a wide range of tasks
including system administration, web development, network programming, GUI development, and more.
3. Ruby: Ruby is a dynamic, open-source programming language with a focus on simplicity and
productivity. It has an elegant syntax that is natural to read and easy to write.
4. Bash: A Bash script is a plain text file which contains a series of commands. It is widely available on
various operating systems and is a default command interpreter on most GNU/Linux systems.
5. Node.js: Node.js is used to create dynamic page contents. It can create, open, read, write, delete, and
close file on the server.
6. ASP.net: It is used to develop dynamic websites, web applications, and web services. ASP.NET is a web
application framework developed and marketed by Microsoft to allow programmers to build dynamic
web sites.
7. VBScript: Visual Basic Script (VBScript) is an open-source web programming language developed by
Microsoft. It is superset of JavaScript and adds optional static typing class-based object-oriented
programming VBScript is lightweight scripting language. As VBScript is only used by IE browsers JavaScript
is preferred over VBScript.
8. JavaScript: JavaScript is most well-known and widely used scripting language for web pages. All java
script files are stored in file having is extension. JavaScript and Java programming language are two
different things: JavaScript is generally used for making websites interactive and dynamic.
9. jQuery: jQuery is a JavaScript library that simplifies writing code and enables rapid web development.
jQuery simplifies HTML document traversing and manipulation, and browser event handling. The main
concept of jQuery is "write less, do more".
10. PHP: Hypertext Preprocessor (PHP) is widely used scripting language. PHP scripts are executed on the
server. It is used to manage dynamic content, databases, session tracking and building ecommerce sites.
It is integrated with a popular database MySQL.
Full-Stack Developers
Full-stack developers are proficient in both front-end and back-end development. They have a
comprehensive understanding of how both the client-side and server-side components of a web
application work together. Full-stack developers can handle all aspects of web development, from
designing user interfaces to building server-side logic and managing databases.
Internet Technology
The Internet is the global system of interconnected computer networks that uses the Internet protocol
suite to communicate between networks and devices. It is a network of networks that consists of private,
public, academic, business, and government networks of local to global scope, linked by a broad array of
electronic, wireless, and optical networking technologies. The Internet carries a vast range of information
resources and services, such as the inter-linked hypertext documents and applications of the World Wide
Web, electronic mail, telephony, and file sharing.
Static Website
Static Web pages are very simple. It is written in languages such as HTML, JavaScript, CSS, etc. Static
websites are the websites that doesn’t change the content or layout dynamically with every request to the
web server. Static websites display exactly the same information whenever anyone visits it. User sees the
updated content of Static Website only when a web author manually updates them with a text editor or
any web editing tool used for creating websites. Static webpages do not have to be simple plain text. They
can feature multiple design and even videos.
Example: login & signup pages, application & submission forms, inquiry and shopping cart pages. A Typical
Architecture of dynamic website
JavaScript
Introduction
JavaScript is a lightweight, interpreted and object-oriented programming language. It is commonly used
to create dynamic and interactive elements in web applications. JavaScript is very easy to implement
because it is integrated with HTML. It is open and cross-platform. 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. With JavaScript, users can build modern web applications to interact
directly without reloading the page every time.
Features of JavaScript
➢ JavaScript is a lightweight, interpreted programming language.
➢ Designed for creating network-centric applications.
➢ Complementary to and integrated with HTML.
➢ It is case sensitive language.
➢ JavaScript is platform independent.
Advantages
1. An Interpreted Language: JavaScript is an interpreted language, which requires no compilation steps. The
syntax is completely interpreted by the browser just as it interprets HTML tags.
2. Embedded within HTML: JavaScript does not require any special editor for programs to be written. It can
be written in any text editor along with appropriate HTML tags.
3. JavaScript is an object-oriented language: The language supports several built-in objects and
programmers can create or delete their own objects. JavaScript does not have classes in the C++ or Java
sense. In JavaScript, objects can inherit properties directly from each other, forming the object prototype
chain.
4. Minimal Syntax- Easy to Learn: By learning just a few commands and simple rules of syntax, complete
application can be built using JavaScript.
5. Quick Development: Because JavaScript does not require time-consuming compilations; scripts can be
developed in a short period of time.
6. Procedural Capabilities: Every programming language needs to support facilities such as conditional
checking, looping and Branching. JavaScript provides syntax, which can be used to add such procedural
capabilities to web page.
7. Easy Debugging and Testing: Being and interpreted language, scripts in JavaScript are tested line by line,
and errors are also listed as they are encountered, i.e. an appropriate error message along with the line
number is listed for every error that is encountered.
Example:
Output:
Internal JavaScript
JavaScript is written within a <script> tag inside the <head> or <body> of the HTML document.
Example
Output
External JavaScript
JavaScript is written in a separate .js file and linked using a <script> tag with a src attribute.
We will see how we can include an external JavaScript file in an HTML document. Let us make a file named
ExternalJS.html:
Note: External JavaScript is generally used for larger projects or when we need to reuse scripts across
multiple HTML files.
JavaScript Fundamental
Script
In JavaScript, a script is a set of instructions or code that performs specific tasks or actions within a web
page. JavaScript statements are written within <script>…..</script>. The <script> tag alerts the browser
program to start interpreting all the statements between these tags as a script. A simple syntax of your
JavaScript will appear as follows:
Syntax:
<script>
block of Statements
</script>
Statements
JavaScript statements are composed of Values, Operators, Expressions, Keywords, and Comments. The
program consists of many statements. The statements are executed, one by one, in the same order as
they are written. It is often called JavaScript code.
1. Single-line comments: These begin with // and continue to the end of the line. They are useful for
short notes or annotations.
// This is a single-line comment
let x = 5; // This sets x to 5
2. Multi-line comments: These begin with /* and end with */. They can span multiple lines, which
makes them ideal for longer explanations or for temporarily disabling blocks of code.
/*
This is a multi-line comment.
It can span multiple lines.
Useful for detailed explanations or large blocks of commented-out code.
*/
let y = 20;
/*
console.log(y);
console.log("This code is ignored");
*/
Case Sensitivity
JavaScript is a case-sensitive language. The keywords, variables, functions names, and any other identifiers
must always be typed with a consistent capitalization of letters. So, the identifiers Time and TIME will
convey different meanings in JavaScript.
Output
Java Script can "display" data in different ways: It defines the ways to display the output of a given code.
The output can be display by using four different ways which are listed below:
1. Console.log()
This method is used to output data to the web console. It’s the most common way to
debug in JavaScript.
Example
console.log("Hello, World!");
2. alert()
This method displays an alert dialog with a specified message and an OK button. It’s usually used
for simple notifications.
alert("This is an alert box!");
3. document.write()
This function writes directly to the HTML document stream.
document.write("Hello, World!");
4. innerHTML
This property allows you to set or get the HTML content inside an element, enabling rich content
display.
Examples of console.error():
function divideNumbers(a, b) {
if (b === 0) {
return null;
return a / b;
Example of console.warn()