utils.js

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

DevOps Engineer

DevOps Engineer bij de Nationale Politie Werken bij de Politie op basis van detachering Voor onze opdrachtgever, de Nationale Politie in Odijk, zijn we met spoed op zoek naar DevOps Engineers o.b.v. detachering. Binnen het team Werkplekken, Workspace & Innovation dragen ze zorg voor de inrichting en beheer van de fysieke en virtuele werkplekken (endpoints) die door de politie organisatie gebruikt worden. Dit doe je in de grootste werkplek omgeving van Nederland. Wat zijn jouw verantwoordelijkheden en werkzaamheden? Doelstelling: Als DevOps Engineer help je bij het maken en verbeteren van de benodigde werkplek en backend onderdelen op basis van het

Bekijk vacature »

Front-end Developer Vue.js Meewerkend voorman

Bedrijfsomschrijving Betreffende organisatie is gevestigd in de regio van Lelystad en is al ruim 20 jaar lang bedreven in het ontwikkelen en aanbieden van diverse communicatiemiddelen aan de consumentenmarkt. Hierin staan innovatie, optimale klantbeleving en een passie voor technologie centraal. Ruim 100 medewerkers staan dagelijks klaar om te zorgen voor een optimale klantbeleving en optimalisatie van het aanbod. Om diverse businessprocessen binnen de organisatie vloeiend te laten verlopen is software ontwikkeling van essentieel belang. Binnen de organisatie zijn drie scrumteams dagelijks bezig met het beheer en de doorontwikkeling van het applicatielandschap. Zij werken aan verschillende projecten om de beleving van

Bekijk vacature »

Banner Front-End Developer

Werken aan de zichtbaarheid van een van de snelst groeiende bedrijven van de Benelux? Wat doe je als Banner Front-End Developer bij Coolblue? Laat jij trots aan iedereen de Banners zien die je voor Coolblue hebt geschreven via HTML, CSS en Javascript? Dan wacht deze vacature op jou! Ook Banner Front-End Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Schrijven van HTML, CSS en Javascript waarmee je in snel tempo nieuwe modules maakt. Het bedenken van schaalbare modules die voor alle 35000 producten werken Volgen van webinars om zo jouw

Bekijk vacature »

Python Developer Data Science

Bedrijfsomschrijving Onze klant biedt financiële dienstverlening aan organisaties binnen de non-profit sector. Hierbij kun je denken aan overheden en instellingen met een maatschappelijk belang. In vergelijking met andere financiële dienstverleners staan zij er bijzonder goed voor. De organisatie heeft een open cultuur met vrij korte lijnen. Daarnaast zijn duurzaamheid en betrouwbaarheid termen die de organisatie kenmerken. Ter uitbreiding van één van de IT teams zijn zij op zoek naar een Python Ontwikkelaar met interesse voor Data Science. Grote hoeveelheden data zijn kenmerkend voor het applicatie landschap, waarbij aan de finance kant hier complexe data, formules en wiskundige berekeningen komen kijken.

Bekijk vacature »

.Net ontwikkelaar

Bedrijfsomschrijving Voor onze relatie zijn wij momenteel op zoek naar een .Net Developer die wilt werken aan software die draait op machines wereldwijd. De organisatie produceert software voor applicaties die gebruikt worden in verschillende branches. De software wordt geleverd aan fabrikanten van verschillende robotica en machines. Als .Net ontwikkelaar ben je intern onderdeel van het team wat de applicatie omgevingen ontwikkeld en onderhoud. Deze applicatie omgevingen draaien voor verschillende klanten op verschillende machines en robots. De applicaties zijn verantwoordelijk voor het aansturen en monitoren van de processen, machines en robots. Doordat je intern erg breed georiënteerd bent, ben je echt

Bekijk vacature »

Full Stack Developer Javascript Angular (JS)

