Variables and Operators:

1. Click button to calculate sum, multiply, modulus within one function only. Alert one after the other.

2. Click button to calculate sum, multiply, modulus with separate functions. Alert one after the other.

3. Click button to calculate which will capture return values from independent functions - sum, multiply,
modulus.

4. What are global and local variables? Write a program to demonstrate global and local variables.

5. Have two global variables and two local variables and calculate sum, multiply, modulus.

6. Have 5 buttons with different functions. Use different operators that we discussed today.

7. Have two global variables a and b.

a. Have a function add( ). Increment the value of a first and then calculate the sum of a and b.

b. Have a function sub( ). Decrement the value of a first and then alert a-b.

c. Have a function multiply( ). Give a local variable a=10 and then calculate the sum, subtract, divide,
multiply and modulus.

8. Write a program to convert Fahrenheit temperature to Celsius. Formula is : C = (F - 32) * 5/9

9. How would you show the following output in alert boxes.

a. The name is set as : Bruce

b. Name is displayed as : Wayne

Functions- Calling, Passing, Return:

1. Here is the declaration of a function. Each parameter is a string.

function displayValue(param1, param2, param3){

Demonstrate all of the following in separate JavaScript file (each response should be in separate file):

1
a. How will you trigger the above method? Show at least 2 ways to call the function.

b. How many parameters will you pass to the function above?

c. Alert the parameter values inside the function.

d. What happens if you pass only 2 parameters and try to alert all 3 parameters?

e. What happens if one of the passed parameter is re-declared inside the function with a keyword var.

f. What happens if you pass only 1 parameter and try to add all 3 parameters such as:

g. Alert(param1 + “ “+ param2+ “ “+ param3);

2. Here is the declaration of a function.

function setValue(fName,lName,age){

function setCustInfo(name){

alert(“The last name is set as: ”+name);

function displayCustInfo(name){

alert(“First Name is displayed as:”+name);

Demonstrate all of the following in separate JavaScript file (each response should be in separate file):

a. How would show the following output in alert boxes?

i. The name is set as: Bruce

ii. Name is displayed as: Wayne

Show at least 2 ways to get the above output. (Hint: onclick and call inside js);

2
b. Inside this setValue method, how will you trigger setCustInfo and displayCustInfo methods?

c. What if the variable “name” is declared globally with a value? What will be the output look like?

d. In a separate JS file, try to declare the variable “name” locally with some value. What will be the
output look like?

e. In a separate JS file, try NOT TO Pass the value to setCustInfo from setValue function - rather have
the “name” variable globally with a value. What is the output?

3. Here is the declaration of a function.

function setValue(fName,lName,age){

function setCustInfo(name){

alert(“The name is set as: ”+name);

function displayCustInfo(name,i){

alert(“Name is displayed as:”+name);

k = name + “ “+i;

return k;

Demonstrate all of the following in separate JavaScript file (each response should be in separate file):

a. How would show the following output in alert boxes (in same sequence)?

i. The name is set as: Bruce

ii. Name is displayed as: Wayne

iii. Wayne 30

b. In Separate JS file: What happens if “lname” is declared as global variable with some value? What will
the output look like?

3
c. In Separate JS file: How do you show the following output in alert boxes(in same order):

i. The name is set as: Bruce

ii. Name is displayed as: Wayne

iii. Wayne Bruce

iv. Hello Bruce Wayne at 30

d. In Separate JS file: What happens if “k” is

i. declared locally with displayCustInfo method with a value

ii. declared globally below displayCustInfo method with a value.

iii. declared locally but set the value = “DATA VANISHED” just before the “return k” statement in
displayCustInfo method?

4. Here is the declaration of a function.

function setValue(fName,lName,batmanAge){

function setCustInfo(name,i){

alert(“The name is set as: ”+name);

batman_age = i;

function displayCustInfo(name){

alert(“Name is displayed as:”+name);

return name + “ “+batman_age;

var batman_age = 27;

4
Demonstrate all of the following in separate JavaScript file (each response should be in separate file):

a. How would show the following output in alert boxes (in same sequence)?

i. The name is set as: Bruce

ii. Name is displayed as: Wayne

iii. Wayne 25

b. How would you show the following output in alert boxes (in the same sequence)?

i. The name is set as Wayne

ii. Wayne 27

iii. Name is displayed as: Batman

c. In Separate JS file, with the above, create an additional function that would check the age of a person.
Call this function from setValue function.

function checkPerson(){

i. If the age of the person is same as batman_age then alert this “THIS person seems like BATMAN” Else
if the person age is 24 then “This person may be ROBIN” Else “I am not sure who this joker is”.

5. Create a function that would check the passenger age. Take the input from the user using the prompt
command in your function – copy paste this statement

var age=prompt("Please enter your age");

a. If the passenger is 2 years or below then alert No charge.

b. If the passenger is above 2 years and below 14 then alert 10% discount

c. If the passenger is above 14 and below 55 then alert Regular price

d. If the passenger is above 55 then 20% discount

5
6. Prompt the user to enter a number and check if it is even or odd.

7. Assume that you are developing an ATM machine, Prompt the user to enter amount he/she wants to
withdraw.

a. Alert “Your amount is ready” if they enter a multiple of 20 else alert “Please enter multiples of 20”

b. Additionally, check if the user entered number of a string. If he did not enter a number then alert –
Please enter valid number.

Hint: Use isNaN() method provided by Javascript.

If-Else:

1. Write a program to prompt the user for age. If age is less than or equal to (<=) 14, alert "Not Allowed".
If age is greater than 14 and less than 65, alert "Regular Price". If age is equal to 50, alert "Special
discount".

2. Write a program to prompt the user for age. If age is equal to 14, alert "coupon 1". If age is equal to
21, alert "coupon 2". If age is equal to 30, alert "coupon 3". If age is equal to 50, alert "coupon 4". Else
alert "No coupon".

3. Write a program to prompt the user to enter a day (like Monday, Tuesday, Wednesday, etc). Based on
the value entered by the user, display a special dish. For example, if the user enters Monday then alert
"Mondays, We serve Pasta". If the user enters Friday then alert "Fridays, we serve Tacos".

4. Write a program to prompt the user to enter a year (like 2011, 2012, 2010, etc). Based on the value
entered, display the movie that won the Oscars for that year. Just write this for last 8 years. If he enters
beyond last 8 years then alert the user to enter between 2003-2012.

5. Write a program to prompt the user to enter the Grade of a student (like A+, A, A-, B etc). Based on
the value entered, display terms like "Excellent", "Good Job", "Average" etc.

Switch:

1. Write a program to prompt the user for age. If age is equal to 14, alert "coupon 1". If age is equal to
21, alert "coupon 2". If age is equal to 30, alert "coupon 3". If age is equal to 50, alert "coupon 4". Else
alert "No coupon".

6
2. Write a program to prompt the user to enter a day (like Monday, Tuesday, Wednesday, etc). Based on
the value entered by the user, display a special dish. For example, if the user enters Monday then alert
"Mondays, We serve Pasta". If the user enters Friday then alert "Fridays, we serve Tacos".

3. Write a program to prompt the user to enter a year (like 2011, 2012, 2010, etc). Based on the value
entered, display the movie that won the Oscars for that year. Just write this for last 8 years. If he enters
beyond last 8 years then alert the user to enter between 2003-2012.

4. Write a program to prompt the user to enter the Grade of a student (like A+, A, A-, B etc). Based on
the value entered, display terms like "Excellent", "Good Job", "Average" etc.

Loops:

1. Write a program to print (in console) 1-30 numbers with a line break.

2. Write a program to print numbers 1-10 in reverse order (like 10,9,8,7,6,....1) with a line break.

3. Write a program to print numbers from 12 to 33 and also at the end print the sum of all these
numbers.

4. Write a program to print (in console) 1-30 odd numbers with a line break

5. Write a program to print (in console) 1-30 even numbers with a line break

6. Write a program to print 1-100 prime numbers.

For-Loop and If-Else:

1. Print numbers from 1 to 10

2. Print numbers from 10 to 1

3. Print odd numbers from 1 to 50

4. Print even numbers from 1 to 100

5. Numbers to be printed between 40 to 60

6. Numbers printed between 80 to 100

7. If you enter ‘1’ – it should print numbers between 1 to 11

7
If you enter ‘2’- it should print numbers between 2 to 12

If you enter ‘3’- it should print numbers between 3 to 13

If you enter ‘4’-it should print numbers between 4 to 14

If you enter ‘5’-it should print numbers between 5 to 15

8. If the value is entered ‘123’, alert should be ‘One Two Three’

If the value is entered ‘124’, alert should be ‘One Two Four’

If the value is entered ‘125’, alert should be ‘One Two Five’

If the value is entered ‘126’, alert should be ‘One Two Six’

If the value is entered ‘127’, alert should be ‘One Two Seven’

9. If I enter ‘1’, alert should be ‘One’

If I enter ‘2’, alert should be ‘Two’

If I enter ‘3’, alert should be ‘Three’

If I enter ‘4’, alert should be ‘Four’

If I enter ‘5’, alert should be ‘Five’

Else, please enter a valid number.

10. If I enter a number between 1 to 10, it should alert, the number is between ‘1 and 10’

If I enter a number between 11 to 20, it should alert, the number is between ‘11 and 20’

If I enter a number between 21 to 30, it should alert, the number is between ‘21 and 30’

If I enter a number between 31 to 40, it should alert, the number is between ‘31 and 40’

If I enter a number between 41 to 50, it should alert, the number is between ‘41 and 50’

11. If the number is less than 50 or greater than 200, alert the number is a valid number

8
If the number is between 50 and 200, alert this is a good number.

Else, alert ‘It is an invalid number’.

12. If I enter ‘One’, alert ‘1’

If I enter ‘Two’, alert ‘2’

If I enter ‘Three’, alert ‘3’

If I enter ‘Four’,alert ‘4’

If I enter ‘Five’, alert ‘5’

13. If I enter numbers Six to Ten, please enter a proper number. Anything else, please enter a valid
number.

14. If I enter an even number, I want next 10 even numbers to be printed. If I enter an odd number, I
want next 10 odd numbers to be printed.

15. If I enter an even number, I want previous 5 even numbers to be printed. If I enter an odd number, I
want previous 5 odd numbers to be printed.

Arrays:

1. Write a program to display 10 quotes (one after the other in sequence). Hint: use Arrays to store the
quotes (sayings). Name the function as displayQuotes.

2. Create a function that accepts a parameter which is of the type Array and alerts the length of the
array as well as the elements one after the other starting from 4th element. Call this function from
displayQuotes function that you created in Question 1.

3. For the above created array, perform the following operations on an array.

a. pop()

b. Now check the length and print it to console

c. reverse()

d. Now access the 8th array element and print it to console

9
e. shift()

f. Now check the length and print it to console

g. sort()

4. Prompt the user for appropriate values based on the operation that you are performing and then
execute the following operations on the array:

a. push()

b. Now check the length and print it to console

c. unshift()

d. Now check the length and print it to console

e. splice()

f. Now check the length and print it to console. Now access the 5th array element and print it to console.

g. slice()

5. Create a Months Array (jan, feb, mar...etc) and repeat question 3 and 4. Once you implement these
two arrays, use concat() method to add these arrays. Print each of the elements of this concatenated
array one after the other - hint: use loops.

6. Create an array with Monday, Tuesday,Wednesday,Thursday, Friday and Saturday and console.log
individually.

7. Ask for a prompt, if I enter ‘Monday’, in console display-

If I enter ‘Tuesday’,in console display ’Wednesday’,’Thursday’,’Friday’and ‘Saturday’.

If I enter ‘Wednesday’,in console display ’Thursday’,’Friday’and ‘Saturday’.

If I enter ‘Thursday’ , in console- ‘Friday’and ‘Saturday’.

If I enter ‘Friday’, in console- ‘Saturday’.

If I enter ‘Saturday,in console –‘Sunday’.

If I enter ‘Sunday’, in console- it is the last day of the week.

10
8. Ask for a prompt, if I enter ‘Monday’, in console display
‘Tuesday’,’Wednesday’,’Thursday’,’Friday’,‘Saturday’ ,’Sunday’and ‘Monday’.

When I enter ‘Tuesday’, in console display ’Wednesday’,’Thursday’,’Friday’,‘Saturday’ ,’Sunday’

When I enter ‘Wednesday’, in console display ’Thursday’,’Friday’,‘Saturday’ ,’Sunday’,

When I enter ‘Thursday’, in console display ’Friday’,‘Saturday’ ,’Sunday’,‘Monday’, ‘Tuesday’ and

When I enter ‘Friday’, in console display ‘Saturday’ ,’Sunday’,‘Monday’,

When I enter ‘Saturday’, in console display ‘Sunday’,‘Monday’, ‘Tuesday’ ,‘Wednesday’,’Thursday’ and

When I enter ‘Sunday’, in console display ‘Monday’, ‘Tuesday’ ,‘Wednesday’,’Thursday’, ‘Friday’and

9. Create an array, for every match, display an alert ‘match’.

10. Create two arrays, for every match between the 2 arrays, display an alert ‘there is a match’.

Strings:

1. What is the result of “3”+5+6.

2. What is the result of 3+”5”+6

3. What is the result of 3+5+”6”

4. Write a program to return the length of a string "Pneumonoultramicroscopicsilicovolcanoconiosis".

5. Write a program to convert the above string to Upper case

6. Write a program to convert the above string to Lower case

7. Consider the string “I like this product; I hate this product; This product is worth buying; I don’t agree
with the above user”. Now break this whole string into pieces wherever you see “;”. Now print the
broken down pieces one after the other in console.

11
8. For the above question 1, return the number of time the letter "o" appears.

9. Write a program to replace a particular term in a sentence (you can come up with a sentence).
Replace with the term "javascript".

10. Find the number of times the string "not" appears in this sentence -

a. " Javascript notation %^&* notes that structure rules and not context for nothing"

b. Now, for the above problem 4, create an array with texts before and after "not" occurrences.

Assignments on DOM:

1. Have a paragraph. On click of a button, alert the text in the paragraph.

2. Have a paragraph. On click of a button, change the backgroundColor and text color of the
paragraph.

3. Have two text boxes. On click of a button, get the value from the first text box and assign that value to
the second text box.

4. Have an image.

a. On click of a button, replace the image with another image.

b. On click of a button, hide the image

c. On click of a button, show the image

5. Have an image and two buttons, PREV and NEXT. Have 10 images in an array. When you click on NEXT,
the next picture should display and when you click on PREV, the previous image should display.

6. There is a link: http://www.pro-tekconsulting.com/main/navigate/about&us/contactus/email/your

info.jsp

a. Alert- ‘contact us’

b. Alert- ‘your info’

c. Have two text fields- Replace ‘navigate’ , ‘contact’ with whatever the user enters in the text
field and hits ‘submit’

12
d. Have 3 text fields- whatever you enter in those text fields should replace ‘prompt1’,’prompt2’

and prompt3’.Then ‘alert’ that. After 3rd alert, the whole new link should come up.

http://www.pro-tekconsulting.com/main/navigate/about&us/contactus/email/

firstname=prompt1 & lastname=prompt&ph_no=prompt3”

Form Validation:

Create a form with First Name, Last Name, radio buttons for Gender (Male and Female), drop down
menu for State, a check box for I ACCEPT and a submit button. At the click of submit button, the
following should be validated.

1. If the First Name and Last Name fields are left blank or has a number, the background color of the text
box should change to red color.

2. If the Gender is not selected, alert the user to select at least one option.

3. If the State is not selected, alert the user to select a state.

4. If the check box is not selected, alert the user to check the box.

DOM and Events:

1. Write a program to convert Fahrenheit temperature to Celsius. Here are the things that needs to be
implemented as a part of this question:

a. Ask the input from the user for Fahrenheit using a text field

b. As soon as the user types in the Fahrenheit number in the text field, the result should display
immediately in the div below

c. Hence, there should not be any submit button

d. Hint: Use onkeyup event. Formula is : C = (F - 32) * 5/9

e. Don't display the decimal values - but you should accept decimal values from the user

13
f. If the user enters any invalid values (strings) ) then you should make the input box border red and
prompt user to enter correct values

2. Have images, p tags, div tags and various other elements on the page. When the page loads, an alert
saying "welcome to my blog" should pop up.

3. Have several html tags on the page. Have an input button with id hideElems. When this button is
clicked all the elements on the page should be hidden.

4. Have an input button with id showElems. When this button is double clicked, all the elements on the
page should be shown.

5. Have an input button with a id and

a. when you mouseover this button, the <ul> elements on the page should be shown.

b. when you mouseout this button, the <ul> elements on the page should be hidden.

6. When page loads, write code to hide elements all the elements with ids "main_one", "main_two" and
"main_three".

7. Create 10 check boxes. When you click a button called "Select All" - all the check boxes should be
unchecked.

8. Have a button called VALIDATE then it should check if the select boxes are selected or NOT. If yes,
then alert the TEXT that were selected in each of these select boxes.

9. Have two buttons - "CHECK URL" and "ADD LINK". The button "ADD LINK" adds the given link the list
of anchor links. Now on a click of "CHECK URL" button, check to see if "http://www.pro-
tekconsulting.com" is included in these 5 anchors tags or not. If NO, then enable "ADD LINK" button.
When you click on this "ADD LINK" button, Pro-Tek website link should be added to the DOM.

10. Have two divs side by side - lets call them "Form Div" and "View Div".

a. The first div - "Form Div" should have a simple form with fields - first name, last name, gender, state
(select box) and "Save" button.

b. The "View Div" should have a button called "EDIT" - but this button should be hidden by default.

c. When you click on the "Save" button, the user entered data should appear in the "View Div" - also the
form input fields should be cleared out (should be empty).

d. The View Div should display form data in span tags or p tags or div tags but not as input tags. Also the
"EDIT" button should now be visible.

14
e. When you click on the "EDIT" button, the form should be repopulated with the data so that you can
make some changes and save again.

Extra Assignments on DOM:

1. Create a drop down box with the below options. Also have a paragraph and act accordingly upon the
paragraph when the user selects any options below.

a. Make Invisible

b. Change Color

c. Make visible and Change color

d. Default

2. Create two text fields and a button.

Whatever is entered in first text field, the value should go to the second text field and the first text field,
should remain blank , with no value.

3. Create two radio buttons, the radio buttons should be checked.

4. Create one div, one text field, one button.

If I enter ‘black’ in text field (div border should be black)

If I enter ‘red’ in text field(div border should be red)

If I enter ‘anything else’ (for eg: yellow or green) it should alert- “pleases enter a valid color”.

5. Create two radio buttons, two text fields, 1 regular button.

If any value entered in first text field, first radio button should be checked, if any value entered in
second text field, second radio button should be highlighted, if there is nothing entered, there should an
alert, ‘please enter only in one text box’.

6. a. Do a form validation. Each invalid textfield should come as ‘alert’. All input types which could not
validate, should come in different ‘alerts’.

b.Only ‘1’ alert, it should show all input types which are not validated.

15
7. Create a wrapper and a button. If you click on the button, 2text fields, 1 image. If you click on the
button, a small div with text, should appear (All this is in Js- innerHTML).

8. You need to have ‘Comments’,alternate colors for all the comments and ‘post the date’,next to each
comment. (properties should begin in ‘CSS’).

9. There should be ‘3text fields’,’2buttons’.

a. If you press the first button, it should appear in the div.

b.If you hit the second button, whatever you enter in the div, should come back to input field.

10. Have one radio button and one checkbox. When the radio button is checked, display as ‘checked’ .
When the ‘checkbox’ is checked , display as ‘checked’. Have one drop-down list . Whatever, you select
in ‘drop-down’, should appear on the right side.

11. Create a form, 3text fields, 2 radio buttons, 1 checkbox and 1 drop down. This is at the hit of each
key.

a. If you entering a number in the first text field, it should say ‘number’.

b. If you entering a character in the first text field, it should say ‘string’.

c. If you enter nothing, it should say ‘null’.

After the user enters the total word(for e.g: – a number or a character), then it should display as a
‘number’ or ‘string’. The moment you select a ‘radiobutton’, it should say ‘selected’.

The checkbox should show-

a. If the option is checked- display ‘checked’.

b. If the option is not checked- display ‘unchecked’.

When you hit on ‘submit’, it should alert ‘the form has been successfully submitted’.

12. Create an image. When I go over the image, the description of the image should come up. (Define
something at an ‘Alt level’ , on top of the image. Create a text field, whatever I enter in the text field, the
info should be displayed on the side of the image.

16
MATH & DATE:
1. Write a program to convert Fahrenheit temperature to Celsius. Here are the things that needs to be
implemented as a part of this question:

a. Ask the input from the user for Fahrenheit using a text field

b. As soon as the user types in the Fahrenheit number in the text field, the result should display
immediately in the div below.

c. Hence, there should not be any submit button.

d. Hint: Use onkeyup event. Formula is : C = (F - 32) * 5/9

e. Don't display the decimal values - but you should accept decimal values from the user

f. If the user enters any invalid values (strings) then you should make the input box border red and
prompt user to enter correct values.

2. Write a program to have a small food menu for a restaurant and on click of button "SHOW ME
TODAY's SPECIAL" - display today's special dish. Use the date() method to get current day of the week
(Mon, tues, wed...).

BROWSER:
1. Write a program to detect the current browser that the user is using.Navigator object

2. If the user is not using MAC then alert the user should use MAC OS.

TIMING:
1. Use arrays: write a program to display images in your webpage every 10 sec - single image at a time.
Hint use: SetInterval()

2. Use arrays: write a program to display quotes (one after the other in sequence) every 10 sec. Hint
use: SetInterval()

3. Once you implemented problem 3, now use a math object display a random quote every 10 sec -
instead of sequence.

4. Display an image on the front end after 10 secs delay.

5. Create one button. When you press ‘button’, ‘5images’ should appear one after another. (everything
is done in Javascript).

17
18