A Simple, Comprehensive Overview of Javascript
This isn’t a reference guide, programming tutorial or detailed overview. It’s a Javascript refresher, assuming you know another programming language and puts all the information in one place (just ctrl+f to find!). Javascript has nothing to do with Java, is dynamically typed and has C-like syntax.
Enabling Javascript
Include javascript inside HTML:
<script>
x = 3;
</script>
Reference external file:
<script src="http://example.com/script.js"></script>
Redirect if javascript disabled:
<noscript><meta http-equiv="refresh" content="0; URL=http://example.com/noscript.html"/></noscript>
Using Variables, Objects and Arrays
var str = "Hello"; // local variable
str2 = "Hello World"; /* global */
str3 = 'My quote char: " '; // single or double quote
str4 = "My really really really \
really long string broken into \
multiple lines";
str = 19; // change to int
str = 0xfe + 2.343 + 2.5e3; // hex, floats, exp
var newObject = new Object(); // constructor
newObject = {}; // shorthand for same
newObject.name = "bob" // dynamic attributes
newObject.name = null // it's there (null item)
delete newObject.name // it's gone (undefined)
newObject["real age"] = 33; // array notation/hash table
var obj = { // create object using JSON
name: "Bob", // aka Javascript Object Notation
details: {
age: 33,
"favorite color": "green"
}
}
obj.name
obj.details["favorite color"]
var newArray = []; // no size
newArray[3] = "hi"; // grows dynamically
newArray[2] = 13; // any type
newArray.push(newObject); // add new item
newArray.pop(); // remove it
Comparisons and Manipulations
Javascript has some funky types and comparisons.
/* javascript types */
typeof("string") == "string"
typeof(3) == typeof(3.4) == typeof(0x34) == "number"
typeof(myObject) = typeof(myArray) == "object" // arrays are objects
typeof(true) == typeof(1 == 2) == "boolean"
typeof(Math.sin) == "function"
typeof(notthere) == "undefined"
/* comparisons */
123 == "123" // true => converts type
123 === "123" // false => checks type
typeof(x) == "undefined" // x isn't there
x == null // x is defined, but null
/* Numbers */
parseInt("123") // base 10 => 123
parseInt("123", 16); // base 16 => 291
parseFloat("123.43"); // 123.43
isNaN(0/0) == true // illegal number
3/0 == Infinity // legal...
-3/0 == -Infinity //
isFinite(3/0) == false // ... but not finite
/* regular expression (regex) string comparisons */
matches = "hello".match(/h../) // returns array ["hel"] or null
re = new RegExp("h..", "ig"); // construct regexp -- no slashes
matches = "hello".match(re); // use it
"hello".replace(/h/,"b") // => "bello"
Conditionals and Loops
if (str == "Hello"){ // if-else
alert("Hi"); // popup dialog
}
else{
alert("something is wrong!");
}
a = 3, b = 4; // multi-assigment
c = a > b ? a : b; // c gets bigger item (b)
switch (name){ // switch statement
case "Bob":
alert("Hi Bob!")
break
case "Joe":
alert("Hey Joe.")
break
default: alert("Do I know you?")
}
while (i < n){ // the basics
// do something
i++;
}
for (var i=0; i<n; i++){
// do something else
}
for (var key in obj){
// do something with obj[key]
}
Defining Functions
function foo(a,b){ // global function
return a + b;
}
var fn = function(a,b){ // save function as variable...
return foo(a,b);
}
obj.fn = function(a,b){ // ...or as part of object
return a + b;
}
function bar(a,b){
var n = 1; // local var
function helper(x) { // inner function...
return 1/Math.sqrt(x + n); // .. can use local vars
}
return helper(input); // avoid need for global function
}
foo(1,2) == fn(1,2) == 3; // true
Javascript Classes
Javascript doesn’t have formal class notation, but you can create a “constructor” and add methods to it. Examples from here.
function Person(first, last) { // create "constructor"
this.first = first; // public variables -- reference current object
this.last = last;
var privateFn = function(first, last){ // private function
// ...
}
self.setName = function(first, last){ // public function
this.first = first;
this.last = last;
}
}
Person.prototype.fullName = function() { // extend prototype
return this.first + ' ' + this.last; // even at runtime!
}
var bob = new Person("Bob", "Smith"); // "new" creates an object
bob.fullName(); // => "Bob Smith"
Advanced Javascript
function foo(a,b){ // will raise exception
var c = a + b;
throw "Error Message"; // your message here
}
try{ // try dangerous code
foo(1,2);
}
catch(e){ // catch exception
alert(e.name + e.message); // show details
}
eval("x = 3"); // execute arbitrary code
timer = setTimeout("myfunction()", 1000) // execute in 1 second (1000ms)
clearTimeout(timer); // cancel event
Browser Document Object Model (DOM), and GUI
Find and change HTML elements.
alert("message"); // messagebox with "OK"
var choice = confirm("message"); // OK/CANCEL true or false
var input = prompt("message", "default value"); // enter a value; null if cancelled
x = document.getElementById("foo"); // finds <div id="foo"></div>
x.style.background = "#333"; // set CSS style
x.style.borderLeft = "1px solid #ccc"; // border-left => borderLeft (camelCase)
x.className = "myclass"; // set CSS class
x.innerHTML = "Hello"; // set html inside div
y = document.getElementById("myinput"); // input area/textarea
y.value = "Hi"; // get or set text
Keep learning
I made this page as a list of important examples; read the advanced guides if any section is confusing. A later post will cover the helper functions I use in my applications. Good luck.
Posted February 23, 2007,
under Programming, Web
Tags:
Related Posts:Programming Gotchas How To Make a Bookmarklet For Your Web Application Using JSON to Exchange Data Explanations for everyone. How To Debug Web Applications With Firefox
Tags:
Related Posts:
RSS
Get the Math, BetterExplained ebook
Like the site? Take it with you. Develop your math sense using insights, not memorization.
7 Comments »
Trackbacks & Pingbacks
-
Pingback by How to make a bookmarklet for your web application | BetterExplained — April 16, 2008 @ 11:50 am
Comments
RSS feed for comments on this post. TrackBack URI
Leave a comment
Have a question? Know an explanation that caused your own a-ha moment? Write about it here.
This is good. I like your spirit!
johan — December 29, 2007 @ 5:37 am
So we can use objects like associative arrays in php. Nice.
collector — January 22, 2008 @ 9:38 am
Yep, that’s a good point. I use javascript objects as a hash table (associative array) quite often.
Kalid — January 22, 2008 @ 10:57 pm
Yeaah it’s very simple and comprehensive Overview.
Thanks
Giancasa — August 5, 2009 @ 7:51 am
var obj = { // create object using JSON
name: “Bob”, // aka Javascript Object Notation
details: {
age: 33,
“favorite color”: “green”
}
}
obj.name
obj.details["favorite color"]
i’ve a question… how can I print all obj property without know them
exist something like reflection???
I’m looking for a function like (php) print_r(obj)
Steal — August 5, 2009 @ 8:22 am
@Steal: You’d have to iterate through all the properties on the object and print them out:
for(prop in obj)
{
str += prop + “value :” + obj[prop]+”\n”;
}
See http://vijayk.wordpress.com/2006/12/14/for-in-loop-to-print-object-properties-with-javascriptactionscript/
Kalid — September 4, 2009 @ 3:05 pm