menu
Anh-Thi DINH

Codecademy - Back-End App with JS 1

Posted on 10/09/2019, in Web development.

This note is created when I started to learn the Create a Back-End App with JavaScript.

Tự động thay đổi khi file js thay đổi

  • Using live-server
  • Install nodejs first.
  • Install live-server using nodejs: npm install -g live-server
  • cd to the project folder
  • run live-server (accept all networks notification)
  • http://127.0.0.1:8080/
  • Enjoy!

Miscellaneous

  • End of each line: ;
  • Comment: //
  • Multiline comment: /* */
  • Print ra console: console.log("nhung thu can hien ra")

JS fundamental

Console

  • a panel that displays important messages
  • F12 in Chrome to open console (choose tab colsole after that)
  • Trong đây mỗi lần mình `.` là nó gợi ý mấy câu lệnh/thuộc tính hay lắm
  • Thử test vài thứ với console.log hoặc console(15) hoặc 2+2 hoặc

    console.log('Location of Codecademy headquarters: 575 Broadway, New York City');
    
  • Data Types: number, string ('...' or "..."), boolean (true, false), null (null), Undefined (undefined),
  • Làm toán: console.log(2+3), các phép toán khác: +,-,*,/,%
  • String concatenation: console.log('hi'+'thi') produces 'hithi'
  • Properties: console.log('Hello'.length)
  • Methods: .toUpperCase(), .startsWith('H') (check if a string starts with “H”), .trim() (removes white spaces)
  • Built-in Objects: Math (perform more complex math operations, more), Number (ref)

Variables

  • Create a variable: var <name> = <value> hoặc dùng let thay cho var hoặc dùng const (thay cho từ constant, var định nghĩa bằng cái này không thể re-assign + phải có giá trị)
    • Có thể declare mà không cần value với var hoặc let. <– output: undefined
  • Mathematical Assignment Operators: a +=, -=, *=, /=.
  • The Increment and Decrement Operator: a++ (a lấy giá trị mới như a+1). --.
  • "I'm" + "Thi"
  • Thay thế string có 2 cách:

    myName = "Thi"
    console.log("I'm " + myName + ".");
    console.log(`I'm ${myName}.`);
    
  • Check the type of some variable: typeof <var>

JavaScript Versions: ES6 and Before

  • JavaScript was introduced in 1995 by Netscape Communications as a scripting language for web designers and programmers to interact with web pages.
  • 1996, Netscape submitted JavaScript to a standards developing organization called Ecma International to create standards for a scripting language (a type of programming language)
  • 1997, Ecma International released ECMA-262 which sets standards for the first version of a scripting language called ECMAScript, shortened to ES.
    • provided rules for the architecture of JavaScript features
  • when you see ES6 or JavaScript ES6, it means that that version of JavaScript is following the specifications in the sixth edition of ECMAScript!
  • ES6 = ES2015

JS timeline

  • ES6 have a big update for ECMAScript
    • new keywords like let and const to declare variables,
    • new function syntax using Arrow functions,
    • creation of Classes,
    • parameters with default values,
    • promises for asynchronous actions,
    • and many more!
  • Compare:

    // pre-ES6
    var greeting = function() {
      console.log('Hello World!');  
    };
      
    // ES6
    const greeting = () => console.log('Hello World'); 
    

JavaScript Conditionals and Functions

Conditional Statements

// only if
if (true){
  // commands
}

// if...else
if (true){
  // commands
} else if (true){
  // commands
} else{
  // commands
}

// switch
let var = 'papaya';
switch (var) {
  case 'val1':
    // commands
    break;
  case 'val2':
    // commands
    break;
  case 'val3':
    // commands
    break;
  default:
    // commands
    break;
}
  • Comparison Operators: <, ===, >, >=, <=, !==
  • Logical operators: &&, ||, !
  • short-circuit evaluation: let defaultName = username || 'Stranger';
  • Ternary Operator: isNightTime ? console.log('Yes!') : console.log('No!');

Functions

function <func>(<parameters>){
  // commands
  // return <var>;
}

// call the function
<func>();

// default parameters
function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}

Function Expressions:

const CalculateArea = function(width, height){
  const area = width * height;
  return area;
};

Arrow Functions (no need to use function):

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

// if there is no parameter
const <func> = () => {};

// if there is only one parameter
const <func> = <para> => {};

// single line: no need "{}"
const sumNumbers = number => number + number;

Developing JavaScript Apps Locally

NodeJS

  • Download and install NodeJS.
  • Check if node is installed and its version: node --version.
  • Open terminal, type node. Open Console giống trên browser!
  • Ctrl + C 2 times to exit!

Introduction to Testing with Mocha and Chai

  • What is Unit Testing?
    • Unit testing means testing the behavior of code in small, independent units.
  • Mocha and Chai, Test Suites and Test Cases
    • Mocha and Chai are two JavaScript frameworks commonly used together for unit testing.
  • Regular use of keywords: describe and it in Mocha.
  • Assertions:
    • Assertions are tied to particular values (whereas test cases are descriptions of behavior) and they will fail if the expected value does not match the actual value.
    • Every assertion in a test case must be met in order for the test case to pass.
  • Chai is an assertion library that is often used alongside Mocha, it provides functions and methods that help you compare the output of a certain test with its expected value.
    • Exp: expect(exampleArray).to.have.lengthOf(3);
  • An example test,

      describe('setPlayerMoves() - Main Functionality', function() { // this is a `describe` block, everything within this callback function is one test suite
        afterEach(clearMoves); // this is a `hook` that gets called between `it` blocks to reset the state
        
        it('a function called setPlayerMoves should exist', function() { // this is an `it` block, everything inside this function is a single test case
          should.equal(typeof setPlayerMoves, 'function'); // tests often start by checking that the right things exist and are of the right type
        });
        
        it('should set player one\'s moves with valid inputs', function() {
          setPlayerMoves('Player One', 'rock', 11); // here we call a function from the code we are testing that sets play one's move to rock with a value of 11
        
          should.equal(playerOneMoveOneType, 'rock'); // this is an assertion that tests that after the `setPlayerMoves()` function above is called, playerOneMoveOneType should equal `rock`
          should.equal(playerOneMoveOneValue, 11); // this assertion tests that setPlayerMoves can set the value of playerOneMoveOneValue
        });
      })
    
  • Running Tests and Interpreting Output with Mocha and Chai
    • cd to project folder.
    • Run npm install all necessary testing dependencies.
    • Run npm test
    • I’m overwhelmed by the output!: [ref] try appending .only() or .skip() to your describe or it blocks to only run certain tests or skip other certain tests.
  • Projects (see on Github): project-0-content-creators, project-1-rock-paper-scissors-x99.

HTTP Requests

  • HTTP is the command language that the devices on both sides of the connection must follow in order to communicate.
  • Type codecademy.com, commanding it to open a TCP channel to the server that responds to that URL.
  • Your computer is client (makes the request). The URL is the server.
  • Once the TCP connection is established, client sends HTTP GET to retrieve the webpage
  • After server has sent the response, it closes the TCP connection.

REST

  • REST, is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other.
  • In the REST architectural style, the implementation of the client and the implementation of the server can be done independently without each knowing about the other.
  • Statelessness = server does not need to know anything about what state the client is in and vice versa.
Top