By the time we're done, you'll be able to:
<script type="text/javascript"> // Say hello world 42 times function helloWorld(world) { for (var i = 42; --i >= 0;) { document.write(i + '. Hello ' + String(world) + '
\n'); } } </script> <body onload="helloWorld('you stink');"> <input type="button" id="mybutton" value="My Button" onclick="helloWord('I love you.');" >
type="text/javascript";
it's assumed.// Single line comment. /* Multi line comment. See? Another commented line. */
a
-z
, A
-Z
, $
, _
)0
-9
)var x; y = 3; var z = 'This is a string', q = "This is also a string.";
var
to declare a variable (like y
above), it is created with global scope. Best to always use var
.delete
operator. But not variables which have been defined with var
; they're permanent. (I know: it doesn't make sense to me either.)break |
else |
new |
var |
case |
finally |
return |
void |
catch |
for |
switch |
while |
continue |
function |
this |
with |
default |
if |
throw |
|
delete |
in |
try |
|
do |
instanceof |
typeof |
null
Array
sObject
sNumber
String
Boolean
var name = "Rasmus Eich"; var upperName = name.toUpperCase(); // RASMUS EICHDemo
String
object, performs the toUpperCase()
method, and discards the object.1.95e-1
is .195
.0x
or 0X
: 0xAC9F
.0
: 0127
.parseInt()
can be used to convert other types to an integer. An optional second parameter specifies the base of the number to be converted (from 2
to 36
).parseFloat()
will convert other types to a floating point number.Content | Meaning |
---|---|
Infinity Number.POSITIVE_INFINITY Number.NEGATIVE_INFINITY
|
Infinity . Can also represent negative Infinity as -Infinity . (1/0 is Infinity ) |
NaN Number.NaN |
Not a Number (0/0 is NaN ) |
Number.MAX_VALUE |
Largest representable number (1.7976931348623157e+308) |
Number.MIN_VALUE |
Smallest (closest to zero) number (5e-324) |
Input | Result |
---|---|
undefined |
NaN |
null |
0 (except IE which returns NaN ) |
Boolean |
true returns 1 ; otherwise 0 (except IE which returns NaN ) |
Number |
No conversion; returns the value |
String |
Integer or float |
Object |
NaN |
+
.\t
, \n
, \\
, \/
, \'
and \"
.\u
and four hexadecimal characters.var mySum1 = "5" + 3 + 8; // "538" var mySum2 = 5 + 3 + "8"; // "88"
var myVal1 = "30" - 10; // 20 var myVal2 = 20 / "2"; // 10 var myVal3 = "10" * 3; // 30
true
or false
."true"
or "false"
.!
.Input | Result |
---|---|
undefined |
false |
null |
false |
Boolean |
Value of value |
Number |
false if 0 or NaN ; otherwise, true |
String |
false if empty; otherwise, true |
Object |
true |
null
null
is a value you can assign a variable.0
, but both are falsy.
var a = null; if (a == null) alert('a is null'); var b; if (typeof(b) == 'undefined') alert('b is undefined');
// declaring object with a literal var myObject = { computer: 'MacBook Pro', os: 'OSX', age: 3, "screen-shot": '2012-09-30 screenshot.png' }; // referencing the object console.log(myObject.computer); console.log(myObject['computer']);
var myObject = { computer: 'MacBook Pro', os: 'OSX', age: 3, software: { title: 'Firefox', publisher: 'Mozilla', version: 15.0 } }; console.log(myObject); console.log(myObject && myObject.age); console.log(myObject && myObject.software.title);Demo
A && B
: if A
is false
, it doesn't bother evaluating B
A || B
: if A
is true
, it doesn't bother evaluating B
&&
,
but only if the value on the left is truthy.var arr1 = new Array(10); var arr2 = new Array(1, 2, 3 4, 5, 6); var arr3 = [0, 1, 'I am a string, I am.', function() {alert('the media');}]; arr3.prop1 = 'I am a proper property.'; var num = arr2[3];
JavaScript has pretty much the same control structures as PHP:
if
/else
for
while
break
continue
for
/in
(instead of foreach
)There are more, but these will suffice for our purposes.
function doAdd1(a, b) { return a + b; }; var doAdd2 = function(a, b) { return a + b; }; var myObj = { doAdd: function(a, b) { return a + b; } }
document
object encapsulates the DOM.document.getElementById()
returns an element based on its id.innerHTML
property can be used to update content.window
and document
Objectsdocument.write('Outputs to page content')
Demo
COMING SOON
COMING SOON
http
in Google's CDN URL: it'll work with both http and https pages.$
vs. jQuery
$
and jQuery
as its main interface. Everything jQuery does, is done through those two, equivalent, variables.$
. So we have the noConflict()
utility function to relinquish control of $
:
$
in the global namespace, we can continue using it in a function scope.$
.$
Buys YoujQuery packs a LOT of functionality into one variable. Here's what you get (we'll be looking at examples of each of these in a minute):
$.trim(myString)
)$(document).ready(function() { // my JS code... }); $(function() { // my JS code... });
Selector | Results |
---|---|
$('#myID') |
Selects element with ID myID . |
$('.myClass') |
Selects element with class myClass . |
$('p:odd') |
Selects all odd p elements. |
$('tr:nth-child(3)') |
Selects the third row of each table. |
$('body > div') |
Selects direct div children of body . |
$("a[href$='pdf']") |
Selects links to PDF files. |
$('div:has(a)') |
Selects div s containing links. |
.html()
allows you to get and set HTML within the wrapped set's elements..css()
allows you to get and set the wrapped set's elements' CSS values..addClass()
and .removeClass()
add and remove classes from the wrapped set's elements.
$('p:odd').html('This is an odd paragraph.').addClass('odd').css('color', 'green');Demo
$.load()
, $.get()
, $.post()
and $.ajax()
. They all use $.ajax()
. We're going to look at $.get()
.
Demo