utils.js

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Medior Senior C# .NET Software Ontwikkelaar Meldka

Over het bedrijf: Wij ontwikkelen concepten op het gebied van veiligheid, gezondheidszorg en communicatie. Is het je passie om software-oplossingen te programmeren? Heb je professionele ervaring met C# en .Net? Vaste baan: Medior Senior C# .NET Software Ontwikkelaar Meldkamersoftware .Net 2.800 - 4.500 Software Engineer We werken aan software voor verhogen van de veiligheid via multimedia in bijvoorbeeld de gezondheidszorg. Streaming van live video en audio staan hierbij centraal. We kunnen alarmeringen monitoren en services op afstand verlenen. We zorgen voor een totaalconcept. Wij werken in teams aan uitdagende projecten en bieden daarbij een informele maar innoverende omgeving, waarbij we

Bekijk vacature »

Unieke PHP Laravel functie!

Bedrijfsomschrijving Dit bedrijf is een hele grote en bekende speler in Nederland wat betreft duurzaamheid. Het is een mooie organisatie die een grote groei heeft doorgemaakt in de afgelopen jaren. Ze hebben een geavanceerde online portal die intensief in gebruik is door de eindklanten. Recent is besloten dit helemaal zelf door te gaan ontwikkelen en alle nieuwe PHP ontwikkelingen met een eigen team van ontwikkelaars te gaan doen. Hierdoor ontstaat er een unieke kans voor jou als ervaren PHP ontwikkelaar! Je kunt namelijk instromen in dit nieuwe team en samen met je nieuwe collega's de toekomstige PHP applicaties voor dit

Bekijk vacature »

Fullstack Developer Javascript JQuery / HTML

Voor wie je gaat werken: Wij ontwikkelen digitale HR oplossingen voor ondernemers. Wil jij werken aan de ontwikkeling van onze web- en mobiele apps? Heb je ervaring als Fullstack Developer? Vaste baan: Fullstack Developer Flutter HTML 3.000 - 4.500 Fullstack Developer Wij helpen ondernemers met het aanbieden van een online HR product waarbij de medewerker centraal staat. Wij stellen de mens centraal in een onderneming. We werken in een jonge en informele organisatie en hebben een leuke werksfeer. Wij werken voor MKB klanten. We hebben veel verschillende projecten. Houd jij van afwisseling? Dan zit je bij ons goed! Bij ons

Bekijk vacature »

PC Programmeur Delphi / CNN

Wie wordt jouw werkgever?: Wij leveren industriële besturingssystemen, software en kennis. Ben jij een enthousiaste PC programmeur? Heb je kennis van C++? Vaste baan: PC Programmeur Delphi C++ 3.000 - 4.700 PC Programmeur Wij zijn specialist op gebied van vision en ontwikkelen wereldwijd speciale machines. Wij verzorgen zelf de besturingstechniek. Wij zijn sterk in GPS systemen en leveren ook complete lijnen voor de verpakkingsindustrie. Wij streven naar verbetering, innovatie van complete machinelijnen. Wij hebben op gebied van engineering veel kennis in huis. Een gezond en prettig werkklimaat, waar jij je vaardigheden snel kunt laten groeien. Wij werken voor grote klanten.

Bekijk vacature »

Senior Node.js Developer (NL)

Senior Node.js Developer (NL) Den Haag HBO/WO IT Professional "Als Senior Node.js Developer impact maken op de groeiende E-commerce markt met onze logistieke software. Je doet dit door complexe bedrijfskritische logistieke business processen te vertalen naar de ontwikkeling en uitbreiding van onze Cloud IT-platformen en software oplossingen in JavaScript en AWS" Wat ga je doen? PostNL is becoming a postal tech company. Als Senior Node.js Developer ben je onderdeel van een multidisciplinair Business-IT-team bestaande uit onder andere een Lead Engineer, JavaScript Developers en Solution Consultants. Samen zijn jullie verantwoordelijk voor het bouwen aan het Event Management Platform (EMP). Dit platform

Bekijk vacature »

Opensource fullstack developer gezocht met een ope

Droom jij in PHP of wel JavaScript? Heb jij wel eens een nieuwsbrief ontvangen en gedacht dit kan ik beter en slimmer maken? Wij zoeken dan jou! Wij zijn namelijk opzoek naar zowel front-end developers als backend developers. Functieomschrijving Jij gaat aan de slag om de toekomst te veranderen van e-mails. Jij bent de aangewezen persoon die aan de slag gaat om te werken aan een toekomst waar wij e-mails krijgen die nuttig zijn en superhandig zijn. Je gaat samen met 50 andere collega's in een super open omgeving aan het werk waarbij iedereen dezelfde taal spreekt. Naast werken is

Bekijk vacature »

Backend Developer PHP / Javascript

Voor wie je gaat werken: Wij maken kaartjes voor onze klanten. Wil jij werken als backend developer? Heb jij ervaring met PHP? Vaste baan: Backend Developer PHP Javascript 2.700 - 4.000 Backend Developer Wij zijn een frisse onderneming die actief is op de Nederlandse web-to-print markt, vooral als het gaat om wenskaarten. Ons bedrijf is regelmatig onderscheiden door haar innovativiteit en klantvriendelijkheid, wat we graag zo willen houden. Bij ons werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om de inzet van technologie. Wij staan open voor elke

Bekijk vacature »

RPA Developer