Bedrijfsomschrijving Onze klant is een internationale organisatie in Rotterdam en heeft meerdere vestigingen wereldwijd. De IT afdeling in Rotterdam verzorgt diensten voor deze landen. Ter versterking van het team zijn zij op zoek naar een ervaren Full Stack Developer. De IT afdeling bestaat uit 3 systeembeheerders en 3 developers. Samen met 3 andere Developers ontwikkel je aan het ERP pakket. De organisatie is te omschrijven als no-nonsense, ondernemend en informeel. Naast de locatie in Nederland hebben ze verschillende locaties in het buitenland. Functieomschrijving Full Stack Developer Het onderhouden en verder inrichten van het ERP pakket middels Javascript, Angular (JS), SOAP,

Bekijk vacature »

Front-end Ontwikkelaar - Publieke Veiligheid

Help JIJ onze klanten in de Digitale Transitie? Neem dan contact met MIJ op! Wij geloven dat organisaties meer wendbaar moeten worden én blijven. Dat maakt organisaties toekomstbestendig. Ben jij een leergierige software engineer met passie voor front-end development? Wil jij je verder ontwikkelen in de nieuwste front-end technologieën? Zoek jij uitdagende klussen in teamverband? Wij bieden jou die uitdaging en de mogelijkheden jezelf verder te ontwikkelen. We leveren een bijdrage aan het veiliger maken van Nederland en daar zijn we trots op! Heb je minimaal drie jaar ervaring in zo’n mooie rol, ben je inspirerend en dynamisch? In de

Bekijk vacature »

Desktop Support Engineer

WHO WE ARE AND WHAT WE DO IMC is a leading global market maker, using algorithmic trading and advanced technology to buy and sell securities on multiple trading venues worldwide. We provide liquidity to the financial markets, driving efficiencies for buyers and sellers. Founded in 1989, we are an ambitious, innovative company and identified early on the importance technology would play in the fast-paced evolution of trading. This entrepreneurial spirit still drives us today and can be found in all of our offices around the world. IMC – Where Technology drives Trading Trading nowadays happens in a highly competitive technological

Bekijk vacature »

Java Developer - regio Maastricht

Bouw jij mee aan de applicaties die onze klanten zo hard nodig hebben? Wil jij je als Java Developer blijven ontwikkelen in de nieuwste technologieën en state-of-the-art tooling? En help jij onze pensioenklanten mee met de implementatie van het nieuwe Pensioenakkoord? Wat ga je doen? Als Java Developer draag je mede verantwoordelijkheid voor het gehele proces van omzetten van wensen, problemen of vragen naar concrete oplossingen. Integratie, testen, vastleggen en delen van kennis, problem-management en automation zijn onderdeel van je takenpakket in een SAFe gestuurde omgeving. Daarnaast denk en praat je proactief mee over hoe we onze klanten nog beter

Bekijk vacature »

Customer Care Specialist

Met je hoofd in de ICT en je hart bij de zorg! Wij zijn een bedrijf met een uitgesproken visie waarbij we met onze oplossingen een bijdrage leveren aan de verbetering van de kwaliteit van leven door effectiever gebruik van medicatie. Onze aanpak is gericht op continue vernieuwing met de focus op groei. Daar kan jij een bijdrage aan leveren! Voor onze Business Unit HI-Systems met standplaats Groningen zoeken wij een: Customer Care Specialist (fulltime) De Business Unit HI-Systems houdt zich vanuit Oosterhout en Groningen bezig met ondersteuning van tweedelijnszorg, met name rondom voorschrijven, afleveren en toedienen van medicatie. In

Bekijk vacature »

Senior Java Developer

Bedrijfsomschrijving Als Senior Java Developer kom je te werken bij een internationaal gerenommeerd onderzoeksinstituut. Dagelijks is dit instituut verantwoordelijk voor de juiste samenwerking, toegankelijkheid en communicatie voor circa 9000 interne gebruikers. In een team van elf ontwikkelaars ben je als Senior Java Developer verantwoordelijk voor het ontwikkelen van functionele ontwerpen naar technische oplossingen. Deze projecten bestaan o.a. projecten zoals het implementeren van Elastic Search en het koppelen van CMS. Ook fungeer je als vraagbaak voor je collega’s op het gebied van backend softwareontwikkeling. Daarnaast denk je graag mee op het gebied van architectuur qua mogelijke oplossingen en innovatie. Momenteel zijn

