JavaScript (and jQuery) in 7 Days

Review the Assignment from Day 1

•         Finish your assignment
•         Compare your code to the code in this video
•         Use the review to update your own assignment code

Lists are important in life and programming. Every program or website will have features that are best kept in collections, these are called Arrays in JavaScript. (Examples of data for a list could be posts, friends, dates, and so on).

•         Build an array using JavaScript Array syntax
•         Access items by their index numbers
•         Use Array methods to add and remove items at will

When dealing with Arrays, we’ll often need to do some task on or with each individual item in the array. Since we don’t always know how many items are in an Array, and since we would be writing the same code over and over, instead we can use “loops”.

•         Arrays length property tells us how many items it has
•         Write a for loop to iterate an array
•         Use a while loop as an alternative to the “for” loop

 Sometimes we will need to make logical choices based on the value of a variable or expression rather than the truthfulness of it. For instance, depending on what day today is, we might cook different dinner. In JavaScript, conditions like this are handled with “switch” statements.

•         Choose a variable to evaluate
•         Write “cases” to run code based on that variables value
•         Use a “default” to handle unexpected values

 Although not very common, there will be times that we want to stop looping before every item has been iterated over, or we may wish to continue to the next iteration of a loop without running the rest of the code in the loop. For this we can use the “break” and “continue” keywords.

•         Write either a “while” or “for” loop
•         Use “break” to stop the loop for good
•         Use “continue” to stop the current iteration and move on

There are some functions that are so common, JavaScript includes them in the language. In this video we’ll go over a few and show how to use them to select random Array items.

•         Math is an Object with math functions
•         Math.random will help us select random indexes
•         Practice using different built in utilities

Our assignment for day 2 will be to improve on the Mad-Libs assignment by using loops to choose the words.

•         Create arrays of different types of words
•         Use a loop to select random words
•         Pass the random words to your Mad-Libs function

Review the Assignment from Day 2

•         Finish your assignment
•         Compare your code to the code in this video
•         Use the review to update your own assignment code

As we begin to model more complex problems and build complex solutions, we might want to group variables together in a common “namespace”. Remember the Math.random and Math.floor functions; they are on a part of the Math namespace.

•         Learn to create an object literal
•         Create properties on the object
•         The object now becomes a “namespace” for the variables

Usually we will use objects to hold properties related to some part of a program, so it’s natural that we would end up running common functions with these objects. Lucky for us, we can benefit from putting these functions as properties of the object.

•         Create an object
•         Set the function directly as a property on the object
•         Call the function directly on the object

So far, everything we’ve done has been sequential work, each line ran directly after the other. Sometimes we’ll write code that doesn’t need to run immediately. Some examples are clocks, animations and time outs.

•         Use createInterval or createTimeout to delay function call
•         The delay is measured in milliseconds
•         Write a function that executes on a timeout

There are some things about using objects and writing object methods that cause many new developers lots of headaches. In this video we’ll explore some of these, namely, the function context “this”.

•         Write a function for use with an object
•         Use “this” to reference an object in a function
•         Notice that “this” is not always defined

Sometimes we need to create many objects that represent very similar things. Think of users on a site, they would all have names, ids, friends, and they would also have common methods. This video explores an easier way to create common objects.

•         Create an object of a specific shape (type)
•         Create a function that creates this object
•         Modify the function to be a factory

In this assignment, we will create a mini game that runs in the console. The game will create battleship objects, and then you (the player) should guess at the location of the ship, if the location is correct then you win the game, This game will be small, but it will be the foundation for other works.

•         Create a factory function to build ships
•         The ships should have coordinates (x,y)
•         Write a function to guess the ships coordinates

Review the Assignment from Day 3

•         Finish your assignment
•         Compare your code to the code in this video
•         Use the review to update your own assignment code

Ahh, finally we are ready to write code that has a visual aspect. In order to create layouts and interfaces in the browser we need to learn about the DOM, (document object model).

•         The DOM models every HTML element as an object
•         Use JavaScript to create HTML Elements
•         Use JavaScript to change the DOM

When styling HTML, we use CSS. CSS selectors are how we tell the browser which elements to target. Lucky for us, we can also use these selectors to reference HTML elements.

•         Use document.querySelector to select an element
•         document.querySelectorAll with search for multiple elements
•         Fine grained selections use more complex selectors

 All this work with the DOM can become very nuanced, difficult and often overly complex. Lucky for use, there is a super powerful, and very commonly used library to assist us with tasks in the DOM.

