CS_Python III & Web Dev III_G8_Coding_AY24 by Uolo

About the Book This coding book is supplementary to the main “Mel n Conji” content book. This book represents a 21st-century approach to learning coding concepts and developing computational thinking and problem-solving skills. To prepare students for the digital age, the curriculum is interwoven with well-thought-out concept graduation with real-life examples and practice problems.

Special Features • Illustrative approach: Concepts in coding and computer science are delivered through pictorial representations and learner-friendly approaches. • Learning through real-life examples: Age-appropriate examples that enable learners to relate to the concept and learn about the unknown from the known. • Extensive practice: Multiple practice scenarios to reinforce learnings. • Coding challenges: Includes projects through which learners can demonstrate their learning outcomes in coding and computer science.

About Uolo Uolo partners with K-12 schools to bring technology-based learning programs. We believe pedagogy and technology must come together to deliver scalable learning experiences that generate measurable outcomes. Uolo is trusted by over 10,000 schools across India, South East Asia, and the Middle East.

Singapore

CS_CB_Coding_Grade8_Cover.indd All Pages

Gurugram

Bengaluru

hello@uolo.com xxx

NEP 2020 based

NCF compliant

Technology powered

09/10/23 4:10 PM

Computer Science Computer Science

Python III Web Development III

CODE_ORG CODING BOOKLET_LO_ED_FM_P1.indd 1

10/13/2023 2:38:28 PM

CODE_ORG CODING BOOKLET_LO_ED_FM_P1.indd 2

10/13/2023 2:38:28 PM

Contents Python 1

Introduction to Python

Introduction to Python Python Data Types Variables

Operators

Python Strings

Conditional Statements Iterative Statements

2 Lists and Tuples in Python

Lists

Tuples

Difference Between Lists and Tuples 3 Python Libraries

Introduction to Python Libraries Standard Library of Python

Other Important Libraries of Python

Web Development 4 Introduction to HTML

What is HTML?

Basics of HTML

Basic Tags of HTML

Understanding CSS Adding Images Creating Links Adding Audio Adding Video

iii

CODE_ORG CODING BOOKLET_LO_ED_FM_P1.indd 3

10/13/2023 2:38:28 PM

5 JavaScript

What is JavaScript?

Writing First Program Using JavaScript Fundamentals of JavaScript

Conditional Statements in JavaScript 6 HTML Forms

What Are HTML Forms? Form Structure

Creating and Displaying a Form Form Attributes

Form Validation

Setting Properties of a Form Using Internal CSS

CODE_ORG CODING BOOKLET_LO_ED_FM_P1.indd 4

10/13/2023 2:38:28 PM

Introduction to Python

Introduction to Python Python is a dynamic programming language that is high-level, interpreted, and focused on code readability. Guido van Rossum, a developer, released it in 1991. Python is one of the world’s most popular and fastestgrowing programming languages. It is a sophisticated, adaptable, and user-friendly programming language. It is widely used in many organisations since it supports a variety of programming paradigms. It also manages memory automatically.

Features of Python Language

• Free and Open Source: Python is free and open-source software, which means you can download, use, and distribute it without cost.

• High-level Language: Python is a high-level programming language. • Interpreted: Python is an interpreted language. Unlike C and C++, there are no distinct compilation and execution steps. It can run the application directly from the source code.

• Simple and Easy to Learn: Python is a very simple and easy language, which makes it a popular choice for both students and experienced programmers.

• Platform Independent: Python can be used on a variety of operating systems, including Linux, Windows, Macintosh, Solaris, and others.

• Dynamic Typing: Python defines data type dynamically for the objects according to the value assigned. Also, it supports dynamic data types.

Python Syntax The rules that define the structure of a language are referred to as syntax.

• Like other programming languages, Python also has symbols, punctuation, and words. • Python is case-sensitive. This means that ‘nUm,’ ‘Num,’ and ‘num’ are all considered different things in Python. • Python follows indentation. The spaces at the beginning of a code line are referred to as indentation. Whereas indentation in code is just for readability in other programming languages, it is crucial in Python.

Python Data Types The type of a variable is specified using Python data types. The data type specifies the kind of information that will be kept in a variable. Different kinds of data can be stored in memory. For instance, a person’s address is stored as a string of alphanumeric letters, and his age is stored as a numeric value.

CO24CB0801.indd 1

10/13/2023 6:05:46 PM

Let us have a look at the various built-in data types available in Python: Data Type

Description

Example

Int

This data type is used for storing integers (whole var1 = 5 numbers), both positive and negative. var2 = –15

Float

The float data type is used to store positive and negative b=50.45 numbers with a decimal point.

Strings

Python Strings are identified as a contiguous set of name=”Anita” characters represented in quotation marks. It can be str1 = ‘Hello World!’ used to store text-based (collection of letters, words, and sentences) information. Python allows pairs of either single or double quotes.

List

A list is an orderly grouping of items. It can include list = [‘Steve’, 589, 5.56, ‘Elon’, 150.2] a variety of items, such as numbers, words, or even additional lists. Items in a list are enclosed in square brackets.

Tuple

A tuple is similar to a list in which its elements cannot tuple = (‘Steve’, 589, 5.56, ‘Elon’, 150.2) be modified once specified. It is like a predetermined list of items. Items of tuple are enclosed in parentheses.

Dictionary

A dictionary is a collection of key-value pairs that are Animals = {“lion”: “Lions are known as not ordered. It can be used to store and retrieve data, the kings of the jungle”, “elephant”: using particular keys. A dictionary functions as a book “Elephants have a great memory”} of definitions. Words serve as keys, and their definitions serve as values. Every word conveys a distinct meaning. Dictionaries are enclosed by curly braces { } and the individual keys are separated from their values by colons.

Boolean

A Boolean is a built-in data type that represents one of x = True # display the value of x two values: True or False. y = False # display the value of y Boolean data type is often used for making decisions and controlling the flow of a program.

Set

A set is an unordered collection of unique elements. favourite_fruit = {“Mango”, “Peach”, It is a data type that allows for the storage of many “Kiwi”} values while automatically removing duplicates.

Variables If we need to store something in real life, we need a container or box to do so. The variables in Python represent containers for storing data of various types, such as int, float, string, Boolean, list, tuple, etc. The reserved memory areas used to hold values in a Python program are known as variables.

CO24CB0801.indd 2

10/13/2023 6:05:46 PM

Creating Variables To reserve memory space for a variable or to assign values to variables, you can use the equal sign (=). The name of the variable is written to the left of the ‘=’ operator, and the value is written to the right. Example: Code ctr = 1000 # Creates an integer variable distance = 1000.0 # Creates a float variable str1 = “Sunita Sood” # Creates a string variable

Rules for Naming a Variable

