Der Blog von Benny Neugebauer » JavaScript http://www.bennyn.de Alles über die Informatik & Co. Wed, 08 Feb 2012 16:31:13 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 JavaScript AMD Example with RequireJS http://www.bennyn.de/programmierung/javascript/javascript-amd-example-with-requirejs.html http://www.bennyn.de/programmierung/javascript/javascript-amd-example-with-requirejs.html#comments Wed, 25 Jan 2012 14:09:18 +0000 bennyn http://www.bennyn.de/?p=3131 One line of code is worth ten thousand words.

./index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Asynchronous Module Definition Example with RequireJS</title>
  </head>
  <body>  
    <!-- Let's use RequireJS as module loader (there are also others!) -->
    <script src="./js/require-1.0.4.js"></script>
    <script>
      require(['js/my_amd_module'], // Requires ./js/my_amd_module.js
      function(myModule)
      {
        myModule.sayHello();
        myModule.doSomething();        
      });
    </script>
</html>

./js/my_amd_module.js

define('js/my_amd_module', // module name, has to match filename (without .js)
  ['js/jquery-1.7.min'], // requirements of this module (./js/jquery-1.7.min.js)
  function($) // $ for jQuery
  {
    return {
      sayHello: function()
      {
        alert('Hello World!');
      },
      doSomething: function()
      {
        alert('I did.');
      }
    };
  });
]]> http://www.bennyn.de/programmierung/javascript/javascript-amd-example-with-requirejs.html/feed 0 How to parse JSON with jQuery http://www.bennyn.de/programmierung/javascript/how-to-parse-json-with-jquery.html http://www.bennyn.de/programmierung/javascript/how-to-parse-json-with-jquery.html#comments Tue, 27 Dec 2011 19:37:25 +0000 bennyn http://www.bennyn.de/?p=3075 With jQuery you could easily parse a JSON (which is an object in JavaScript Object Notation). The method parseJSON of jQuery translates the JSON even into the corresponding JavaScript data types. As an example I have chosen the following JSON:

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

{
        "firstName": "Joe",
        "lastName" : "Black",
        "age"      : 28,
        "address"  :
        {
          "streetAddress": "1st Street",
          "city"         : "New York",
          "state"        : "NY",
          "postalCode"   : "10021"
        },
        "phoneNumber":
        [
          {
            "type"  : "home",
            "number": "212555-1234"
          },
          {
            "type"  : "fax",
            "number": "646555-4567"
          }
        ],
        "married" : true,
        "developer" : true	
}

This JSON contains nested objects like address, an array like phoneNumber and key-value pairs of different types like firstName (string), age (number) and married (boolean).

Here it is shown how it is parsed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script src="./js/jquery-1.7.min.js"></script>
<script type="text/javascript">
  var json = '{"firstName":"Joe","lastName":"Black","age":28,"address":{"streetAddress":"1st Street","city":"New York","state":"NY","postalCode":"10021"},"phoneNumber":[{"type":"home","number":"212555-1234"},{"type":"fax","number":"646555-4567"}],"married":true,"developer":false}';
  var object = jQuery.parseJSON(json);
  var firstName = object.firstName; // Joe
  var age = object.age; // 28
  var streetAddress  = object.address.streetAddress;
  var numberOfPhoneNumbers = object.phoneNumber.length; // 2
  var homeNumber = object.phoneNumber[0].number; // 212555-1234
  var faxNumber = object.phoneNumber[1].number; // 646555-4567
  var married = object.married; // true
 
  if(married == true)
    alert('He is a lucky one!'); // ...and he is ;)
 
  // Checking data types
  alert(typeof(firstName)); // string
  alert(typeof(age)); // number
  alert(typeof(married)); // boolean
</script>
]]> http://www.bennyn.de/programmierung/javascript/how-to-parse-json-with-jquery.html/feed 0 Facebook Authentication with JavaScript SDK http://www.bennyn.de/programmierung/javascript/facebook-authentication-with-javascript-sdk.html http://www.bennyn.de/programmierung/javascript/facebook-authentication-with-javascript-sdk.html#comments Fri, 23 Dec 2011 17:46:04 +0000 bennyn http://www.bennyn.de/?p=3066 Over the years many ways have been created in order to authenticate through Facebook. One of the easiest ways is to use the Facebook Markup Language (FBML). However, from January 2012 is FBML is no longer supported. Who wants to use Facebook Connect to login and logout then, should use the JavaScript SDK provided by Facebook. This supports authentication via OAuth 2.0, which is the recommended way to handle authentication. I programmed an example, that shows how to login and logout with the JavaScript SDK. This example is based on the current JavaScript SDK methods and does not use deprecated methods (because in July 2011 there were some changes).

