3. Data types : Number
NO integers, just doubles
(doubleprecision
64bit
format IEEE 754 values)
Not called doubles, called number.
4. Data types : Number
typeof(37);
=> 'number'
typeof(3.14);
=> 'number'
typeof(Infinity);
=> 'number'
5. Data types : Number
typeof(37);
=> 'number'
typeof(3.14);
=> 'number'
typeof(Infinity);
=> 'number'
Maths disagrees with
Javascript :
[...]
In mathematics, "infinity" is
often incorrectly treated as
if it were a number.
In this context infinity is
not itself a quantity but
rather a direction or open
possibility
[…]
http://en.wikipedia.org/wiki/Infinity
7. Data types : Number
0.1 + 0.2 == 0.3;
=> false
0.1 + 0.2;
=> 0.30000000000000004
8. Data types : Number
0.1 + 0.2 == 0.3;
=> false
0.1 + 0.2;
=> 0.30000000000000004
You may 'fix' that issue like this :
(0.1 + 0.2).toFixed(2) == 0.3;
=> true
9. Data types : Number
parseInt(3.99);
=> 3
parseInt('123', 10);
=> 123
parseInt('11', 2);
=> 3
Math.floor(3.99);
=> 3
Math.floor(3.01);
=> 3
Math.ceil(3.99);
=> 4
Math.ceil(3.01);
=> 4
Base to use
10. Data types : Number
NaN (Not a Number)
ParseInt('hello', 10);
=> NaN
11. Data types : Number
NaN (Not a Number)
ParseInt('hello', 10);
=> NaN
NaN + 5;
=> NaN
isNaN(NaN);
=> true
12. Data types : Number
NaN (Not a Number)
ParseInt('hello', 10);
=> NaN
NaN + 5;
=> NaN
isNaN(NaN);
=> true
typeof(NaN);
?
13. Data types : Number
NaN (Not a Number)
ParseInt('hello', 10);
=> NaN
NaN + 5;
=> NaN
isNaN(NaN);
=> true
typeof(NaN);
?
typeof (NaN);
=> 'number'
14. Data types : Number
NaN (Not a Number)
ParseInt('hello', 10)
=> NaN
NaN + 5
NaN
NaN => == NaN
isNaN(=> false
NaN)
=> true
typeof (NaN)
?
typeof (NaN)
=> 'number'
15. Data types : String
They're sequences of Unicode
characters with each character
represented by a 16bit
number.
19. Data types : Boolean
false, 0, the empty string (""),
NaN, null, and undefined all become
false.
All other values become
true.
20. Data types : null & undefined
undefined : declared but not
initializated, not an actual value.
null : is a value.
21. Data types : null & undefined
undefined : declared but not
initializated.
null : is a value.
Be aware of :
( undefined == null ) => true
( null == undefined ) => true
22. Data types : Arrays
List of items.
var a = new Array();
var a = ['dog', 'cat', 'hen'];
typeof a[90];
=> undefined
a.push('fish');
a.length;
=> 4
23. Data types : Arrays
List of items.
.length isn't necessarily the number of items in
the array.
var a = ['dog', 'cat', 'hen'];
a[100] = 'fox';
a.length;
=> 101
Remember — the length of the array is one more than
the highest index.
25. jQuery objects
$.fn namespace
Methods called on jQuery
selections are in the
$.fn namespace
typeof $('h1');
=> 'object'
$ namespace
Methods in the $
namespace are generally
utilitytype
methods,
and do not work with
selections.
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
http://learn.jquery.com/usingjquerycore/
dollarobjectvsfunction/
26. jQuery selectors
Class Selector $('.class') http://api.jquery.com/classselector/
<div class="myClass">Hello</div>
<p class="myClass">World</p>
<script>
$( '.myClass' ).each( function() {
$( this ).text( 'Selected' );
});
</script>
ID Selector $('#id') http://api.jquery.com/idselector/
<div id="myId">Hello</div>
<script>
$( '#myId' ).each( function() {
$( this ).text( 'Selected' );
});
</script>
$( this ) is the
jQuery object that
manipulates current
DOM item, in this
example will be :
<div class="myClass">
at first iteration and
<p class="myClass">
at second iteration.
30. jQuery Events
$( document ).ready()
The ready event occurs after the HTML document has been loaded.
<script>
$( document ).ready( function() {
console.log( 'HTML is ready!' );
});
</script>
$( window ).load()
The load event will run once the entire page (images or iframes),
not just the DOM, is ready.
<script>
$( window ).load( function() {
console.log( 'All assets and HTML are ready!' );
});
</script>
http://learn.jquery.com/usingjquerycore/
documentready/
http://stackoverflow.com/questions/3698200/windowonloadvsdocumentready
31. jQuery Events
Main points for $( document ).ready():
http://stackoverflow.com/a/18339794
● It will not wait for the images to get loaded.
● Used to execute JavaScript when the DOM is
completely loaded.
● Put event handlers here.
● Can be used multiple times.
● Replace $ with jQuery when you receive “$ is not
defined.”
● Not used if you want to manipulate images Use $
(window).load() instead.
32. jQuery Events : Trigger & On
Fire a custom event using $.fn → trigger() method.
<script>
$( 'div' ).on( 'mouseover', function() {
if( $(this).hasClass('isWinner') ){
$(this).trigger('userHasWon');
}
});
</script>
Capture a custom event using $.fn → on() method.
<script>
$( 'div' ).on( 'userHasWon', function( event ) {
event.preventDefault();
sendNotificationToServer();
updateTopNavBarWithReward();
});
</script>
http://api.jquery.com/trigger/
33. JQuery : AJAX/AJAJ
http://api.jquery.com/jquery.ajax/
Asynchronous JavaScript And XML
Asynchronous JavaScript And JSON
jQuery allows you to perform synchronous requests.
synchronous JavaScript And XML
synchronous JavaScript And JSON
34. JQuery : AJAX/AJAJ
What is AJAX?
Web server
Get/Post request
XML/JSON response
Javascript code asks for some data
and updates some DOM elements, page is
not fully reloaded just partially
updated.
35. JQuery : AJAX/AJAJ
Asynchronous mode
Method calls results can not be collected
on natural code sequence order, they may
arrive later (asynchronously).
So you have to be prepared to process
Ajax calls results anytime.
36. JQuery : AJAX/AJAJ
Asynchronous mode
<form action='http://www.mySite.com/action.php' method='POST'></form>
$( 'form' ).on( 'submit', function( event ) {
// Do not perform form action until Ajax response is received.
event.preventDefault();
var shopName = $('form input[name="shopName"]').val();
checkShopName( shopName );
// Do not perform form action until Ajax response is received.
return false;
});
function checkShopName( name )
{
showSpinner();
performShopNameCheck( name );
}
37. JQuery : AJAX/AJAJ
Asynchronous mode
function performShopNameCheck( shopName )
{
$.ajax({
url : $('form').attr('action'),
type: $('form').attr('method'),
data: { shop: shopName, domain:'openshopen.com' },
success: function( response )
{
var valid = isResponseValid( response );
if( valid ){
// As code sequence was broken before, we may use events
// to process results.
$('form').trigger('redirectToSuccessPage');
}
else{
$('form').trigger('reloadPageWithErrors', response.errors );
}
},
error: function( jqXHR , textStatus , errorThrown ){
$('form').trigger('redirectToErrorPage');
}
});
}
38. JQuery : AJAX/AJAJ
Synchronous mode
All code runs in sequence, methods will
return values and block sequence until
they finish their job.
39. JQuery : AJAX/AJAJ
Synchronous mode
$( 'form' ).on( 'submit', function( event ) {
event.preventDefault();
var shopName = $('form input[name="shopName"]').val();
if( checkShopName( shopName ) ){
redirectToSuccessPage();
}
else{
reloadPageWithErrors();
}
});
function checkShopName( name )
{
showSpinner();
return performShopNameCheck( name );
}
Sequence will end up waiting for
an AJAX call, some browsers while
they are synchronously waiting, do
not show DOM changes, so spinner
may not be shown to users.