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.'); } }; });
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: …weiterlesen
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). …weiterlesen
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); |
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.
Detecting the viewport size of an Apple iPad is very easy with jQuery. You just have to use the following code example:
1 2 3 4 5 6 7 8 | <script src="./js/jquery.js"></script>
<script type="text/javascript">
var width = $(window).width();
var height = $(window).height();
var pre = document.createElement('pre');
pre.textContent = 'Viewport: '+width+'x'+height+' pixels';
document.body.appendChild(pre);
</script> |
The viewport for an iPad in landscape mode (with address bar) is 1024×690 pixels.
The viewport for an iPad in portrait mode (with address bar) is 768×946 pixels.
The viewport for an iPad in portrait mode (with address bar and debug console) is 768×896 pixels.
If you want to hide the address bar in portrait mode then you have to add the website to your homescreen and their must be this meta tag in your website’s header:
<meta name="apple-mobile-web-app-capable" content="yes" />
The viewport for a fullscreen portrait mode is then 768×1004 pixels.
The resolutions are based on the following setting:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
If you do not have this setting (or if you use different values for it), then the viewport will be lager or even smaller.
0