DHF_BadgesJavascript

About

JavaScript is a computer programming language. It was originally designed to create interactive webpages but has grown in use and can now be found in game development, server side applications, and even hardware development. This badge asserts that the earner has a basic understanding of the Javascript programming language and has demonstrated their ability to create an application using the language.

Difficulty: Intermediate
Estimated Time: 28 hours. This includes the time to learn the skills and complete the project.

Requirements

You will need to create a final project that uses the skills below.  Additionally, you will need to be able to describe the skills to a Program Specialist and explain how they were used in your project.

  1. Creating and using variables
  2. Conditional code
  3. Operators
  4. Loops
  5. Functions
  6. Arrays
  7. Variable types (how to use and understand the difference):
    • Numbers
    • Strings
    • Dates
    • Objects
  8. DOM
  9. Events and Event Listeners
  10. Debugging and the Console
  11. Changing CSS

Project Ideas:

Here are some suggested projects. Remember, whichever project you select should use the skills listed in the Requirements. Keep in mind that understanding the DOM is part of the requirements, so you should have a web component to whichever project that you choose. For example, you can choose to make a web based game or some sort of application that runs in the browser. These are some suggestions. If you have another project idea, make sure to get it approved by the program staff before proceeding.

  • JavaScript Basic Game
  • JavaScript Quiz Game
  • A utility application:
    • Calculator
      • Metric to Standard
      • Countdown calculator (calculates the time until a specific event)
  • Changing the design (CSS) of a website based on a visitor’s preference:
    • “My favorite color is blue, give this webpage a blue theme.”
  • Your own idea- subject to approval.

Application

Once the project is complete, the next step is to submit an application for review. In this, you’ll need to submit a description of the project and an explanation of how you’ve used the required skills. Additionally, you’ll need to submit a link to your completed portfolio entry for the project.

JavaScript Badge Application

This is the application for the JavaScript skill badge.
  • If your project is one that isn't listed in the "Project Ideas" section of the JavaScript Badge page, please add some extra description about how it meets the requirements.
  • Please explain how the following skills are used in your submitted project: 1) Creating and using variables 2) Conditional code 3) Operators 4) Loops 5) Functions 6) Arrays 7) Variable types [Numbers, Strings, Dates, Objects] 8) DOM Events and Event Listeners 9) Debugging and the Console 10) Changing CSS

One of the fields on the application asks for you to submit the link to your project webpage that includes photos and a description. There are lots of free web portfolio resources. Here are some web portfolio resources for hosting your project:

  • WordPress.com: WordPress.com is a free blogging platform where you can host a portfolio page for your projects. If you’re working on the digitalharbor.org/wordpress-skill-badge, this would be a good way to practice your skills.
  • Weebly: Weebly is another resource that you can use to host a portfolio page for your project. There are paid plans available, but the free plan would be more than enough to host your badge project.
  • Tackk: Tackk is another free resource to build out a quick portfolio entry. Tackk has added a lot of social media streams and content, so if you’re using this make sure to monitor this aspect.

If you’re unable to create a webpage for your submission, you can create a Google Document and place your writeup and images in that document. You can then submit the URL for that.

Resources

There are several excellent JavaScript resources out there, including entire YouTube playlists dedicated to specific skills. Here are some to get you started:

Getting Started:

  • Khan Academy’s new JS course: Khan Academy is using JavaScript as the language in their Introduction to Programming course. This course covers the basics of JavaScript through ProcessingJS, a JavaScript port of the Processing programming language.
  • YouTube (thenewboston) JavaScript Beginner Playlist: Comprehensive YouTube tutorial playlist put together by thenewboston. This starts with the basics and moves through some intermediate concepts.
  • w3schools JavaScript Tutorials: This is a link to the w3schools JavaScript tutorial. It is comprehensive and is an excellent starting point if you don’t want to begin with videos.
  • Code School Free JS courses: This list contains some free Javascript courses. Code School occasionally changes which courses are currently provided for free, but there is almost always at least one JavaScript course available. Currently, the introductory course is free and it is a great video walkthrough with activities.
  • Codecademy Javascript Course: This course is great for practicing and refining your Javascript syntax. It doesn’t include much focus on application of the skills, but using this course in combination with a course that has a practical focus will quickly level up your JavaScript skills.

The Next Steps:

  • Eloquent Javascript: This is the entire pdf of the Eloquent JavaScript book. It has some intermediate and advanced material in it, but is an excellent resource.
  • Daniel Shiffman’s YouTube Playlists: This links to Daniel Shiffman‘s YouTube channel. He has several great JavaScript playlists, though they are centered around the use of p5.js, a newer JavaScript port of the Processing language. There are several useful playlists in his channel.
  • Mozilla Developer Network (MDN) Javascript Resources: The MDN has lots of Javascript documentation and resources, but you often need some familiarity with the language to know where to look.

Ask Us a Question

If you’re working on the badges and you find that you’re stuck, please feel free to email us for some guidance!
Email Link: Send Email
If you’re having any difficulties with the above email link, here is a link to the DHF Contact page.
Contact Link: Contact Us