Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to JavaScript

Bf962f059393fdaffe5c81fb17d765d8?s=47 M O T
February 04, 2013

Introduction to JavaScript

A presentation made to RiversideJS on introduction to JavaScript.

Bf962f059393fdaffe5c81fb17d765d8?s=128

M O T

February 04, 2013
Tweet

Transcript

  1. JavaScript Introduction Monday, February 4, 2013

  2. What is JavaScript • Scripting Language rather than a markup

    language • Client Side rather than Server Side • Makes webpages Dynamic rather than Static Monday, February 4, 2013
  3. ‘Installing’ JavaScript • Install Google Chrome - http://google.com/ chrome •

    View > Developer > JavaScript Console • Type 2 + 3, and press enter Monday, February 4, 2013
  4. Monday, February 4, 2013

  5. Monday, February 4, 2013

  6. Monday, February 4, 2013

  7. Math with Integers 2 + 3; 10+1402; 6* 4; 5

    -12; Monday, February 4, 2013
  8. Math with Variables var x = 5; var y =

    3; x * y; Monday, February 4, 2013
  9. Variables • Declare with ‘var’ var x = 10; var

    message = “Hello Scott”; Monday, February 4, 2013
  10. Strings • ‘Normal’ text. var message = “Hi, there”; var

    first_name = “Scott”; var last_name = “Motte”; • Use the + (plus) sign to add strings together. It is known as concatenating strings. var full_name = first_name + “ “ + last_name; Monday, February 4, 2013
  11. Functions • Functions play a specific role depending on their

    name. “alert” is the most popular function. alert(“Hello Scott”); Monday, February 4, 2013
  12. Your First JavaScript Program • Step 1: Create an HTML

    page • Step 2: Add your JavaScript • Step 3: Open up the HTML page Monday, February 4, 2013
  13. HTML Page • Call it index.html <!DOCTYPE html> <html lang='en'>

    <head> <meta charset='utf-8'> </head> <body> <h1>Hello World</h1> </body> </html> Monday, February 4, 2013
  14. JavaScript Program • Add the JavaScript tag and put the

    code in between the HTML head tags. ... <head> <meta charset='utf-8'> <script type="text/javascript"> var message = "Hello Universe!"; alert(message); </script> </head> ... Monday, February 4, 2013
  15. Open the HTML page in Chrome Monday, February 4, 2013

  16. Advanced: Add variables ... <head> <meta charset='utf-8'> <script type="text/javascript"> var

    greeting = "Bonjour"; var message = greeting + " Universe!"; alert(message); </script> </head> ... Monday, February 4, 2013
  17. Thanks • Next Time: Using jQuery - a JavaScript Library

    for web development. Monday, February 4, 2013