Facebook Authentication with JavaScript SDK (and standard Facebook Log In Button):

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:fb="http://ogp.me/ns/fb#">
  <head>
    <meta charset="utf-8" />
    <title>Facebook Authentication with JavaScript SDK</title>
  </head>
  <body> 
    <!-- Facebook JS SDK -->
    <div id="fb-root"></div>
    <!-- 
    Facebook Auth Button
    See https://developers.facebook.com/docs/reference/plugins/login/
    -->
    <div id="fb-auth" 
         class="fb-login-button"
         scope="email,user_about_me,friends_about_me,publish_stream,publish_actions"
         >
    </div>
    <script type="text/javascript">
      /*
       * Facebook Authentication with JavaScript SDK
       * 
       * Based on new methods announced on:
       * https://developers.facebook.com/blog/post/525/
       */
 
      // Your Facebook application settings
      // See: https://developers.facebook.com/apps/
      var facebookAppId = '156477777792853';
      var facebookAppDomain = 'http://www.bennyn.de/';
      var facebookAuthButtonId = 'fb-auth';
 
      function loginCallback(response)
      {
        if (response.authResponse) 
        {
          var uid = response.authResponse.userID;
          var accessToken = response.authResponse.accessToken;
          FB.api('/me', function(response)
          {
            alert('Nice to see you, ' + response.name + '!');
          });
 
          createLogoutButton(response);
        }
      }
 
      function logoutCallback(response)
      {
        // Refresh page if the user logs out
        if (!response.authResponse) 
          window.location.reload();
      }
 
      function createLogoutButton(response)
      {
        // Class names come from standard Facebook JS SDK CSS styles
        // See: https://developers.facebook.com/docs/reference/plugins/login/
        var facebookLoginButton = document.getElementById(facebookAuthButtonId);
        var elements = document.getElementsByClassName('fb_button_text');
        var facebookLoginButtonText = elements[0];
 
        facebookLoginButtonText.innerHTML = 'Logout';          
        facebookLoginButton.onclick = function(event) 
        {
          FB.logout(function(response) 
          { 
            console.log('User logged out.');
          });
        }
 
        // Remove login behaviour of DOM element 'fb_button'
        var facebookLoginInnerButton = facebookLoginButton.childNodes[0];
        facebookLoginInnerButton.onclick = function(event){};
      }
 
      function showInitialButtonState(response)
      {
        if (response.authResponse) 
          createLogoutButton(response);
      }
 
      // Use Facebook JavaScript SDK
      // See: https://developers.facebook.com/docs/reference/javascript/
      window.fbAsyncInit = function() 
      {
        FB.init(
        {
          appId: facebookAppId,
          channelUrl: '//'+facebookAppDomain+'/channel.html',
          status : true,
          cookie: true,
          xfbml: true,
          oauth: true
        });
 
        FB.getLoginStatus(showInitialButtonState);
        FB.Event.subscribe('auth.login', loginCallback);
        FB.Event.subscribe('auth.logout', logoutCallback);
      };
 
      // Load Facebook JavaScript SDK asynchronously
      (function(d)
      {
        var js, id = 'facebook-jssdk';
        if(d.getElementById(id))
        {
          return;
        }
        js = d.createElement('script'); 
        js.id = id; 
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));
    </script>
  </body>
</html>