•         Load jQuery from a CDN using a script tag
•         Select elements using the jQuery function
•         Create elements, hide, even animate them with jQuery

One great benefit of using jQuery, is that cannot only easily select elements from the DOM, but also set and get values for DOM attributes as well. We can even change styles with jQuery.

•         Select elements as usual with jQuery
•         Store values from JavaScript as attributes on an elements
•         Change the style of elements with the .css method

There is so much that we can do with jQuery, In this assignment, you will create a website only using jQuery.

•         Use jQuery to add HTML to the page
•         Change the css styles using jQuery
•         Build a function to dynamically create the html

Review the Assignment from Day 4

•         Finish your assignment
•         Compare your code to the code in this video
•         Use the review to update your own assignment code

When you go to a webpage or web app, the parts of the page that are dynamically created are likely represented in JavaScript using objects.

•         Create objects that have properties to represent as HTML
•         Build strings of html using the object properties
•         Use jQuery to add the html to the page

Human interaction with our apps and webpages will primary happen through either buttons or forms. Forms are a great way to collect information from users.

•         Create a form with different types of inputs
•         Set method and action attributes
•         Query parameters can capture this information

Another way that users will interact with our sites will be with mouse events. We can “listen” to any and all of these events. Listening to events is a very critical skill for JavaScript developers to learn

•         Get a reference to elements with jQuery
•         Use the .on method to listen for ‘click’ events
•         Write a function to run on each click

Just like click and touch events, when a form is submitted that triggers an event as well. We can listen for this event and use it to know when a user has finished filling out a form, then collect information.

•         Create a form
•         Listen for the ‘submit’ event
•         Stop the browsers default action

Now that we are able to write code that can take data from user interactions and we can model data from JavaScript in HTML. This would be a great time to build a better battleship game.

•         Update you previous battleship assignment with HTML
•         Use a form to get the users coordinate guesses
•         Show their score, win or loss in HTML

Review the Assignment from Day 5

•         Finish your assignment
•         Compare your code to the code in this video
•         Use the review to update your own assignment code

Often, we will need to get information from a site other than our own. Luckily the browsers have an API called fetch that makes this easy.

•         Use fetch to request information from itunes
•         Handle the response with a function
•         Display the response in HTML

Sometimes we want to store information between browser refreshes. A very simple way to do this without a database is by using the browser as a data store.

•         Use localStorage to store data in browser
•         Use the same API to retrieve data from localStorage
•         Store objects using the JSON.stringify method

So far we have been writing our own CSS and using jQuery to do animation. There are libraries that handle some of this for us, bootstrap is a popular library/framework that writes CSS for us and uses jQuery to create cool components like carousels.

•         Add Bootstrap to the site in the
•         Create the HTML for a carousel
•         Use Bootstrap to start the “slider”/carousel

Sometimes sites will allow us to show their content on our own sites. Think of YouTube, we see YouTube videos on other websites all the time, the videos are still hosted on YouTube even though we see them through a different site, this is called embedding.

•         Use the browser to inspect iframes
•         Add YouTube iframe and API
•         Share Repl.it code to a site using iframes

Now we know how to create a carousel and we know how to listen for events with jQuery. Try to combine the two, create a carousel that can be controlled by our own JavaScript or that has call to action buttons to run dynamic code in our page.

•         Create a Bootstrap carousel
•         Create dropdown to select any slide
•         Use HTML in a slide to link to other content

Review the Assignment from Day 6

•         Finish your assignment
•         Compare your code to the code in this video
•         Use the review to update your own assignment code

One problem all programmers have are bugs. Bugs can be difficult to handle.

•         Write code that will throw an error
•         Use try/catch blocks to catch the error
•         Log the error to console

Sometimes our code doesn’t have bugs that throw errors, sometimes it just doesn’t run the way we expect and it’s difficult to understand why. In this video we’ll see some advanced techniques for handling situations like these.

•         Write a recursive function that is difficult to understand
•         Add debugger statements
•         Use the browser to step through functions

It’s time to use all we’ve learned to build a great project. We’ll create a page that stores journal entries about our development experiences and can even show us code embedded from Repl.it.

•         Build a site with a form for writing posts
•         Store the posts in browser
•         Write a search or allow adding embedding content

In this video, we’ll go over one version of the final project. Yours may be different.

•         Go over the html for the site
•         Put code into separate organized files
•         Cover the search and store features