Web 2.0

HTML + CSS + Javascript

Javascript:

Notes

Client Side vs Server Side

- Clientside: works inside a web browser. Content can appear/disappear, move around the screen, automatically update.

- Serverside: runs on the server. Php, Ruby on Rails, node.js (javascript) ...etc. Use of databases (storing and managing data), complex processing of information (credit card).

- API (Application Programming Interface) - allows the client program to talk to well known servers/services (Google Map, Facebook, Twitter...etc).

Notes

Adding Javascript to a page

Use the <script> tag 


   <!DOCTYPE html>
   <html>

   <head>

   </head>

   <body>



   <script>
     window.alert('hello world');
   </script>

   </body>

   </html>



Note that javascript is added at the bottom of the page. This is becuase Javascript may reference elements that need to be interepreted by the browser and the browser interpretes and render HTML from top to bottom.
Notes

Introducing the DOM

A Document Object Model (DOM) is a conceptual way of visualizing a document and its contents. The broswer creates this internal model when it loads a document.

You can use JavaScript to access and edit the DOM representation (and hence the HTML document the user sees).





In the DOM, elements of your web page have a logical, hierarchical structure, like a tree of interconnected parent and child objects
Notes

Accessing objects using the object notation

The notation to represent objects within the tree uses the dot 

   parent.child
If you want to access the location object under window object, in DOM you use 

  window.location
You can extend the dot notation like this 

  window.document.body
Often times, we omit the window if we are referencing the current document. So you will see something like this 

  document.body
Each object in DOM may contain various informations and methods you can use. For example, the window object contains a method (think of it as commands) called alert(). It opens up an alert window within the current window. 

  window.alert();
Most of the time we omit the window because it is at the top the DOM hierarchy and we assume we are referencing the top object if we don't say otherwise 

  alert();
Notes

Hello World with alert() and document.write()

Sample file: 01_hello.html


<!DOCTYPE html>
<html>
<head>
<title> The Title of this HTML Page </title>
</head>

<body>


<script>
window.alert('hello world');
</script>
</body>
</html>
will open up an alert window with the message hello world.

Another method (command), document.write() writes into the "document" object. 

<!DOCTYPE html>
<html>
<head>
<title> The Title of this HTML Page </title>
</head>

<body>


<script>
document.write('Hello document');
</script>
</body>
</html>
If you run the above script, the text "Hello document" will be displayed in the body of the HTML page.
Notes

Tracking Down Errors - Javascript Console

The use of Javascript console is a must. Before asking anyone else why your javascript does not work, make sure you check the console.

On Chrome (Mac): 
View -> Developer -> JavaScript Console

It can be cryptic at first but it is helpful in

Notes