Introduction to learning JavaScript¶
Introduction to JavaScript¶
- Goals
- Tools
- Mozilla Thimble - Geared towards learning
- CodePen - too much to get in the way.
- GitHub
- Visual Studio Code
- Mozilla Thimble - Geared towards learning
- Tools
Resources¶
- Programs
-
List of books
- JS Books
- Eloquent JavaScript
- Exploring ES2016 and ES2017
- Building Front-End Web Apps with Plain JavaScript
- JavaScript for Cats
- Learn JavaScript
- JavaScript Allonge - JavaScript Allonge
- JavaScript Design Patterns
- Learn Javascript Design Patterns
- Understanding ECMAScript 6
- Human JavaScript
- Speaking JavaScript
- Programming JavaScript
- HTML 5 Shoot ‘em Up
- Backbone Applications
- Exploring ES6
- Programming JavaScript Applications
-
Interactive environments
- Parson’s Problems
- Python Tutor - Visualize Code as it runs (JavaScript, Python, other)
-
Homework projects
- Nifty Assignments
- Breakout Game
- Intro Computing - Excercises.
-
Sites
-
Minimum Requirements. 10 questions to gauge eligibility.
-
HTML & CSS
- Create an HTML form from scratch
- Write CSS to modify the form
- Create a form to enter a todo item. Including the submit button.
- Make the submit button blue. Green when you the pointer is over it.
- Point the form submission to *
- Programming experience
- Variable
- Loop
- var vs let
- Should use constant or let?
- Use an editor
- Developer tools in your browser.
-
Tools for this class
- Code editor - Visual Studio Code - Atom editor
- Browser - Mozilla Firefox. (Google Chrome will work)
- Internet connectivity - homework, class resources, quizzes.
-
Class structure
- Most of class as workshop lab.
- Lecture/Lab/Lecture/ - Homework.
Curriculum¶
- 10 Weeks
- Goal:
- JavaScript fundamentals
- Manipulate the DOM
- Understand the basis of popular libraries. How does jQuery work? Why do I need a framework? Can I build my own?
Topics - Fundamentals of JavaScript Development¶
- Able to understand why you might use a framework.
- Abstraction
- Algorithms
- Data Structures
- JavaScript Overview
- Editor
- Github
- JSBin
- Variables/Arrays
- Logic, loops, iteration
- Functions
- Classes/Objects/Arrays
-
Modules
-
DOM
- Events and Listeners
- Async - non-blocking - callbacks
- Promises
-
JSON
-
Pull Data
- AJAX - access data from servers (API Calls)
- API Services
- Google APIs
- Amazon APIs
- Push Data
- Forms
- HTML5
- Color
- Date
- Time
- Validation
- Submitting
- HTML5
- Forms
- Libraries
- Build your own library
- Understand the mechanisms behind jQuery. (Why do I need a library)
- Design patterns
- JQuery
- Build your own library
-
Advanced topics
- Testing
- TypeScript/Dart
- Build tools
- Node
- Virtual DOM
- Frameworks
- Progressive Web Apps
-
Projects
- Variables, Flow, Functions, array
- Hangman
- Variables, Flow, Functions, array
-
Class
- Lecture
- In class labs
-
Readings
- Videos
- Lecture
-
Practical
- In class labs
- Homework - hosted on github
- Quizzes
- Final Project
-
Resource Site
- Online learning resources
- Online classes (free and paid)
- Supplementary materials (Mozilla foundation resources, I can use, JavaScript the good parts)
- Videos
- Links to YouTube videos
- Online quizzes
- Readings
- Class notes and presentations
- Discussion group
- Resources
- Online learning resources
Resources¶
-
Web Engineering - free resources
-
10 week class
- Learn how to use JavaScript to make your web pages interactive. Learn all about the DOM. The basics of event programming. How JavaScript works with the DOM. At the end, you’ll be able to:
- Build your own slide show.
- Create a game in the browser.
- Validate and submit form data.
- Access data from servers and submit data to servers.
- Learn basic project management including version control.
Projects¶
- Slide show
- Games
- Video Player
- Form validation
- API
Last update: April 13, 2020 16:50:19