README.md

Reading material for the first lecture:

In week one we will discuss the following topics:
• Capturing user input
• Basic DOM manipulations[img src, innerHTML]
• Code debugging using the browser
• Events
• Code commenting
• Structuring code files
• Code formatting
• Handing in homework via PR

Software installation for the JavaScript 2 Module

To save time, please do these preparations at home before coming to the first lecture.

1. Install the following extensions in VSCode (you may have installed some of them already):

   • Code Spell Checker
   • ESLint
   • Prettier - Code formatter
   • open in browser
   • Live Server
   • Bracket Pair Colorizer

2. Modify the VSCode User Settings to include the settings listed below. If a particular setting is already present in your User Settings, make sure that the setting value listed below is used and change it if necessary.

   To open your user and workspace settings, use the following VS Code menu command:

   • On Windows/Linux - File > Preferences > Settings
   • On macOS - Code > Preferences > Settings

   Then, click on the { } button in the top-right corner of the settings screen to access the settings in JSON format.

   /// Place your settings in this file to overwrite the default settings
   {
     "editor.detectIndentation": false,
     "editor.formatOnSave": true,
     "editor.minimap.enabled": false,
     "editor.renderIndentGuides": true,
     "editor.tabSize": 2,
     "editor.codeActionsOnSave": {
       "source.fixAll": true
     },
     "eslint.autoFixOnSave": true,
     "files.autoSave": "onFocusChange",
     "prettier.printWidth": 100,
     "prettier.singleQuote": true,
     "prettier.trailingComma": "all"
   }

3. Install the ESLint CLI tool globally by issuing the following command from the command line:

   npm install -g eslint-cli
   

4. Fork this repository (i.e., JavaScript2) and clone your fork to your laptop.

5. Open the JavaScript2 folder from the cloned repository in VSCode.

6. Open a terminal window in VSCode and type the following command:

   npm install
   

Review of JavaScript1

As a refresher, go through the topics of JavaScript1:

Week 2

• Variables (var, let, const)
• Basic Data types (Strings, Numbers, Arrays, Booleans)
• Operators
• Naming conventions

Week 3

• Advanced data types (objects)
• Conditional execution
  
• Statements vs Expressions
  
• Loops (for/while)
• Functions
• Scope

Required readings for the first lecture

(No reading material available at this time for the crossed-out topics)

• Capturing user input
• Events
• Basic DOM manipulations (img src, innerHTML)
• Code Degugging Using the Browser
• Code commenting
• Structuring code
• Code formatting
• Handing in homework via PR

Extras:

• Strict mode
• Chrome DevTools Debugging

Recommended readings

These chapters from Eloquent JavaScript give in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits).

• Chapter 13: JavaScript and the Browser

• Chapter 14: The Document Object Model

  You can skip the following sections:

  • Moving through the tree

• Chapter 15: Handling Events

  Notes: for the lectures and homework you only need to know about these events: click, change, keyup and load.

  You can skip the following sections (but come to these sections when doing the React module):

  • Touch events
  • Scroll events
  • Focus events
  • Events and the Event Loop
  • Debouncing

Please go through the material and come to class prepared!