Voor een opdrachtgever uit de omgeving Utrecht ben ik op zoek naar een RPA Developer. Heb jij een afgeronde HBO- of WO-opleiding in de richting van IT, econometrie of Business Information Magement en minimaal 3 jaar relevante werkervaring? Dan ben ik op zoek naar jou! Deze opdrachtgever is een bekende naam in de regio Utrecht. Als RPA Developer heb je een functie waar je als spil fungeert. Binnen een team van Mendix-specialisten werk je intensief samen aan verschillende projecten bij diverse klanten. Met elkaar realiseer je vernieuwde businessapplicaties die het onze klanten makkelijker maken en de werkzaamheden efficiënter inrichten. Jij

Bekijk vacature »

Software Developer / Python / React / Big Data @ R

2021-05-06 iSense Software Developer / Python / React / Big Data Ben jij een ervaren Software Developer die Big Data gaaf vindt en graag bij een groot, technisch bedrijf wil werken? Werk je graag in een innovatieve omgeving met zo'n 15 scrum teams die samen een volledig product opzetten? Dan is dit de vacature voor jou! ISMO49813 Organisatie Bij dit grote, innovatieve technische bedrijf wil men graag flink groeien dit jaar, namelijk van zo'n 100 naar 120 mensen. In de afgelopen jaren is er hard gewerkt om een nieuw software product op de markt te zetten ter ondersteuning van hun

Bekijk vacature »

Fullstack Developer GUI Linux / UI/UX Design

Bij welk bedrijf je gaat werken: Wij zijn de leider in intelligente signaleringssoftware voor o.a. 2G/3G, 4G/LTE, 5G netwerken. Ben jij een fullstack developer? Heb je ervaring met o.a. HTML en CSS, UI/UX design, JavaScript, Typescript, React, Go en PHP? Vaste baan: Fullstack Developer GUI Linux HTML CSS 3.000 - 4.500 Fullstack Developer Wij ontwikkelen intelligente software voor 4G / 5G, WiFi en andere complexe netwerken. Het gaat om software producten voor routing, security en interworking. Toe aan een mooie, nieuwe uitdaging? Bij ons kom je terecht in een prettige, dynamische werkomgeving, waarbij je samenwerkt met uitstekende vakspecialisten op gebied

Bekijk vacature »

Python developer @ Nederland

2021-06-28 iSense Python developer Python Developer Full Stack ISW50340 Nieuw Organisatie Onze klant is een zakelijke dienstverlener in de regio Rotterdam, bij hun staat de medewerker centraal en daarna de klant. Ze zijn op zoek naar Phyton Developer om hun klanten te helpen bij de digitale transformatie. Je gaat werken voor grote uitdagende klanten en ontwikkelen aan enterprise applicaties. Samen met het team bouw je de gewenste oplossingen. Naast het bouwen van oplossingen denk je mee met de klant en adviseer je de klant over bepaalde technische vraagstukken. De focus ligt bij deze functie vooral op de back-end. Ben jij

Bekijk vacature »

Senior Software Developer @ Regio Den Haag

2021-08-16 iSense Senior Software Developer Heb jij ruime ervaring als Software developer en ben je toe aan een volgende stap in een coördinerende rol? Heb je ervaring met zelfontwikkelde software pakketten en maak je dit snel eigen? Dan is dit de vacature voor jou! ISBA49526 Nieuw Organisatie De organisatie waar je komt te werken is een enterprise omgeving waarbij IT een belangrijke rol speelt. Door de vele veranderingen in de markt waar zij op in moeten spelen, werken zij met innovatieve technologieën. Het team is erg stabiel en werkt continue aan het optimaliseren van de complexe omgeving, het implementeren van

Bekijk vacature »

Senior AWS Cloud Developer IoT (NL)

Senior AWS Cloud Developer IoT (NL) Den Haag HBO/WO IT Professional PostNL zet trackers in om de logistieke pakkettenstroom realtime te kunnen managen. Met behulp van deze trackers, ookwel beacons genoemd, wordt het mogelijk om de beweging van 250.000 rolcontainers te volgen. Deze 250.000 beacons genereren in real time miljoenen berichten per minuut. Internet of Thing (IoT) is voor PostNL dan ook een belangrijke component in het digitaliseren van het logistieke proces. Wat ga je doen? Binnen het IoT platform vertalen we inkomende dat vanuit de rolcontainer trackers, zoals aankomst- en vertrektijd vanaf een PostNL locatie, naar relevante informatie ter

Bekijk vacature »

3D Applications Developer

Role: 3D Applications Developer Location: Heerlen, Netherlands Salary: Flexible + Great benefits! Must have a valid Dutch work permit to apply! Want to join an international business that values your career progression and growth?! My client is now looking for a 3D Applications Developer to join their fast-growing team to help with developing new ways to promote their bespoke business solutions in the global market. Your role will be to develop innovative applications to enhance company sales and efficiency, overall contributing to growth. They are a global market leader in development, sustainability, and e-commerce. With offices covering the globe, the

Bekijk vacature »

Medior Sr PHP Developer Applicaties / MBO+ HBO

Bij welk bedrijf je gaat werken: Wij leveren diensten en oplossingen voor de uitwisseling van digitale en fysieke informatiestromen. Wil jij werken als PHP Developer? Heb jij ervaring als PHP developer? Vaste baan: Medior Sr PHP Developer Applicaties MBO+ HBO 2.800 - 4.300 Medior Senior PHP Developer Als fullservice marketingbureau werken we op alle fronten: e-mail, direct mail, mobile, web en social media. Marketing IT Tools ontwikkelen wij op maat of hebben wij in huis. Bij ons bedrijf staan vertrouwen, samenwerkings- en resultaatgerichtheid hoog in het vaandel. Wij werken voor grote klanten. We doen omvangrijke projecten die we bij ons

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

21/09/2021 08:01:30
 
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.