Facebook Authentication with JavaScript SDK (and custom Facebook Log In Button)

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:fb="http://ogp.me/ns/fb#">
  <head>
    <meta charset="utf-8" />
    <title>Facebook Authentication with JavaScript SDK</title>
  </head>
  <body> 
    <!-- Facebook JS SDK -->
    <div id="fb-root"></div>
    <!-- Custom Facebook Auth Button -->
    <button id="fb-auth"></button>
    <script type="text/javascript">
      /*
       * Facebook Authentication with JavaScript SDK
       * 
       * Based on new methods announced on:
       * https://developers.facebook.com/blog/post/525/
       */
 
      // Your Facebook application settings
      // See: https://developers.facebook.com/apps/
      var facebookAppId = '156477777792853';
      var facebookAppDomain = 'http://www.bennyn.de/';
      var facebookAuthButtonId = 'fb-auth';
 
      function updateButton(response)
      {
        var button = document.getElementById(facebookAuthButtonId);
        if (response.authResponse) 
        {
          // User is already logged in
          button.innerHTML='Logout';
          button.onclick = function(event) 
          {
            FB.logout(function(response) 
            { 
              console.log('User logged out.');
            });
          }
        }
        else
        {
          // User is not logged in
          button.innerHTML='Login';
          button.onclick = function(event) 
          {
            FB.login(function(response) 
            {
              if (response.authResponse) 
              {
                var uid = response.authResponse.userID;
                var accessToken = response.authResponse.accessToken;
                FB.api('/me', function(response)
                {
                  alert('Nice to see you, ' + response.name + '!');
                });
              }
            }, 
            {
              // Get access to additional user information
              // See: https://developers.facebook.com/docs/reference/api/permissions/
              scope: 'email,user_about_me,friends_about_me,publish_stream,publish_actions'
            });
          };
        }
      }
      // Use Facebook JavaScript SDK
      // See: https://developers.facebook.com/docs/reference/javascript/
      window.fbAsyncInit = function() 
      {
        FB.init(
        {
          appId: facebookAppId,
          channelUrl: '//'+facebookAppDomain+'/channel.html',
          status : true,
          cookie: true,
          xfbml: true,
          oauth: true
        });
 
        // Use updateButton method as event handler
        FB.getLoginStatus(updateButton);
        FB.Event.subscribe('auth.authResponseChange', updateButton);
      };
 
      // Load Facebook JavaScript SDK asynchronously
      (function(d)
      {
        var js, id = 'facebook-jssdk';
        if(d.getElementById(id))
        {
          return;
        }
        js = d.createElement('script'); 
        js.id = id; 
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));
    </script>
  </body>
</html>
]]> http://www.bennyn.de/programmierung/javascript/facebook-authentication-with-javascript-sdk.html/feed 0 How to check for NaN with JavaScript? http://www.bennyn.de/programmierung/javascript/how-to-check-for-nan-with-javascript.html http://www.bennyn.de/programmierung/javascript/how-to-check-for-nan-with-javascript.html#comments Thu, 15 Dec 2011 15:46:35 +0000 bennyn http://www.bennyn.de/?p=3046 If you explicitly convert a JavaScript variable to a number (e.g. by using the parseInt function), then you have to check if the value of the converted number is really a number. In case that it is not, it will present you NaN (Not a Number). You can check for NaN with the isFinite function.

Example:

1
2
3
4
5
6

// Check for hexadecimal value
var convertedNumber = parseInt('G', 16);
if(isFinite(convertedNumber) == false)
  alert('The value of the converted number is NaN!');
else
  alert('The number is: '+convertedNumber);
]]> http://www.bennyn.de/programmierung/javascript/how-to-check-for-nan-with-javascript.html/feed 0 Image preloader with jQuery http://www.bennyn.de/programmierung/javascript/image-preloader-with-jquery.html http://www.bennyn.de/programmierung/javascript/image-preloader-with-jquery.html#comments Wed, 16 Nov 2011 13:34:42 +0000 bennyn http://www.bennyn.de/?p=2945 Today I saw a tiny JavaScript code on Stack Overflow which can be used as a jQuery plugin for preloading images. It is very handy and can be used easily:

jQuery.fn.preload = function() 
{
  this.each(function()
  {
    $('<img/>')[0].src = this;
  });
}
 
jQuery(document).ready(function($)
{    
  $(['./images/image1.png', './images/image2.png']).preload();
});

I use this function to preload drag images which are used by event.dataTransfer.setDragImage but you can still preload everything else. It makes also much sense for hover images.

]]> http://www.bennyn.de/programmierung/javascript/image-preloader-with-jquery.html/feed 0