Introduction to JavaScript  Learn how to program your computer!
0  You can and mustunderstand computers        NOW
“ Everything is deeply intertwingled. In an  important sense there are no “subjects” at all; there is only all knowledge, ...
“ When human beings acquired language, welearned not just how to listen but how to speak.When we gained literacy, we learn...
“ The single most significant change in the politics  of cyberspace is the coming of age of this simple idea: The code is ...
1Learning a new language
Code is text
Programming is    typing
Programming is very   careful typing
Programming is  fast typing
Programming isfiguring out why it       broke
Programming in general• A series of text files that get compiled  and executed• Code is “digested,” going from human-  rea...
JavaScript in particular• Increasingly the web page scripting  language• Most likely the widest deployed  runtime• JavaScr...
Lines of code• A line of code is a basic unit of  programming• Tells the computer to do something• Sometimes a “line” of c...
A simple line of codealert("Hello, world!");
Let’s try this using      Firebug
2Writing code
Compilers are unforgiving• The computer cuts you no slack• All code is subject to bugs• The error console is your friend• ...
A simple line of code    alert("Hello, world!");Function name
A simple line of code     alert("Hello, world!");Function name Parentheses call the function
A simple line of code     alert("Hello, world!");Function name Parentheses call the function                        Functi...
A simple line of code     alert("Hello, world!");Function name Parentheses call the function                        Functi...
3Variables
The variable metaphor     “Variables are like a box      you can put data into.”
The variable metaphor
The variable metaphor
Variables• Variables store data for future use• var x = y; is how you assign a new  variable in JavaScript• We can now ref...
Variables (boolean type)• Variables store data for future use• var x = true; is how you assign a new  variable in JavaScri...
Variables (boolean type)• Variables store data for future use• var x = false; is how you assign a new  variable in JavaScr...
Variables (numeric type)• Variables store data for future use• var x = 47; is how you assign a new  variable in JavaScript...
Variables (string type)• Variables store data for future use• var x = "pony"; is how you assign a  new variable in JavaScr...
Variable logic// What   is the value of z?var x =   3;var y =   x + 1;var z =   y;
4Functions
Multiple lines of codevar msg = "Hello, world!";var func = alert;func(msg);                    Designate the ends of the l...
Multiple lines of codevar msg = "Hello, world!";var func = alert;func(msg);The first line stores a string
Multiple lines of codevar msg = "Hello, world!";var func = alert;func(msg);The second line stores a function
Multiple lines of codevar msg = "Hello, world!";var func = alert;func(msg);The third line executes thestored function with...
Commenting code// First we store the messagevar msg = "Hello, world!";// Next, we choose a function to callvar func = aler...
Commenting code/*This code demonstrates the standardHello World program, over three linesinstead of just one.*/var msg = "...
Creating a new function// Outputs a simple messagefunction output_message() {  var msg = "Hello, world!";  var func = aler...
Calling our function// Outputs a simple messagefunction output_message() {  var msg = "Hello, world!";  var func = alert; ...
Arguments// Outputs a simple messagefunction output_message(msg) {  var func = alert;  func(msg);}output_message("Hello, w...
5Libraries
JavaScript on the web<script>// JavaScript code is typically embedded in HTML// <script> tags</script>
HTML + JavaScript<html>  <head>    <title>HTML + JavaScript</title>  </head>  <body>    <p>Stuff *on* the page goes up her...
Hide content<html>  <head>    <title>Hide content</title>  </head>  <body>    <p id="hide">Click to hide me!</p>    <scrip...
HTML + CSS + JavaScript<html>  <head>    <title>HTML + CSS + JavaScript</title>    <style>    #content {       background:...
HTML + CSS + JavaScript<html>  <head>    <title>HTML + CSS + JavaScript</title>    <link rel="stylesheet" href="styles.css...
6Slide show
Slide show HTML<html>  <head>    <title>Slide show</title>    <link rel="stylesheet" href="styles.css" />  </head>  <body>...
Slide show CSS#slides {  width: 991px;  height: 671px;  margin: 0 auto;  overflow: hidden;  position: relative;}#inner {  ...
Slide show JavaScriptvar width = 991;var n = 0;var count = $$(#slides img).length;$(slides).addEvent(click, function() {  ...
7What next?
Come up with a   project
Try to build it   yourself
Take your time, itwon’t come quickly
Resources•   Eloquent JavaScript   •   _why’s poignant                              guide to Ruby•   MooTorial            ...
http://www.vimeo.com/5047563
http://www.vimeo.com/5047563
Intro to JavaScript
Intro to JavaScript
Intro to JavaScript
Intro to JavaScript
Upcoming SlideShare
Loading in...5
×

Intro to JavaScript

2,219

Published on

This afternoon I gave a very short introduction to computer programming at Trade School (tradeschool.ourgoods.org). I used JavaScript to illustrate the process of learning how to program, mainly because there's nothing to install and it has many practical uses.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,219
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to JavaScript

  1. 1. Introduction to JavaScript Learn how to program your computer!
  2. 2. 0 You can and mustunderstand computers NOW
  3. 3. “ Everything is deeply intertwingled. In an important sense there are no “subjects” at all; there is only all knowledge, since the cross- connections among the myriad topics of this world simply cannot be divided up neatly.” —Ted Nelson, Computer Lib/Dream Machines
  4. 4. “ When human beings acquired language, welearned not just how to listen but how to speak.When we gained literacy, we learned not just howto read but how to write. And as we move into anincreasingly digital reality, we must learn not justhow to use programs but how to make them.”—Douglas Rushkoff, Program or Be Programmed
  5. 5. “ The single most significant change in the politics of cyberspace is the coming of age of this simple idea: The code is law. The architectures of cyberspace are as important as the law in defining and defeating the liberties of the Net.” —Lawrence Lessig, The Code Is the Law
  6. 6. 1Learning a new language
  7. 7. Code is text
  8. 8. Programming is typing
  9. 9. Programming is very careful typing
  10. 10. Programming is fast typing
  11. 11. Programming isfiguring out why it broke
  12. 12. Programming in general• A series of text files that get compiled and executed• Code is “digested,” going from human- readable to a hardware-ready form• Ultimately programs run as assembly, low-level instructions for your CPU
  13. 13. JavaScript in particular• Increasingly the web page scripting language• Most likely the widest deployed runtime• JavaScript has nothing to do with Java, except some syntax similarities
  14. 14. Lines of code• A line of code is a basic unit of programming• Tells the computer to do something• Sometimes a “line” of code can span more than one line
  15. 15. A simple line of codealert("Hello, world!");
  16. 16. Let’s try this using Firebug
  17. 17. 2Writing code
  18. 18. Compilers are unforgiving• The computer cuts you no slack• All code is subject to bugs• The error console is your friend• Debugging is about identifying, characterizing, and resolving problems
  19. 19. A simple line of code alert("Hello, world!");Function name
  20. 20. A simple line of code alert("Hello, world!");Function name Parentheses call the function
  21. 21. A simple line of code alert("Hello, world!");Function name Parentheses call the function Function argument (a string)
  22. 22. A simple line of code alert("Hello, world!");Function name Parentheses call the function Function argument (a string) Designates the end of the line
  23. 23. 3Variables
  24. 24. The variable metaphor “Variables are like a box you can put data into.”
  25. 25. The variable metaphor
  26. 26. The variable metaphor
  27. 27. Variables• Variables store data for future use• var x = y; is how you assign a new variable in JavaScript• We can now refer to x in future lines of code, and know it means y
  28. 28. Variables (boolean type)• Variables store data for future use• var x = true; is how you assign a new variable in JavaScript• We can now refer to x in future lines of code, and know it means true
  29. 29. Variables (boolean type)• Variables store data for future use• var x = false; is how you assign a new variable in JavaScript• We can now refer to x in future lines of code, and know it means false
  30. 30. Variables (numeric type)• Variables store data for future use• var x = 47; is how you assign a new variable in JavaScript• We can now refer to x in future lines of code, and know it means 47
  31. 31. Variables (string type)• Variables store data for future use• var x = "pony"; is how you assign a new variable in JavaScript• We can now refer to x in future lines of code, and know it means pony.
  32. 32. Variable logic// What is the value of z?var x = 3;var y = x + 1;var z = y;
  33. 33. 4Functions
  34. 34. Multiple lines of codevar msg = "Hello, world!";var func = alert;func(msg); Designate the ends of the lines
  35. 35. Multiple lines of codevar msg = "Hello, world!";var func = alert;func(msg);The first line stores a string
  36. 36. Multiple lines of codevar msg = "Hello, world!";var func = alert;func(msg);The second line stores a function
  37. 37. Multiple lines of codevar msg = "Hello, world!";var func = alert;func(msg);The third line executes thestored function with the string
  38. 38. Commenting code// First we store the messagevar msg = "Hello, world!";// Next, we choose a function to callvar func = alert;// Finally, we combine the twofunc(msg);
  39. 39. Commenting code/*This code demonstrates the standardHello World program, over three linesinstead of just one.*/var msg = "Hello, world!";var func = alert;func(msg);
  40. 40. Creating a new function// Outputs a simple messagefunction output_message() { var msg = "Hello, world!"; var func = alert; func(msg);}
  41. 41. Calling our function// Outputs a simple messagefunction output_message() { var msg = "Hello, world!"; var func = alert; func(msg);}output_message();
  42. 42. Arguments// Outputs a simple messagefunction output_message(msg) { var func = alert; func(msg);}output_message("Hello, world!");output_message("¡Hola, mundo!");
  43. 43. 5Libraries
  44. 44. JavaScript on the web<script>// JavaScript code is typically embedded in HTML// <script> tags</script>
  45. 45. HTML + JavaScript<html> <head> <title>HTML + JavaScript</title> </head> <body> <p>Stuff *on* the page goes up here.</p> <script> // JavaScript code that modifies the page should // go below everything else in the <body>. </script> </body></html>
  46. 46. Hide content<html> <head> <title>Hide content</title> </head> <body> <p id="hide">Click to hide me!</p> <script src="mootools.js"></script> <script> $(hide).addEvent(click, function() { $(hide).fade(out); }); </script> </body></html>
  47. 47. HTML + CSS + JavaScript<html> <head> <title>HTML + CSS + JavaScript</title> <style> #content { background: #000; } </style> </head> <body> <p id="content">Hello, world!</p> <script> var content = document.getElementById(content); content.style.color = #fff; </script> </body></html>
  48. 48. HTML + CSS + JavaScript<html> <head> <title>HTML + CSS + JavaScript</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p> Separating code into .js and .css files is a good way to keep things tidy. </p> <script src="scripts.js"></script> </body></html>
  49. 49. 6Slide show
  50. 50. Slide show HTML<html> <head> <title>Slide show</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div id="slides"> <div id="inner"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> </div> </div> <script src="mootools.js"></script> <script src="script.js"></script> </body></html>
  51. 51. Slide show CSS#slides { width: 991px; height: 671px; margin: 0 auto; overflow: hidden; position: relative;}#inner { position: absolute; left: 0; top: 0;}#slides img { float: left;}
  52. 52. Slide show JavaScriptvar width = 991;var n = 0;var count = $$(#slides img).length;$(slides).addEvent(click, function() { n = (n + 1) % count; // Increment $(inner).tween(left, n * -width);});
  53. 53. 7What next?
  54. 54. Come up with a project
  55. 55. Try to build it yourself
  56. 56. Take your time, itwon’t come quickly
  57. 57. Resources• Eloquent JavaScript • _why’s poignant guide to Ruby• MooTorial • Dive into Python• w3schools.com • Visual Quickstart• Mozilla devmo Guide• WebMonkey • Lynda tutorials• The Rhino Book
  58. 58. http://www.vimeo.com/5047563
  59. 59. http://www.vimeo.com/5047563
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×