Ich habe eine Klasse “Person” in JavaScript und Java geschrieben, um zu zeigen, wie Namensräume (engl. namespaces) und Objektorientierung in beiden Programmiersprachen aussehen.

…weiterlesen

There is no magic behind checking a web-browsers support for a specific HTML5 feature. If you want to check if a browser supports the latest HTML5 WebSocket API then you just have to take care if there is an object called “WebSocket” available via the DOM:

<script>
  if('WebSocket' in window){
    alert('Hurray! Your browser supports HTML5 WebSockets.')
  }else{
    alert('Sorry, but you are out of date!');
  }
</script>

Nevertheless, there are still people who want to include a fancy library for such an inspection. You can do the same with Modernizr:

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
<script>
  if(Modernizr.websockets){
    alert('Hurray! Your browser supports HTML5 WebSockets.')
  }else{
    alert('Sorry, but you are out of date!');
  }
</script>

Zur Demonstration von HTML5-Websockets habe ich mit webbit einen einfachen WebSocket-Server geschrieben, der Nachrichten entgegen nimmt und diese Nachrichten wieder an den jeweiligen angemeldeten Client zurück schickt. Ein solches Beispiel nennt man auch Echo-Server.

…weiterlesen

To work with the Facebook API you have to load the Facebook JavaScript SDK, initialize your Facebook application, authenticate the user and request an access token to then send the final Facebook API calls. In this long process chain much can go wrong. Especially because the calls happen all asnychron. You have to work with the correct callback mechanisms to reach the goal. To hide this mechanism and to make the Facebook API easier to use, I have created an abstraction, with which you can work much easier, as you can see here:

<script src="./js/simple-facebook.js"></script>
<script>
  // Setup
  var fb = new SimpleFacebook();
  fb.setAppId('255100001240698');
  fb.setLocale('de_DE');
  fb.setPermissions('email,user_about_me,friends_about_me,publish_actions');
  // Usage
  fb.showUsersName();
  fb.showUsersLink();
</script>

Doesn’t it look great? No more need to include a fb-root tag or many JavaScript snippets. All you need is the simple-facebook.js file, which can be expanded depending on your needs. Here is a basic version, which illustrates the concept:

…weiterlesen

If you authenticated a user with the Facebook JavaScript SDK, then you can do the following to get the ID, name and email address of a user:

FB.api('/me',function(response){alert(response.id);});
FB.api('/me',function(response){alert(response.name);});
FB.api('/me',function(response){alert(response.email);});

If you want a jQuery UI slider with labels that looks like this:

Then this JavaScript code might help you:

$('#slider').slider({
  min: 1,
  max: 20,
  step: 1,
  value: 16,
  create: function(event,ui){
    $('a.ui-slider-handle').css({'text-decoration':'none','text-align':'center'}).text($(this).slider("value"));
  },
  slide: function(event,ui){
    $('a.ui-slider-handle').css({'text-decoration':'none','text-align':'center'}).text(ui.value);
  }
});