Scribd
Upload
3 views

KTU Web Programming QPs

The document explains CSS selectors, specifically ID and class selectors, with examples of their usage. It also covers various methods of creating arrays in JavaScript, including literal notation and the Array constructor, along with examples of the join and slice methods. Additionally, it discusses CSS style sheet levels, conflict resolution, and provides sample web pages for specific events using embedded styles.

Uploaded by

Reny Mathew
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

KTU Web Programming QPs

The document explains CSS selectors, specifically ID and class selectors, with examples of their usage. It also covers various methods of creating arrays in JavaScript, including literal notation and the Array constructor, along with examples of the join and slice methods. Additionally, it discusses CSS style sheet levels, conflict resolution, and provides sample web pages for specific events using embedded styles.

Uploaded by

Reny Mathew
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

GROUP 4

Q.Explain id selector and class selector in CSS with suitable examples.

1. ID Selector (#)

● The id selector is used to style a specific element. It targets an element with


a unique id attribute, which means each id should only appear once per
page.
● To apply styles with an id selector, you prefix the id name with a # symbol in
CSS.

Example:

<html>

<head>

<style>

/* ID selector targeting the element with id "header" */

#header {

background-color: #4CAF50;

color: white;

padding: 10px;

text-align: center;

</style>

</head>

<body>

<div id="header">This is a header</div>

</body>

</html>
2. Class Selector (.)

● The class selector is used to target multiple elements with the same class
attribute. This is useful when you want to apply the same style to a group of
elements.
● To apply styles with a class selector, you prefix the class name with a .
symbol in CSS.

Example:

<html>

<head>

<style>

/* Class selector targeting all elements with class "box" */

.box {

border: 2px solid blue;

padding: 20px;

margin: 10px;

</style>

</head>

<body>

<div class="box">This is Box 1</div>

<div class="box">This is Box 2</div>

<p class="box">This is a paragraph with box styling</p>

</body>

</html>

Q.Explain array creation in javaScript with examples

1. Using Square Brackets ([]) - Literal Notation


This is the most common way to create an array in JavaScript. Simply use square
brackets, with elements separated by commas.

Example:

// Creating an array with some numbers

let numbers = [1, 2, 3, 4, 5];

console.log(numbers); // Output: [1, 2, 3, 4, 5]

// Creating an array with mixed data types

let mixedArray = [1, "Hello", true, { name: "John" }];

console.log(mixedArray); // Output: [1, "Hello", true, { name: "John" }]

2. Using the Array Constructor

You can also create arrays using the Array constructor. If you pass a single numeric
argument to the Array constructor, it creates an array of the specified length with
empty values. If you pass multiple arguments, they will become the elements of the
array.

Example:

// Creating an empty array with a specified length

let emptyArray = new Array(3);

console.log(emptyArray); // Output: [ <3 empty items> ]

// Creating an array with initial elements

let fruits = new Array("Apple", "Banana", "Cherry");

console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

3. Using Array.of()

The Array.of() method creates a new array instance with a variable number of
elements, regardless of the number or types of the arguments. It’s especially useful
for cases where you want to create an array with a single numeric element without
creating empty slots.
Example:

let singleElementArray = Array.of(5);

console.log(singleElementArray); // Output: [5]

let multipleElementsArray = Array.of(1, 2, 3);

console.log(multipleElementsArray); // Output: [1, 2, 3]

4. Using Array.from()

Array.from() creates a new array from an iterable or array-like object (e.g.,


strings or NodeLists).

Example:

// Creating an array from a string

let wordArray = Array.from("hello");

console.log(wordArray); // Output: ["h", "e", "l", "l", "o"]

// Creating an array from a set

let uniqueNumbers = new Set([1, 2, 3, 4]);

let numbersArray = Array.from(uniqueNumbers);

console.log(numbersArray); // Output: [1, 2, 3, 4]

5. Using Spread Operator (...)

The spread operator can create arrays from existing arrays or other iterable objects
like strings or sets.

Example:

// Creating a copy of an array

let originalArray = [1, 2, 3];

let copiedArray = [...originalArray];


console.log(copiedArray); // Output: [1, 2, 3]

// Creating an array from a string

let charArray = [..."world"];

console.log(charArray); // Output: ["w", "o", "r", "l", "d"]

Q. Discuss the various CSS style sheet levels with suitable examples. How are
conflicts resolved when multiple style rules apply to a single web page element?

1. Inline CSS

● Inline CSS applies styles directly within an HTML element using the style
attribute. This is usually used for specific, one-time customizations.
● Inline styles have the highest specificity among the three methods
discussed here.

Example:

<p style="color: red; font-size: 18px;">This text is red and 18px.</p>

2. Internal CSS (Embedded)

● Internal CSS is defined in the <head> section of an HTML document within a


<style> tag. It applies only to that specific HTML page.
● Internal CSS is useful for styling a single page without affecting other pages.

Example:

<head>

<style>

p{

color: blue;

font-size: 16px;

</style>

</head>
<body>

<p>This text is blue and 16px.</p>

</body>

3. External CSS

● External CSS is defined in a separate .css file that is linked to the HTML
document via a <link> tag in the <head> section.
● It is the most scalable and preferred method for styling multiple pages with
consistent design.
● External CSS files are cached by the browser, improving performance on
repeat visits.

Example:

main.html

<!-- Link to an external CSS file -->

<head>

<link rel="stylesheet" href="styles.css">

</head>

style.css

p{

color: green;

font-size: 14px;

4. CSS Conflict Resolution - Cascading and Specificity Rules

When multiple CSS rules target the same HTML element, conflicts are resolved
based on the cascading and specificity rules:

● Order of Priority (Cascade):


○ Inline styles have the highest priority.
○ Internal styles (within a <style> tag in the <head>).
○ External styles (from an external stylesheet).
○ Browser default styles (applied by the browser if no CSS rules are
specified).
● Specificity:
○ CSS applies a specificity score to each rule to determine which style
to apply. The more specific a selector is, the higher its score.
○ The order of specificity is as follows:
1. Inline styles: Highest specificity.
2. ID selectors (#id): High specificity.
3. Class selectors (.class) and attribute selectors
([type="text"]): Moderate specificity.
4. Element selectors (e.g., p, h1, div): Lowest specificity.
○ If two rules have the same specificity, the last rule declared in the
CSS file takes precedence.

Example of Conflict Resolution

Suppose we have this HTML and CSS setup:

<head>

<link rel="stylesheet" href="styles.css"> <!-- External stylesheet -->

<style>

.text {

color: blue;

</style>

</head>

<body>

<p id="para" class="text" style="color: red;">This is a paragraph.</p>

</body>
#para {

color: green;

Resolution:

1. The <p> tag has an inline style (color: red;), giving it the highest
specificity.
2. The ID selector #para from the external stylesheet has high specificity but is
overridden by the inline style.
3. The internal class selector .text has lower specificity than the ID but would
override general element selectors.

So, the final color of the paragraph will be red, due to the inline style.

Q. List the order of precedence of style levels. Organize a sample web page for
providing ‘KTU BTech Honours Regulation 19’ for KTU and use embedded Style
sheet to apply minimum 5 styles for list, tables and pages.

1.Inline Styles: Highest priority (e.g., <p style="color: red;">).

2.Internal (Embedded) Styles: Defined within the <style> tag in the HTML
<head>.

3.External Styles: Linked from an external CSS file using the <link> tag in the
HTML <head>.

4.Browser Default Styles: Lowest priority and used if no other CSS is applied.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>KTU BTech Honours Regulation 19</title>


<!-- Embedded Style Sheet -->

<style>

/* Page background and font styles */

body {

background-color: #f3f4f7;

font-family: Arial, sans-serif;

color: #333;

line-height: 1.6;

/* Heading style */

h1 {

color: #4CAF50;

text-align: center;

margin-top: 20px;

font-size: 2em;

/* List style */

ul.regulations-list {

list-style-type: square;

margin-left: 20px;

padding: 10px;

}
ul.regulations-list li {

margin-bottom: 8px;

color: #1f5f8b;

/* Table styles */

table {

width: 80%;

margin: 20px auto;

border-collapse: collapse;

th, td {

padding: 12px;

border: 1px solid #ddd;

text-align: left;

th {

background-color: #4CAF50;

color: white;

td {

background-color: #fafafa;

</style>

</head>
<body>

<!-- Page Title -->

<h1>KTU BTech Honours Regulation 19</h1>

<!-- Introduction Paragraph -->

<p>This page provides an overview of the Kerala Technological University's (KTU)


BTech Honours regulations under Regulation 19. Please refer to the list and table
below for more details.</p>

<!-- List of Regulations -->

<h2>Important Regulations</h2>

<ul class="regulations-list">

<li>Eligibility criteria for BTech Honours program</li>

<li>Minimum credit requirements</li>

<li>Grading and assessment policies</li>

<li>Attendance and academic performance requirements</li>

<li>Guidelines for project and thesis submission</li>

</ul>

<!-- Table with Regulation Details -->

<h2>Regulation Details</h2>

<table>

<tr>

<th>Regulation</th>

<th>Description</th>
</tr>

<tr>

<td>Eligibility</td>

<td>Minimum CGPA of 7.5 in previous semesters</td>

</tr>

<tr>

<td>Credit Requirements</td>

<td>Completion of 180 credits by the end of the program</td>

</tr>

<tr>

<td>Grading</td>

<td>Grades are awarded based on academic performance and project


work</td>

</tr>

<tr>

<td>Attendance</td>

<td>A minimum of 75% attendance is required in each course</td>

</tr>

<tr>

<td>Project Submission</td>

<td>Projects must be submitted in the final semester as per guidelines</td>

</tr>

</table>

</body>
</html>

Q.Illustrate the different ways of Array declaration in JavaScript. Describe the


function of the following JavaScript Array object methods with examples. (i) join (ii)
slice (8)

1.Using Square Brackets (Literal Notation)

This is the simplest and most common way to declare an array in JavaScript.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits); // Output: ["Apple", "Banana", "Mango"]

2.Using the Array Constructor

You can also declare an array using the Array constructor. Be cautious with this
approach if you're passing a single number, as it will create an array of that length
rather than an array with that number as an element.

let numbers = new Array(1, 2, 3);

console.log(numbers); // Output: [1, 2, 3]

let emptyArray = new Array(5); // Creates an array with 5 empty slots

console.log(emptyArray); // Output: [ <5 empty items> ]

3.Using Array.of()

Array.of() is used to create an array with the specified elements, especially


useful when you need an array with a single numeric element.

let singleElementArray = Array.of(7);

console.log(singleElementArray); // Output: [7]

4.Using Array.from()

Array.from() is used to create an array from an iterable or array-like object, such


as strings or NodeLists.

let arrayFromString = Array.from("hello");

console.log(arrayFromString); // Output: ["h", "e", "l", "l", "o"]


JavaScript Array Object Methods: join and slice

join()

○ Function: The join() method converts all elements of an array into a


single string, separated by a specified delimiter (default is a comma).
○ Syntax: array.join(separator)
○ Parameters:
■ separator (optional): Specifies the separator to use between
each element. If omitted, a comma (,) is used.
○ Return Value: A string with all array elements joined by the specified
separator.

Example:

let colors = ["Red", "Green", "Blue"];

// Using join() with default comma separator

let result1 = colors.join();

console.log(result1); // Output: "Red,Green,Blue"

// Using join() with a different separator

let result2 = colors.join(" - ");

console.log(result2); // Output: "Red - Green - Blue"

slice()

● Function: The slice() method returns a shallow copy of a portion of an


array into a new array, based on specified start and end indices. It does not
modify the original array.
● Syntax: array.slice(start, end)
● Parameters:
○ start (optional): The beginning index (inclusive). If omitted, the
default is 0.
○ end (optional): The end index (exclusive). If omitted, the slice extends
to the end of the array.
● Return Value: A new array containing the selected elements.

Example:

let numbers = [1, 2, 3, 4, 5];


// Slicing from index 1 to 3 (end index is not included)

let result1 = numbers.slice(1, 3);

console.log(result1); // Output: [2, 3]

// Slicing from index 2 to the end of the array

let result2 = numbers.slice(2);

console.log(result2); // Output: [3, 4, 5]

// Slicing the entire array

let result3 = numbers.slice();

console.log(result3); // Output: [1, 2, 3, 4, 5]

Q.Organize a sample web page for the event ‘Raagam2021’ at your campus and use
embedded Style sheets to apply a minimum 5 styles. State the Style Specification
format of embedded style sheets.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Raagam2021 Event at Campus</title>

<!-- Embedded Style Sheet -->

<style>

/* Style 1: Background and font for the page */

body {

background-color: #f0f8ff;

font-family: Arial, sans-serif;

color: #333;
}

/* Style 2: Heading styles */

h1 {

color: #ff4500;

text-align: center;

font-size: 2.5em;

margin-top: 20px;

/* Style 3: Event description style */

p.description {

width: 80%;

margin: 20px auto;

font-size: 1.1em;

line-height: 1.6;

text-align: justify;

/* Style 4: Button style */

.register-btn {

display: block;

width: 200px;

padding: 10px;

margin: 20px auto;

background-color: #ff4500;

color: white;

text-align: center;
font-size: 1.1em;

text-decoration: none;

border-radius: 5px;

.register-btn:hover {

background-color: #e03a00;

/* Style 5: Footer style */

footer {

background-color: #333;

color: white;

text-align: center;

padding: 15px;

margin-top: 20px;

</style>

</head>

<body>

<!-- Page Title -->

<h1>Welcome to Raagam2021</h1>

<!-- Event Description -->

<p class="description">

Raagam2021 is our annual cultural event where students showcase their


talents in music, dance, drama, and more.

Join us for an unforgettable experience filled with energy, excitement, and an


opportunity to connect with peers.
This year's event will take place over three days, with numerous competitions
and performances lined up.

</p>

<!-- Registration Button -->

<a href="register.html" class="register-btn">Register Now</a>

<!-- Footer Section -->

<footer>

&copy; 2021 Campus Name. All rights reserved.

</footer>

</body>

</html>

Q.Write CSS style rules to implement the following in a web page:

a. to display the content of hyperlinks with yellow background color and in italics

b. to display the contents of unordered lists in bold and in Arial font

c. to display a background image titled “birds.jpg” with no tiling.

a. Style for Hyperlinks with Yellow Background and Italic Text

To display hyperlinks with a yellow background color and in italics, you can target the
<a> (anchor) element.

a{

background-color: yellow;

font-style: italic;

}
b. Style for Unordered List Contents in Bold and Arial Font

To style the items within an unordered list (<ul>), you can target the <ul> and <li>
elements.

ul {

font-weight: bold;

font-family: Arial, sans-serif;

c. Style for Background Image with No Tiling

To set a background image with no tiling, use the background-image,


background-repeat, and other background properties. You can apply this to the
body or any specific element.

body {

background-image: url("birds.jpg");

background-repeat: no-repeat;

background-size: cover; /* Optional: makes the image cover the entire screen */

Q.Explain different levels of css style sheet with suitable example

1.Inline CSS

2.Internal CSS (Embedded)

3.External CSS

4.Browser Default Styles

1. Inline CSS

● Description: Inline CSS is used to apply styles directly to an HTML element


using the style attribute.
● Precedence: Inline styles have the highest specificity and will override
external and internal styles.
● Use Case: Useful for styling a single element on a page.
<p style="color: blue; font-size: 20px;">This is a blue paragraph with a font size of
20px.</p>

2. Internal CSS (Embedded)

● Description: Internal CSS is defined within a <style> block inside the


<head> section of the HTML document. This affects only the page in which it
is included.
● Precedence: Internal styles override the browser's default styles but are
overridden by inline styles if both apply to the same element.
● Use Case: Useful for styling a single document or when you need to apply
styles across multiple elements within the same page.

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Internal CSS Example</title>

<style>

body {

background-color: lightgray;

font-family: Arial, sans-serif;

h1 {

color: green;

</style>

</head>

<body>
<h1>Welcome to the Page</h1>

<p>This page uses internal CSS for styling.</p>

</body>

</html>

3. External CSS

● Description: External CSS is written in a separate .css file and linked to the
HTML document using a <link> tag in the <head> section. This allows the
same stylesheet to be applied across multiple pages.
● Precedence: External styles are overridden by both inline and internal styles.
● Use Case: Best for large projects where many pages share the same styles.
It's the most scalable and efficient method.

Example:

<!-- Link to an external stylesheet -->

<head>

<link rel="stylesheet" href="styles.css">

</head>

<!-- In styles.css -->

body {

background-color: lightblue;

font-family: 'Helvetica', sans-serif;

h1 {

color: darkblue;

}
4. Browser Default Styles

● Description: Every browser comes with its own default set of styles (also
known as "user agent styles"). These styles are applied if no other styles are
specified by the web developer.
● Precedence: These styles are overridden by any styles from inline, internal,
or external CSS.
● Use Case: Browser default styles provide basic formatting to web elements
like headings, paragraphs, links, and buttons.

Example: In the absence of any CSS rules, browsers apply their default styles to
elements like:

<p>This paragraph will have default styling from the browser.</p>

Q.write javaScript program to find factorial of a number,use prompt dialog box to get
the input from user.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Factorial Program</title>

<script>

function calculateFactorial() {

// Get the number from the user

let num = prompt("Enter a number to find its factorial:");

// Convert the input to an integer

num = parseInt(num);
// Check if the input is a valid number

if (isNaN(num) || num < 0) {

alert("Please enter a valid positive integer.");

return;

// Calculate the factorial using a loop

let factorial = 1;

for (let i = 1; i <= num; i++) {

factorial *= i;

// Display the result

alert("The factorial of " + num + " is: " + factorial);

</script>

</head>

<body>

<h1>Factorial Calculator</h1>

<button onclick="calculateFactorial()">Calculate Factorial</button>

</body>

</html>

Q.Write CSS and the corresponding HTML code for the following:

i. Set the background color for the hover and active link states to "yellow".

ii. Set the list style for ordered lists to "lower case alphabet".
iii. Set "boat.jpg" as the background image of the page and set 3% margin for the
page.

iv. Set dotted border for the document.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Example</title>

<style>

/* i. Set the background color for the hover and active link states to "yellow". */

a:hover, a:active {

background-color: yellow;

/* ii. Set the list style for ordered lists to "lower case alphabet". */

ol {

list-style-type: lower-alpha;

/* iii. Set "boat.jpg" as the background image of the page and set 3% margin for
the page. */

body {

background-image: url('boat.jpg');

background-size: cover;

margin: 3%;
}

/* iv. Set dotted border for the document. */

html {

border: 2px dotted black;

</style>

</head>

<body>

<h1>Sample Document</h1>

<p>This is a sample document with various CSS styles applied.</p>

<a href="#">Hover or click this link to see the yellow background effect</a>

<h2>Ordered List</h2>

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

</body>

</html>
Q.Explain various types of control statements in JavaScript with example

1. Conditional Statements

Conditional statements allow the execution of code based on a certain condition.

a) if Statement

Executes a block of code if the specified condition is true.

let age = 18;

if (age >= 18) {

console.log("You are eligible to vote.");

b) if...else Statement

Executes one block of code if the condition is true, and another if the condition is
false.

let age = 16;

if (age >= 18) {

console.log("You are eligible to vote.");

} else {

console.log("You are not eligible to vote.");

c) if...else if...else Statement

Checks multiple conditions in sequence.

let score = 75;

if (score >= 90) {


console.log("Grade A");

} else if (score >= 75) {

console.log("Grade B");

} else {

console.log("Grade C");

d) switch Statement

Executes different code blocks based on a value of a variable or expression.

let day = "Monday";

switch (day) {

case "Monday":

console.log("Start of the week");

break;

case "Wednesday":

console.log("Midweek");

break;

case "Friday":

console.log("Weekend is near!");

break;

default:

console.log("Just another day");

2. Looping Statements

Looping statements allow you to execute a block of code multiple times.

a) for Loop
Executes a block of code a specific number of times.

for (let i = 0; i < 5; i++) {

console.log("Iteration " + i);

b) while Loop

Executes a block of code as long as the condition is true.

let i = 0;

while (i < 5) {

console.log("Iteration " + i);

i++;

c) do...while Loop

Executes a block of code once and then repeats as long as the condition is true.

let i = 0;

do {

console.log("Iteration " + i);

i++;

} while (i < 5);

3. Jump Statements

Jump statements alter the flow of control by skipping or terminating certain blocks of
code.

a) break Statement

Terminates the loop or switch statement and transfers control to the statement
following the loop.

for (let i = 0; i < 5; i++) {

if (i === 3) {
break; // Exits the loop when i equals 3

console.log(i);

b) continue Statement

Skips the current iteration of the loop and proceeds with the next one.

for (let i = 0; i < 5; i++) {

if (i === 2) {

continue; // Skips the iteration when i equals 2

console.log(i);

c) return Statement

Exits a function and returns a value (if specified) to the caller.

function square(num) {

return num * num;

console.log(square(4)); // Outputs 16

4. Exception Handling Statements

These statements handle errors and exceptions.

a) try...catch Statement

Executes code in the try block and handles any exceptions in the catch block.
try {

let result = 10 / 0;

console.log(result);

} catch (error) {

console.log("An error occurred: " + error.message);

b) throw Statement

Manually throws an exception.

function checkAge(age) {

if (age < 18) {

throw new Error("You must be 18 or older.");

return "Welcome!";

try {

console.log(checkAge(15));

} catch (error) {

console.log(error.message); // Outputs "You must be 18 or older."

You might also like