JavaScript Learning Exercises

This repository contains a series of exercises designed to help learn JavaScript, covering syntax, DOM manipulation, event handling, AJAX, asynchronous programming, and object-oriented JavaScript.

It was created as part of the course 64-31 Internet Programming at Haute École de Gestion (HEG).

Features

• JavaScript Basics: Syntax, data types, and operators.
• DOM Manipulation: Accessing and modifying HTML elements dynamically.
• Event Handling: Managing user interactions with event listeners.
• Timers & Animations: Using setTimeout, setInterval, and animations.
• AJAX & Fetch API: Making HTTP requests and processing responses.
• Canvas API: Drawing and rendering graphics with JavaScript.
• Storage & Data Handling: Local storage, session storage, and JSON.
• Object-Oriented Programming (OOP): Implementing classes and objects in JavaScript.

Project Structure

• Demo_Canva/ : Introduction to the Canvas API.
• Demo_Deplacement/ : Basic movement and animation.
• Demo_Div/ : Handling dynamic HTML elements.
• Demo_Formats/ : Working with CSV, XML, and JSON.
• Demo_Requete/ : Basics of HTTP requests.
• Demo_StructureEtDOM/ : Understanding the DOM hierarchy.
• Demo_Timer/ : Working with timers in JavaScript.
• TP-01/ : JavaScript syntax basics.
• TP-02/ : Advanced JavaScript syntax.
• TP-03/ : More practice on syntax.
• TP-04/ : Data structures and handling.
• TP-05/ : DOM manipulation exercises.
• TP-06/ : Storage management (LocalStorage, SessionStorage).
• TP-07/ : Using JavaScript timers.
• TP-08/ : Handling movement and animations.
• TP-09/ : Introduction to the Canvas API.
• TP-10/ : AJAX basics.
• TP-11/ : Advanced AJAX with XML, JSON, and CSV.
• TP-12/ : Promises and asynchronous JavaScript.
• TP-13/ : API consumption (weather data example).
• TP-14/ : Object-oriented programming in JavaScript.

Prerequisites

• Browser (Google Chrome, Firefox, Edge, etc.)
• Basic knowledge of HTML and JavaScript
• Local server (optional): XAMPP, WAMP, or Python's http.server

Installation

1. Clone the repository:

git clone https://github.com/yourusername/javascript-learning-exercises.git

2. Open any exercise in your browser (double-click the .html files).
3. If using AJAX, run a local server:

python -m http.server 8000  # Python 3

Then access: http://localhost:8000/

Example: Running an AJAX Exercise

1. Navigate to TP-10/.
2. Open TP-10_AJAX.html in a browser.
3. The page fetches and displays data from meteo.php.

Useful References

JavaScript MDN Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript JavaScript.info : https://javascript.info/

License

This project is licensed under the Creative Commons Attribution-ShareAlike (CC BY-SA) license.

Author

Project created by Daniel Garcia as part of the course 64-31 Internet Programming at Haute École de Gestion (HEG) during the Spring semester of 2024.