search

rbi-learning / Today-I-Learned

1 stars 0 forks source link

10/26 Week 3, Day 1: HTML, API, and the DOM #185

Open ajlee12 opened 3 years ago

ajlee12 commented 3 years ago

HTML

Almost all HTML contents are "nested".

<html>
  <head>
    <meta>
    <title>Welcome to Week 3!</title>
  </head>

  <body>
  </body>
</html>

Most tags need an opening and a closing tag (note that the closing ones contain a /).

In this example, the html tag has two children nested within:

And the head tag has two children of its own:

We can also say that the head tag as meta and title as its "inner HTML".

The title tag has some "text contents", and they are the "Welcome to Week 3!" text.

<a> Tag

You can make a segment of text into a hyperlink by wrapping the segment into a pair of anchor tags (<a></a>).

Visit the <a href="https://www.rbi.com/"=>RBI</a> website!

That'll make your text into this:

<img> Tag

img is a self-closing tag, as it's not supposed to contain other elements within.

<img> has two required attributes

<h2> Tag

Note the hierarchy of <h1>, <h2>, <h3>...etc.

<table>

Reference: https://www.w3schools.com/html/html_tables.asp

<table>
  <thead> <!-- table header -->
    <tr> <!-- table row -->
      <th>Header for col1</th>
      <th>Header for col2</th>
      <th>Header for col3</th>
    </tr>
  </thead>
  <tbody> <!-- table body -->
     <tr>
      <td>1st row data for col1</td>
      <td>1st row data for col2</td>
      <td>1st row data for col3</td>
    </tr>
  </tbody>
</table>

Lists

If the list is "ordered" (<ol>), the browser adds the numeric markers for you.

Unordered list: <ul>

Within each list, you can add list items, <li>.

Adding JavaScript to the HTML

Use the <script> tag to bring in your JS code.

<script src="script.js"></script>

You can put this <script> tag as the last child of the <body> element.

API

What is an API?

In short, it's the interface of another application (eg. Yelp website), to which we can make a request and get some data back.

A header is a field within your HTTP request where you can insert extra info about the request you're sending.

For example, for some APIs, you can send a request with info in your header saying that you want the data to comeb back in JSON format.

npm (Node Package Manager)

A huge, public, 3rd party library of packages for JavaScript/Node.js.

We use a package called node-fetch to simplify our API requests.

We bring this package into our code by writing:

const fetch = require('node-fetch');

Now we get to use fetch in our code!

Note that while Node.js doesn't have fetch built it, the browser does. That's why you can just use fetch in the browser's dev tools without installing or requiring in additional package.

async-await

Checkout this useful article on using async-await.

When dealing with an asynchronous task (like calling an API over a network), we need to await the process.

If you want to await, you have to mark the function async.

async function getRandomDadJoke() {
  // Fetching something from an API takes some time. So we wait for it to finish before moving onto the next line of JavaScript code.
  const response = await fetch('https://icanhazdadjoke.com/', {
    Accept: 'application/json',
  });

  // Since the response is in JSON format, we need to parse it into JavaScript by using the .json() method on the respnose. 
  const data = await response.json();
}

DOM (Document Object Model)

A brief intro to DOM: https://www.w3schools.com/js/js_htmldom.asp.

The DOM is the browser's mental image of what should be on displayed on the screen.

We can write JavaScript to manipulate what's on the screen.

Targeting a specific tag w/ JS

Let's say we want to target the <tbody> element:

document.querySelector('tbody');

querySelector is a method that exists on the document object.

It returns the first element that matches a specified CSS selector(s) in the document.

Since querySelector returns an element, we can save that element in a constant: 

const tableBody = document.querySelector('tbody');

Then we can insert some content into this element using innnerHTML:

tableBody.innerHTML = `I'm some text inside the table body!`;