Course description: In this class, you’ll be introduced to web applications using a combination of HTML, CSS, and JavaScript (JS). You’ll learn the basics of JavaScript syntax and common programming concepts including strings, arrays, loops, conditional statements, and boolean logic. Through hands-on coding, you will create your own examples of simple programs to run on your own website. After a thorough grounding in “vanilla” JavaScript, you will learn about using JS libraries and code your own simple application using the popular jQuery library.
Prerequisite: HTML & CSS II or equivalent. The class will wrap up with a survey of some currently popular JS frameworks and libraries (like React), and advise on resources for further learning.
What is JavaScript?
JavaScript is a client-side scripting language. It runs on the user’s machine and not on the server, as some other web programming languages (PHP, Ruby, etc.) do. JavaScript and the way we use it is reliant on the browser’s capabilities and settings. JavaScript adds interactivity and custom behaviors to websites.
Brief video from javascript.com
Tools and Resources
In this class we will use:
- The Atom text editor
- Chrome Developer Tools for testing and troubleshooting
- DiffChecker is a tool that allows you to easily compare two files for differences
- A combination of freeCodeCamp and Mozilla Developer Network exercises (with class discussions about them).
- The Mozilla Developer Network has a helpful forum for Learning where you can pose questions or look up other user’s questions and the responses to them.
- This is a very good all-purpose JavaScript cheat sheet page. There is also a PDF version of it.
- JavaScript Event KeyCodes from Wes Bos
- Variable name validator
- Your Guide to Semicolons in JavaScript
- The difference between var and let
- Expressions and operators
Class CodePen
To provide more concrete, real-world code examples, I’ll begin posting in my class CodePen sandbox and will ask students to post code samples in theirs, to share during class.
- A simple else/if example
- The same result, using a JavaScript switch statement
- MDN’s Silly Story Generator
- Iterative Method example and improved Looping version