University of frères Mentouri M2: N etwork and Telecommunications

Faculty of Science and Technology Cours of Web Technologies

Department of Electronics Academic year: 2023-2024

TUTORIAL#3 – CLIENT-SIDE SCRIPTING LANGUAGES

Questions: Answers, in your own words, to the following questions.
1. What is a scripting language? Give four examples of the most commonly used scripting languages.
2. What is client vs server-side scripting languages?
3. Is C++ a client-side language?
4. What is JavaScript?
5. How are JavaScript and Java different from each other?
6. Is JavaScript case-sensitive?
7. What data types do JavaScript support?
8. What are the different ways a JavaScript code can be involved within an HTML file?
9. Give three ways using which an HTML element can be accessed within a JavaScript code?
10. In JavaScript, what is NaN?
11. What is an object in JavaScript?
12. How do you access a property of an object in JavaScript?

Part 01: JavaScript operators and data types

Exercise 01: Write a JavaScript program to find the area of a triangle where the three sides are a =3, b=5 and
c=10. Update the program for the case where the values of a, b and c are given by the user.
Exercise 02: Write a JavaScript program that calculates the sum, difference, product, and quotient of two integer
numbers. Then, add this program to an HTML document that prompts the user for two numbers, calculates the
sum, difference, product, and quotient, and then use an alert window to display the results.
Exercise 03: Input two numbers and perform arithmetic action using Select option as in the figure below.

Part 02: Conditional statements and loops in JavaScript

Exercise 04: Write a JavaScript program that compares two numbers and logs whether they are equal, not equal,
greater than, or less than.
Exercise 05: Write a JavaScript program that takes a student's numerical grade as input and outputs their
corresponding letter grade according to the following scale (The grade value is provided by the user.):
▪ A: 90-100
▪ B: 80-89
▪ C: 70-79
▪ D: 60-69
▪ F: Bellow 60.
Note: give two versions of the program, the first one is with the if… elseif statement and the second one is with
the switch statement.
Exercise 06: Write a JavaScript program to display the current day and time in the following format.
Today is: Tuesday. Current time is: 10 PM: 30 : 38
Exercise 07: Write a JavaScript program that generates 10 random numbers and push them into an array A, then
calculates the sum of the elements in the array A.

1|Page
University of frères Mentouri M2: N etwork and Telecommunications
Faculty of Science and Technology Cours of Web Technologies
Department of Electronics Academic year: 2023-2024

Exercise 05: Write a JavaScript program where the program takes a random integer between 1 and 9, and the user
is then prompted to input a guess number. The program displays a message "Good Work" if the input matches
the guess number otherwise "Not matched, Try another number".

Part 03: Functions, objects and arrays in JavaScript

Exercise 08: Write JavaScript functions to find the maximum and minimum values in the array.
Exercise 09: Write a JavaScript function to find the longest string from a given array of strings.
Exercise 10: Create a constructor function patient that will be used to create patient objects. The constructor
should take name, age, gender, and condition as parameters and set them as properties of the object.
▪ Add a method displayInfo to the patient prototype. This method should log a string containing
information about the patient, such as "This patient is John Doe, he is a Male and has 35 years old,
his condition is stable".
▪ Create two patient objects using the patient constructor.
▪ Call the displayInfo method on each of the created objects to display their information.
Exercise 11: Write a JavaScript program that creates a class called 'employee' with properties for name and
salary. Include a method to calculate annual salary (salary*12).
▪ Create a subclass called 'manager' that inherits from the 'employee' class and adds an additional
property for department.
▪ Override the annual salary calculation method to include bonuses for managers.
▪ Create two instances of the 'manager' class and calculate their annual salary.

Part 04: Events handling and forms validation in JavaScript

Exercise 12: Write a JavaScript function that changes the background colour of a div element when the user clicks
on a button in the same HTML web page.
Exercise 13: Write a JavaScript program to create a slideshow that changes the displayed image when a next or
previous button is clicked.
Exercise 14: Create an HTML file with a form containing the following elements:
▪ A label and input field for the username.
▪ A label and input field for the email address.
▪ A label and input field for the password.
▪ A button to submit the form.
Write JavaScript code to handle the form submission:
▪ Validate the input:
o The username should be at least 3 characters long.
o The email should be in a valid email format (e.g., example@email.com).
o The password should be at least 6 characters long.
Display appropriate error messages next to the corresponding input fields if the input is invalid.
Exercise 15: Create the HTML form presented in the figure below, then use a CSS file to format it by using the
following properties.
▪ The body of the web page has a font size of 10 points, a font family in {Verdana, Helvetica, sans-serif}
and a very dark lime green colour for the text (#003300).
▪ The header element (h1) has a font size of 10 points and it is centred.
▪ The paragraph is centred and has the following margins 0, 40, 20 and 40 pixels
▪ The td element padding is 5 pixels.
▪ The td elements of the labels are right aligned, while td elements for the form elements are left aligned

2|Page
University of frères Mentouri M2: N etwork and Telecommunications
Faculty of Science and Technology Cours of Web Technologies
Department of Electronics Academic year: 2023-2024

Create a JavaScript program that will be used to verify that the user has entered all of the required data and that
the data is valid. Your form validation script should verify the following:
▪ the e-mail has the '@' symbol,
▪ at least one period exists after the '@' symbol,
▪ the user has entered a valid month between 1 and 12 inclusive,
▪ the day does not exceed the allowable value for any month (Be sure to account for 29 days in February
on a leap year (use the LeapYear () function.). Note that In general, leap years occur when the year is
divisible by 4.
▪ the user has entered a year between 1800 and 2999,
▪ the user has entered text for the city,
▪ the user has selected a state, i.e., not left the default blank,
▪ zip code is integer from 0 to 99999 (don't worry about 9-digit zip codes or ensuring that there are
exactly 5 digits),
Note: For each error, please use an alert () function to tell the user how to properly enter the incorrect value.

3|Page