• A variable name starts with a letter or the underscore character. It cannot start with a number or any special character like $, (, *, %, etc.

• A variable name can only contain alpha-numeric characters. • Python variable names are case-sensitive, which means str1 and STR1 are two different variables in Python. • Python keywords cannot be used as variable names. Printing Python Variables The print() function can be used to output a Python variable. Example: Code

Output

ctr = 1000 distance = 1000.0 str1 = “Sunita Sood” print(ctr) print(distance) print(str1)

1000 1000.0 Sunita Sood

Multiple Assignments You can create several variables at once with Python because it allows you to assign a single value to many variables at once. Example: Assignment of single value to many variables. Code

Output

a = b = c = 700 print (a) print (b) print (c)

700 700 700

Chapter 1 • Introduction to Python

CO24CB0801.indd 3

10/13/2023 6:05:46 PM

Example: Assignment of multiple values to multiple variables. Code

Output

x, y, z = 111, 112, “Sunita Sood” print (x) print (y) print (z)

111 112 Sunita Sood

Dynamic Typing In Python, when you assign a value to a variable, you do not need to define the variable’s type like in other languages. However, you can check the data type of a variable by using the type() function. Python specifies the kind of variable used during program execution. This concept is known as dynamic typing. Example: Code

Output

y = [11, 12, 13] print(type(y)) y = True print(type(y))

# assigning a value to a variable # y is a list here # reassigning a value to the ‘y’ # y is a bool here

Do It Yourself 1A Identify and write valid or invalid for the following variable names. Ctr

ctr

name1

city:Delhi

age

$ctr

name-1

1ctr

Operators Operators are predefined symbols that perform operations on one or more operands. The Python language supports the following types of operators:

• Arithmetic operators • Assignment operators • Comparison operators • Logical operators

Let us have a look at all the operators one by one. Arithmetic operators are used with numeric values to perform common mathematical operations. Consider x=10 and y=3: Operator

Name

Example

Output

Addition

x+y

Subtraction

x-y

CO24CB0801.indd 4

10/13/2023 6:05:46 PM

Operator

Name

Example

Output

Multiplication

x*y

Division

x/y

3.3333

Modulus (Remainder)

x%y

Floor division

x//y

Exponentiation (Power)

x ** y

1000

Precedence of Arithmetic Operators in Python Operator precedence describes the order in which operations are performed. The precedence of Arithmetic Operators in Python is as follows:

• B—Brackets • E—Exponentiation • M—Multiplication (multiplication and division have the same precedence) • D—Division • A—Addition (addition and subtraction have the same precedence) • S—Subtraction

Did You Know? The ‘#’ operator is used for giving comments in a Python program.

Assignment operators are used to assign values to variables. Consider the variable x and let us assign values to it. Operator

Example

Same As

x = 15

x += 13

x = x + 13

x *= 13

x = x * 13

x %= 13

x = x % 13

**=

x **= 13

x = x ** 13

x -= 13

-= /=

x = x - 13

x /= 13

//=

x = x / 13

x //= 13

x = x // 13

Comparison operators are used to compare two values. Consider x=10 and y=3: Operator

Name

Example

Output

Equal to

x == y

False

Not equal to

x != y

True

Greater than

x>y

True

Less than

x<y

False

Greater than or equal to

x >= y

True

Less than or equal to

x <= y

False

Chapter 1 • Introduction to Python

CO24CB0801.indd 5

10/13/2023 6:05:46 PM

Did You Know? Python gives more precedence to arithmetic operators than comparison operators. Within comparison operators, every operator has the same precedence order.

Think and Tell What will be the output of the following?

• print(10+15/5*6//2) • print(10>5+3–1)

Logical operators are used to combine conditional statements. Operator

Description

Example

Output

and

Returns True, if both the statements are true

x < 5 and x < 10

False

Returns True, if one of the statements is true

x < 5 or x < 4

False

not

Reverse the result, that is, returns False, if the result is true

not(x < 5 and x < 10)

True

Python Strings In Python, a sequence of characters is called a String. A string cannot be changed once it has been formed because it is an immutable data type. The storage and manipulation of text data, as well as the representation of names, addresses, and other sorts of information that can be represented as text, are all common uses of strings.

Creating a String in Python

Did You Know? A single character in Python is just a string of length 1, since there is no such thing as a character data type.

In Python, single, double, or even triple quotes can be used to create strings. Let us define a string with the help of a few examples: Code

Output

String1 = ‘Welcome to the World of Python’

Single Quote String

print(“Single Quote String”) print(String1)

# Creating a string using double quotes String1 = “I am using Python”

print(“\n String with double quotes”) print(String1)

Welcome to the World of Python String with double quotes I am using Python

String with triple quotes

I am using Python and I live in a world of “Python”

# Creating a string with triple quotes

CO24CB0801.indd 6

10/13/2023 6:05:46 PM

Code

Output

String1 = ‘’’I am using Python and I live in a world of Multiline String “Python”’’ Programmer print(“\n String with triple quotes”) For print(String1)

Life

# Creating triple Quotes String with multiple lines String1 = ‘’’Programmer For

Life’’’

print(“\n Multiline String”) print(String1)

Note that ‘\n’ is an escape character used to create a new line. The text written after ‘\n’ character comes in the new line.

Concatenating Two or More Strings Two strings can be concatenated or joined with the plus ‘+’ symbol. Let’s understand it with the help of an example: Program

Output

# concat strings with +

Welcome to World of Python

str1 = “Welcome to”

str2 = “World of Python”

sentence = str1 + ‘ ‘ + str2 print(sentence)

Replacing a String If you wish to replace a string, just call the replace() function on any string and specify the string you want to replace it with. Let’s understand it with the help of an example: Program

Output

sentence = “Welcome to World of Python”

Welcome to World of Python

print(sentence)

print(sentence.replace(“Python”,”Disneyland”))

Welcome to World of Disneyland

Accessing Characters in Python String

• The indexing method in Python can be used to access specific characters within a String. • Through indexing, characters at the beginning of the string can be accessed using positive address references,

starting from 0 for the first character, 1 for the next character, 2 for the next to the next character (as shown in the image), and so on.

• Through indexing, characters at the end of the string can be accessed using negative address references, such as –1 for the last character, –2 for the next-to-last character, and so on.

Chapter 1 • Introduction to Python

CO24CB0801.indd 7

10/13/2023 6:05:46 PM

-12

-11

-10

-9

-8

-7

6 -6

-5

-4

-3

-2

-1

Let us understand it with the help of an example: In this example, we will define a string in Python and access its characters using positive and negative indexing. The 0th element will be the first character of the string, whereas the –1th element is the last character of the string. Code

Output

String1 = “Python World”

Initial String:

print(“Initial String: “) print(String1)

# Printing First character

print(“\nFirst character of String is: “) print(String1[0])

print(String1[-12])

Python World First character of String is: P P

# Printing Last character

Last character of String is:

print(String1[-1])

print(“\nLast character of String is: “) print(String1[11]) # Printing Fifth character

print(“\nFifth character of String is: “) print(String1[4])

Fifth character of String is: o o

print(String1[-8])

String Slicing The string slicing function in Python is used to gain access to a selection of characters in the String. A colon (:), known as a “slicing operator”, is used to access a part of the string.

• The string provided after slicing includes the character at the start index but not the character at the last index, so keep that in mind while using this method.

• Subsets of strings can be taken using the slice operators ([ ] and [:]) with indexes starting at 0 at the beginning of the string and working their way from -1 at the end.

Let us understand it with the help of an example: In the following example, we will slice the original string in order to extract a substring. The expression [4:12] indicates that the string will be divided into segments starting at index 4 and continuing through index 11. In string slicing, negative indexing is another option. Code

Output

# Creating a String String1 = “Python World” print(“Initial String: “) print(String1)

Initial String:

Python World

CO24CB0801.indd 8

10/13/2023 6:05:46 PM

Code

Output

# Printing 4th to 12th character print(“\nSlicing characters from 4-12: “) print(String1[4:12])

Slicing characters from 4-12: on World

# Printing characters between 4th and 3rd last character print(“\nSlicing characters between 4th and 3rd last Slicing characters between 4th and 3rd last character: character: “) print(String1[4:-3]) on Wo Code

Output

str2 = ‘Hello Sunita’ print (str2) # Prints complete string print (str2[0]) # Prints first character of the string print (str2[2:5]) # Prints characters starting from 3rd to 5th print (str2[2:]) # Prints string starting from 3rd character print (str2 * 2) # Prints string two times print (str2 + “TEST”) # Prints concatenated string

‘Hello Sunita’ H llo llo Sunita Hello SunitaHello Sunita Hello SunitaTEST

Conditional Statements In real life, there are times when we must make choices, and based on those choices, we determine what to do next. Programming encounters similar scenarios where we must make choices and then carry out the following block of codes in accordance with those choices. The programming languages use conditional statements that make decisions to control the direction or flow of the program execution. Conditional statements are also known as decision-making statements.

Types of Conditional Statements In the Python programming language, the types of conditional statements are: 1

The if statement

The if-else statement

The if-elif-else Statement

The if Statement The simplest statement for making decisions is the if statement. If the condition associated with the if is true, then only it will execute a specific statement or block of statements associated with if; otherwise, it will skip the statements. Syntax: if condition: # statements to execute if # condition is true

Chapter 1 • Introduction to Python

CO24CB0801.indd 9

Did You Know? Python uses indentation to identify a statement associated with if.

10/13/2023 6:05:47 PM

Let us understand this with the help of an example given below. Code

Output

# Python program to illustrate if statement

I am Not in if

i =10

if(i> 15):

print(“10 is greater than 15”) #indented statement

print(“I am Not in if”)

In the above example, the value of i (10) is not greater than 15. So, the condition is false, and it will not execute the statement associated with the if statement. Another example: Code

Output

a = 133

b is greater than a

b = 1200 if b > a:

print(“b is greater than a”)

In the above example, the value of b is greater than the value of a. So, the condition is true, and thus it will execute the statement associated with if. Flowchart of if Statement Test Expression

False

True Body of if

Statement just below if

The if-else Statement The if statement alone tells us that if a condition is true, a block of statements will be executed; if the condition is false, the block of statements will not be executed. However, if we want to do something different if the condition is false, we may use the else statement in conjunction with the if statement to execute a block of code when the condition is false. Syntax: if (condition): # Executes this block if # condition is true

CO24CB0801.indd 10

10/13/2023 6:05:47 PM

else: # Executes this block if # condition is false Flowchart of Python if-else Statement

Test Expression False

True Body of if

Body of else

Statement just below if

Let us understand it with the help of an example: Code

Output

i = 220 if (i< 155): print(“i is smaller than 155”) print(“I’m in if Block”) else: print(“i is greater than 155”) print(“I’m in else Block”) print(“i’m not in if and not in else Block”)

i is greater than 155 I’m in else Block I’m not in if and not in else Block

In the above example, after invoking the statement that is not in the block (without spaces), the block of code that follows the else statement is executed since the condition in the if statement is false. Short Hand if-else Statement When only one statement is required in both the if and else blocks, this can be used to write the if-else statements on a single line. Syntax: statement_when_True if condition else statement_when_False Let us illustrate this with the help of an example. In the given example, we are printing True if the number is less than 145; otherwise, it will print False. Program

Output

i = 10

True

print(True) if i< 145 else print(False)

Chapter 1 • Introduction to Python

CO24CB0801.indd 11

10/13/2023 6:05:47 PM

The if-elif-else Statement Sometimes, we need to evaluate multiple conditions. In such cases, we use the ‘elif’ statement, which stands for ‘else if’. It allows us to check multiple conditions in sequence, and Python checks each condition until one of them is True. Syntax: if condition_1: Statement_1 elif condition_2: Statement_2 .. .. else: Statement_n If condition_1 becomes True, Statement_1 will be executed, otherwise, the interpreter moves on to condition_2 and if it becomes True then it will execute Statement_2. This process continues until a True condition is found, otherwise the ‘else’ statement (Statement_n) will be executed if none of the conditions is True. Code

Output

number = int(input(“Enter a number: “))

Enter a number: 23

if number > 0:

The number is positive.

print(“The number is positive.”) elif number < 0: print(“The number is negative.”) else: print(“The number is zero.”)

Iterative Statements Loops are useful in Python because they allow you to execute a block of code repeatedly. You will frequently encounter circumstances in which you will need to utilise a piece of code repeatedly but do not want to write the same line of code several times. Then those repeated sets of statements can be enclosed within a loop. Python has two primitive loop statements:

• while loop • for loop

The while Loop With the while loop, we can execute a set of statements as long as the condition is true. Syntax: while expression: statement(s)

CO24CB0801.indd 12

10/13/2023 6:05:47 PM

Flowchart of while Loop A block of code consists of all the statements that follow a programming construct and are indented by the same number of character spaces. Python groups statements together with the same indentation. In the while loop, the condition is assessed initially in a Boolean context. If it returns True, the loop body is executed. The expression is then verified again, and if it is still True, the body is executed again, and so on until the expression becomes False. Let us illustrate this with the help of an example.

Code

Output

#Python program to print “Hello” 5 times

Hello

while (count < 5):

Hello

count = 0

count = count + 1 print(“Hello”)

Enter while loop

Test Expression

False

True Statements

Exit while loop

Hello Hello Hello

The count variable is considered as a counter for loop to control the iterations. Remember to increment the count variable, or else the loop will continue forever. Code

Output

#Python program to print 1 to 5

while (count < 5):

count = 0

count = count + 1 print(count)

2 4 5

Single Statement while Block If the while block consists of a single statement, we can define the entire loop in a single line, just like the if block. If there are numerous statements in the loop body block, they can be separated by semicolons (;). Let us illustrate this with the help of an example: Code

Output

# Program to illustrate single statement while block

Hello

count =0

Hello

while(count < 5): count +=1; print(“Hello”)

Hello Hello Hello

Chapter 1 • Introduction to Python

CO24CB0801.indd 13

10/13/2023 6:05:47 PM

Loop Control Statements Loop control statements change the execution of the statements from their normal sequence. There are two types of loop control statements:

• The continue Statement

The Python continue statement returns control to the beginning of the loop. Let us illustrate this with the help of an example: Code

Output

# Python program to Print all letters except ’i’ and ‘o’

Current Letter : T

i=0 a = ‘This is Python’ while i<len(a): if a[i] == ‘i’ or a[i] == ‘o’: i += 1 continue print(‘Current Letter :’, a[i]) i += 1

• The break Statement

Current Letter : h Current Letter : s Current Letter :

Current Letter : s Current Letter :

Current Letter : P Current Letter : y Current Letter : t

Current Letter : h Current Letter : n

The Python break Statement brings control out of the loop. Let us illustrate this with the help of an example: Code

Output

# Program to break the loop as soon it sees ‘e’ or ‘s’

Current Letter : T

i=0

a = ‘This is Python’ while i<len(a):

Current Letter : h Current Letter : i

if a[i] == ‘e’ or a[i] == ‘s’: i += 1 break print(‘Current Letter :’, a[i]) i += 1

The for Loop The for loop is used to iterate over an iterable like a string, tuple, list, set, or dictionary sequentially. Syntax: for var in iterable: # statements

CO24CB0801.indd 14

10/13/2023 6:05:47 PM

Flowchart of for Loop

• The iterable in this case is a group of items like lists and tuples.

• For each item in an iterable, the indented statements inside the for loops are once again executed. Every time the loop is executed, the variable var is set to the value of the iterable’s subsequent item.

• The Python for loop is used to iterate over an iterable like a string, tuple, list, set, or dictionary sequentially.

For each item in sequence

Last item reached?

True

False Statements

Exit for loop

Let us illustrate this with the help of an example: This code employs a for loop to cycle through a list of strings, printing each item on a new line. The loop assigns each item to the variable ‘i’ and repeats until the entire list has been iterated. Code

Output

# Python program to illustrate Iterating over a list

Watermelon

fruits = [“Watermelon”, “Kiwi”, “Jackfruit”] for i in fruits: print(i)

Kiwi Jackfruit

The range() Function Python provides range() function to generate a set of numbers within the specified range. This function can be used with loops in Python. Syntax: range(start, stop, step) Here, start: The starting value of the sequence (default is 0). stop: The end value of the sequence (not included). step: The step between numbers in the sequence (default is 1). We can skip start and step values. In that case Python considers the default values of these two parameters. Let us understand this with an example. Code

Output

#Python Program to print from 9 to 14

for i in range(9,15): print(i)

10 11 12 13 14

Chapter 1 • Introduction to Python

CO24CB0801.indd 15

10/13/2023 6:05:47 PM

Python for Loop with a Step Size This code generates a series of numbers with a step size of 2, starting from 9 and going up to (but not including) 15, using a for loop and the range() function. The loop uses the print() method to print the value of each number in the series. The numbers 9, 11, and 13 will be displayed in the output. Code

Output

#Program to print from 9 to 14 with a step value of 2 for i in range(9,15,2): print(i)

Code

Output

11 13

#Program to print even numbers starting from 220 till 230 220 for i in range(220,232,2): 222 print(i) 224 226 228 230 Code

Output

#Program to iterate over a range of characters my_string = “This is Python!” for i in range(4, 12): print(my_string[i])

s P y t

h Solved Examples Example 1.1 # Python Program to reverse a number using while loop Code

Output

n=int(input(“Enter number: “))

Enter number: 8709

rev=0

while(n>0):

Reverse of the number: 9078

dig=n%10

rev=rev*10+dig n=n//10

print(“Reverse of the number:”,rev)

CO24CB0801.indd 16

10/13/2023 6:05:47 PM

Example 1.2 #Python program to count the number of digits in a number Code

Output

Enter number:652348 n=int(input(“Enter number:”)) count=0 The number of digits in the number are: 6 while(n>0): count=count+1 n=n//10 print(“The number of digits in the number are:”,count) Example 1.3 #Python program to count the number of vowels in a string Code

Output

string=input(“Enter string:”) vowels=0 for i in string: if(i==’a’ or i==’e’ or i==’i’ or i==’o’ or i==’u’ or i==’A’ or i==’E’ or i==’I’ or i==’O’ or i==’U’): vowels=vowels+1 print(“Number of vowels are:”, vowels)

Enter string:ritu

Number of vowels are: 2

Example 1.4 #Python program to count number of lowercase characters in a string Code

Output

string=input(“Enter string:”) count=0 for i in string: if(i.islower()): count=count+1 print(“The number of lowercase characters is:”, count)

Enter string:Ritu Singh

The number of lowercase characters is: 7

Example 1.5 #Python program to count the number of words and characters in a string Code

Output

string=input(“Enter string: “)

Enter string: Ritu is a good girl

word=1

Number of characters in the string: 19

char=0

for i in string:

Number of words in the string: 5

char=char+1 if(i==’ ‘):

word=word+1

print(“Number of words in the string:”, word)

print(“Number of characters in the string:”, char) Chapter 1 • Introduction to Python

CO24CB0801.indd 17

10/13/2023 6:05:47 PM

Do It Yourself 1B 1

Write a Python program to find the sum of digits in a number.

Write a Python program to display the multiplication table of the entered number.

Write a Python program to convert Celsius to Fahrenheit.

Chapter Checkup A

Fill in the Blanks. Hints

iterate

indentation

end

dictionary

precedence

In Python,

defines a block of statements.

Operator

The for loop in Python is used to

over a sequence or other iterable objects.

The continue keyword is used to

the current iteration in a loop.

describes the order in which operations are performed.

is a collection of key-value pairs that are not ordered.

CO24CB0801.indd 18

10/13/2023 6:05:47 PM

Tick () the Correct Option. 1

Among the following, who is the developer of Python programming?

Guido van Rossum

Denis Ritchie

Y.C. Khenderakar

None of these

List, tuple, and set are the

of data types.

Sequence Types

Binary Types

Boolean Types

None of these

What is the name of the operator ** in Python?

Exponentiation

Modulus

Floor division

Multiplication

Conditional statements are also known as

statements.

Decision-making

Array

List d

Loops

What will be the output of the following Python code?

a=7

if a>4: print(“Greater”)

Greater b

4 d

No output

Who Am I? 1

I am a comparison operator that is used to check the equality of two values.

I am one of the conditional statements in Python that allows you to check multiple conditions.

I am a statement in Python that ends the execution of a loop.

I am a function in Python that is used to generate a set of numbers within the specified range.

I am a built-in data type in Python which represents one of two values: True or False.

Chapter 1 • Introduction to Python

CO24CB0801.indd 19

10/13/2023 6:05:48 PM

Write T for True and F for False. 1

The type () function can be used to get the data type of any object.

The % operator returns the quotient.

The if statement is the most fundamental decision-making statement.

In Python, an else statement comes right after the block after ‘if’.

Loop control statements change the execution of the statements from their normal sequence.

Answer the Following. 1

Differentiate between a for loop and a while loop.

Differentiate between break and continue statement.

What are the different rules for declaring a variable?

Apply Your Learning. 1

Write a Python program that accepts a string and calculates the number of digits and letters.

CO24CB0801.indd 20

10/13/2023 6:05:48 PM

Write a Python program to check whether a letter is a vowel or a consonant.

Write a program to calculate the area of equilateral triangle having a side of 7 cm.

Write a Python program to get the next number and previous number of a given number.

Chapter 1 • Introduction to Python

CO24CB0801.indd 21

10/13/2023 6:05:48 PM

Lists and Tuples in Python

Lists Lists are a fundamental data type in Python. It is a collection of various kinds of values. It can hold multiple values in a single variable. In Python, lists are used to store multiple values simultaneously. Python includes a built-in list type named “list”. In lists, items are written within square brackets [ ]. A list can:

• Store different types (integer, float, string, etc.) of elements. • Store duplicate elements. • Store the elements in an ordered manner. Example: mylist = [2, 4, 6, 8, 10, 12]

Characteristics of Lists The characteristics of the lists are given below:

• Ordered: In a list, the values or items have a defined order, and this order does not change. If you add new values to a list, they are placed at the end of the list.

• Accessed via the Index: You can access list elements using an index, which starts at 0. Hence, the first element of a list is present at index 0, not 1.

• Allows Duplicate Values: A list can contain duplicate values. Since values are indexed in a list, it can have items with the same value but a different index.

• Mutable: The meaning of mutable is “liable to change”. In Python, list items are mutable. It means elements of the list can be modified, individual elements can be replaced, and the order of elements can be changed even after the list has been created.

• Variable Size: Lists can store a variable number of elements, allowing you to store and manage different quantities of data.

Creating a List in Python In Python, you can create a list by enclosing the values or elements within square brackets [ ], separated by commas. There is no need for a built-in function to create a list. Syntax: list_name = [element_1, element_2, … , element_n]

CO24CB0802.indd 22

10/13/2023 6:05:59 PM

Example: Suppose you need to record the percentage of marks for six students. For this, you can simply create a list. Code

Output

markslist = [70, 88, 90.2, 75, 68, 59.5]

[70, 88, 90.2, 75, 68, 59.5]

print(markslist) Creating a List with Duplicate Elements A list can have duplicate values. Let us see the following example: Code

Output

list = [3, 4, 9, 3, 8, 9]

[3, 4, 9, 3, 8, 9]

print(list) Creating a List with Mixed Types of Elements You can have elements of different data types in a list. They can be of numeric type, string type, Boolean type, etc. Example: Code

Output

list1 = [“Ankit”, 34, False, 55.5, “Mala”]

[‘Ankit’, 34, False, 55.5, ‘Mala’]

print(list1)

Accessing Elements of a List Indexing is used in Python to access list elements. Suppose there are n number of elements in a list. Therefore, the list indexing will start at 0 for the first element and n-1 for the last element. You can use these index values to access the items in the list. The index must be an integer. Let us see how to access elements in a list. Look at the following image to understand the concept of indexing: length = 6

index

‘p’ ‘y’

‘t’

‘h’ ‘o’ ‘n’

Example: Print the third and fifth item of the list. [Hint: The third element has an index 2 and the fifth 4.] Code

Output

markslist = [70, 88, 90.2, 75, 68, 59.5]

90.2

print(markslist[2])

print(markslist[4]) Chapter 2 • Lists and Tuples in Python

CO24CB0802.indd 23

10/13/2023 6:05:59 PM

List Methods Python has a set of built-in methods that you can use on lists. append(): This method is used to add an element at the end of the list. An element can be of any type (string, number, object, etc.). Syntax: list.append(element)

For example, add the item “eggs” to the shopping_list = [“bread”, “butter”, “milk”, “apples”]. Code

Output

shopping_list = [“bread”, “butter”, “milk”, “apples”]

[‘bread’, ‘butter’, ‘milk’, ‘apples’, ‘eggs’]

shopping_list.append(“eggs”) print(shopping_list) clear(): This method is used to remove all the elements from the list. Syntax: list.clear()

For example, remove all elements from the shopping_list = [“bread”, “butter”, “milk”, “apples”]. Code

Output

shopping_list = [“bread”, “butter”, “milk”, “apples”] shopping_list.clear() print(shopping_list)

[]

count(): This method is used to return the number of the specified element. Syntax: list.count(value)

For example, To count the number of times the value ‘3’ appears in the list = [3, 4, 9, 3, 8, 9]: Code

Output

list = [3, 4, 9, 3, 8, 9] x=list.count(3) print(x)

pop(): This method is used to remove the element at the specified position. Syntax: list.pop(position)

For example, remove the third element from the list = [3, 4, 9, 3, 8, 9]. [Hint: The third element has an index 2.] Code

Output

list = [3, 4, 9, 3, 8, 9]

[3, 4, 3, 8, 9]

list.pop(2) print(list) Note: If the position is not specified, by default, the pop() method removes the last element from the list. remove(): This method is used to remove the first occurrence of the specified element. Syntax: list.remove(element)

CO24CB0802.indd 24

10/13/2023 6:05:59 PM

For example, remove 3 from the list = [3, 4, 9, 3, 8, 9]. Code

Output

list = [3, 4, 9, 3, 8, 9]

[4, 9, 3, 8, 9]

list.remove(3) print(list)

index(): This method is used to find the position of the first occurrence of the specified element. Syntax: list.index(value) For example, find the first occurrence of the value 9, and return its position in the list = [3, 4, 3, 9, 8, 9]. Code

Output

list = [3, 4, 3, 9, 8, 9]

x = list.index(9) print(x)

sort(): This method is used to sort the list in ascending order, by default. To sort the list in descending order, the attribute reverse is used. If its value is set to ‘True’, then the list will be sorted in descending order. Syntax: list.sort() Example 1: Sort the list = [3, 4, 9, 3, 8, 9] in ascending order. Code

Output

list = [3, 4, 9, 3, 8, 9]

[3, 3, 4, 8, 9, 9]

list.sort()

print(list) Example 2: Sort the list = [3, 4, 9, 3, 8, 9] in descending order. Code

Output

list = [3, 4, 9, 3, 8, 9]

[9, 9, 8, 4, 3, 3]

list.sort (reverse=True) print(list)

Solved Examples Example 2.1 Create a list of subjects (Maths, English, Science, Hindi, and Computer). Print all subjects in the list, one by one. Ans:

Code

Output

subject_list = [“Maths”, “English”, “Science”, “Hindi”, Maths “Computer”] English for x in subject_list: print(x)

Science Hindi

Computer

Chapter 2 • Lists and Tuples in Python

CO24CB0802.indd 25

10/13/2023 6:05:59 PM

Example 2.2 Sort the list alphabetically: List [s, u, n, s, c, r, e, e, n] Ans: Code

Output

list = [“s”, “u”, “n”, “s”, “c”, “r”, “e”, “e”, “n”]

[‘c’, ‘e’, ‘e’, ‘n’, ‘n’, ‘r’, ‘s’, ‘s’, ‘u’]

list.sort() print(list)

Tuples A tuple is an ordered, immutable collection of things or values. Tuples are sequences, just like lists, but they cannot be modified, unlike lists. Lists use square brackets, while tuples use parentheses () to enclose the elements. Tuples are faster than lists. For example, mytuple = (1, 2, 3, 4, 5)

Characteristics of Tuples The characteristics of tuples are given below:

• Ordered: In a tuple, the values or items have a defined order, and this order does not change. • Accessed via the Index: The tuple element can be accessed via the index. It means that the tuple index always starts with 0. Hence, the first element of a tuple is present at index 0, not 1.

• Immutable: The tuple items are immutable. The meaning of immutable is “unable to be changed”. It means that we cannot add, modify, or remove items in a tuple after it has been created.

• Allows Duplicate Values: A tuple can contain duplicate values. Since values are indexed in a tuple, it can have items with the same value and a different index.

Creating a Tuple In Python, you can create a tuple by placing the values or elements inside the parentheses ( ), separated by commas. Syntax: tuple_name = (element_1, element_2, … , element_n) Creating a Tuple with a Single Item To create a tuple with a single item, you have to add a comma after the item; otherwise, Python will not recognise it as a tuple. Example: Code

Output

mytuple = (“Delhi”,)

Delhi

print(mytuple)

CO24CB0802.indd 26

10/13/2023 6:05:59 PM

Creating a Tuple with Duplicate Elements A tuple can contain duplicate elements. Their index values will be different. Example: Code

Output

tuple = (3, 4, 9, 6, 4, 9)

(3, 4, 9, 6, 4, 9)

print(tuple) Creating a Tuple with Mixed Elements A tuple can have elements of mix data type. Example: Code

Output

tuple = (“Delhi”, 4, 9, “Japan”, 4, 9)

(‘Delhi’, 4, 9, ‘Japan’, 4, 9)

print(tuple)

Accessing Elements of a Tuple Indexing is used in Python to access tuple elements. You can access a tuple entry using indexing. In Python, tuple indexing starts at 0 for the first element. You can use the index operator [ ] to access an item in a tuple. The index must be an integer. Here is how you can access elements in a tuple: For example: Print the first item in the tuple. Code

Output

tuple1 = (“Delhi”, “Punjab”, “Haryana”, ”Gujarat”)

Delhi

print(tuple1[0])

Tuple Methods Python has two built-in methods that you can use on tuples. count(): This method is used to compute the occurrence of a specified value that appears in the tuple. Syntax: tuple.count(value) Example: How many times the value 9 appears in the tuple = (3, 4, 9, 6, 4, 9)? Code

Output

tuple = (3, 4, 9, 6, 4, 9)

x = tuple.count(9) print(x) Index(): This method is used to find the position of the first occurrence of the specified value. Syntax: tuple.index(value) Chapter 2 • Lists and Tuples in Python

CO24CB0802.indd 27

10/13/2023 6:05:59 PM

Example: Find the first occurrence of the value 9, and return its position in the tuple = (3, 4, 9, 6, 4, 9). Code

Output

tuple = (3, 4, 9, 6, 4, 9)

x= tuple.index(9) print(x)

Deleting Elements of a Tuple As you are aware, the tuple items are immutable. It implies that once a tuple is created, its elements cannot be changed, added to, or removed without creating a new tuple. However, there is a workaround using the steps that follow:

• You can convert the tuple into a list • Change the list • Convert the list back into a tuple

Example: Convert the tuple into a list, remove “Haryana”, and convert it back into a tuple: Code

Output

tuple1 = (“Delhi”, “Punjab”, “Haryana”, “Gujarat”)

(‘Delhi’, ‘Punjab’, ‘Gujarat’)

x = list(tuple1) x.remove(“Haryana”) tuple1 = tuple(x) print(tuple1) mytuple = (“Delhi”) print(mytuple) Solved Examples Example 2.3

Combine or merge two given tuples. tuple1 = (1, 3, 5) tuple2 = (2, 4, 6) Ans:

Think and Tell Are lists and tuples heterogeneous or homogeneous data structures?

Tuple concatenation is used to merge the tuples. Code

Output

tuple1 = (1, 3, 5)

(1, 2, 3, 4, 5, 6)

tuple2 = (2, 4, 6)

result_tuple = tuple1 + tuple2 print(result_tuple) Example 2.4 Multiply the given tuple by 3. tuple1 = (1, 2, 3) You can use the ‘*’ operator to multiply the tuple. This feature is known as replicating a tuple.

CO24CB0802.indd 28

10/13/2023 6:06:00 PM

Code

Output

tuple1 = (1, 2, 3)

(1, 2, 3, 1, 2, 3, 1, 2, 3)

tuple1 = tuple1*3 print(tuple1)

Difference Between Lists and Tuples Lists and tuples are both used to store items and organise data. They are a fundamental concept in Python. But they have a major difference. In lists, the elements can be changed after they are defined, while in tuples, the elements cannot be changed at all. In real-life, you might use a shopping list where items can be added, removed, or modified. The tuples can be used to represent days of the week, as these do not change. S. No.

Lists

Tuples

Lists are mutable.

Tuples are immutable.

You can easily insert or delete data items in a list. You cannot directly insert or delete data items in a tuple.

Lists have several built-in methods.

Lists are generally slightly slower than tuples Tuples are faster than lists. because of their mutability.

Lists are created using square brackets [].

Tuples are created using parentheses ().

Example: list1 = [1, 2, 3]

Example: tuple1 = (1, 2, 3)

Due to immutability, a tuple does not have many builtin methods.

Do It Yourself 2A 1

Create a tuple of vegetables (potato, tomato, brinjal, ginger, garlic). Print all vegetables in the tuple, one by one.

Make a list of the things you want to buy and write a Python code that organises the list alphabetically.

Chapter Checkup A

Fill in the Blanks. Hints 1

A list can contain

Tuples are

Lists are

Tuples are

The

mutable

unlimited

immutable

reverse

elements. than lists. . . attribute of sort() method is used to reverse the order of the list.

Chapter 2 • Lists and Tuples in Python

CO24CB0802.indd 29

faster

10/13/2023 6:06:00 PM

Tick () the Correct Option. 1

The list.pop() function will:

remove the first element from the list.

b remove the last element from the list.

remove both first and last elements.

not remove any element from the list.

Which of the following are true about Python lists?

There is no limit to the size of a list.

b All elements in a list must be of the same size.

A list may contain the same type of objects.

A list is immutable.

List L is given below:

L = [0, 1, 2, 3, 4]

Choose the correct answer to delete the element 3 from the list.

L.delete(3)

del L[2] d

b L.remove(3) L.pop(3)

Which of the following is mutable?

String b List

Tuple d

Set

What will be the output of the given code?

tuple = (1, 8, 7, 5, 4, 8, 5)

x = tuple.count(5)

print(x) a C

7 b 2

5 d

Who Am I? 1

I am a method that helps to sort a list.

I am a collection of values which is ordered and unchangeable.

I am a dynamic and change-oriented collection of values.

I am a method that helps to add an element at the end of the list.

I am an operator that helps to replicate a tuple.

CO24CB0802.indd 30

10/13/2023 6:06:00 PM

Write T for True and F for False. 1

The sort() function is used to reverse the order of the list.

You cannot directly insert or delete data items in a tuple.

Lists are immutable.

The list allows duplicate values.

Lists cannot store different types of elements.

Answer the Following. 1 Explain any three characteristics of a list.

Write a code to create a tuple with a single element.

Differentiate between pop() and remove() with a suitable example.

Write three differences between list and tuple.

Discuss any three characteristics of a tuple.

Chapter 2 • Lists and Tuples in Python

CO24CB0802.indd 31

10/13/2023 6:06:00 PM

Apply your Learning. 1 Write the code to convert the given list L to tuple:

L = [1, 5, 8, 9, 15]

Write a code to create a list with single element.

Write a code to create a tuple T with the given data: 9, ‘Ram’, 7, 5, ‘Hema’

Add a student’s name, “Sushma”, at the end of the given list: Stu_list = [“Lata”, “Rama”, “Ankit”, “Vishal”]

Create a list of strings and access the elements using index.

CO24CB0802.indd 32

10/13/2023 6:06:00 PM

Python Libraries

Introduction to Python Libraries Python is a popular programming language with an extensive number of libraries and packages that increase its usefulness for various purposes. These libraries cover a wide range of topics, from web development to data analysis, machine learning, artificial intelligence, scientific computing, and more. A Python library is a collection of modules that are linked together. It contains code bundles that are reusable in various programs. For programmers, it simplifies Python programming.

Working of Python Libraries As you know, a Python library is a group of modules of code, that can be used in a program to perform specific actions. We use libraries to avoid rewriting code that is already used in our program. However, the process is as follows: 1 Use the import statement (e.g., import pandas) in Python application to import the desired library. 2 After importing the library, you can use its functions, classes, and features in your application. 3 To perform specific tasks relevant to your project, you can use the library’s capabilities. For example, if you are using the pandas library, you can perform data analysis tasks like data cleaning, manipulation, or visualisation. 4 The library processes your input and performs the tasks you have requested. 5 You get the results of your operations, which can be data reports, machine learning model predictions, web page outputs, or any other output.

Using Libraries in a Python Program In Python, you can define the frequently used functions in modules that can be easily imported into any program, as needed. By importing a module, you can use its capabilities without the need to write the necessary code. You can use the module by using the import statement. For example: Return the value of 5 to the power of 2. Code

Output

import math x = pow(5, 2) print(x)

In this program, Python includes a built-in module called math from its standard library. The math module provides a list of mathematical methods. Here, the pow() method is used to calculate the power (exponentiation) of a given number to another number.

CO24CB0803_P1.indd 33

10/13/2023 2:34:06 PM

Standard Library of Python All of Python’s syntax, semantics, and symbols can be found in the Python Standard Library. It contains more than 200 modules that are used for standard operations such as input and output. An important module of the standard library is the math module. Let us discuss some of the methods available in the math module.

The Math Module This module provides functions to perform basic operations such as addition, subtraction, multiplication, and division, and some advanced operations. Some of the commonly used methods in the math module are: sqrt(): This function is used to find the square root of a number. Example: Find the square root of the number. Code

Output

import math x=sqrt(81) print(x)

pow(): This function is used to calculate the power (exponentiation) of a number, when both the number and the power are given. Example: Find the value of 3 raised to the power of 4. Code

Output

import math x=pow(3, 4) print(x)

abs(): This function is used to find the absolute value of a number. Example: Find the absolute value of a number. Code

Output

import math x=abs(−14) print(x)

min(): This function is used to find the smallest number in a list of numbers. Example: Find the smallest number in the list of numbers. Code

Output

numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5] smallest = min(numbers) print(smallest)

CO24CB0803_P1.indd 34

10/13/2023 2:34:06 PM

max(): This function is used to find the largest number in a list of numbers. Example: Find the largest number in the list of numbers. Code

Output

numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]

largest = max(numbers) print(largest)

Discuss

How is a module created in Python?

Did You Know? Today, more than 1,37,000 libraries are used in Python programs.

Other Important Libraries of Python Let us look at some more popular libraries in Python.

The Matplotlib Library Matplotlib is a popular Python library for creating static, animated, or interactive visualisations. It was created by John D. Hunter. Matplotlib is open source, so we can use it freely. To use Matplotlib, you need to import the library and its modules. It can generate visually detailed representations such as pie charts, histograms, scatter plots, and graphs. It consists of several modules, each serving a specific purpose. After Matplotlib is installed, import it in your applications by adding the import module statement in your code: Syntax: import matplotlib Here are some of the key modules available in Matplotlib: Figure: The Figure module represents the entire figure or canvas where your plots are drawn. It is typically created using plt.subplots() or plt.figure(). Syntax: import matplotlib.figure as Figure Pyplot: This module provides a high-level interface for creating and customising plots. It is commonly used for creating simple visualisations such as line plots, bar plots, scatter plots, histograms, and more. Syntax: import matplotlib.pyplot as plt Line2D: This module is used for creating and customising line plots. It allows you to control the appearance of lines, markers, and their properties. Syntax: import matplotlib.lines as Line2D Patch: This module provides classes for creating various shapes and patches, such as rectangles, circles, polygons, and more. Syntax: import matplotlib.patches as Patch Ticker: T his module provides tools for controlling the appearance of tick marks and labels on axes.

