Skip to content

Exercises 2 : JavaScript Basics 2 (26p)

Remember use JAMK/GitLab to return your exercises. Student need to test that exercise really work.

Exercise 01 - forms [4p]

Use HTML, CSS and JavaScript to create a form where user can calculate two numbers together. Use displaySum() function which takes two number as a parameters (from web form) and displays a result below calculate button. Use <div id="result"></div> display result. Create another calculateSum() function which calculates and returns a sum. Call that function from your displaySum() function.

Image 01

Exercise 02 - callbacks [4p]

Examine the below program code. Using the line numbers as help, think (line by line) why the program (and in what order the program proceeds) prints the following information to the web console: "Pizza with ham and cheese".

1
2
3
4
5
6
7
const myFunctionWithCallback = (p1, p2, callback) => {
  return callback(p1, p2)
}

const myFunc = (p1, p2) => `Pizza with ${p1} and ${p2}`
const result = myFunctionWithCallback('ham', 'cheese', myFunc)
console.log(result)

Exercise 03 - timeouts [4p]

Examine the below program code. What you think it will print to Web console? Don't run code, try to think it!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const print = (str, taskTime) => {
  setTimeout(function() {
    console.log(`${str} finished!`)
  }, taskTime)
}

const execute = (str, taskTime, callback)  => {  
  callback(str, taskTime)
}

console.log("Task1 to execution...")
execute('Task1', 2000, print)

console.log("Task2 to execution...")
execute('Task2', 2000, print)

console.log("Task3 to execution...")
execute('Task3', 500, print)

console.log("Last code line executed!")

Exercise 04 - Lady Gaga [4p]

Let's say that Lady Gaga is keeping a concert. Create an web page which displays a text OMG - Lady Gaga start singing! when the page is loaded to web browser. After this, the concert starts with fireworks. Add new text NICE - fireworks! below the previous text every five seconds. You can decide yourself how many times the text is added. All previously added texts remain on the screen according to the example printout. Finally, after some time (you can decide the time yourself), the text WOW - It was the best concert in my life... should be added below the previous texts.

Example print:

1
2
3
4
5
6
OMG - Lady Gaga start singing!
NICE - fireworks!
NICE - fireworks!
NICE - fireworks!
NICE - fireworks!
WOW - It was the best concert in my life...

Exercise 05 - Persons [4p]

Create a Person function (class with functions) which can be used to create Person objects, which has name, age, phone and email properties. Person class should have also age method, which will increase age property by one in each calling time.

Create at least three different person object instance and print values to web console.

Exercise 06 - Calculator [6p]

Create a web page which is like a speed calcutor. Speed calculator will use given values to calculate km/h value (see image below). The results are displayed with two decimals.

Use own made SpeedCalculator class which will take a hours, minutes, seconds and kilometers via constructor. Create calcKmhPace() method to calcuate value. Use kmhpace() getter method to return calculated value. Create UI form for this purpose (look below, but try to do it better with your CSS skills).

Image 02