JavaScript gets you to results easily. It’s the native language of web pages.
You can create and sell Android Apps easily by packaging your HTML and JavaScript with PhoneGap/Cordova. All popular (1000+ installs) cell phone apps in my courses have been created this way, including Lauri’s Times Grid Table with over 50 000 installs.
But how do you learn JavaScript? Read MDN JavaScript, try it out in Firefox F12 console, and learn some more in FreeCodingCamp.org.
This article shows you a simple example with a lion, a horse and a duck.
This tutorial article shows you how to arrive to an answer – instead of just showing the short, ready made code. You learn F12 console and searching documentation, and you should be able to use these skills to solve other novice JavaScript problems by yourself.
Sample Problem
Have a list of animals: a lion, a horse and a duck.
Randomly show animals, and count how many times animals have been shown.
Finally, show a random unseen animal.
F12 for Interactive JavaScript Console
In Firefox, press F12 and select Console tab. Now you can write JavaScript and see the result instantly.
>> 2+2
4
>> console.log("See you at TeroKarvinen.com!")
See you at TeroKarvinen.com!
Read the Manual and Create Array
Google or DuckDuckGo mdn javascript array. To get the manual for JavaScript, use “mdn javascript” + your search term. Or, if you want to get really fancy, you can later use my offline reference.
Let’s try it out in the F12 console
>> let animals = ["lion", "horse", "duck"] >> animals Array [ "lion", "horse", "duck" ]
When a statement returns nothing, an extra “undefined” is printed on the console. I have omitted it for clarity when it’s not relevant to the task.
Arrays work in JavaScript just like in most other languages, like C, C++ or Python lists.
>> animals[0] "lion" >> animals[2] "duck" >> animals[3] undefined >> animals.length 3 >> animals[animals.length-1] "duck"
Show a Random Number
Search the web for “mdn javascript random” to get the manual for Math.random().
From 0 to 1. The range includes 0 and excludes 1.
>> Math.random() 0.4971337727018613
Dice, a whole number between 1 and 6 inclusive. Note that this code is simply applied from the last example of MDN page for Math.random().
>> Math.floor(Math.random()*(6-1+1)+1) 6 >> Math.floor(Math.random()*(6-1+1)+1) 3
Number between 0 and 2 inclusive
>> Math.floor(Math.random()*3) 1
Show a Random Animal
>> animals.length 3
So the first item is 0 and the last item is 2. There is no item 3.
>> Math.floor(Math.random()*3) 2 >> animals[2] "duck"
Count Animal Displays
We need a place to store display count for each animal. We can define an array of arrays.
>> animals = [["lion", 0], ["horse", 0], ["duck", 0]] Array [ Array[2], Array[2], Array[2] ] >> animals[1] Array [ "horse", 0 ]
We can now take the first item 0 of this sub array for the animal, and the last item 1 for the count.
>> animals[1][0] "horse" >> animals[1][1] 0
Of course, we can also manipulate the display count
>> ++animals[1][1] 1 >> ++animals[1][1] 2 >> ++animals[1][1] 3 >> animals[1] Array [ "horse", 3 ]
Only Display New Animals
We can loop trough animals and do whatever we wish with the items we find.
>> for (animal of animals) {
if (animal[1]==0) {
console.log(animal);
}
}
Array [ "lion", 0 ]
Array [ "duck", 0 ]
Or, we can create a new array with just items that fit a criteria. Let’s get fancy with filter()
>> function unseen(ani) { return (ani[1]==0); }
>> let unseenAnimals = animals.filter(unseen)
>> unseenAnimals
Array [ Array[2], Array[2] ]
>> for (animal of unseenAnimals) { console.log(animal)}
Array [ "lion", 0 ]
Array [ "duck", 0 ]
Random Unseen Animal
We can get a random unseen animal from unseenAnimals array just like we did before with all animals array.
>> unseenAnimals.length 2 >> Math.floor(Math.random()*2) 1 >> unseenAnimals[1][0] "horse"
The whole randomization in short
>> let n=Math.floor(Math.random()*unseenAnimals.length); >> unseenAnimals[n][0]; "lion"
Your Turn
Can you write a loop that prints all the animals once in random order? Does your loop work with 20 animals?
When user has printed all of the animals once, can he print them out again, in another random order? While keeping count how many times the animals have been printed?
What Next?
To turn this into a web page, just create a short HTML5 page and put your JavaScript inside <script> tags just before body closes.
Learn more JavaScript and jQuery in FreeCodeCamp.org. From FreeCodeCamp.org Map, under “Front End Development”, play “Basic JavaScript” and “jQuery”.
For trickier questions, StackOverflow JavaScript can help. Votes order is often good.
Adminstrivia
Tested with Firefox 54.
This article has had multiple minor updates. Added logo.