# introduction-to-javascript-html-css

**Repository Path**: kirkkt/introduction-to-javascript-html-css

## Basic Information

- **Project Name**: introduction-to-javascript-html-css
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-07-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# introduction to javascript, html and css
## javascript
### path
- `node js/path.js`
- problem
    - a javascript file may need to read another file, say, via `require('fs')` for instance, but
      the path is by default treated by node as relative to the directory where you run node
    - for example, `node js/path.js` and `cd js; node path.js` may yield two different results
- solution
    - `require('path')` then use `__dirname`, which represents the *current* directory, which is the
      directory where the file itself is located

### destructure
- `babel-node js/destructure.js`
    - because node doesn't yet support destructure
- object destructure
    - Object destructure offers a shorthand to deep-extract values from an object:
    - `let {name: {first: firstName}, gender} = person`
- array destructure
    - Array destructure offers a shorthand to extract values from an array:
    - `let [first, , third] = objectList`

### promise
- `node js/promise.js`
- problem
    - (sequencial) callback hell: too many levels of indentation
    - (parallel) batching: no easy mechanism to batch a number of operations, and provide a single callback
      when all of them is done
- solution (promise)
    - (sequencial) callback hell: use .then .catch chain
    - (parallel) batching: use **Promise.all**, which accepts an array of promises and offer the same mechanism
      as a normal promise, i.e. with .then and .catch callback

Basic promise syntax:

    new Promise((resolve, reject) => {
      if (operation failed) {
        reject(error);
      } else {
        resolve(data);
      }
    });

or

    new Promise((resolve, reject) => {
      if (operation failed) {
        resolve(error);
      } else {
        resolve(null, data);
      }
    });

and then

    getPromise().then(data => {
      ...
    }).then(data => {
      ...
    });

or

    getPromise().then((error, data) => {
      if (error) {
        ...
      }
      ...
    }).then((error, data) => {
      if (error) {
        ...
      }
      ...
    });

## css
### border-style
- `open css/border-style.html`

### border-shadow
- `open css/border-shadow.html`