CoderCamps – Week Two

I survived week one!  Now onto week two …

For Day Six, we focused on loops and arrays in JavaScript.  We got away from the design side altogether (not much CSS today at all) and kept it very simple, as you can see from the homework.

Day Seven was more about loops and arrays, but we also got into functions (yay!).  Calling functions from within functions and combining all the conditionals, loops and array things we’ve learned so far into something that was starting to resemble an application.  I may have over-engineered the “super simple” homework assignment, but I wanted to stretch myself a little.  Although it clearly needs some refactoring (I’m sure I should not have quite so many global variables or functions in there), at least it was a more complex challenge.  And I learned some more of my common errors (arrays use square brackets, not parentheses – not sure why that’s so hard for me to remember ….).  So here’s day seven’s homework.  Still not a very functional website (so sorry for all the annoying alerts), but next week we get to the DOM and I imagine that’s when we will start getting away from the pop-up windows!

On Day Eight we finally hit objects, and I found I had to adjust my thinking around objects a little.  I am so used to .NET where objects are clearly attached to classes, one way or another, but in JavaScript objects are a little more, ah, “free-floating”.  That’s okay, but I am used to more of a hierarchy, so it was a little like going from a company with a well-defined org. chart to a start-up with. well, no hierarchy.  Nested objects were also new to me – not difficult to understand, just different.  Passing by value and by reference as concepts were fine, but the nitty-gritty of when what is passed how is something I’ll need to look into more (several resources for that – starting with this one).  The homework for today was very straightforward – just creating objects, nested objects, and so on – so I spent some additional time on my project.

Given I might want to store some information locally for my project, I thought I’d use localStorage.  Obviously in a production application I would use database storage for this, but as this is a beginner’s class I thought I’d keep it simple.

This required some research on my part (I have never used localStorage before), so I did some testing of absolute basics and came up with this very, very simple script:

document.getElementById(“btnMListSubmit”).addEventListener(“click”, function populateMailingList() {
localStorage.setItem(‘mListName’, document.getElementById(‘mListName’).value);

OK, so not very complicated, but now I have a basic understanding of how this works.  In my final project I might use the localStorage to populate some arrays that can be used to populate the couple of forms I have on the site.  Not quite SQL, but will still support CRUD operations.  So now to add IDs to every form element and button I have in my site!

Day Nine – quite a day.  More on objects, constructors, methods, prototypes, and arrays.  But the really hard work came in the evening.  The homework was optional – basically just adding, displaying, and deleting a list of tasks; each of which was an object held in an array.  I had to make this complicated …. I decided to take that as the basis and wrap some study around it (as well as get some practice in CRUD operations for my final project).

So I decided to throw in some DOM manipulation into my sandbox/homework.  The code is messy and yes, even I recognize that it could be probably 1/3 the size.  (My first comment is “needs major refactoring – repetition & ugliness all over”).  But I thought it would be neat to practice creating some HTML elements on the fly. Now, I do realize there are other (probably much better) ways of doing this, but it was fun.  And it also gave me some insight into the order of execution.  In other words, things don’t necessarily happen in the order in which you type them out on the page.  So I added some additional triggers (i.e. don’t do this thing until the user does this!) to force everything to happen in a certain order, and to ensure that variables actually got the value they were supposed to before the related code ran.  Had some fun figuring out why only the first item was getting deleted in my list, no matter what I selected!

This is how you learn ….

Rounding out the week on Day 10 we wrapped up objects and constructors and took a quick look at classes.  Yes, there are now classes in JavaScript!  You can even do inheritance, except it’s known as “extensions”.  Here’s a quick introduction to the extends keyword, and to classes, both courtesy of MDN.  We then moved into simple CRUD operations (no, not that kind of crud – this kind), which I had fortuitously done some studying on last night.  We covered primarily CRUD operations with arrays, but did touch on CRUD operations with arrays of objects.  As I plan on working on the CRUD features of my project this weekend, this was timely, to say the least.  I will also start reading up on JQuery, which I have been reliably informed is a better way of handling some of the DOM manipulation and CRUD tasks than just using plain ol’ JavaScript.

Some things I learned this week that I had forgotten / never learned in the first place, and things that I kept forgetting to do:

  1. You can delete an existing item (or several) at a specific index in an array using array.splice(num1, num2), where num1 is the index you want to start removing items at, and num2 is how many you want to remove.
  2. Always add the JavaScript reference in the html file.  Browsers get very unhappy when you don’t!
  3. If you have to restart your laptop on a 20 minute break when you’re supposed to be doing a 20 minute lab, having a SSD makes it a whole lot less painful.
  4. Passing by value and by reference is easy to understand in theory, harder to apply in practice.
  5. Classes are really cool.  Better than constructors.  I didn’t realize how much I missed them ….
  6. If you’re referencing a function in your HTML (such as the triggered function of an “onclick” event of a button), do NOT forget the “( )” at the end of the function name.  It won’t break the internet, but it’s an annoying bug to track down.
  7. Don’t forget to have some kind of clear form function if you’re going to be entering multiple values.  It will annoy your users if they have to clear out every text box manually.
  8. Visual Studio doesn’t have spellcheck built in.  If you misspell your function “addFiends” instead of “addFriends”, it’s just going to assume you want to add some fiends to your dropdown.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s