Javascript

Exercises

Javascript Exercises

Part I - DOM

1. Introduction

2. Hello World

3. Selecting Elements

let products = document.getElementById('products');
console.log(products);
  window.addEventListener('load', function() {
    let products = document.getElementById('products');
    console.log(products);
  });

4. Selecting Elements

5. Events

let form = document.getElementsByTagName('form')[0];
form.addEventListener('submit', function() {
  alert('Submitted!');
});

6. Add Product

<tr><td>Apple</td><td><input value="10"></td><td><input type="button" value="Remove"></td></tr>

7. Remove Product

8. Total

Part II - Ajax2

1. Introduction

In this exercise we will add the ability to add new comments in the newspaper application we developed in previous exercises.

In traditional web development, data would be sent to an action page using HTTP’s POST method. That page would then insert the data into the database and redirect back to the page containing the form triggering a full reload of that page.

In this exercise we will implement this same functionality using AJAX (Asynchronous JavaScript And XML). When a user tries to insert a new comment, a HTTP request will be done in the background using Javascript; the result of that request will then be used to update the page without forcing a complete refresh.

The following steps will guide you into developing your first AJAX based functionality:

2. Download base code

3. Comment Ids

<article class="comment">
    <span class="id">2</span> <!-- the comment id -->
    <span class="user">Abril Cooley</span>
    <span class="date">2017-10-17 15:40:32</span>
    <p>Duis scelerisque purus fermentum turpis euismod congue. Phasellus sit amet sem mollis, imperdiet quam porta, volutpat purus. In et sodales urna, sed cursus lectus. Vivamus a massa vitae nisl lobortis laoreet nec tristique magna. Mauris egestas ipsum eu sem lacinia.</p>
</article>

4. Create Javascript file

5. Capture the submit event

5. Collect data

6. Send AJAX request

7. Comments API

8. Insert new comments