JS Core III

❓ What are the four questions we ask ourselves in the Debugging Framework?

 

❓ What are three tools we could use to debug our programs?

 

❓ What is a syntax error?

 

❓ What is a reference error?

 

❓ What is a type error?

❓ What are the four questions we ask ourselves in the Debugging Framework?

 

What did I expect to happen?

 

What exactly is broken?

 

What happened instead?

 

What have I tried so far?

❓ What are three tools we could use to debug our programs?

 

  • Thinking like a computer
  • Test often
  • Stack Overflow / other resources
  • Talking it through (rubber ducking)
  • console.log()
  • Chrome debugger
  • ESLint

❓ What is a syntax error?

 

Normally a forgotten bracket / brace.

if (3 > Math.PI {
  console.log("wait what?");
}
SyntaxError: missing ) after condition

❓ What is a reference error?

 

Normally a typo when referring to a variable that doesn't exist.

var ward = "hello";
word.substring(1);
ReferenceError: "word" is not defined

❓ What is a type error?

 

Normally a typo when referring to a variable or function.

var submit = document.getElById("button");
TypeError: document.getElByID is not a function

Every developer spends a lot of their day debugging.

The best developers aren't the ones who don't debug, because they don't exist.

The best developers are the ones who are best at debugging.

My team at work fixes ~10-20 bugs per week.

 

So we have to get good at debugging!

How the web works

URL

Uniform Resource Locator

https://assets.slid.es/assets/deck-64ae628b82524.js
GET

Asks the server for a web page, resource, or piece of data.

POST

Used to send data to the server. A POST request has a body of data that we can send with the request.

Making requests

Headers

metadata about the request and the response

Status codes

Useful reference: https://httpstatuses.com/

❓ Was the request successful?

  • 200: Request was successful
  • 301: Request was redirected.
  • 401: Unauthorised request.
  • 404: Not found.
  • 500: Internal server error

Status codes

  • 1XX: Informational
  • 2XX: Successful request.
  • 3XX: Redirected request.
  • 4XX: Error on the client.
  • 5XX: Error on the server.

Useful reference: https://httpstatuses.com/

httpstatusdogs.com

httpstatusdogs.com

httpstatusdogs.com

content-type

Specifies the type of content in the request or response. Used to let the browser know what to do with some data once it gets it.

content-type

  • text/html: HTML. 
  • text/css: CSS.
  • image/jpeg: A JPEG image.
  • application/javascript: JavaScript code.
  • application/json: JSON data.

❓ What can HTTP headers contain?

 

❓ What is the purpose of status codes?

 

❓ What can an HTTP request contain?

API

API

Application Programming Interface

Twitter / Facebook / TFL / Google Maps / GitHub

Your fancy web application

API requests

The API provider can strictly control the abilities of the API, and what data it exposes to the consumers.

Private APIs: for employees only inside a company network

Semi-private: for clients who pay a fee to use the API

Public API: free to everyone on the web to use

The TFL API

https://api.tfl.gov.uk/

https://api.tfl.gov.uk/BikePoint

[
  {
    "$type": "Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities",
    "id": "BikePoints_1",
    "url": "/Place/BikePoints_1",
    "commonName": "River Street , Clerkenwell",
    "placeType": "BikePoint",
    "additionalProperties": [
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "TerminalName",
        "sourceSystemKey": "BikePoints",
        "value": "001023",
        "modified": "2020-09-04T09:56:45.65Z"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "Installed",
        "sourceSystemKey": "BikePoints",
        "value": "true",
        "modified": "2020-09-04T09:56:45.65Z"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "Locked",
        "sourceSystemKey": "BikePoints",
        "value": "false",
        "modified": "2020-09-04T09:56:45.65Z"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "InstallDate",
        "sourceSystemKey": "BikePoints",
        "value": "1278947280000",
        "modified": "2020-09-04T09:56:45.65Z"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
        "category": "Description",
        "key": "RemovalDate",
        "sourceSystemKey": "BikePoints",
        "value": "",
        "modified": "2020-09-04T09:56:45.65Z"
      },
     ]
      }

https://api.tfl.gov.uk/BikePoint?query=Clerkenwell

[
  {
    "$type": "Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities",
    "id": "BikePoints_1",
    "url": "/Place/BikePoints_1",
    "commonName": "River Street , Clerkenwell",
    "placeType": "BikePoint",
    "additionalProperties": [
      
    ],
    "children": [
      
    ],
    "childrenUrls": [
      
    ],
    "lat": 51.529163,
    "lon": -0.10997
  },
  {
    "$type": "Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities",
    "id": "BikePoints_26",
    "url": "/Place/BikePoints_26",
    "commonName": "Ampton Street , Clerkenwell",
    "placeType": "BikePoint",
    "additionalProperties": [
      
    ],
    "children": [
      
    ],
    "childrenUrls": [
      
    ],
    "lat": 51.52728,
    "lon": -0.118295
  },
  {
    "$type": "Tfl.Api.Presentation.Entities.Place, Tfl.Api.Presentation.Entities",
    "id": "BikePoints_72",
    "url": "/Place/BikePoints_72",
    "commonName": "Farringdon Lane, Clerkenwell",
    "placeType": "BikePoint",
    "additionalProperties": [
      
    ],
    "children": [
      
    ],
    "childrenUrls": [
      
    ],
    "lat": 51.52352,
    "lon": -0.10834
  },
  {
    "$type": "Tfl.Api.Presentation

https://api.tfl.gov.uk/BikePoint?query=Clerkenwell

https://api.tfl.gov.uk/BikePoint?query=Clerkenwell

Base URL of the API

https://api.tfl.gov.uk/BikePoint?query=Clerkenwell

(in URL terms this is called the "host")

https://api.tfl.gov.uk/BikePoint?query=Clerkenwell

Which part of the API we're interested in (bike stops)

https://api.tfl.gov.uk/BikePoint?query=Clerkenwell

(in URL terms this part is called the "path")

https://api.tfl.gov.uk/BikePoint?query=Clerkenwell

query parameters to filter the results

https://docs.github.com/en/rest

Find how many public repositories the user jackfranklin has on GitHub.

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

Top tip! JSONViewer Chrome extension

Using the GitHub API, find out how many stars the

 CodeYourFuture/syllabus repository has on GitHub.

❓ Which of the following statements about APIs is false?

 

- Public APIs can be accessed by anyone on the internet

- You must use JavaScript to access an API.

- APIs can control access to data or features of an application

- You can change data via an API

An API doesn't care about the programming language you use

Private API

Website

iOS App

Android App

Private API

Website

iOS App

Android App

all your backend developers work on this

and all these developers benefit and use the same API

Chrome backend

DevTools

The Chrome DevTools Protocol (CDP)

https://chromedevtools.github.io/devtools-protocol/tot/CSS/#method-getMatchedStylesForNode

How do you write code to talk to APIs?

 

Time for fetch!

CYF: JS3: Lesson 2

By Jack Franklin

CYF: JS3: Lesson 2

  • 149
Loading comments...

More from Jack Franklin