Chapter 3 • Python Libraries

CO24CB0803_P1.indd 35

10/13/2023 2:34:06 PM

Syntax: import matplotlib.ticker as Ticker Example: Draw a line chart from the point (0,0) to the point (10,50). Code

Output

import sys

import matplotlib

import matplotlib.pyplot as plt import numpy as np

xpoints = np.array([0, 10])

ypoints = np.array([0, 50])

plt.plot(xpoints, ypoints)

plt.show()

plt.savefig(sys.stdout.buffer)

sys.stdout.flush()

In this example, we use the pyplot module of the matplotlib library to draw a line chart. ‘plt.savefig()’ is used to save plotted images on the local machine. ‘sys.stdout.flush()’ is used to force the program to flush the output buffer.

The Pandas Library This library plays a significant role in data analysis. The name ‘Pandas’ refers to ‘Python Data Analysis’. It was created by Wes McKinney in 2008. It makes data processing, data manipulation, and data cleaning easier. Pandas can perform tasks like sorting, reindexing, iteration, concatenation, data conversion, visualisation, and aggregation. You can import the pandas library in your programs by using the import keyword. Pandas is imported under the pd alias. Syntax: import pandas as pd Here are some of the key modules in a pandas library:

Did You Know?

Series: A pandas series is like a column in a table. This series is used to hold one-dimensional array of any type.

