CSI REVISION

1. Declaring Variables in JavaScript

In JavaScript, variables can be declared using var, let, or const.

●​ var is the older way to declare variables. It is function-scoped, meaning it can be accessed
anywhere inside the function where it is declared.
●​ let is a newer way and is block-scoped, meaning it only works within the block (e.g., inside a
loop or condition) where it is declared.
●​ const is used for values that cannot be changed once declared. It is also block-scoped.

Example:

let age = 25; ​

const name = "Natasha";​
var city = "Dubai";

In JavaScript, we can declare variables using the var keyword along with the variable name. For
example, var fname declares a variable named fname. You can assign a value to the variable either
at the time of declaration or later. to declare two variables, num and name, and assign values to
them.

var num; ​
var name; ​
num = 2; ​
name = "Natasha";​

​
2. What is Python? What are its Features?
Python is a high-level, interpreted programming language known for its simplicity and readability. It is
widely used in web development, data analysis, artificial intelligence, automation, and more. Python
uses a clean and easy-to-understand syntax, which makes it easy to understand for beginners

●​ Easy to learn: Python has a straightforward syntax that is easy for beginners to understand.
●​ Extensive libraries: Python offers libraries for various tasks,
●​ Cross-platform compatibility: Python runs on many operating systems such as Windows,
macOS, and Linux.
●​ Python is open source
●​ Flexible programming styles: It supports object-oriented, and functional programming.
 ●​ Dynamic typing: You don’t need to declare the type of a variable; Python determines it
automatically.

3. Explain input() with Example

The input() function in Python is used to get input from the user. Whatever the user types is stored as
a string,as default. If you need to treat the input as a specific data type, you can convert it using
functions like int(), float(), etc. For example, if you want to get a number from the user, you can use
int() to convert the string input to an integer or float() to convert it to a floating-point number.

Example for text input:

name = input("What is your name? ")​

print("Hello, " ,name)​

4. Two Ways of Inserting Images in HTML5

Images can be added to an HTML5 webpage using the <img> tag and the <picture> tag.

1.​ Using the <img> tag:

The <img> tag is the simplest way to add images. It is used to insert simple or animated imgs, in a
webpage, the image formats that are supported by this tag is JPG,GIFT,PNG ,It mainly includes the
src attribute for the image path and the alt attribute for alternative text. Example:

<img src="image.jpg" alt="A beautiful scenery" width="500" height="300">​

2.​ Using the <picture> tag:

The <picture> tag is a new tag in HTML5 which giver more flexibility in specifying picture resources,It
allows us to provide multiple image options for different screen sizes or devices.

Example:

<picture>

<source srcset="image-large.jpg" media="(min-width: 800px)">​

<source srcset="image-small.jpg" media="(max-width: 799px)">

<img src="default.jpg" alt="A responsive image">

</picture>
5. Usage of alert() and prompt()
In JavaScript, alert() and prompt() are methods of window objects,used to interact with users via
pop-ups:

●​ alert():
It is the simplest dialogue box.Displays a simple pop-up message to the user. It is often used to show
notifications or warnings. The user can only close the pop-up by clicking "OK."

Example:

alert("Welcome to my website!");

This will display a message saying "Welcome to my website!" In a seperate small window box along
with a button OK.

●​ prompt():
The prompt dialogue box is also a method of window object. This method is used for getting an input
from the user,It displays a explorer user prompt dialogue box with a message and a input field.The
user can type a response, and the entered value is returned as a string.

Example:

let name = prompt("What is your name?");​

alert("Hello, " + name);​

If the user enters an vlaue it will be displayed in the webpage,if the user presses cancel,then the
value will be returned as null

6. What are Structural Elements? Name Three

Structural elements in HTML define the layout and organization of a webpage. They make the content
easier to understand and improve accessibility.

Examples of structural elements:

