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). You can use content/services from many sources to create what is called a Mashup. (eg. combining photo service, with Yelp, with Google Maps).

Notes

Adding Javascript to a page 

   <!DOCTYPE html>
   <html>

   <head>

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

   </head>

   <body>
   </body>

   </html>
Notes

Hello World (p12)

Sample file: 01_hello.html

  alert('hello world'); // Opens alert box with message

  document.write('<p> Hellow World Again! </p>'); // write text into the html document
Notes

Adding Javascript to a page - 2 (External Javascript Files) (p15)

Including an external javascript file on your server 

   <!DOCTYPE html>
   <html>

   <head>
    <script src="myscript.js"> </script> // external file
   </head>

   <body>
   </body>

   </html>
Notes

Adding Javascript to a page - 3

Including an external javascript file from another server 

   <!DOCTYPE html>
   <html>

   <head>
     <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> 
     <script src="myscript.js"> </script> 
     <script>
     alert('hello world');
     </script>
   </head>

   <body>
   </body>

   </html>
Notes

Using an External Javascript File

Sample file: 01_external.html



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

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
</script>
</head>

<body>

Hello. This is the body.

</body>
</html>
Notes

Tracking Down Errors - Javascript Console (p18)

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: 
View -> Developer -> JavaScript Console

It can be cryptic at first but it is helpful in

Notes