Bekijk vacature »

Application Developer Tech Lead

We’re Hiring! A UPS Application Developer Tech Lead *REMOTE WORK POSSIBLE FOR THIS ROLE As a Tech Lead Developer at UPS you work on delivering functionality for highly complex IT systems. You collaborate in agile teams and participate in emerging technologies and processes like CI/CD and DevOps to ensure that we meet our objectives effectively and efficiently. Your primary role is to perform full system life cycle activities, e.g. analysis, technical requirements, design, coding, testing and the implementation of software. Working in our Europe development center in Eindhoven means working in an international team with onsite people as well as

Bekijk vacature »

Full Stack Java Developer - Infrastructure

Ben jij een ontwikkelaar die wil bijdragen aan de energietransitie? Lees dan verder! Wat ga je doen? Als Full Stack Java Ontwikkelaar draag je verantwoordelijkheid voor het gehele proces van het omzetten van wensen, problemen of vragen naar concrete oplossingen. Integratie, testen, vastleggen van kennis en beslissingen, problem management en automation zijn onderdeel van je takenpakket in SAFE of DevOps gestuurde omgevingen. Als ontwikkelaar krijg je alle mogelijkheden om je technisch verder te ontwikkelen en samen te werken met gedreven collega's. Wat breng je mee? Je hebt gedurende 1 tot 2 jaar een basis opgebouwd in applicatie ontwikkeling met .Net

Bekijk vacature »

Java Developer - Overheid

Wil jij een bijdrage leveren aan de ontwikkeling van de digitale overheid en de maatschappelijke vraagstukken waar we met elkaar voor staan? Bel of Whatsapp met Mark Hartman via 06 29070400! Als Java ontwikkelaar houd jij je bezig met het realiseren van mooie en innovatieve oplossingen voor de Nederlandse overheid. • Hoe? Het ontwerpen en ontwikkelen met Java in een van onze complexe projecten. • Waarom? Om met jouw code het verschil te maken in het hart van de digitale overheid in Nederland. • Waar? Bij CGI in Rotterdam, dé IT-specialist op het gebied van digitale overheid. • Met wie?

Bekijk vacature »

Cloud Developer - Smart Logistics

Bouw jij de professionele applicaties die onze klanten zo hard nodig hebben? En wil je graag met de nieuwste technologieën werken binnen een DevOps scrumteam? Lees dan snel verder! Wat ga je doen? “Use digital to move smarter De unit Smart Logistics binnen de Transport & Logistics sector van CGI ontwerpt, bouwt en onderhoudt veelal missie-kritische applicaties voor onze klanten uit de transport en logistieke sector. Zonder deze sector worden onze pakketjes niet op tijd afgeleverd, rijden de treinen niet meer van a naar b en varen schepen niet veilig de haven binnen. Om deze transport en logistieke ketens te

Bekijk vacature »
Kris Peeters

Kris Peeters

13/07/2012 12:26:13
Quote Anchor link
Ik zit niet echt met een vraag of probleem; ik wil het vooral gewoon in de groep gooien.
Maar uiteraard zijn reacties/aanvullingen/opmerkingen/... welkom.

jQuery is handig en leuk ... maar meestal nogal overkill.
Er is echter wel functionaliteit die je constant nodig hebt; op zich niet zo moeilijk, maar je moet het toch altijd zoeken en copy/pasten

Ik dacht een kleine file te maken die een paar dingen groepeert. Hiermee kan ik jQuery (en andere frameworks) meestal achterwege laten.

Ik focus me op twee dingen: Ajax en events binden.

utils.js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/**
*  @file baic utilities.
*  If you don't feel like using a js framework, there is still a few utilities you constantly need.
*  I thought of two functionalities: binding events & Ajax
*  Feel free to expand/extend
*/

