mirror of
https://github.com/BreizhHardware/AJAX.git
synced 2026-01-18 16:47:39 +01:00
TP2 Ex 1 et 2
This commit is contained in:
12
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
12
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@@ -0,0 +1,12 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||
<option name="ignoredErrors">
|
||||
<list>
|
||||
<option value="N802" />
|
||||
</list>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
1
.idea/php.xml
generated
1
.idea/php.xml
generated
@@ -10,6 +10,7 @@
|
||||
<option name="highlightLevel" value="WARNING" />
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
<component name="PhpProjectSharedConfiguration" php_language_level="8.2" />
|
||||
<component name="PhpStanOptionsConfiguration">
|
||||
<option name="transferred" value="true" />
|
||||
</component>
|
||||
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
@@ -1,4 +1,4 @@
|
||||
console.log("ajax.js.js chargé");
|
||||
console.log("ajax.js chargé");
|
||||
|
||||
function ajaxRequest(type, url, callback){
|
||||
let xhr = new XMLHttpRequest();
|
||||
|
||||
70
TP2/Ex1/index.html
Normal file
70
TP2/Ex1/index.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<!--
|
||||
@Author: Ayoub KARINE
|
||||
@Company: ISEN Yncréa Ouest
|
||||
@Email: ayoub.karine@isen-ouest.yncrea.fr
|
||||
@Created Date: 21-Apr-2021 - 12:13:30
|
||||
@Last Modified: 21-Apr-2021 - 20:00:52
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title> index </title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<script src="js/apinavigateur.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h1> Geolocation API </h1>
|
||||
<div class="col-3">
|
||||
<button type="button" class="btn btn-primary" id="latitude">Afficher la latitude de ma position</button>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button type="button" class="btn btn-primary" id="longitude">Afficher la longitude de ma position</button> <br>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<h5><span class="badge bg-secondary" id="lat"></span></h5>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<h5><span class="badge bg-secondary" id="long"></span></h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h1> Web History API</h1>
|
||||
<div class="col-3">
|
||||
<input type="text" class="form-control" placeholder="Entrez le nombre de page" aria-label="Username"
|
||||
aria-describedby="basic-addon1" id="nbpages">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button type="button" class="btn btn-primary" id="reculer">Reculer</button>
|
||||
</div>
|
||||
</div> <br>
|
||||
<div class="row">
|
||||
<h1> Clipboard API </h1>
|
||||
<div class="col-3">
|
||||
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1" id="textecopie">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button type="button" class="btn btn-primary" id="copier">Copier</button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1" id="textecolle">
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<button type="button" class="btn btn-primary" id="coller">Coller</button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<script src="apinavigateur.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
39
TP2/Ex1/js/apinavigateur.js
Normal file
39
TP2/Ex1/js/apinavigateur.js
Normal file
@@ -0,0 +1,39 @@
|
||||
console.log("apinavigateur.js chargé");
|
||||
|
||||
|
||||
let lat = document.getElementById("lat");
|
||||
let lat_button = document.getElementById("latitude");
|
||||
|
||||
let long = document.getElementById("long");
|
||||
let long_button = document.getElementById("longitude");
|
||||
|
||||
lat_button.addEventListener("click",()=>{
|
||||
if (navigator.geolocation){
|
||||
navigator.geolocation.getCurrentPosition((position)=>{
|
||||
console.log(position);
|
||||
lat.innerHTML = "Latitude :" + position.coords.latitude;
|
||||
})
|
||||
}else{
|
||||
lat.innerHTML = "Geolocation is not supported by this browser.";
|
||||
}
|
||||
})
|
||||
|
||||
long_button.addEventListener("click",()=>{
|
||||
if (navigator.geolocation){
|
||||
navigator.geolocation.getCurrentPosition((position)=>{
|
||||
console.log(position);
|
||||
long.innerHTML = "Longitude :" + position.coords.longitude;
|
||||
})
|
||||
}else{
|
||||
long.innerHTML = "Geolocation is not supported by this browser.";
|
||||
}
|
||||
})
|
||||
|
||||
let InputPg = document.getElementById("nbpages");
|
||||
let buttonPg = document.getElementById("reculer");
|
||||
|
||||
buttonPg.addEventListener("click",()=>{
|
||||
console.log("history length :"+window.history.length);
|
||||
console.log(InputPg.value);
|
||||
window.history.go(-parseInt(InputPg.value));
|
||||
})
|
||||
92
TP2/Ex2/apitierces.js
Normal file
92
TP2/Ex2/apitierces.js
Normal file
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* @Author: Ayoub KARINE
|
||||
* @Company: ISEN Yncréa Ouest
|
||||
* @Email: ayoub.karine@isen-ouest.yncrea.fr
|
||||
* @Created Date: 21-Apr-2021 - 14:31:15
|
||||
* @Last Modified: 21-Apr-2021 - 20:02:21
|
||||
*/
|
||||
// ----------------- utils -------------------
|
||||
function showhide(id) {
|
||||
let e = document.getElementById(id);
|
||||
let eClasses = e.classList;
|
||||
eClasses.toggle('d-none');
|
||||
}
|
||||
// ----------------- Gihub API -------------------
|
||||
const github = document.getElementById("github");
|
||||
github.addEventListener('click', showGithub);
|
||||
function showGithub() {
|
||||
showhide("githuarea");
|
||||
showhide("catarea");
|
||||
}
|
||||
// To do
|
||||
// ----------------- Cat API -------------------
|
||||
const cat = document.getElementById("cat");
|
||||
cat.addEventListener('click', showCat);
|
||||
function showCat() {
|
||||
showhide("catarea");
|
||||
showhide("githuarea");
|
||||
}
|
||||
// To do
|
||||
|
||||
function ajaxRequest(type, url, callback){
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open(type, url, true);
|
||||
xhr.onload = () => {
|
||||
switch (xhr.status){
|
||||
case 200:
|
||||
case 201:
|
||||
callback(xhr.responseText);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
const catbutton = document.getElementById("respcat");
|
||||
catbutton.addEventListener('click', clickCatBtn);
|
||||
function clickCatBtn(){
|
||||
let text = document.getElementById("texteinimage").value;
|
||||
const date = new Date();
|
||||
date.getTime()
|
||||
let url = "https://cataas.com/cat/says/" + text + "?size=40/?ts=" + date;
|
||||
ajaxRequest("GET", url, showCatResponse);
|
||||
}
|
||||
|
||||
const githubbutton = document.getElementById("respgithub");
|
||||
githubbutton.addEventListener('click', clickGithubBtn);
|
||||
function clickGithubBtn(){
|
||||
let username = document.getElementById("githubname").value;
|
||||
let url = "https://api.github.com/users/" + username;
|
||||
ajaxRequest("GET", url, showGithubUser);
|
||||
}
|
||||
|
||||
|
||||
function showGithubUser(response){
|
||||
let user = JSON.parse(response);
|
||||
let githubarea = document.getElementById("githuarea");
|
||||
githubarea.innerHTML = "";
|
||||
let img = document.createElement("img");
|
||||
img.src = user.avatar_url;
|
||||
img.className = "img-thumbnail";
|
||||
githubarea.appendChild(img);
|
||||
let name = document.createElement("h3");
|
||||
name.innerText = user.name;
|
||||
githubarea.appendChild(name);
|
||||
let login = document.createElement("p");
|
||||
login.innerText = user.login;
|
||||
githubarea.appendChild(login);
|
||||
let bio = document.createElement("p");
|
||||
bio.innerText = user.bio;
|
||||
githubarea.appendChild(bio);
|
||||
}
|
||||
|
||||
function showCatResponse(response){
|
||||
let catarea = document.getElementById("catarea");
|
||||
catarea.innerHTML = "";
|
||||
let img = document.createElement("img");
|
||||
img.src = response;
|
||||
img.className = "img-thumbnail";
|
||||
catarea.appendChild(img);
|
||||
}
|
||||
48
TP2/Ex2/index.html
Normal file
48
TP2/Ex2/index.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
<meta charset="utf-8">
|
||||
<title> index </title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<h1>Exemples d'API tierce </h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button type="button" class="btn btn-primary" id="github">Github</button><br><br>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button type="button" class="btn btn-primary" id="cat">Chat</button><br><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div id="githuarea">
|
||||
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1"
|
||||
placeholder="Entrez le login Github" id="githubname"><br>
|
||||
<button type="button" class="btn btn-outline-secondary" id="respgithub">Rechercher</button> <br>
|
||||
<div class="col-6">
|
||||
<div id="githubinfo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div id="catarea" class="d-none">
|
||||
<input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1"
|
||||
placeholder="Entrez le texte à insérer dans l'image" id="texteinimage"><br>
|
||||
<button type="button" class="btn btn-outline-secondary" id="respcat">Rechercher</button>
|
||||
<div class="col-6">
|
||||
<br>
|
||||
<div id="catimg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="apitierces.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
14
serveur-ajax.conf
Normal file
14
serveur-ajax.conf
Normal file
@@ -0,0 +1,14 @@
|
||||
<VirtualHost *:80>
|
||||
ServerAdmin felix.marquet@isen-ouest.yncrea.fr
|
||||
ServerName serveur-ajax-S3.felix
|
||||
DocumentRoot /mnt/c/Users/BreizhHardware/Nextcloud/Programation/AJAX/
|
||||
|
||||
<Directory "/mnt/c/Users/BreizhHardware/Nextcloud/Programation/AJAX/">
|
||||
Options +Indexes
|
||||
AllowOverride All
|
||||
Require all granted
|
||||
</Directory>
|
||||
|
||||
ErrorLog ${APACHE_LOG_DIR}/error.log
|
||||
CustomLog ${APACHE_LOG_DIR}/access.log combined
|
||||
</VirtualHost>
|
||||
Reference in New Issue
Block a user