Outils du site

Les fonctionnaires sont un peu comme les livres d'une bibliothque : ce sont les plus haut placs qui servent le moins. [Clemenceau]

56-tools:web

Ceci est une ancienne révision du document !


ⓦeb

Références

REST

http://mark-kirby.co.uk/2013/creating-a-true-rest-api/

CRUD = Create, Read, Update, Delete

HTTP methods = POST, GET, PUT, DELETE

  • Create = POST
  • Read = GET
  • Update = PUT
  • Delete = DELETE

Exemple :

  • POST: http:/test.com/user
  • GET: http:/test.com/user/1
  • PUT: http:/test.com/user/1
  • DELETE: http:/test.com/user/1
Problème:

Le HTML (formulaires) ne comporte que les methodes 'GET' et 'POST'.

Certains proposent de passer par du XMLHTTPRequest pour utiliser d'autres méthodes ( http://api.jquery.com/jquery.ajax/)

URL checker

Tests scripts web: fiddle

Scritps

Pour afficher le code source d'une page web, tapez le code ci-dessous dans la barre d'adresse d'un navigateur :

javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;

Attention: lors de la copie de ce code, souvent le navigateur enlève le “javascript:”. Il faut alors le remettre à la main.

Parcourir le DOM

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
    
}

// Example usage: Process all Text nodes on the page
walkTheDOM(document.body, function (node) {
    console.log ("nodeType: " +node.nodeType + ", nodeName: " + node.nodeName + ", textContent: " + node.textContent);
});

Image encodée en CSS

Il très performant d'encoder les images souvent utilisées dans la CSS.

<style>
  .ImgCollapsed {
    cursor: pointer;
    width:20; height:20;
    text-decoration: none; 
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAYAAAD52jQlAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC42/Ixj3wAAAOlJREFUOE+tkCESwjAQRVcgEIhKRAUSgewhEByCQyCQOI7AETgCAoFAcgQEEoFAIBCI8FOS7k8mQzIDnXnT37y/O23FGPN3NIjULGJyntEgsgJbloz3oEp5RsNnyIYLaLhU4hkNOmR5gWVQzHhGQ/gmfngPhiWeSS219xm4uecrmIKvPruUzg7uzHJ099bjqgH7Nei1jhaklu7cmSVeWgH2+aW4/L+7g/jzGxB4v6ed7YIOncCT8qjEM6mlnk1QTHjQ507X7YLIwpUfYM6lEs9oQBGcwYQLpZ7RIDJmEWM9GKRcTPLwN4y8AfxNottsD8mSAAAAAElFTkSuQmCC");
  }
</style>

<img class="ImgCollapsed" src=""  onclick="doSomething()"  title="Open"  />

Créer un tableau en Javascript

var table = document.createElement('table');
var row = table.insertRow();
row.insertCell().appendChild(document.createTextNode(nbModules));
row.insertCell().appendChild(document.createTextNode(nbSequences));
row.insertCell().appendChild(document.createTextNode(nbSeances));
var header = table.createTHead().insertRow();
header.insertCell().appendChild(document.createTextNode("Modules"));
header.insertCell().appendChild(document.createTextNode("Sequences"));
header.insertCell().appendChild(document.createTextNode("Seances"));
// Add the table to the containing element.
document.getElementById(elt).appendChild(table);
Dernière modification : 2017/10/06 23:38