Computational Thinking and JavaScript Programming

Summary

Programming is a creative process that can be separated into two steps:

  • Understand the problem to be solved, and build a virtual model that can solve the problem abstractly
  • Implement the model and coding it in a formal programming language

Most "Introduction to JavaScript Programming" courses focus solely on the second step to teach JavaScript as a technology, or focus on how to use it to write programs, without helping students to develop the proper way of thinking and building mental models towards solving problems.

The goal of this course is to first and foremost, help beginners to think logically and computationally, together with a set of problem solving patterns; then secondarily, learn JavaScript as a programming language. For this purpose, we've made a concession on the side of learning JavaScript as a technology, to leave both the "Object Oriented" and the "Front End Development" aspect of the language to future courses, and teach a subset of the language to serve as an instrumentation tool to express logical solutions to problems.

For the computational thinking process, this course covers:

  • think logically: analyzing the problem and solutions paths, the center and edge cases
  • think procedurally and the bottom up, imperative solution expressions
  • think abstractly: and the top down, declarative solution expressions
  • common problem solving patterns

For JavaScript the programming language, this course covers:

  • Language grammar, syntax and data types
  • Functions and higher order functions
  • Arrays and Objects as data structures
  • Core built-in methods
  • Writing idiomatic and stylistic code

The course comes with a rich set of exercises to focus on training computational thinking skills and practicing JavaScript language fundamentals.

Phase

Front-end Development

Prerequisites

Detailed Syllabus

JavaScript Basics

  • JavaScript Versions
  • Resources
  • Running Your Code
  • Code Style
  • Data Types
  • Strings
  • Primitive Values
  • Variables
  • Operators
  • Expressions and Statements
  • Exercises: Variables and Numbers
  • Type Coercions
  • Conditionals
  • Input and Output
  • Looping and Iteration

Functions and Variable Scope

  • Defining Functions
  • Function Invocations and Arguments
  • Exercises: Functions
  • Nested Functions
  • Function Scopes and Lexical Scoping
  • Hoisting
  • Function Declarations and Function Expressions
  • Exercises: Variable Scopes in JavaScript (1)
  • Exercises: Variable Scopes in JavaScript (2)

Exercises: Logics and Procedural Thinking

  • Chrome Developer Tools
  • Odd Numbers
  • Multiples of 3 and 5
  • Print Multiples
  • FizzBuzz
  • Prime Check
  • XOR
  • Guessing the Password
  • Student Grade
  • Greatest Common Divisor
  • Goldbach Numbers
  • Pattern Generation
  • Index of Substring
  • Trimming Empty Spaces
  • Splitting a String
  • Repeating Strings
  • String StartsWith
  • Converting Strings to Lower Case
  • Substring (1)
  • Substring (2)

Arrays

  • Arrays
  • Exercises: Arrays
  • Array Operations: push, pop, shift, and unshift
  • Array Operations: indexOf and lastIndexOf
  • Array Operations: slice, splice, concat, and join
  • Array Methods
  • Arrays and Operators
  • Exercise: Comparing Arrays
  • Exercises: Basic Array Uses
  • Exercises: Intermediate Array Uses
  • Exercise: Find Missing Numbers

Objects

  • Introduction to Objects
  • Object Properties
  • Stepping through Object Properties
  • Exercises: Working with Object Properties
  • Arrays and Objects
  • Mutability of Values and Objects
  • Pure Functions and Side Effects
  • Working with the Math Object
  • Working with Dates
  • Working with the Function Argument Object
  • Exercise: Welcome Stranger
  • Exercise: Repeated Characters

Writing Better Code

  • The History and Evolution of the JavaScript Language
  • JavaScript the Good Parts
  • JavaScript Style Guide

List Processing and Functional Abstractions

  • Passing Function as Arguments
  • Declarative Programming with Abstractions
  • List Processing Patterns and Abstractions
  • Iteration
  • Filtering / Selection
  • Transformation
  • Reducing / Folding
  • Interrogation
  • Combining Abstractions
  • Exercise: Total Square Area
  • Exercise: Processing Releases
  • Exercise: Octal
  • Exercise: Anagrams
  • Exercise: Formatting Bands
  • Don't Be Afraid to Use Low Level Abstractions
  • You've Already Known Some Functional Programming

String and Text Processing

  • String Processing Patterns
  • String Methods
  • Exercises: Strings
  • Regular Expressions
  • Reverse a String
  • Acronym
  • Email Validation
  • Matching Parentheses
  • Sentiment Analysis 1
  • Sentiment Analysis 2
  • Longest Sentence