JavaScript functions exercise

Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.

Task 1

Find 3 of this weeks music new releases, take a note of the name of the album, the name of the band / singer / performer and the price of the CD or record.

Create variables to hold each of these, for example:

var artist1 = "Nirvana";
var album1 = "Nevermind";
var price1 = 3.99;

var artist2 = "Pavement";
...(and so on)...

Create a function named insertEntry which accepts one argument being passed to it, name this argument artist. Add a line of code inside your function which concatenates the artist argument onto the end of the following string, "Artist: ". Add an open paragraph HTML tag (<p>) to the start of this string and a close paragraph tag (</p>) to the end. Add another line of code which writes the string into the HTML page (use document.write()).

Add a line of JavaScript which calls the insertEntry function passing it the artist1 variable then repeat this for artist2 and artist3.

Test your code at this point, you should see the names of each artist writen into the page in sequence.

Add a second argument to your function to accept the name of each album. Call this argument album. Add a line of code which concatenates this argument to the end of the following string "Album: ". Surround this string with paragraph tags as before and either concatenate it to the end of the previous string before it is written into the page.

The following is pseudo code, don't try to copy and paste it, it won't run, it is here as an example of the structure your code should have at this point:

declare variables

function declaration(argument 1,argument 2) {

    concatenate string 1 (artist) - add this to a new variable if you like
  	  
    concatenate string 2 (album) - add this to a new variable if you like

    concatenate string 1 and string 2

    write the result into the page

}

call function passing artist1 and album1 as arguments
call function passing artist2 and album2 as arguments
call function passing artist3 and album3 as arguments

Test your code again, make sure the output is as you would expect it to be.

Add another argument to your function to accept the price of each album. As before, inside the function add code to write the price into the page at an appropriate point.

Test your code a final time to make sure that everything is working as you would expect.

Extensions

  1. Replace the HTML paragraph tags above with HTML list tags. Create a list for artist1, album1 and price1 and then another list for artist2, album2 etc. Don't forget to include tags to declare which sort of list this is to be, either <ol> or <ul>.

    Add appropriate CSS styles to the <head> to display the lists nicely in the page.

  2. Amend your function so that, rather than writing the code into the HTML page, it builds and returns a string which contains the variable values and formatted HTML.

    Create a variable for the string to be returned into.

    Create a second function which will accept this string as a single argument. This function will add <div> class="albumEntry"> to the start of the string and </div> to the end.

    This new function should then write the completed string into the page as before.

    Add appropriate CSS styles to the <head> to display the new tags nicely in the page. the use of border-bottom: would create a nice rule between each entry.