In Python, alias is an alternate name for referring to the same thing.

Syntax: import pandas as pd series = pd.Series(data) Example: Create a simple Pandas Series from a list = [8, 1, 5] Code

Output

import pandas as pd a = [8, 1, 5] x = pd.Series(a) print(x)

0 8 1 1 2 5 dtype: int64

CO24CB0803_P1.indd 36

10/13/2023 2:34:07 PM

Data Frame: It is a fundamental data structure in pandas. It represents a two-dimensional and tabular data structure with labelled axes (rows and columns). DataFrames are commonly used for data analysis and manipulation. Syntax: import pandas as pd df = pd.DataFrame(data) Example: Create a pandas DataFrame from given data. {“calories”: [500, 350, 2000], “Time_duration”: [40, 30, 25]} Code

Output

import pandas as pd

calories Time_duration

data = {

“calories”: [500, 350, 2000],

}

“Time_duration”: [40, 30, 25]

500

350

2000

df = pd.DataFrame(data) print(df)

The Numpy Library The term ‘numpy’ is an abbreviation for ‘Numerical Python’. This library of Python provides support for arrays and matrices, along with a collection of mathematical functions to efficiently perform operations. It has built-in mathematical tools that make it easy to do calculations. You can use the numpy library in your program by using the import keyword. The numpy library is imported under the np alias. Syntax: import numpy as np Some common modules of this library are random, datetime, trigonometric, logarithmic, and functions. random: The numpy library offers the random module to work with random numbers. Syntax: import numpy as np x = np.random.rand() For example: Generate a random integer from 0 to 1000. Code

Output

import numpy as np

222

import random

x = np.random.randint(1000) print(x)

Think and Tell How can you find the absolute (positive) value of the specified number?

Chapter 3 • Python Libraries

CO24CB0803_P1.indd 37

10/13/2023 2:34:07 PM

Do It Yourself 3A 1 Write a program to create a series from the following list: a = [‘a’, ‘e’, ‘i’, ‘o’, ‘u’] 2 Write a program to find the maximum number from the following list: List1= [100, 200, 300, 400, 900, 1200]

Coding Challenge

Write a Python program to calculate a magic square. Hint: A square is called a magic square, if the sum of the numbers of each row, each column, and both diagonals are equal.

Chapter Checkup A

Fill in the Blanks. C language

Hints

‘Numpy’ stands for

numerical python

matplotlib

is used to write Python modules.

data analysis

is used for plotting numerical data.

1 2

import

We can use a module in a Python program by using the

Pandas library is used for

statement.

Tick () the Correct Option. 1

This module provides tools for controlling the appearance of tick marks and labels on axes.

a Pyplot

b Patch

c Ticker

d None of these

CO24CB0803_P1.indd 38

10/13/2023 2:34:07 PM

What will be the output of the following code? 2 import numpy as np import random x = np.random.rand() print(x) a 1000 3

c Any integer number

d None of these

c List

d Tuple

Which of the following is like a column in a table?

a Frame 4

b Any float number

b Series

The abs( ) function is used to return the:

a ceiling value of a number

b absolute value of a number

c square of a number

d floor value of a number

5 It is a library of Python that provides support for arrays and matrices, along with a collection of mathematical functions. a Numpy C

b Matplotlib

c Pandas

d Math

Who Am I? 1

I am a library in Python used for easier data processing, data manipulation, and data cleaning.

I am a module in Python to do calculations easily.

I am a group of modules of code in Python that can be used in a program to perform specific actions.

I am a library in Python used for creating static, animated, or interactive visualisations.

I am a module in pandas library that represents a two-dimensional and tabular data structure with labelled axes 5 (rows and columns).

Write T for True and F for False. 1

Numpy is a framework in Python.

You can use the export statement to include a library in your program.

A Python library refers to a group of connected modules.

The Java language is used to write Python modules.

All of Python’s syntax and semantics are found in its standard library.

Chapter 3 • Python Libraries

CO24CB0803_P1.indd 39

10/13/2023 2:34:07 PM

Answer the Following. 1

What are libraries in Python? How are they useful?

Explain two examples of commonly used libraries in Python.

Why are pandas used?

What is Numpy used for?

Why is Matplotlib used in Python?

Apply Your Learning. 1

Write a Python program to find the square root of 64.

Write a Python program to generate a random integer from 0 to 100.

CO24CB0803_P1.indd 40

10/13/2023 2:34:08 PM

Write a Python program to find the largest number from a tuple, that is, (20, 50, 70, 90).

Write a Python program to calculate the area of a square.

Write a Python program to plot the values x = [1, 2, 3, 4, 5] and y = [2, 4, 6, 8, 10] using matplotlib.

Chapter 3 • Python Libraries

CO24CB0803_P1.indd 41

10/13/2023 2:34:08 PM

Introduction to HTML

What is HTML? HTML stands for HyperText Markup Language. HTML is a markup language used to design web pages. It defines the structure of a web page and tells the web browser how and where to display the content of the web page. A web page is a document placed on the World Wide Web (WWW) as a part of a website. The term ‘hypertext’ is a combination of two words ‘hyper,’ which means beyond, and ‘text,’ which means written words. The main goal of hypertext is to go beyond the linear reading process and navigate to the desired location on the web with the help of interconnected web pages. The term ‘markup language’ refers to a language which creates layout of web pages and applies formatting on them. It makes the objects on the web page like text, image, audio, etc. more interactive, and it also enriches the look and feel of the web pages. To create a web page in HTML, you need two main things:

• A Text Editor: Text editor is software used to write the code of HTML documents. Some of the popular text editors are Notepad, Notepad++, Sublime Text, etc.

• A Web Browser: A web browser is used to access and view web pages. Examples of web browsers are Google Chrome, Apple Safari, Microsoft Edge, Opera, Mozilla Firefox, etc.

Did You Know?

The first web page was developed by Tim BernersLee, a British scientist, in 1991.

Basics of HTML An HTML document consists of HTML tags, elements, and attributes.

Tags A tag is a basic building block of an HTML document that specifies how the content is displayed on the web page. HTML provides several built-in tags. Each of these tags has a specific purpose. For example, the <p> tag is used to create a paragraph in a web page. Each tag has a name which is enclosed in angle brackets < and >. For example, <html>, <body>, <hr>, etc., are some tags in HTML. Most of the tags in HTML have opening and closing tags. Opening tag is the name of the tag enclosed in the angle brackets. Whereas, the closing tag has forward slash in the beginning of the tag name and enclosed in angle brackets. For example, <html> is the opening tag. </html> is the closing tag. The effect of a tag is restricted only to its closing tag. Between opening and closing tags, content is placed.

CO24CB0804.indd 42

10/13/2023 2:36:32 PM

Elements The combination of opening tag, content and closing tag is known as element. For example, the paragraph element is as follows: <p> I am a paragraph. </p> There are two types of elements in HTML which are as follows:

• Container Elements: Container elements contain other elements or text within them. They have both an opening tag and a closing tag to enclose their content.

Examples: <html></html>, <head></head>, <body></body>.

• Empty Elements: Empty elements, also known as void elements or self-closing elements, do not contain any content. They do not require a closing tag. Examples: <br>, <hr>, <img>.

Attribute An attribute provides additional information about an HTML element and modifies its behaviour. Attributes are always placed inside the opening tags of HTML elements. The syntax to add an attribute is as follows: <element attribute=”value”>Content</element> Where,

• Element: The HTML element to which the attribute belongs. • Attribute: The name of the attribute. • Value: The value assigned to the attribute.

Did You Know? Multiple attributes can be used in an element.

For example,

<p align = “right”> I am a paragraph with right alignment </p> Here, align is the attribute of <p> element.

Think and Tell How are tags and attributes different?

Structure of an HTML Document

The structure of an HTML document is divided into two main parts: the head and the body. <html> <head> <title> Title of the Web page</title> </head>

Head

Body

</html> The head contains information about the document, such as the title. The title appears on the title bar or tab of the web browser. The body contains the content of the web page, such as text, images, and videos. The content of the body is displayed in the browser window. Chapter 4 • Introduction to HTML

CO24CB0804.indd 43

10/13/2023 2:36:32 PM

HTML document structure has four tags to describe the document structure, which are as follows: 1

The <html> and </html> tags enclose the entire document.

The <head> and </head> tags enclose the head section of the document.

The <title> and </title> tags enclose the title of the document.

The <body> and </body> tags enclose the body section of the document.

Basic Tags of HTML Some of the basic tags of HTML are as follows: Tag

Description

Example

<h1> to <h6> Used to create headings and subheadings on <h1> Heading 1 </h1> a web page. <h1> is the biggest heading and <h2> Heading 2 </h2> <h6> is the lowest heading <h3> Heading 3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5>

Output

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5

<h6> Heading 6 </h6>

Heading 6

<sub>

Used to raise the text below the baseline

H2<sub>2</sub>O

H2O

<sup>

Used to raise the text above the baseline

A<sup>2</sup>

<b>

Used to make the text bold

Bold

<i>

Used to make the text italic

<i> Italic </i>

Italic

<em>

Used to emphasise text

<em> Emphasised </em>

Emphasised

<a>

Used to create a hyperlink

<p>

Used to create a paragraph

<p> I am a paragraph </p>

I am a paragraph

Let’s create a web page using some of these tags: Code <html>

<head> <title> Text Formatting Example </title> </head> <body>

<h1> Welcome to My Web Page </h1>

<p> This is a simple paragraph with some <em> emphasised </em> text. We can also use superscript and subscript: </p> <p> The chemical formula for water is H<sub>2</sub>O, and the famous equation is E = mc<sup>2</sup>. </p>

<p> Feel free to explore the content on this page. Thank you for visiting! </p> </body> </html>

CO24CB0804.indd 44

10/13/2023 2:36:32 PM

Output

Welcome to My Web Page This is a simple paragraph with some emphasised text. We can also use superscript and subscript. The chemical formula for water is H 0, and the famous equation is E = mc2. 2 Feel free to explore the content on this page. Thank you for visiting!

Do It Yourself 4A 1

Write any three examples of container elements of HTML.

Write the name of the tag used for: a

Making the text bold

Making a paragraph

Making the text italic

Understanding CSS Cascading Style Sheets (CSS) is a language used to style the HTML elements. It allows us to change the look and feel of the web pages.

Selectors CSS uses selectors to target HTML elements. Selectors can target elements by tag name, class, ID, attribute, and more. For example, body {

font-family: sans-serif;

}

background-color: blue;

.highlight { }

color: red;

Here, .highlight is the class selector which can be used in HTML tag with the help of the class attribute.

Properties and Values CSS is used in a property-value pair. The colon (:) sign is used to separate the property from a value. CSS properties define the styles that are to be applied to the selected elements, and values specify the settings for those properties. For example,

Chapter 4 • Introduction to HTML

CO24CB0804.indd 45

font-size: 24px;

}

color: #333333;

10/13/2023 2:36:32 PM

There are several properties of CSS. Let us discuss some of them in the following table: Property

Description

Example

color

Sets the colour of the text.

color: blue

background-color

Sets the background colour of the HTML element. background-color: red

font-family

Sets the font family of the text.

font-family: cambria

font-size

Sets the size of the text.

font-size: xx-small

font-weight

Sets the weight or thickness of the text.

font-weight: bold

padding

Sets the space around the content of the element. padding: 40px

margin

Sets the space around the element itself.

margin: 20px

border

Specifies the border around the element.

border: 2px

border-radius

Specifies the radius of the corners of the element border-radius: 5px border.

opacity

Specifies the transparency of the element.

opacity: 50

text-align

Aligns the text horizontally within a box.

text-align: centre

box-sizing

Controls how the sizing of an element is box-sizing: border-box calculated. There are two possible values for this property: content-box and border-box.

Note: x-small, small, medium, large, x-large, xx-large can also be used as values. Note: lighter, or any number can also be used

