What to expect?

The Geekwise Academy theory of education is hands-on and experience-driven. Because of this philosophy, classes will be:

  • Concerned with letting you learn by writing code
  • Student-driven
  • Highly applicable to real-world work
  • Concerned as much with form as function (learn it the right way first)
  • Basically, JS gives you....

In order to succeed in this class, you will need:

  • Atom IDE
  • The Atom packages Emmet, atom-live-server, open-in-browser, & Platformio IDE Terminal
  • Google Chrome
  • Git (Git Bash for Windows users)
  • Slack; add yourself to the js1 channel
  • A serious desire to learn

You are expected to read up on the provided resources from Mozilla Developer Network (MDN) after each class. There are several resources to help you learn JavaScript

Create a project in your projects folder and set up the basics:

  • index.html file in your root directory
  • css and js folders
  • css/styles.css
  • js/scripts.js
  • All should be linked appropriately

Create a repository on GitHub for this folder, link the two, and add me as a collaborator. I will go over this once in class for those of you who don't know Git workflow yet.

From now on, you should use branches from this repository for your in-class work. So day 1 will have its own branch, day two will have a separate branch and so on. It's your responsibility to keep these branches separate and to add, commit, and push daily.

JavaScript (not Java) is the browser's native language. It is:

  • Developed by Brendan Eich (Netscape fame) in 10 days (1995)
  • An answer to the server-side rendering of websites that was the only way of making dynamic websites at the time
  • Loosely typed
  • DOM manipulator
  • Object Oriented Scripting Language (not markup)
  • Essential for modern, dynamic websites
Some basic guidelines for using JavaScript:
  • 3 ways to use JS in your code:
    1. Inline (not recommended)
      2.                                 <p onclick="confirm('You sure, doe?')">Confirm Your Choice</p>
    2. Internal (sometimes appropriate)
      3.                                 <script>var elementToManipulate = document.getElementById('my-id');</script>
    3. External (preferred method of including JS)
      4.                                 <script src="js/scripts.js"></script>

The console can be found in your inspector (right-click --> Inspect Element --> click on console. It is useful for:

  • Debugging JS code
  • Playing with JS
  • Manipulating elements on the website you're on
  • camelCasing for variable names
    • Not LikeThis
    • Not likethis
    • Not like-This
  • Variable names should make sense (think of classes and ids in CSS.)
  • Comments are written like so:
    •                         //I am a comment. I am unseen...
                    
                            /* I am a multi-line comment. I am unseen...
                            on multiple lines!!!
                            */
  • Scoped indenting (we'll get there, just remember this is important)
    •                         var myFunction = function(argument) {
            console.log(this);
        }
  • JS statements are terminated with a semicolon
    • console.log("things aint cool");

Like most scripting languages, JavaScript has been through many versions/releases. Unlike most scripting languages, with JS versions things are complicated.

  • ES5(fully supported)
  • ES6(mostly supported, looking at you IE)/ES2015
  • ECMAScript(standardized, fully accepted version of JS)
  • ES7(proposed/experimental. Think Bootstrap v4)

Each class will include a take home assignment. I expect every take home to be accessible to me via GitHub (add me as a collaborator.)

  1. Read up on the basics of JavaScript.
  2. Create a new branch off of your day1 branch called takehome. On that branch, write some JavaScript that logs a message to the console describing what you want to get out of this class and your favorite hobby.
  3. Add, commit, and push your code to your takehome branch.
  4. If you haven't already, add me to your repository as a collaborator and let me know you're done with the take home on Slack.