My first script: an update (now with jQuery)

I haven’t posted in a few days, but I’ve still been steadily reading and researching to up my web development knowledge. I took a brief detour from JavaScript to work through some of the Python exercises on Learn Python The Hard Way (which, so far, I highly recommend), I’ve read through most of the jQuery Core documentation, and wrote another basic script to use with Greasemonkey in Firefox (I may write about that separately in a future post).

However, while viewing newbie-friendly open source projects on Up For Grabs, I came across one which mentioned issues in something called Codacy. I had never heard of this, so I signed up for an account and ran it on my Github repo for the prime number script I wrote recently. It gave me a B, mentioning several issues with my usage of console.log statements. In that original project, I created a bare bones web page, but all of my output went to the JavaScript console, which is more intended for development purposes. I did not have any visible output if the console was closed. To get rid of these errors, I decided to rework the code a bit.

I started by adding the index.html file to my repo, then added an empty unordered list which I planned to add list item elements to with the results of each prime number I checked in my script. I attempted to stick with vanilla JavaScript, but after a couple hours of futile attempts, I finally resorted to using jQuery. (If you’re interested, the repo is located here.)

When I converted my newly updated JavaScript code to jQuery, I noticed that my code became much more concise (which I appreciated). Here’s my code as it stands currently (and holy hell, was it hard to get this formatted right in WordPress’s editor):


$( document ).ready(function() {

	//find and store <li> DOM element with ID "output" to list
	var list = $( "#output" );

	function isPrime(number) {
		var remainder;

		//this will store each new <li> element as "item"
		var item;

		//this will store string to be appended to new list item
		var result;

		//prime numbers must be greater than 1
		if (number <= 1) { 			//create new <li> DOM element
			item = $( "<li/>" );
			result = number + " is not greater than 1! False.";
			item.html( result ).appendTo( list );
			return false;
		}
		else {
			for (var i = 2; i < number; i++) { 				remainder = number % i; 				if (!remainder) { 					item = $( "<li/>" );
					result = number + " is not a prime number! False.";
					item.html( result ).appendTo( list );
					return false;
				}
			}
			item = $( "<li/>" );
			result = number + " is a prime number! True.";
			item.html( result ).appendTo( list );
			return true;
		}
	}

	isPrime(0); //should return false
	isPrime(1); //should return false
	isPrime(2); //should return true
	isPrime(17); //should return true
	isPrime(7919); //should return true
	isPrime(23456789); //should return true
	isPrime(10000000000000); //should return false
});

From the start, this code is different because it’s wrapped in jQuery’s built-in functionality to check that the document has loaded, so I don’t go messing with the DOM before it’s ready for me to. To target the unordered list element on my index page, I find it with jQuery (targeting its ID, “output”) and save it to a variable named list.

The next addition to this script is a variable named “item,” which I’ve designated to store the new list item elements I’ll be adding to the output list. I’ve also created a variable named “result” to which I’ll save the strings describing the results of running the function.

Inside the conditional statement that checks whether the number is less than or equal to 1, I’ve replaced the invisible console.log statement with the new code that creates and appends a visible list item to the page. I did this by creating and saving a new list item element to item with jQuery. I then save a string stating that the inputted number is not greater than 1 and is thus false. Finally, to get this list item element onto the page, I again use jQuery to add the result string within the li tags and, using handy jQuery chaining, append it to the list I targeted earlier in the script. I then return false in case I wish to use the return value for something in the future (though I can’t currently imagine how I’d use it).

I didn’t have an else statement in my original script, since the number would either be return false and exit the function or otherwise continue on to execute the lines of code which followed, but I put an else statement in the revised script. It might be overkill, but I added it for the sake of thoroughness. Inside the for loop which checks for factors (returning false if they’re found, since a factor would signify the number isn’t prime), I used the exact same method described above to create a new list item element, fill it in with a string, and append it to the targeted list before returning false.

Should the for loop finish without returning false, I know that I’ve found a prime number – so I immediately use the same method I devised to add a list element stating that the number being tested is a prime, returning true. For fun, I added a fun new number I knew to be prime (23, 456, 789) to further test my program functionality. It worked!

It took me hours to get this seemingly simple program debugged and running properly, but I feel like I’ve learned a good deal in the process. I’ve been doing my absolute best to commit my changes regularly with git after making a change to the code so that it’s easy to briefly describe what I’ve done. Using git properly is probably one of the most difficult skills I’ve had to learn, but it’s essential…and I’m only scratching the surface yet. I experimented with branching for the first time, though I still don’t quite think I’ve got the hang of it. I find that I’m becoming more and more mindful of the need to commit the more I code. And I incorporated jQuery for the first time! I’m hungry to put it to further use. While I do want to master the basics of JavaScript without relying too heavily on a library, the platform cross-compatibility of jQuery makes it hard not to use. I’m sure it’ll pop up in quite a few of my scripts going forward.

Now I need to go to bed. Thanks for reading!