/**
* Ajax.  
*  made to look like jQuery's $.ajax(options);
*  Not too many fancy options (You make a request; you expect a success callback to be executed.  That's it); feel free to extend
*  required options: url & success
*  optional options (documentation: look at jQuery) : type ('get' or 'post'), dataType ('text', 'json', 'xml'), data
// Example of Usage  
  ajax({
    url: 'ajax.htm',
    success: display
  });
  function display(data) {
    document.getElementById('result').innerHTML = data;
  }
*/
var xmlhttp;
var ajax = function(options) {
  if (typeof xmlhttp == 'undefined') {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  // merge options with defaults
  options = {
    url:      options.url,
    success:  options.success,
    type:     typeof options.type != 'undefined' ?      options.type      : 'get',
    data:     typeof options.data != 'undefined' ?      options.data      : null,
    dataType: typeof options.dataType != 'undefined' ?  options.dataType  : 'text'
  }
  // Ajax call
  xmlhttp.open(options.type, options.url, true);
  switch (options.dataType) {
    default:
      if (options.type == 'post') {
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      }
      else {
        xmlhttp.setRequestHeader('Content-type', 'text/plain;charset=UTF-8');
      }
      break;
    case 'json':
      xmlhttp.setRequestHeader('Content-type', 'application/json; charset=utf-8');
      break;
    case 'xml':
      xmlhttp.setRequestHeader('Content-type', 'text/xml; charset=utf-8');
      break;
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      switch (options.dataType) {
        default:
          options.success(xmlhttp.responseText);
          break;
        case 'json':
          // @see http://en.wikipedia.org/wiki/JSON
          var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
            xmlhttp.responseText.replace(/"(\\.|[^"\\])*"/g, ''))) &&
          eval('(' + xmlhttp.responseText + ')');
          options.success(my_JSON_object);
          break;
        case 'xml':
          options.success(xmlhttp.responseXML);
          break;
      }
    }
  }
  xmlhttp.send(options.data);
  return true;
}

/*
* Add event
*  @see http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
*  @author: Jeffrey Way
// Example of Usage  
var lis = document.getElementsByTagName('li');  
addEvent( lis, 'click', function() {  
    this.style.border = '1px solid red';  
});  
*/
var addEvent = (function( window, document ) {  
    if ( document.addEventListener ) {  
        return function( elem, type, cb ) {  
            if ( (elem && !elem.length) || elem === window ) {  
                elem.addEventListener(type, cb, false );  
            }  
            else if ( elem && elem.length ) {  
                var len = elem.length;  
                for ( var i = 0; i < len; i++ ) {  
                    addEvent( elem[i], type, cb );  
                }  
            }  
        };  
    }  
    else if ( document.attachEvent ) {  
        return function ( elem, type, cb ) {  
            if ( (elem && !elem.length) || elem === window ) {  
                elem.attachEvent( 'on' + type, function() { return cb.call(elem, window.event) } );  
            }  
            else if ( elem.length ) {  
                var len = elem.length;  
                for ( var i = 0; i < len; i++ ) {  
                    addEvent( elem[i], type, cb );  
                }  
            }  
        };  
    }  
})( this, document );


Simpel voorbeeldje van hoe het te gebruiken
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype HTML>
<html>
  <head>
    <script src="utils.js"></script>
    <style>
      #click {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="click">click</div>
    <script>
      // simpel voorbeeld: we testen 1 event + 1 ajax call
      // als op de <div></div> gedrukt wordt, wordt een ajax call gemaakt; de respons wordt als innerHTML van die div gezet
      var click = document.getElementById('click');
      // event binden
      addEvent( click, 'click', function() {  
        // ajax call
        var a = ajax({
          url: 'ajax.htm',
          success: display
        });
      });
      // callback voor de ajax respons
      function display(data) {
        click.innerHTML = data;
      }
    </script>
  </body>
</html>
 
PHP hulp

PHP hulp

13/05/2021 15:43:27
 
Erwin H

Erwin H

13/07/2012 13:43:17
Quote Anchor link
Dus in feite maak je zo je eigen library/framework in plaats van JQuery. Niets mis mee lijkt mij.
 
Wouter J

