CS202 – Fundamentals of Front End Development Final Term Papers

CS202 – Fundamentals of Front End Development Final Term Papers

Describe Front End Languages

Front end languages lives in your browser. Following are front end languages:

  • HTML
  • CSS
  • Java script


What is dynamic URL?

A dynamic URL is the address of a dynamic Web page. Dynamic URLs often contain the characters like: ?, &, %, +, =, $, cgi-bin
There is a fourth optional part for dynamic URL. It contain the parameters sent to the dynamic page, in key=value pair.

Define Application Server

An application server is a software framework that provides both facilities to create web applications and a server environment to run them. It acts as a set of components accessible to the developer through an API defined by the platform itself.

Write note on Domain


A domain name is a unique name for your web site.

  • Google.com
  • Microsoft.com
  • Facebook.com

It is that part of the Uniform Resource Locator (URL) that tells a domain name server using the domain name system (DNS), where to forward a request for a Web page. The domain name is mapped to an IP address (which represents a physical point on the Internet). See here some example of Domain Name.

Parts of Domain Name

TLD: Top Level Domain


Second Level Domain

Must be unique on the Internet and registered with one of the ICANN-accredited registrars for specific TLD.

  • www.google.com.pk
  • facebook.com
  • validate.ecp.gov

Third Level Domain – Sub Domain

Give example of HTML Quotations

HTML <q> for Short Quotations. The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element.

HTML <blockquote> for Long Quotations. The HTML <blockquote> element defines a quoted section. Browsers usually indent <blockquote> elements.

<p>Here is a quote from ExamPlanning website:</p>

<blockquote cite=”http://www.examplanning.com/index.html”>Providing educational material to the students.</blockquote>

What is Character Encoding?

ASCII was the first character encoding standard (also called character set). It defines 127 different alphanumeric characters that could be used on the internet. ASCII supported numbers (0-9), English letters (A-Z), and some special characters like ! $ + – ( ) @ < > .

ANSI (Windows-1252) was the original Windows character set. It supported 256 different character codes. SO-8859-1 was the default character set for HTML 4. It also supported 256 different character codes. Because ANSI and ISO was limited, the default character encoding was changed to UTF-8 in HTML5.

UTF-8 (Unicode) covers almost all of the characters and symbols in the world.

What Is XHTML?

  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is almost identical to HTML
  • XHTML is stricter than HTML
  • XHTML is HTML defined as an XML application
  • XHTML is supported by all major browsers

What is Inline CSS

An inline style is used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. For example,
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>
This example shows how to change the color and the left margin of a <h1> element

What is CSS Float?

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is often used with images, but it is also useful when working with layouts.

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element