●​ <header>: Defines the header section of a webpage.
●​ <section>: Represents a thematic grouping of content.
●​ <footer>: Defines the footer of a webpage.
------------------------------------------------------------------------------------------------------------------------------------
Structural elements in HTML are tags that help organize and define the layout of a webpage, making
it more readable and accessible. These elements include tags like <header> for the top section of a
page, <section> to group related content, and <footer> for the bottom part containing details like
contact info. They improve the structure of the content and make it easier for both users and search
engines to navigate the page.Examples - nav,div,aside,article

7. Explain parseInt() and parseFloat()

The parseInt() and parseFloat() functions in JavaScript are used to convert strings into numbers.

●​ parseInt():
This function in javascript Converts a string into an integer by ignoring any decimal part. If the string
starts with non-numeric characters, it returns NaN.

Example:

parseInt("42"); // Output: 42​

parseInt("42.7"); // Output: 42 (decimal part ignored)​
parseInt("abc42"); // Output: NaN​

●​ parseFloat():
This function Converts a string into a floating-point number, including decimals. Non-numeric
characters after the number are ignored.

Example:

parseFloat("42.7"); // Output: 42.7​

parseFloat("3.14abc"); // Output: 3.14​
parseFloat("abc3.14"); // Output: NaN

LONG ANSWERS

1. HTML5 Tags and Examples

HTML5 introduces a variety of semantic tags that improve the structure and readability of web pages.
These tags give meaning to the content and help search engines and developers better understand
the purpose of each section. Key HTML5 tags include:
 1.​ <header> - represents the top section of a webpage or section, typically containing
introductory elements like the logo, navigation menus, or page titles. It helps organize and
define the purpose of the content at the start of a page or section.
Example:
<header>​
<h1>Welcome to Natasha's Blog</h1>​
<nav>​
<a href="#home">Home</a>​
<a href="#about">About</a>​
<a href="#contact">Contact</a>​
</nav>​
</header>​

2.​ <section>​
The <section> tag groups related content together into logical sections, often under a heading.
It helps improve the structure of a webpage by dividing it into meaningful segments, making
the content easier to navigate.
Example:
<section>​
<h2>About Our Services</h2>​
<p>We specialize in creating user-friendly and responsive web designs.</p>​
</section>​

3.​ <article>​
The <article> tag is used for self-contained content like blog posts, news articles, or
comments. Content within an <article> is meant to be reusable and can stand alone
independently.
Example:
<article>​
<h3>How to Start Coding</h3>​
<p>Learning to code begins with choosing the right language and practicing consistently.</p>​
</article>​

4.​ <footer>​
The <footer> tag defines the bottom section of a webpage or a specific content block. It often
includes information like copyright notices, author details, or contact links.
Example:
<footer>​
<p>&copy; 2025 Natasha's Blog. All rights reserved.</p>​
</footer>​
 5.​ <nav>​
The <nav> tag is used to define a navigation section containing links to other parts of the
website or external resources. It helps improve accessibility and user experience by organizing
navigation menus.
Example:
<nav>​
<ul>​
<li><a href="#home">Home</a></li>​
<li><a href="#about">About</a></li>​
<li><a href="#services">Services</a></li>​
</ul>​
</nav>​

6.​ <aside>​
The <aside> tag is used for content that complements the main content, such as sidebars,
advertisements, or related links. It is typically displayed to the side of the main content.
Example:
<aside>​
<h4>Related Articles</h4>​
<ul>​
<li><a href="#article1">5 Tips for Beginners</a></li>​
<li><a href="#article2">Top 10 Coding Resources</a></li>​
</ul>​
</aside>​

2. Types of Operators in JavaScript

●​ Arithmetic Operators: These operators are used for mathematical operations like addition,
subtraction, multiplication, division, and more. They are the most basic and commonly used
operators.

●​ Example:

let a = 10, b = 5;​

