101 lines
2.8 KiB
Markdown
101 lines
2.8 KiB
Markdown
# TP javascript : Ajax, promesses.
|
|
|
|
Vous disposez tous, à la racine de votre compte, d'un répertoire `public_html` qui est servi (http/https) par le serveur dwarves.
|
|
Pour accéder à vos pages, utilisez l'url :
|
|
|
|
> http(s)://dwarves.[arda|iut-fbleau.fr]/~login
|
|
|
|
Pour tester les différentes api http, vous pouvez utilisez la commande `curl`.
|
|
|
|
|
|
#### Ex1
|
|
Le but est de faire une recherche de film en utilisant l'api [OMDb](https://www.omdbapi.com/) (Open Movie Database).
|
|
|
|
|
|
|
|
Son utilisation nécessite une clé. Vous pouvez utiliser la mienne `2fcb2848`. Si
|
|
la limite de requêtes est atteinte, générez votre propre clé.
|
|
|
|
|
|
Complétez le [code](./src/ex1).
|
|
- J'ai volontairement utilisé des modules. Il vous faut donc tester l'application avec
|
|
http.
|
|
|
|
- Écrire la fonction du modèle
|
|
```js
|
|
getMovies(search)
|
|
```
|
|
Cette fonction renvoie une promesse qui permet de faire une requête ajax vers l'api OMDb. Pour ajax,
|
|
utilisez d'abord l'interface `fetch`, ~~puis l'objet `XMLHttpRequest`~~.
|
|
|
|
- Écrire la fonction du contrôleur
|
|
```js
|
|
async search(searchMovie)
|
|
```
|
|
qui permet de faire une recherche. Cette fonction utilise évidemment la fonction précédente `getMovies`.
|
|
|
|
- Écrire la fonction de la vue
|
|
```js
|
|
renderList(movies)
|
|
```
|
|
qui construit la liste des films affichés. La structure attendue est
|
|
```html
|
|
<li>
|
|
<a href="http://www.imdb.com/title/tt0068646" target="_blank">The Godfather</a><span>1972</span>
|
|
</li>
|
|
```
|
|
#### Ex2
|
|
Le but, dans un premier temps, est d'écrire une interface, avec ajax, qui permette de joueur au jeu suivant :
|
|
|
|
- On a une grille dans laquelle sont cachés des renards (on en connait le nombre initial).
|
|
|
|
- A chaque tour, on choisit de tirer sur un case. On a l'alternative suivante :
|
|
- on tue un renard,
|
|
- on récupére les nombres de renards sur la grille sur la ligne, colonne et diagonales de la case.
|
|
|
|
<div align="center">
|
|
<img src="img/renard1.png">
|
|
</div>
|
|
|
|
Le jeu utilise un serveur http à l'url suivante
|
|
|
|
```
|
|
https://dwarves.iut-fbleau.fr/foxes/foxes.php
|
|
```
|
|
|
|
Voici les urls du jeu :
|
|
|
|
```
|
|
https://dwarves.iut-fbleau.fr/foxes/foxes.php?new&size=10&foxes=10
|
|
```
|
|
|
|
initialise la partie , avec la taille de la grille et le nombre de renards
|
|
dont la position est aléatoire (le script utilise des sessions de cinq minutes).
|
|
|
|
La réponse normale, en json :
|
|
|
|
```json
|
|
{"status":"ok","foxes":10,"tries":0}
|
|
```
|
|
|
|
|
|
```
|
|
https://dwarves.iut-fbleau.fr/foxes/foxes.php?X=1&Y=3
|
|
```
|
|
|
|
permet de tirer sur une case. Le serveur répond
|
|
|
|
```json
|
|
{"status":"ok","foxes":2,"tries":1}
|
|
```
|
|
|
|
`foxes` vaut -1 si le coup est gagnant, sinon donne le nombre de renards de la colonne, ligne et diagonales de la case.
|
|
|
|
|
|
En cas de victoire, le status est `win`. En cas d'erreur, le status est `nok`.
|
|
|
|
|
|
**Remarque**
|
|
|
|
Ajouter l'option `credentials` à vos requêtes pour utiliser la session en cours.
|