How to Use CSS in a Web Page CSS can be used in three ways in a web page which are as follows: 1

Inline CSS: It allows us to apply style to a particular element on a web page with the help of the style attribute. For example, <p style=”color: red; font-size: 15px;”>This is a paragraph</p>

Internal CSS: It allows us to apply style to the whole web page with the help of <style> element. <head> <style> p{ color: red; font-size: 15px; } </style> </head> <body> <p>This is a paragraph </p> <p>This is another paragraph </p> </body>

CO24CB0804.indd 46

10/13/2023 2:36:32 PM

External CSS: It allows us to style multiple pages with the help of <link> element. <head> <link rel=”stylesheet” href=”style.css”> </head> <body> <p>This is a paragraph </p> </body> The style.css file would contain the following CSS: p{ color: red; font-size: 15px; }

Let us use some of these CSS properties, that we have learnt in the previous section, in the following web page: Code <html> <head> <title> Text Formatting Example </title> <style> body{ background-color:lightgreen; } h1{ color: red; } </style> </head> <body> <h1> Welcome to My Web Page </h1> <p> This is a simple paragraph with some <em>emphasised</em> text. We can also use superscript and subscript: </p> <p> The chemical formula for water is H<sub>2</sub>O, and the famous equation is E = mc<sup>2</sup>. </p> <p> Feel free to explore the content on this page. Thank you for visiting! </p> </body> </html> Output

Here, in this web page, the background colour is changed and the colour of the heading is also changed. Chapter 4 • Introduction to HTML

CO24CB0804.indd 47

10/13/2023 2:36:32 PM

Adding Images The <img> tag of HTML allows us to add images to the web page. The attributes of the <img> tag are as follows: Attribute

Description

Alt

Used to specify the alternate text which appears only if the specified image is not loaded due to some reason.

Height

Used to specify the height of the image.

Src

Used to specify the path of the image.

Width

Used to specify the width of the image.