Wouter J

13/07/2012 13:51:56
Quote Anchor link
Erwin, als je jQuery wilt vervangen ben je nog wel even bezig, alleen je gaat wel de goede kant op.

Misschien even een overzichtje maken van wat je eigenlijk vaak gebruikt van jQuery en die isoleren is natuurlijk een geweldig idee.

We kunnen wel met elkaar wat opzetten, gewoon aparte bestandjes met elk een functie/functies om iets makkelijk voor elkaar te krijgen. Bijv. het gebruik van querySelector(All) of Sizzle als selector engine, Base.js voor OO javascript, enz.
 
Kris Peeters

Kris Peeters

13/07/2012 13:59:53
Quote Anchor link
Ja, daar gaat het vooral om. Eens zien waar mensen jQuery echt voor nodig hebben.
Sowieso ontbreekt hier nog van alles.

Ik dacht toch vooral minimaal. Geen dingen zoals $.each (een for-loop kunnen we zelf wel maken); geen 10 wrapper functies voor ajax, die intern toch allemaal naar $.ajax leiden. ...

En ik heb het procedureel gemaakt; het kan even goed herschreven worden zodat het via 1 object gebeurt, zoals het jQuery ( of $ ) object.
Kwestie van smaak.
Gewijzigd op 13/07/2012 14:01:51 door Kris Peeters
 
Erwin H

Erwin H

13/07/2012 16:01:28
Quote Anchor link
Wouter J op 13/07/2012 13:51:56:
Erwin, als je jQuery wilt vervangen ben je nog wel even bezig

Ja duh... lijkt me een open deur.
 
Wouter J

Wouter J

13/07/2012 16:05:48
Quote Anchor link
Ik zou geen 1 object maken, maar zoals ze bij MooTools doen meerdere objecten. voorbeeldje
Gewijzigd op 13/07/2012 16:08:23 door Wouter J
 
Kris Peeters

Kris Peeters

13/07/2012 19:10:42
Quote Anchor link
Ja, dat ziet er wel proper uit.

Ik zal eens naar Mootols kijken, trouwens.
 
Wouter J

Wouter J

12/09/2012 19:54:36
Quote Anchor link
Even dit topic weer een zetje omhoog geven. Gister kwam ik langs een erg interessant artikel: Met behulp van node.js en grunt.js kun je je jQuery build customizen. Je kunt bijv. de AJAX of CSS module eruit halen of juist alleen de AJAX module en de functies die je daarvoor nodig hebt: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-your-own-custom-jquery/

Ter volledigheid, MooTools is ook makkelijk te customizen. Zoek in de source code naar jou functie en kijk vervolgens welke andere klassen daar voor nodig zijn, dit vind je in het commentaar boven zo'n class. Dit kopieer je in je eigen bestand en klaar ben je.
Gewijzigd op 12/09/2012 23:14:22 door Wouter J
 
Kris Peeters

Kris Peeters

13/09/2012 10:18:52
Quote Anchor link
Fijn
 
Kris Peeters

Kris Peeters

11/02/2013 11:55:14
Quote Anchor link
oops, verkeerd knopje...
Gewijzigd op 11/02/2013 11:56:11 door Kris Peeters
 
Mebus  Hackintosh

Mebus Hackintosh

11/02/2013 12:09:41
Quote Anchor link
Kan je dan niet alles appart selecteren bij het downloaden van jquery? Bij mootools kan dat wel namelijk (:

edit:

Ik zie nu pas dat Wouter hetzelfde antwoord gaf.
Gewijzigd op 11/02/2013 12:11:41 door Mebus Hackintosh
 
Kris Peeters

Kris Peeters

11/02/2013 12:16:32
Quote Anchor link
jQuery-ui wel (draggable; accordion; slider; ...); jQuery niet (voor zover ik weet).

Maar dan nog, jquery werkt standaard met
$(elementen).evenement(callback);

Net niet wat ik probeer te doen.
Gewoon een paar functies om jQuery niet nodig te hebben; maar wel een paar elementaire wapens te hebben.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.