The syntax of pseudo-elements:
selector::pseudo-element {

What is Image Sprites?

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.

How to use JavaScript Comments

JavaScript comments can be used to explain JavaScript code, and to make it more readable. Furthermore, you can also use the JS comments to prevent execution, when testing alternative code.

  • Single Line Comments: Single line comments start with //. Any text between // and the end of the line, will be ignored by JavaScript (will not be executed).
  • Multi-line Comments: Multi-line comments start with /* and end with */. Any text between /* and */ will be ignored by JavaScript

What are JavaScript Identifiers? Also describe rules for naming identifiers

All JavaScript variables must be identified with unique names and 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 _
  • Names are case sensitive (y and Y are different variables)
  • Reserved words (like JavaScript keywords) cannot be used as names

What is the Difference between Arrays and Objects?

In JavaScript:

  • Arrays use numbered indexes.
  • Objects use named indexes.

When to Use Arrays? When to use Objects?

  • JavaScript does not support associative arrays.
  • You should use objects when you want the element names to be strings (text).
  • You should use arrays when you want the element names to be numbers.

What are Different Kinds of Loops

Here are different kinds of loops used in this language:

  • for – loops through a block of code a number of times
  • for/in – loops through the properties of an 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

What is typeof Operator

You can use the typeof operator to find the data type of a JavaScript variable.

  • typeof “John” // Returns string
  • typeof 3.14 // Returns number
  • typeof NaN // Returns number
  • typeof false // Returns boolean
  • typeof [1,2,3,4] // Returns object
  • typeof {name:’John’, age:34} // Returns object
  • typeof new Date() // Returns object
  • typeof function () {} // Returns function
  • typeof myCar // Returns undefined (if myCar is not declared)
  • typeof null // Returns object

What jQuery Effects Method do?

jQuery provide easy to use methods for creating animation effects. Here are some common jQuery Effects Methods:

  • fadeIn() Fades in the selected elements
  • fadeOut() Fades out the selected elements
  • fadeToggle() Toggles between the fadeIn() and fadeOut() methods
  • hide() Hides the selected elements

Describe Callback function

The functions text(), html(), val() and attr() all comes with a call back function. The callback function has two parameters: index of the current element in the list of elements selected and the original value. Example is given below:

$(“#test1”).text(function(i, origText) {
return “Old: ” + origText + ” New: Good Work!”;

Callback function for attr()

attr() call back function works in similar way.
<a id=”link2″ href=”link-url”>some link</a>
$(“#link2”).attr(“href”, function(i, origValue){
return origValue + “/new”;
<a id=”link2″ href=”link-url/new”>some link</a>

What are methods of jQuery for Manipulating CSS

jQuery has several methods for CSS manipulation. Following are some commonly used:

  • addClass() – Adds one or more classes to the selected elements
  • removeClass() – Removes one or more classes from the selected elements
  • toggleClass() – Toggles between adding/removing classes from the selected elements
  • css() – Sets or returns the style attribute

Examples are given below:

addClass() Method
Adds one or more classes to one or more selected Element.
$(“h1, h2, p”).addClass(“blue”);
You can also specify multiple classes within the addClass() method:
$(“#div1”).addClass(“important blue”);

removeClass() Method
Remove a specific class attribute from selected elements.
$(“h1, h2, p”).removeClass(“blue”);

toggleClass() Method
This method toggles between adding/removing classes from the selected elements.
$(“h1, h2, p”).toggleClass(“blue”);

What is AJAX?

AJAX = Asynchronous JavaScript and XML. In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.

jQuery provides several methods for AJAX functionality. With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post.

What is XML (EXtensible Markup Language). Write a brief note on it.

Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format which is both human-readable and machine-readable. It is defined by the W3C’s XML 1.0 Specification and by several other related specifications, all of which are free open standards. Here are some main features of XML:

XML is heavily used as a format for document storage and processing, both online and offline.

XML is extensible, because it only specifies the structural rules of tags. No specification on tags them self.

It allows validation using schema languages such as XSD and Schematron, which makes effective unit-testing, firewalls, acceptance testing, contractual specification and software construction easier.

  • The hierarchical structure is suitable for most (but not all) types of documents.
  • It is platform-independent, thus relatively immune to changes in technology.
  • XML files are text files, which can be managed by any text editor.
  • XML is very simple, because it has less than 10 syntax rules.
  • XML tags are not predefined. You must define your own tags
  • XML can be used to create new internet languages
  • XML is a markup language much like HTML
  • XML was designed to describe data.

What is XSLT?

XSLT (eXtensible Stylesheet Language Transformations) is the recommended style sheet language for XML. XSLT uses XPath to find information in an XML document. With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more.

What is JSON? Write its syntax rules.

JSON stands for JavaScript Object Notation. JSON is a lightweight data-interchange format. JSON is language independent * JSON is “self-describing” and easy to understand.

The JSON syntax is a subset of the JavaScript syntax.
JSON Syntax Rules. JSON syntax is derived from JavaScript object notation syntax:

{“firstName”:”Asim”, “lastName”:”Asdeel”}

  • Data is in name/value pairs
  • Data is separated by commas
  • Curly braces hold objects
  • Square brackets hold arrays

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>

What is a Web Worker?

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. Web worker runs in the background.
Check Web Worker Support

Before creating a web worker, check whether the user’s browser supports it:

if(typeof(Worker) !== “undefined”) {
// Yes! Web worker support!
// Some code…..
} else {
// Sorry! No Web Worker support..

Create a Web Worker File

Now, let’s create our web worker in an external JavaScript.
var i = 0;
function timedCount() {
i = i + 1;

var i = 0;
function timedCount() {
i = i + 1;
postMessage() method – is used to post a message back to the HTML page.