Apart from src, all attributes are optional to use with the <img> tag. Height and width of the image can also be set with the height and width properties of CSS. Let us create a web page to display images of famous Indian mathematicians with information about them: Code <html> <head> <title>Famous Indian Mathematicians</title> <style> body { font-family: sans-serif; margin: 0; padding: 0; box-sizing: border-box; } h1 { background-color: lightgreen; color: green; text-align: center; padding: 1em; } .main { display: flex; justify-content: space-around; flex-wrap: wrap; padding: 20px; } .mathematician-card { border: 1px solid #ddd; border-radius: 8px; margin: 10px; padding: 15px; width: 300px; box-shadow: 0 4px 8px; }

CO24CB0804.indd 48

10/13/2023 2:36:32 PM

Code .mathematician-card img { max-width: 100%;

border-radius: 4px;

}

</style>

</head> <body>

<h1>Famous Indian Mathematicians</h1> <div class = “main”>

<img src=”ramanujan.jpg” alt=”Srinivasa Ramanujan”> <h2>Srinivasa Ramanujan</h2>

<p>Contributions: Number Theory, Mathematical Analysis</p>

</div>

<img src=”shakuntala-devi.jpg” alt=”Shakuntala Devi”> <h2>Shakuntala Devi</h2>

<p>Contributions: Mental Calculation, Author of Mathematics Books</p>

</div>

<img src=”abhay-ashtekar.jpg” alt=”Abhay Ashtekar”> <h2>Abhay Ashtekar</h2>

<p>Contributions: Quantum Gravity, Loop Quantum Gravity</p>

</div>

</body> </html>

Output

Srinivasa Ramanujan

Shakuntala Devi

Contribution: Number Theory, Mathematical Analysis

Contribution: Mental Calulation, Author of Mathematics Books

Abhay Ashtekar Contribution: Quantum Gravity, Loop, Quantum Gravity

While creating this web page, place the images with the same names at the same location where the web page is saved. Chapter 4 • Introduction to HTML

CO24CB0804.indd 49

10/13/2023 2:36:33 PM

Creating Links The <a> tag is used to create links in HTML. A link, also known as hyperlink, is a text with the functionality to navigate you to some other web page of the website. The <a> tag is also known as anchor tag. This tag helps us to interlink several web pages of a website, even we can link other websites too. The attributes of the <a> tag are as follows: Attribute

Description

href

It takes the URL of the web page that will open when the link is clicked.

download

It allows a file to download when the link is clicked. It does not take any value.

We can arrange the links with the help of <nav> tag. The <nav> tag allows us to create a set of links. Let us create a navigation bar with the help of <a> and <nav> tags. Code <html> <head> <title>Home Page</title> <style> h1 { background-color: purple; color: white; text-align: center; padding: 1em; } nav { background-color: grey; overflow: hidden; } nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav a:hover { background-color: olive; color: white; } </style> </head> <body> <h1>Navigation</h1> <nav>

CO24CB0804.indd 50

10/13/2023 2:36:33 PM

Code <a href=”https://uolo.com/index.html”>Home</a> <a href=”https://uolo.com/about-us.html”>About Us</a> <a href=”https://uolo.com/request-demo.html”>Contact</a> </nav> </body> </html> Output

When we hover over the links, the colour of the background of the link is changed.

Do It Yourself 4B 1

Write one or two lines of code for the following: a

To embed ‘flower.jpg’ image on a web page

To create a link with the text ‘Flower’ for downloading ‘flower.jpg’ image

Write the CSS code to set the border of an image as 10px.

Adding Audio HTML provides the <audio> tag to insert audio files to a web page. The <source> tag is used with the <audio> tag to specify the path of the audio file. There can be more than one <source> tag inside the <audio> tag. The browser chooses any one <source> tag at a time. Currently HTML supports MP3, WAV, and OGG audio formats. Chapter 4 • Introduction to HTML

CO24CB0804.indd 51

10/13/2023 2:36:33 PM

Attributes of the <audio> tag are as follows: Attribute

Description

Autoplay

It specifies that the audio will start playing as soon as the web is loaded in the web browser.

Controls

It specifies that audio controls should be displayed (such as a play/pause button etc).

Loop

It specifies that the audio will start over again, every time it is completed.

Muted

It specifies that the audio output should be muted.

Src

It specifies the URL of the audio file.

Except src attribute, all attributes do not take any value. They are simply written in the opening tag. Let’s create a web page to add audio file: Code

Output

<html>

<head>

<title> Adding Audio </title> </head> <body>

<h1>Let’s Play Music</h1> <audio controls loop>

</audio> </body> </html>

The audio file is added to the web page with controls. You can pause the audio, increase/decrease the volume of sound, forward/reverse audio, etc.

Adding Video Similar to audio, HTML allows us to add video to a web page using the <video> tag. The <source> tag is used with the <video> tag to specify the path of the video file. There can be more than one <source> tag inside the <video> tag. The browser chooses any one <source> tag at a time. Currently HTML supports MP4, WebM, and OGG video formats. The attributes of the <video> tag are as follows: Attribute

Description

autoplay

It specifies that the video will start playing as soon as the web is loaded in the web browser.

controls

It specifies that video controls should be displayed (such as a play/pause button etc).

height

It specifies the height of the video player.

loop

It specifies that the video will start over again, every time it is completed.

muted

It specifies that the audio output of the video should be muted.

src

It specifies the URL of the video file.

width

It specifies the width of the video player.

CO24CB0804.indd 52

10/13/2023 2:36:33 PM

Except src, height, and width attributes, all attributes do not take any value. They are simply written in the opening tag. Let’s create a web page to add a video: Code

Output

<html>

Let’s Play Video

<head> <style> video {

border: 5px groove darkblue; padding: 30px; width: auto;

height: auto;

}

</style>

<title> Adding Video </title> </head> <body>

<h1>Let’s Play Video</h1> <video controls>

</video> </body> </html>

The video is displayed on the web page. You can pause the video, increase/decrease the volume of sound, forward/reverse the video, view the video on full screen, etc.

Discuss

What will happen if the specified audio/video is not found at the specified path?

Do It Yourself 4C 1

Match the following. A

CSS

Sets the background colour of the HTML element.

background-color

Aligns the text horizontally within a box.

margin

Allows us to change the look and feel of the web pages.

text-align

Sets the space around the element itself.

Write the names of any three attributes of the <audio> tag.

Chapter 4 • Introduction to HTML

CO24CB0804.indd 53

10/13/2023 2:36:33 PM

Coding Challenge

Take photos of any four national symbols of India and create a web page to display them. The name of each national symbol should appear at the top of the photo. Photos should work as hyperlinks, and when the user clicks on any photo, a web page appears containing the larger photo of it.

Chapter Checkup A

Fill in the Blanks. <sub>

Hints

<audio>

inline

The combination of opening tag, content, and closing tag is known as

The

tag is used to raise the text below the baseline.

4 The attribute. 5

element

is a markup language used to design web pages.

HTML

CSS allows us to apply style on a particular element on a web page with the help of style tag to insert audio files to a web page.

Tick () the Correct Option. 1

What is the need of a text editor while creating web pages?

To write the code of web pages

To view the web pages

Both a and b

None of these

The effect of a tag is restricted only to its

tag.

opening b

closing

the end of the web page

All of these

Which of the following elements is used to enclose the title of the web page?

Which of the following CSS properties is used to set the space around the content of the element?

margin b

padding

border d

opacity

Which of the following is the correct way to create a hyperlink?

<a href=”URL of the web page”> Text

<href=”URL of the web page” a> Text </a>

CO24CB0804.indd 54

10/13/2023 2:36:34 PM

Who Am I? 1

I am an HTML tag that is used to emphasise text.

I am a sign that is used to separate a CSS property from its value.

I am a method to apply CSS to all the web pages of a website simultaneously.

I am an attribute of the <a> tag that allows a file to download when the link is clicked. I do not take any value.

5 I am an attribute of the <video> tag which specifies that the video will start over again, every time it is completed. D

Write T for True and F for False. 1

HTML stands for Hypertext Making Language.

CSS is used in a property-value pair.

The <a> tag is also known as anchor tag.

The <src> tag is used with the <audio> tag to specify the path of the audio file.

The controls attribute of the <video> tag takes “play” as its value.

Answer the Following. 1

What is the meaning of the term ‘markup language’?

Write the syntax to define an attribute with a tag and explain each part.

What is the difference between padding and margin properties of CSS?

Chapter 4 • Introduction to HTML

CO24CB0804.indd 55

10/13/2023 2:36:34 PM

What is the role of autoplay and controls attributes in the <audio> tag?

Write the names of all the attributes of the <video> tag which do not require any value.

Apply Your Learning. 1

Write the HTML code to display the following output on a web page:

a3 − b3 Factorisation: (a − b) × (a2 + ab + b2)

Write the CSS code to create a box using <div> tag with the following specifications:

Height = 400px Width = 500px

Border size = 5px

Border colour = grey

3 Rohan has a video of his 5th birthday on his computer with the name ‘birthday.ogg’. He wants to create a web page to display his video. Would he be able to do the same in HTML? If yes, then write the name of the tag that can help him. 4 Write the code of <audio> tag to insert the ‘cartoon.mp3’ video to the web page. Ensure that the controls should not be visible on the audio.

CO24CB0804.indd 56

10/13/2023 2:36:34 PM

JavaScript

JavaScript was created by Brendan Eich in just 10 days while he was working at Netscape Communications Corporation. The initial name proposed for the language was “Mocha”. After then, the marketing team changed it to ‘LiveScript’. In December 1995, the language was renamed ‘JavaScript’ for trademark and other reasons.

What is JavaScript? JavaScript is a scripting language that is commonly used for web development. It can be used to add dynamism and interactivity to web pages. It allows users to communicate with web pages and perform complicated actions on the pages. It also allows users to add content to a document dynamically without reloading the web page.

Did You Know? JavaScript is the third most popular language in the world.

Features of JavaScript The features of JavaScript are as follows: 1

It is a high-level language.

It is a versatile language used on the client-side as well as the server-side.

It is an interpreted language, executed line by line by the browser or runtime environment.

It is designed to be executed on various web browsers, ensuring cross-browser compatibility.

It is a light-weighted language that is easy to understand.

It is a case-sensitive language.

It is supported on several operating systems, including Windows, macOS, etc.

It provides good control to the users over the web browsers.

It is often used for event-driven programming, responding to user actions, such as clicks and keypresses.

It is easily integrated with HTML and CSS.

Applications of JavaScript Some of the applications are as follows: 1

Web Development: JavaScript is primarily used for creating dynamic and interactive web pages.

Game Development: JavaScript is used for browser-based game development.

Browser Extensions: JavaScript is commonly used for developing browser extensions that add functionality to web browsers.

Data Visualisation: JavaScript is used for creating interactive data visualisations and charts.

CO24CB0805.indd 57

10/13/2023 6:05:29 PM

Real-time Applications: JavaScript is used for developing real-time applications such as chat applications, collaborative editing tools, and live streaming.

Web Animation: JavaScript is used to create animations and transitions on web pages.

Writing First Program Using JavaScript In an HTML document, JavaScript code is inserted between <script> and </script> tags. The <script> tag specifies that we are using a scripting language. For example: Code

Output

<html>

Welcome to Class 8

<body>

document.write(“Welcome to Class 8”) </script> </body> </html>

The document.write() function is used to display dynamic content through JavaScript. You can write the <script> element anywhere in the <body> element or in the <head> element.

JavaScript Output JavaScript can display output in different ways: innerHTML: JavaScript can use the “document.getElementById(id)” method to access an HTML element where the “id” attribute defines the HTML element and the innerHTML property defines the HTML content. document.write(): This method is used to display dynamic content through JavaScript. It should only be used for testing. window.alert(): By using this method, you can use an alert box to display data. For example: Code

Output

<html>

<body>

window.alert(12 + 55); </script> </body> </html>

JavaScript Syntax JavaScript syntax is the set of rules that define how a JavaScript program is written. All the components of a JavaScript program, including keywords, variables, operators, data types, expressions, and comments, must be correctly structured.

CO24CB0805.indd 58

10/13/2023 6:05:29 PM

Fundamentals of JavaScript The fundamental building blocks of a JavaScript program are keywords, variables, data types, operators, and comments.

Keywords Keywords are reserved words. Some of the keywords in JavaScript are let, var, const, if, else, eval, new, int, true, false, etc.

Variables In a programming language, variables are used to store data values. The let keyword is used to declare variables. The const keyword is used to declare constant variables which do not allow their value throughout the programs. An equal to sign (=) is used to assign values to variables. You must declare a variable before using it. The syntax to declare a variable is as follows: let <variable_name> = <variable_value>;

where, <variable_name> is the valid name for the variable and <variable_value> is the value you want to assign to the variable. For example, let a = 10;

You can also declare a variable first and then assign the value later. For example, let a;

a = 10;

Here, a is the name of the variable, and 10 is a value assigned to the variable a. It is recommended to put a semicolon at the end of each line in JavaScript code to terminate the line. However, it is not mandatory. Note that, JavaScript is case-sensitive, which means that the variable names num, Num, and NUM will be considered different. For example: Code

Output

<html>

JavaScript Variables

<body> <h2>JavaScript Variables</h2>

Did You Know? In older versions of JavaScript, the var keyword was used to declare variables. You can still use this keyword, but it is not recommended.

let x;

x = 10;

document.getElementById(“var”).innerHTML = x; </script> </body> </html>

Discuss

How is the let keyword different from the const keyword?

In this example, x is defined as a variable. Then, x is assigned the value 10.

Chapter 5 • JavaScript

CO24CB0805.indd 59

10/13/2023 6:05:29 PM

Data Types Data type is an important concept in programming. A data type refers to a memory location on a computer to store a value. JavaScript has various data types, including Number, String, Boolean, etc. Numbers: It holds numeric values. let weight = 89.5; Strings: It holds a single character or a sequence of characters. let colour = “Black”; Booleans: It holds either true or false value. let z = true;

Did You Know? JavaScript is a dynamically typed language, which means it automatically determines the data type of a value. Hence, you can skip mentioning the data type.

Operators An operator is a symbol that is used to perform some operation on the variables. The variables used with the operators are called operands. The combination of variables and operators is known as an expression. JavaScript provides different types of operators, which are as follows: Arithmetic Operators: Arithmetic operators are used to perform arithmetic operations on numeric variables or values. There are different types of arithmetic operators like addition (+), subtraction (−), multiplication (*), division (/), modulus (%), etc. Assignment Operator: Assignment operator (=) assign values to JavaScript variables. Comparison Operators: These operators are used in logical expressions to determine their equality or differences in variables or values. The commonly used comparison operators are equal to (==), not equal (!=), less than (<), greater than (>), less than or equal to (<=), and greater than or equal to (>=). One more comparison operator in JavaScript that compares value with data type is equal value and equal type (===). For example: Code

Output

<html>

Operator

<body>

<h2>Operator</h2> <p id=”opr”></p> <script>

let x = 80; let y = 5;

let z = x − y;

document.getElementById(“opr”).innerHTML = z; </script> </body> </html>

CO24CB0805.indd 60

10/13/2023 6:05:29 PM

Comments JavaScript comments can be used to explain JavaScript code and make it more readable. JavaScript comments can also be used to prevent execution when testing alternative code. There are two types of comments used in JavaScript. Single-line Comments: Single-line comments start with //. Any text written after // within the same line will be ignored by JavaScript (that is, will not be executed). For example: Code

Output

JavaScript Comments

<html>

<body>

<h2>JavaScript Comments</h2> <script>

let x = 5;

// Declare x, give it the value of 5

document.write(x+3); </script> </body> </html>

Multi-line Comments: Multi-line comments start with /* and end with */. Any text written between /* and */ will be ignored by JavaScript. For example: Code

Output

<html>

<body>

<script> /*

Declared number will be added by 3 in the given code */

let x = 5;

document.write(x+3); </script> </body> </html>

Chapter 5 • JavaScript

CO24CB0805.indd 61

10/13/2023 6:05:29 PM

Do It Yourself 5A Match the following.

Column A

Column B

Single-line comment

let

Keyword

===

Equal value and equal type operaor

Text */

Multi-line comment

// Text

What will be the output of the following statement?

//document.write(“Hello”);

Conditional Statements in JavaScript Using conditional expressions, we may tell the computer to check for a specific condition and take action accordingly. Curly braces are used to define a block in conditional statements. We have three types of conditional statements in JavaScript that allow us to make decisions in our programs. These include:

• if statement • if… else statement • if… else… if statement The if Statement

The ‘if’ statement is used to check a specific condition. If the condition is true, an “if-block” is run; otherwise, the code block will be skipped. The if keyword is used to write an “if statement”. The comparison operators are used to make a condition. Syntax: if (condition) { // block of code to be executed if the condition is true } For example: Code

Output

<html>

Value of a is less than 100

<body>

var a=20;

CO24CB0805.indd 62

10/13/2023 6:05:29 PM

Code

Output

if(a<100){ document.write(“value of a is less than 100”); } </script> </body> </html> In the above code, the value of the variable a is checked to see if it is less than 100. The condition returns true, and the statement written inside the ‘if block’ is executed.

The if… else Statement The ‘if… else’ statement is the advanced form of the ‘if statement’. It checks a condition; if the condition is true, then the ‘if-block’ is executed. Otherwise, the ‘else-block’ is executed. Syntax:

if (condition) {

}

// block of code to be executed if the condition is true

else { }

//block of code to be executed if the condition is false

For example: Code

Output

a is less than 50

The if… else… if Statement Sometimes, we need to evaluate multiple conditions. In such cases, we use the if… else… if statement, which is also known as the if… else… if ladder. It allows us to check multiple conditions in a sequence, and JavaScript checks each condition until one of them is true. You can check any number of conditions using this statement. Syntax: if(condition1) {

// block of code to be executed if condition1 is true

Chapter 5 • JavaScript

CO24CB0805.indd 63

10/13/2023 6:05:29 PM

} else if(condition2) {

// block of code to be executed if the condition1 is false and condition2 is true

}

…

else{ }

// block of code to be executed if the condition1 and condition2 are false

For example: Code

Output

<html>

a is equal to 50

<body>

var a=50; if(a<50){

document.write(“a is less than 50”); }

else if(a==50){

document.write(“a is equal to 50”); }

else{

document.write(“a is greater than 50”); }

</script> </body> </html>

Solved Examples Example 5.1 Write a code in JavaScript to find out whether the number is even or odd. Ans: Code

Output

<html>

Given number a is odd

<body>

var a=51;

if(a%2==0){

document.write(“Given number a is even”); }

else{

CO24CB0805.indd 64

10/13/2023 6:05:29 PM

Code

Output

document.write(“Given number a is odd”); }

</script> </body> </html>

Example 5.2 Write a program in JavaScript to check whether the number is positive or negative. Ans: Code <html>

<body>

Output

JavaScript Number is negative

<h2> JavaScript</h2>

Think and Tell What is the difference between getElementById() and window.alert()?

var a=−30; if(a>0){

document.write(“Number is positive”); }

else{

document.write(“Number is negative”); }

</script> </body> </html>

Do It Yourself 5B 1

Write a code in JavaScript to calculate the area of a triangle.

Chapter 5 • JavaScript

CO24CB0805.indd 65

10/13/2023 6:05:29 PM

Write a program to compute quotient and remainder of the expression (85796/52).

Chapter Checkup A

Fill in the Blanks. let

Hints

Brendan Eich

Mocha

was the original name of JavaScript when it was first created.

1 2

JavaScript was created by

Multi-line comments start with

. .

is used to declare variables.

4 B

/* */

Tick () the Correct Option. 1

Which of the following is the correct output for the following JavaScript code?

x=10;

if(x>9) {

document.write(9); }

else {

document.write(x); }

0 b

10 d

Undefined

Which of the following is not a conditional statement in JavaScript?

if statement

if… else statement

if… else… if

if… elif… else

CO24CB0805.indd 66

10/13/2023 6:05:30 PM

3 Which one of the following is known as the equality operator that is used to check whether the two values are equal or not? a

= b

>= d

None of these

Which of the following symbols is used for creating comments in the JavaScript?

\\ b

\* */

\* *\

Who Am I? 1

I am used to perform arithmetic operations on numbers.

I am a method used to display dynamic content through JavaScript.

I am scripting language used for developing real-time applications.

I am a decision-making statement that is used to evaluate multiple conditions.

Write T for True and F for False. 1

The let keyword is used to declare a constant variable.

JavaScript is used for web development.

The assignment operator is used to assign values to JavaScript variables.

An operator is a symbol that is used to perform some operation on the variables.

Answer the Following. 1

What is JavaScript?

Define some features of JavaScript.

Write the names of different types of JavaScript operators.

Chapter 5 • JavaScript

CO24CB0805.indd 67

10/13/2023 6:05:30 PM

What is the if… else… if ladder?

Apply your Learning. 1 Mishika wants to display her name on a web page using JavaScript. Help her write a program in JavaScript to do so.

Write a JavaScript program to find the output of the following expressions:

5−6

10−5

false−6

true + 5

5 + “num”

Write a program in JavaScript to show different types of comments in JavaScript.

4 Ramesh has purchased 10 t-shirts for his garments shop for Rs.5,000. He sold them for Rs.7,000. Write a JavaScript program to find out whether he is at profit or loss. Also, display the profit/loss amount.

CO24CB0805.indd 68

10/13/2023 6:05:30 PM

HTML Forms

In this chapter, you will study the most interactive and essential element of web development, i.e., HTML forms. Forms are used to collect information from users, such as their names, email addresses, and hobbies. In this chapter, you will learn to create forms and understand how they work.

What Are HTML Forms? HTML forms are commonly used when websites need to gather information from users. For example, if someone wants to buy a bag online, they would first fill their address details in one part of the form and then enter their payment information in another part to complete the purchase. An HTML <form> element is used to create fields where users can provide information in an interactive way. It includes fields where users can type text, numbers, email addresses, and passwords, and indicate choices like selecting check boxes or clicking buttons.

Form Structure In HTML, the structure of a form is how you organise and align the various elements that make up the form. A basic form consists of several elements. Let us learn about these elements and options.

The <form> Element The <form> element is a container for all form elements. It helps define where the form begins and ends on a web page. Example: <form>

<-- Form elements -->

</form>

The <input> Element The <input> element is used to create various fields to collect different types of information from users, such as text, email addresses, passwords, and more. The <label> element is used to attach a text with the input fields. Some common types of input fields are: 1

Text Input: It is used to take textual information from the user like name, age, roll number, etc. Use type=”text” attribute: Example: Code

Output

<label for=”first_name”>First Name:</label> <input type=”text” id=”first_name” name=”first_name”>

CO24CB0806.indd 69

10/13/2023 2:37:34 PM

Email Input: It is used to take the email address as information from the user. It verifies the format of the email address, which means you must enter the email address in the correct format. It shows a message if you enter an incorrect email. It also gives suggestions of email addresses that you have used earlier in the web browser. Use type=”email” attribute: Example: Code <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> Output

Password Input: It is used to take sensitive information like passwords, bank account numbers, etc., from the user. The characters you entered in this field appear in the form of stars or dots. An eye icon also appears in this field which allows you to view the text in readable form. Use type=”password” attribute: Example: Code

Output

<label for=”password”>Password:</label> <input type=”password” id=”password” name=”password”> 4

Date Input: It is used to take date as input from the user. It displays a calendar to select the date. Use the type=”date” attribute: Example: Code

Output

<label for=”dob”>Date of Birth:</label> <input type=”date” id=”dob” name=”dob” required>

Radio Buttons: The Radio button option allows users to select one option from a list. Use the type=”radio” attribute:

CO24CB0806.indd 70

10/13/2023 2:37:34 PM

Example: Code

Output

<label>Gender:</label>

<input type=”radio” id=”female”

name=”gender” value=”female”>

<label for=”female”>Female</label>

<input type=”radio” id=”other” name=”gender” value=”other”> <label for=”other”>Other</label> 6

Check Boxes: The check box option allows users to select multiple options from a list. Use the type=”checkbox” attribute: Example: Code

Output

<label>Interests:</label>

<label for=”sports”>Sports</label>

<label for=”music”>Music</label>

<label for=”movies”>Movies</label>

The <textarea> Element The <textarea> element is used for long text input, such as comments or messages: Example: Code <label for=”address”>Address:</label> <textarea id=”address” name=”address” rows=”4” required>

Output

Did You Know? How is a text input field different from a password input box?

The <button> Element The <button> element is used to create buttons within forms. You can use it to perform any action on the form. The type attribute is a must to use with the <button> element. It takes any one value out of button, submit, and reset values.

Chapter 6 • HTML Forms

CO24CB0806.indd 71

10/13/2023 2:37:34 PM

Example: Code

Output

<button type=”button”> Login </button>

<button type=”button”> Cancel </button>

The <select> Element The <select> element is used to create drop-down menus. The <option> element is used in combination with the <select> element to create items in the drop-down menu. Example: Code

Output

<label for=”course”>Course:</label>

<option value=”math”>Mathematics</option> <option value=”science”>Science</option> <option value=”history”>History</option>

<option value=”english”>English</option>

</select>

Think and Tell Imagine you are designing a website for a local library. The librarian wants to use an HTML form to allow users to request the issuing of books. Think about the various form elements you would include in this form.

Creating and Displaying a Form Code <html>

<head>

<title>Student Details Form</title>

</head> <body>

<h1>Student Details</h1> <form>

<label for=”first_name”>First Name:</label>

<input type=”text” id=”last_name” name=”last_name” required><br><br> <label for=”dob”>Date of Birth:</label>

CO24CB0806.indd 72

10/13/2023 2:37:34 PM

Code <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email” required><br><br> <label for=”phone”>Phone Number:</label> <input type=”tel” id=”phone” name=”phone” required><br><br> <label for=”address”>Address:</label> <textarea id=”address” name=”address” rows=”4” required></textarea><br><br> <label for=”course”>Course:</label> <select id=”course” name=”course” required> <option value=”math”>Mathematics</option> <option value=”science”>Science</option> <option value=”history”>History</option> <option value=”english”>English</option> </select><br><br> <label for=”gender”>Gender:</label> <input type=”radio” id=”male” name=”gender” value=”male” required> <label for=”male”>Male</label> <input type=”radio” id=”female” name=”gender” value=”female” required> <label for=”female”>Female</label> <input type=”radio” id=”other” name=”gender” value=”other” required> <label for=”other”>Other</label><br><br> <button type=”submit” value=”Submit”>Submit</button> </form> </body> </html> Output

Chapter 6 • HTML Forms

CO24CB0806.indd 73

10/13/2023 2:37:34 PM

Form Attributes Forms can have various attributes to control the behaviour of a form:

• Action: Specifies the URL to which form data will be submitted. • Method: Specifies the HyperText Transfer Protocol (HTTP) method to be used (either “GET” or “POST”). GET is better for submitting non-sensitive information, whereas POST is used to submit sensitive information.

• Name: Assigns a name to the form for easy identification. • Target: Specifies where to display the response after form submission (e.g., in the same window or in a new one). It takes any one value from the _blank, _self, _parent and _top values.

Did You Know? HTML forms not only collect user data but can also be used for interactive quizzes, surveys, and feedback on websites. They are versatile tools for engaging with online visitors.

Here is an example of a form with attributes: <form action=”submit_student_details.php” method=”post” target=”_blank”> The form action is set to ‘submit_student_details.php’, which is where you can process the form data on the server side. The form method is set to ‘POST’, signifying the HTTP method used.

Form Validation Form validation is crucial to ensure that users provide the correct type of information. HTML introduced built-in form validation, using attributes like required, min, max, and pattern. For example:

<input type=”number” id=”age” name=”age” required min=”18” max=”99”> The required attribute makes the field mandatory, and min and max specify the acceptable value ranges. The pattern attribute can be used to enforce a specific format such as a valid email address.

Setting Properties of a Form Using Internal CSS Setting properties of a form using internal CSS is also known as embedded CSS or inline CSS. You can make your HTML forms look attractive and arrange them on your web page by using the <style> element. This <style> element is placed in the <head> section of your HTML document. Steps to set properties of a form using internal CSS are: 1

Open an HTML Document: Start by creating a standard HTML document structure, including the <!DOCTYPE html>, <html>, <head>, and <body> elements.

Include the <style> Element: Inside the <head> section of your HTML document, include a <style> element. This element is where you will define the CSS rules for styling your form elements.

Select the Form Element: To target the form you want to style, use the form selector. For example, to style all forms in your document, you can use form {}. To style a specific form, you can use an ID or class selector like #myForm {}.

Define CSS Properties: Within the selected form CSS block, you can define various CSS properties to control the appearance of the form. Common properties include width, margin, padding, background-colour, border, border-radius, font-size, colour, and many more. You can style form elements individually or collectively.

CO24CB0806.indd 74

10/13/2023 2:37:34 PM

Style Form Elements: Inside a form block, you can target specific form elements such as labels, input fields, buttons, and other related elements. Use CSS selectors such as label {}, input[type=”text”] {}, and input[type=”submit”] {} to style these elements individually.

Save and Apply: When you have defined your internal CSS rules, save the HTML document. When you load the HTML document in a web browser, the CSS styles you have defined will be applied to the form elements. Code <html> <head> <title>Form Styling</title> <style> /* Internal CSS styles for the form */ form { width: 400px; /* Set the width of the form. */ margin: 0 auto; /* Center-align the form. */ padding: 50px; /* Add some padding for spacing. */ background-color: #f2f2f2; /* Set the background colour.*/ border: 1px solid #ccc; /* Add a border. */ } /* Style for form labels */ label { display: block; /* Display labels as block elements for better spacing. */ margin-bottom: 10px; /* Add some space between labels */ font-weight: bold; /* Make labels bold. */ } /* Style for form input fields */ input[type=”text”], input[type=”email”] { width: 100%; /* Set input fields to 100% width. */ padding: 10px; /* Add padding for input fields. */ margin-bottom: 15px; /* Add space between input fields. */ border: 1px solid #ccc; /* Add a border to input fields. */ } /* Style for the submit button */ input[type=”submit”] { background-color: #007bff; /* Set a background colour for the button. */ color: #fff; /* Set text color to white. */ padding: 10px 20px; /* Add padding for the button. */ border-radius: 3px; /* Add rounded corners to the button. */ } </style> </head> <body> <form> <label for=”name”>Name:</label> <input type=”text” id=”name” name=”name”> <label for=”email”>Email:</label> <input type=”email” id=”email” name=”email”> <button type=”submit” value=”Submit”>Submit</button> </form> </body> </html>

Chapter 6 • HTML Forms

CO24CB0806.indd 75

10/13/2023 2:37:34 PM

Output

Did You Know? HTML forms can be styled extensively using CSS to match website design and branding for creating visually appealing and cohesive user interfaces.

Do It Yourself 6A 1

Who Am I? a

I am a button that allows users to select one option from a list.

I am a form attribute that specifies the URL to which the form data will be submitted.

c I am an HTML element that makes a form look attractive, and I am placed in the <head> section of the HTML document. 2

Answer the Following. a

Explain the ‘method’ attribute of a form.

What is the use of radio buttons in an HTML form?

Chapter Checkup A

Fill in the Blanks. Hints 1 HTML options.

inline

<form>

radio

required

is used to create a space where users can provide information by using various interactive

The

element is used for long text input, such as comments or messages.

The type attribute

The

Setting properties of a form using internal CSS is also known as

is used for radio buttons, allowing users to select one option from a list. attribute makes a field mandatory in an HTML form. CSS.

CO24CB0806.indd 76

10/13/2023 2:37:34 PM

Tick () the Correct Option. 1

Which of the following HTML elements is used to create a container for form elements?

<input>

<form>

<label>

Which of the following input types is used for collecting the name of a student?

text

password

radio

Which of the following elements helps create a drop-down menu in HTML forms?

<input>

Which attribute can be used to apply a specific format?

required

pattern

validate

specific

What is the purpose of the <button> element in HTML forms?

To display text

To create hyperlinks

To submit the form

To add images

Write T for True and F for False. 1

Form validation is crucial to ensure that users provide correct information.

The <input> element can collect various types of input, including text, email addresses, and passwords.

Check boxes allow users to select only one option from a list.

The ‘action’ attribute in a <form> element specifies where the form data will be submitted.

HTML introduced in-built form validation, using attributes like ‘required’ and ‘min’.

Answer the Following. 1

What is the primary purpose of the HTML <form> element in web development?

What is the purpose of form validation in HTML? Name the attributes that support form validation.

Chapter 6 • HTML Forms

CO24CB0806.indd 77

10/13/2023 2:37:35 PM

How can internal CSS (embedded) be used to style HTML forms?

Name the various attributes that control the behaviour of a form.

What is the <input> element? Explain any two <input> fields with their syntax.

Apply Your Learning. 1 Create a simple HTML form for receiving parents’ feedback on a school event. Include fields for the student and parent names, class, section, email address, and comments. Apply form validation to ensure that all fields are filled correctly. Use internal CSS to style the form. Customise the background colour, font styles, and appearance of the ‘Submit’ button on the form.

2 Imagine that you are conducting a survey about students’ favourite school subjects. Design an HTML form with radio buttons for subjects such as Mathematics, Science, History, and English. Allow the students to select their favourite subject and submit their choice. 3 Create a basic HTML form for an ice-cream parlour where customers can indicate their preferred ice-cream flavours. The HTML form should include check boxes with these options: chocolate, vanilla, choco-chip, strawberry, and butterscotch. Ensure that users can select multiple flavours and provide a ‘Submit’ button at the end to complete the submission process.

CO24CB0806.indd 78

10/13/2023 2:37:35 PM

Singapore

CS_CB_Coding_Grade8_Cover.indd All Pages

Gurugram

Bengaluru

hello@uolo.com xxx

NEP 2020 based

NCF compliant

Technology powered

09/10/23 4:10 PM