www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with Javascript quiz

  1. #1
    Join Date
    Sep 2003
    Posts
    8

    Help with Javascript quiz

    I need help with these 3 questions with this javascript quiz for a job. I didn't get the job but would like to find out how it's done so I can learn. Can anyone help?

    Question 1
    Write a Javascript class with the following specifications:
    1) Class name "fruit"
    2) Class takes in an argument "fruitName"
    3) a private variable "name" that is set when the class is instantiated
    4) a public method "getName" that returns variable "name"

    Question 2
    Write a piece of Javascript code (jQuery allowed) that finds the various fruit names in the HTML
    structure below and stores them in an array variable "fruits":
    <ul id=”fruits”>
    <li> Apple </li>
    <li> Banana </li>
    <li> Orange </li>
    </ul>

    Question 3
    Write a JSON representation of the the variable "fruits".

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    947
    Hmm, I think the person that wrote this test was a C or Java programmer, since the terms used are not entirely compatible with Javascript. JS CAN simulate object-oriented programming, but in its own way. As such there are some discrepancies:

    Question 1:

    The only 'private' variables in Javascript are those prefixed with 'var' inside functions and methods. But in order that each instance of the Fruit class can have a different name, the variable needs to be declared on the instance - i.e. 'this' - not on the method itself, with var. But the former method will NOT be private - it will be globally accessible.

    Also, the test says to set the variable but does not say what its assigned value should be. I assume it should be the value passed into fruitName.

    Code:
    function Fruit(fruitName) {
    	this.name = fruitName;
    	Fruit.prototype.getName = function() { return this.name; }
    }

    Question 2:

    It's unclear whether he wants you to first declare the fruits to look for, then find them, or simply assume that the textual content of each LI is a fruit. I assume the latter. I also assume he doesn't want you to trim whitespace from the side of the fruits.

    Code:
    $(function() {
    	var fruits = [];
    	$('#fruits li').each(function() { fruits.push($(this).text()); });
    	alert(fruits);
    });

    Question 3:

    Not clear if they want you to create a JSON object or actually print one out. I assume the former:

    Code:
    var output = '{';
    for(var s=0; s<fruits.length; s++) output += s+': "'+fruits[s]+'",';
    output = output.substr(output, output.length-1)+'}';
    alert(output);
    If you want me to explain the steps in any of the above, just ask.

  3. #3
    Join Date
    Sep 2003
    Posts
    8
    Thanx a lot! Question: How do the functions to questions 1 and 2 work?

  4. #4
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    947
    The function in question 1 is JS's simulation of a class. If you're unsure of the difference between functions and classes, I'd suggest looking that up. It is 'instantiated' - i.e. an instance of it is created (of which there may be many) by assigning it to a variable and calling it with the 'new' keyword.

    'getName()' is a method OF the Fruit() class. The strange prototype thing you see has to do with the fact that JS implements what is called prototypal inheritance (something else to look up). In this case, we want each instance of the class to have a different fruit name - hence it has to be done this way. 'this' refers to the instance (a key concept of object-oriented programming).

    In question 2, we use a jQuery selector to match the UL and its LI children, then we iterate over them. For each, we store the text value of the LI currently being looked at - i.e. the fruit - in our array. The whole thing runs inside a 'document ready handler', which means the code won't execute until the DOM has loaded (a requirement any time your JS is manipulating or interrogating the DOM).
    Last edited by mitya; 03-18-2011 at 07:21 PM.

  5. #5
    Join Date
    Sep 2003
    Posts
    8
    Thanx a lot for your help! I really appreciate it!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles