Introduction to Javascript            Kevin Ball        Co-Founder & CTO         kball@fashioningchange.com               ...
Introduction to Javascript
Introduction to Javascript
Introduction to Javascript• What is Javascript?
Introduction to Javascript• What is Javascript?• Programming Basics
Introduction to Javascript• What is Javascript?• Programming Basics• HTML & the Dom
Introduction to Javascript• What is Javascript?• Programming Basics• HTML & the Dom• What makes Javascript Different
What is Javascript?
What is Javascript?
What is Javascript?• The Language of Client-Side Web Development
What is Javascript?• The Language of Client-Side Web Development• Available in every browser
What is Javascript?• The Language of Client-Side Web Development• Available in every browser• A Powerful Dynamic Programmi...
Web Architecture
Web Architecture   Client/Server Model
Web Architecture   Client/Server Model
Web Architecture   Client/Server Model
Web Architecture   Client/Server Model
Web Architecture   Client/Server Model
Web Architecture   Client/Server Model
Web Architecture   Client/Server Model
Web Architecture   Client/Server Model
Web Architecture   Client/Server Model
Available in Every Browser
Available in Every Browser• No additional tools required
Available in Every Browser• No additional tools required• Start playing around right away!
Browser Demo    hello.html
Programming Basics      Just Jump In
Programming Basics      Just Jump In
Programming Basics      Numbers
Programming Basics      Numbers
Programming Basics       Numbers›2+2
Programming Basics        Numbers›2+2==> 4
Programming Basics              Numbers›2+2==> 4› 5.0 * 0.5
Programming Basics              Numbers›2+2==> 4› 5.0 * 0.5==> 2.5
Programming Basics       Strings
Programming Basics       Strings
Programming Basics                Strings› “Hello” + “World”;
Programming Basics                Strings› “Hello” + “World”;==> “HelloWorld”
Programming Basics                Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;
Programming Basics                Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”
Programming Basics                    Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”› “Hello”.length;
Programming Basics                    Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”› “Hello”.length...
Programming Basics      Variables
Programming Basics      Variables
Programming Basics                 Variables› var five = 5;
Programming Basics                 Variables› var five = 5; ==> 5
Programming Basics                 Variables› var five = 5; ==> 5› five + 10;
Programming Basics                 Variables› var five = 5; ==> 5› five + 10;==> 15
Programming Basics                 Variables› var five = 5; ==> 5› five + 10;==> 15› five;
Programming Basics                 Variables› var five = 5; ==> 5› five + 10;==> 15› five;==> 5
Programming Basics      Variables
Programming Basics                Variables› var students = 5;
Programming Basics                Variables› var students = 5;==> 5
Programming Basics               Variables› var students = 5;==> 5› students = students + 10;
Programming Basics               Variables› var students = 5;==> 5› students = students + 10;==> 15
Programming Basics               Variables› var students = 5;==> 5› students = students + 10;==> 15› students;
Programming Basics               Variables› var students = 5;==> 5› students = students + 10;==> 15› students;==> 15
Programming Basics       If/Then
Programming Basics       If/Then
Programming Basics               If/Thenvar students = 5;
Programming Basics                 If/Thenvar students = 5;if (students > 10) {  alert(“Big Class!”);} else {  alert (“Sma...
Browser Demo   if_then.html
Programming Basics       Loops
Programming Basics       Loops
Programming Basics                Loopsvar students = 5;
Programming Basics                Loopsvar students = 5;while (students <10) {  students = students + 1;  document.write(“...
Browser Demo   while.html
Programming Basics      Functions
Programming Basics      Functions
Programming Basics              Functionsvar plusTen = function(num) {  return num + 10;}
Programming Basics               Functionsvar plusTen = function(num) {  return num + 10;}› var students = 5;
Programming Basics              Functionsvar plusTen = function(num) {  return num + 10;}› var students = 5;› students = p...
Programming Basics              Functionsvar plusTen = function(num) {  return num + 10;}› var students = 5;› students = p...
HTML and the DOM
HTML and the DOM
HTML and the DOM<html> <body>  <h1>Hello</h1>  <div id=‘container’>    <p id=‘inner’>I’m in the middle!</p>  </div> </body...
HTML and the DOM
Browser Demo    dom.html
HTML and the DOM
HTML and the DOM
HTML and the DOM
DOM Manipulation
DOM Manipulation<html> <body>  <h1>Hello</h1>  <div id=‘container’>    <p id=‘inner’>I’m in the middle!</p>  </div> </body...
DOM Manipulation<html> <body>  <h1>Hello</h1>  <div id=‘container’>    <p id=‘inner’>I’m in the middle!</p>  </div> </body...
Browser Demo dom_manipulation.html
DOM Manipulation  Stay Tuned for the Next Talk
Javascript: What’s Different?
Javascript: What’s Different?  • Prototypal Inheritance  • Closures  • Event-based Programming
Javascript: What’s Different?           Inheritance
Javascript: What’s Different?                    InheritanceTraditional Inheritance
Javascript: What’s Different?                    InheritanceTraditional Inheritance         Shape
Javascript: What’s Different?                    InheritanceTraditional Inheritance         Shape
Javascript: What’s Different?                    InheritanceTraditional Inheritance            Shape   Square
Javascript: What’s Different?                    InheritanceTraditional Inheritance            Shape   Square
Javascript: What’s Different?                         InheritanceTraditional Inheritance            Shape   Square        ...
Javascript: What’s Different?                         InheritanceTraditional Inheritance          Prototypal Inheritance  ...
Javascript: What’s Different?                         InheritanceTraditional Inheritance          Prototypal Inheritance  ...
Javascript: What’s Different?                         InheritanceTraditional Inheritance          Prototypal Inheritance  ...
Javascript: What’s Different?                         InheritanceTraditional Inheritance          Prototypal Inheritance  ...
Javascript: What’s Different?                         InheritanceTraditional Inheritance          Prototypal Inheritance  ...
Javascript: What’s Different?           Closures
Javascript: What’s Different?           Closures
Javascript: What’s Different?                  Closures    var students = 5;
Javascript: What’s Different?                  Closures    var students = 5;   var howManyStudents = function() {     retu...
Javascript: What’s Different?                  Closures    var students = 5;   var howManyStudents = function() {     retu...
Javascript: What’s Different?       Event Based Programming
Javascript: What’s Different?                 Event Based Programming<html> <body>  <h1 id=‘clickable’>Click Me</h1> </bod...
Browser Demo    click.html
Resources• CodeAcademy (codeacademy.com)• Douglass Crockford Videos (http://  www.yuiblog.com/crockford/)• Book: JavaScrip...
Questions?
Thank You    Kevin BallCo-Founder & CTO kball@fashioningchange.com           @kbal11
Upcoming SlideShare
Loading in …5
×

Intro to Javascript

519
-1

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
519
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Intro to Javascript

    1. 1. Introduction to Javascript Kevin Ball Co-Founder & CTO kball@fashioningchange.com @kbal11
    2. 2. Introduction to Javascript
    3. 3. Introduction to Javascript
    4. 4. Introduction to Javascript• What is Javascript?
    5. 5. Introduction to Javascript• What is Javascript?• Programming Basics
    6. 6. Introduction to Javascript• What is Javascript?• Programming Basics• HTML & the Dom
    7. 7. Introduction to Javascript• What is Javascript?• Programming Basics• HTML & the Dom• What makes Javascript Different
    8. 8. What is Javascript?
    9. 9. What is Javascript?
    10. 10. What is Javascript?• The Language of Client-Side Web Development
    11. 11. What is Javascript?• The Language of Client-Side Web Development• Available in every browser
    12. 12. What is Javascript?• The Language of Client-Side Web Development• Available in every browser• A Powerful Dynamic Programming Language
    13. 13. Web Architecture
    14. 14. Web Architecture Client/Server Model
    15. 15. Web Architecture Client/Server Model
    16. 16. Web Architecture Client/Server Model
    17. 17. Web Architecture Client/Server Model
    18. 18. Web Architecture Client/Server Model
    19. 19. Web Architecture Client/Server Model
    20. 20. Web Architecture Client/Server Model
    21. 21. Web Architecture Client/Server Model
    22. 22. Web Architecture Client/Server Model
    23. 23. Available in Every Browser
    24. 24. Available in Every Browser• No additional tools required
    25. 25. Available in Every Browser• No additional tools required• Start playing around right away!
    26. 26. Browser Demo hello.html
    27. 27. Programming Basics Just Jump In
    28. 28. Programming Basics Just Jump In
    29. 29. Programming Basics Numbers
    30. 30. Programming Basics Numbers
    31. 31. Programming Basics Numbers›2+2
    32. 32. Programming Basics Numbers›2+2==> 4
    33. 33. Programming Basics Numbers›2+2==> 4› 5.0 * 0.5
    34. 34. Programming Basics Numbers›2+2==> 4› 5.0 * 0.5==> 2.5
    35. 35. Programming Basics Strings
    36. 36. Programming Basics Strings
    37. 37. Programming Basics Strings› “Hello” + “World”;
    38. 38. Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”
    39. 39. Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;
    40. 40. Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”
    41. 41. Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”› “Hello”.length;
    42. 42. Programming Basics Strings› “Hello” + “World”;==> “HelloWorld”› 2+ “Hello”;==> “2Hello”› “Hello”.length;==> 5
    43. 43. Programming Basics Variables
    44. 44. Programming Basics Variables
    45. 45. Programming Basics Variables› var five = 5;
    46. 46. Programming Basics Variables› var five = 5; ==> 5
    47. 47. Programming Basics Variables› var five = 5; ==> 5› five + 10;
    48. 48. Programming Basics Variables› var five = 5; ==> 5› five + 10;==> 15
    49. 49. Programming Basics Variables› var five = 5; ==> 5› five + 10;==> 15› five;
    50. 50. Programming Basics Variables› var five = 5; ==> 5› five + 10;==> 15› five;==> 5
    51. 51. Programming Basics Variables
    52. 52. Programming Basics Variables› var students = 5;
    53. 53. Programming Basics Variables› var students = 5;==> 5
    54. 54. Programming Basics Variables› var students = 5;==> 5› students = students + 10;
    55. 55. Programming Basics Variables› var students = 5;==> 5› students = students + 10;==> 15
    56. 56. Programming Basics Variables› var students = 5;==> 5› students = students + 10;==> 15› students;
    57. 57. Programming Basics Variables› var students = 5;==> 5› students = students + 10;==> 15› students;==> 15
    58. 58. Programming Basics If/Then
    59. 59. Programming Basics If/Then
    60. 60. Programming Basics If/Thenvar students = 5;
    61. 61. Programming Basics If/Thenvar students = 5;if (students > 10) { alert(“Big Class!”);} else { alert (“Small Class!”);}
    62. 62. Browser Demo if_then.html
    63. 63. Programming Basics Loops
    64. 64. Programming Basics Loops
    65. 65. Programming Basics Loopsvar students = 5;
    66. 66. Programming Basics Loopsvar students = 5;while (students <10) { students = students + 1; document.write(“More!<br/>”);}document.write(students + “ students”)
    67. 67. Browser Demo while.html
    68. 68. Programming Basics Functions
    69. 69. Programming Basics Functions
    70. 70. Programming Basics Functionsvar plusTen = function(num) { return num + 10;}
    71. 71. Programming Basics Functionsvar plusTen = function(num) { return num + 10;}› var students = 5;
    72. 72. Programming Basics Functionsvar plusTen = function(num) { return num + 10;}› var students = 5;› students = plusTen(students);
    73. 73. Programming Basics Functionsvar plusTen = function(num) { return num + 10;}› var students = 5;› students = plusTen(students);==> 15
    74. 74. HTML and the DOM
    75. 75. HTML and the DOM
    76. 76. HTML and the DOM<html> <body> <h1>Hello</h1> <div id=‘container’> <p id=‘inner’>I’m in the middle!</p> </div> </body></html>
    77. 77. HTML and the DOM
    78. 78. Browser Demo dom.html
    79. 79. HTML and the DOM
    80. 80. HTML and the DOM
    81. 81. HTML and the DOM
    82. 82. DOM Manipulation
    83. 83. DOM Manipulation<html> <body> <h1>Hello</h1> <div id=‘container’> <p id=‘inner’>I’m in the middle!</p> </div> </body></html>
    84. 84. DOM Manipulation<html> <body> <h1>Hello</h1> <div id=‘container’> <p id=‘inner’>I’m in the middle!</p> </div> </body> <script type=”text/javascript”> document.getElementById(“inner”).innerHTML = “Changed!”; </script></html>
    85. 85. Browser Demo dom_manipulation.html
    86. 86. DOM Manipulation Stay Tuned for the Next Talk
    87. 87. Javascript: What’s Different?
    88. 88. Javascript: What’s Different? • Prototypal Inheritance • Closures • Event-based Programming
    89. 89. Javascript: What’s Different? Inheritance
    90. 90. Javascript: What’s Different? InheritanceTraditional Inheritance
    91. 91. Javascript: What’s Different? InheritanceTraditional Inheritance Shape
    92. 92. Javascript: What’s Different? InheritanceTraditional Inheritance Shape
    93. 93. Javascript: What’s Different? InheritanceTraditional Inheritance Shape Square
    94. 94. Javascript: What’s Different? InheritanceTraditional Inheritance Shape Square
    95. 95. Javascript: What’s Different? InheritanceTraditional Inheritance Shape Square Triangle
    96. 96. Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape Square Triangle
    97. 97. Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape This Square Square Triangle
    98. 98. Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape This Square Square Triangle
    99. 99. Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape This Square Copy Square Triangle Square
    100. 100. Javascript: What’s Different? InheritanceTraditional Inheritance Prototypal Inheritance Shape This Square Square Triangle Triangle
    101. 101. Javascript: What’s Different? Closures
    102. 102. Javascript: What’s Different? Closures
    103. 103. Javascript: What’s Different? Closures var students = 5;
    104. 104. Javascript: What’s Different? Closures var students = 5; var howManyStudents = function() { return students; } howManyStudents();
    105. 105. Javascript: What’s Different? Closures var students = 5; var howManyStudents = function() { return students; } howManyStudents(); ==> 5
    106. 106. Javascript: What’s Different? Event Based Programming
    107. 107. Javascript: What’s Different? Event Based Programming<html> <body> <h1 id=‘clickable’>Click Me</h1> </body> <script type=”text/javascript”> var clickFn = function() {alert(“Clicked!”);} document.getElementById(“clickable”).onclick = clickFn; </script></html>
    108. 108. Browser Demo click.html
    109. 109. Resources• CodeAcademy (codeacademy.com)• Douglass Crockford Videos (http:// www.yuiblog.com/crockford/)• Book: JavaScript, The Good Parts (Douglass Crockford)
    110. 110. Questions?
    111. 111. Thank You Kevin BallCo-Founder & CTO kball@fashioningchange.com @kbal11
    1. A particular slide catching your eye?

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

    ×