Modern Javascript

What does ES mean?

Syntax (like basics code)

Async Await

jsonplaceholder advanced api with tokens?

Fetch

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// API endpoint for creating a new user
const apiUrl = 'https://jsonplaceholder.typicode.com/users';

// Form data to be sent in the request body
const formData = 
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "Sincere@april.biz",
    address: {
      street: "Kulas Light",
      suite: "Apt. 556",
      city: "Gwenborough",
      zipcode: "92998-3874",
      geo: {
        lat: "-37.3159",
        lng: "81.1496"
      }
    },
}

// Make a POST request using the Fetch API
fetch(apiUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(formData),
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(newUserData => {
    // Process the newly created user data
    console.log('New User Data:', newUserData);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Axios

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

HTMX

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

Interpolation

const age = 3
console.log(`I'm ${age} years old!`)

Ternary operator

function getFee(isMember) {
  return isMember ? '$2.00' : '$10.00';
}

console.log(getFee(true));
// Expected output: "$2.00"

console.log(getFee(false));
// Expected output: "$10.00"

console.log(getFee(null));
// Expected output: "$10.00"

Arrow functions

let myFunction = (a, b) => a * b;

Higher Order functions

Resources

Higher Order Functions

Servers

npm

npm install express

http.js

Here are an Javascript HTTP server, a Ruby Sinatra server and a Node Express server.

http.js

const http = require('http')
const port = 8080

const app = http.createServer(function (req, res) {
    let url = req.url

    if (url == '/'){
        res.write('Serving some delicious text')
    }else if (url == '/about'){
        res.write('Something about')
    }
 
    res.end()
})
 
app.listen(port, function (error) {
    if (error) {
        console.log('Something went wrong', error);
    }
    else {
        console.log('Server is listening on port ' + port);
        console.log('http://127.0.0.1:8080/')
    }
})

Here are an Javascript HTTP server, a Ruby Sinatra server and a Node Express server.

express.js

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Serving some delicious text')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})