https://github.com/danielgarcia85/javascript_exercises
Hands-on exercises coveing JavaScript syntax, DOM manipulation, AJAX, animations, event handling, and object-oriented programming.
https://github.com/danielgarcia85/javascript_exercises
ajax asyncjs canvas dom javascript
Last synced: about 1 year ago
JSON representation
Hands-on exercises coveing JavaScript syntax, DOM manipulation, AJAX, animations, event handling, and object-oriented programming.
- Host: GitHub
- URL: https://github.com/danielgarcia85/javascript_exercises
- Owner: DanielGarcia85
- Created: 2025-03-13T12:07:20.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-13T12:20:00.000Z (about 1 year ago)
- Last Synced: 2025-03-13T13:26:56.897Z (about 1 year ago)
- Topics: ajax, asyncjs, canvas, dom, javascript
- Language: HTML
- Homepage:
- Size: 832 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```shell
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:
```shell
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.