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.
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 |
|
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 |
|
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 |
|
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).