let sum = a + b; // Addition: 15​
let difference = a - b; // Subtraction: 5​
let product = a * b; // Multiplication: 50​
let division = a / b; // Division: 2​
let modulus = a % b; // Remainder: 0​
 ●​ Comparison Operators: These are used to compare two values. They return true or false
depending on the condition. Common operators include:
o​ == (equal to): Checks if values are equal.
o​ === (strict equal to): Checks if values and data types are equal.
o​ != (not equal to): Checks if values are not equal.
o​ < (less than) and > (greater than): Compare values numerically.

Example:

let x = 5, y = 8;​
console.log(x > y); // false​
console.log(x === 5); // true​
console.log(y !== 10); // true​

●​ Logical Operators: These operators are used to combine multiple conditions or check logical
relationships. The main logical operators are:
o​ && (AND): Returns true if all conditions are true.
o​ || (OR): Returns true if at least one condition is true.
o​ ! (NOT): Reverses the boolean value.

Example:

let age = 20;​

console.log(age > 18 && age < 30); // true (both conditions are true)​
console.log(age < 18 || age > 30); // false (both conditions are false)​
console.log(!(age > 18)); // false (reverses true to false)​

●​ Assignment Operators: These are used to assign values to variables. The simplest assignment
operator is =. Other operators like +=, -=, *=, etc., modify the variable and assign the new
value in one step.

Example:

let z = 10;​
z += 5; // z = z + 5 -> 15​
z *= 2; // z = z * 2 -> 30​

●​ String Operators: These operators are used to manipulate and combine strings. The most
common operator is the + operator for concatenation.

Example:
let firstName = "Natasha";​
let lastName = "Nambiar";​
let fullName = firstName + " " + lastName; // "Natasha Nambiar"​

Operators in JavaScript are versatile tools that make programming logic and calculations more
efficient. They play a crucial role in building dynamic and functional web applications.

3. Types of <script> Tag Usage in HTML

The <script> tag is used to embed or reference JavaScript code within an HTML document. It plays a
vital role in making web pages interactive and dynamic. There are three main ways to use the
<script> tag: internal, external, and inline. Each method has its advantages depending on the project
requirements.

1.​ Internal Script:

Internal scripts are written directly inside the <script> tag in the HTML file. This method is useful for
smaller projects or when the JavaScript code is specific to a single HTML file.

Example:

<!DOCTYPE html>​
<html>​
<head>​
<title>Internal Script Example</title>​
</head>​
<body>​
<h1>Welcome to My Website</h1>​
<script>​
alert("This is an internal script!");​
</script>​
</body>​
</html>​

While convenient, internal scripts can make the HTML file cluttered if there’s a lot of JavaScript code.

2.​ External Script:

External scripts are stored in a separate .js file, which is then linked to the HTML file using the src
attribute of the <script> tag. This method is preferred for larger projects as it keeps the HTML and
JavaScript code separate, improving code organization and reusability.
Example:

HTML File:
<!DOCTYPE html>​
<html>​
<head>​
<title>External Script Example</title>​
<script src="script.js"></script>​
</head>​
<body>​
<h1>Welcome to My Website</h1>​
</body>​
</html>​

JavaScript File (script.js):

alert("This is an external script!");​

External scripts allow developers to reuse the same JavaScript file across multiple HTML pages,
saving time and effort.

3.​ Inline Script:

Inline scripts are added directly inside the attributes of HTML elements, such as onclick,
onmouseover, etc. This method is simple but can make the code harder to maintain if overused.

Example:

<!DOCTYPE html>​
<html>​
<head>​
<title>Inline Script Example</title>​
</head>​
<body>​
<button onclick="alert('Button Clicked!')">Click Me</button>​
</body>​
</html>​

Inline scripts are best suited for small pieces of JavaScript code tied to specific elements.

Best Practices: For better maintainability and cleaner code, it’s recommended to use external scripts
for larger projects, while internal and inline scripts can be used for smaller, specific tasks.