1. Introduction to Javascript
Kevin Ball
Co-Founder & CTO
kball@fashioningchange.com
@kbal11

2. Introduction to Javascript

3. Introduction to Javascript

4. Introduction to Javascript
• What is Javascript?

5. Introduction to Javascript
• What is Javascript?
• Programming Basics

6. Introduction to Javascript
• What is Javascript?
• Programming Basics
• HTML & the Dom

7. Introduction to Javascript
• What is Javascript?
• Programming Basics
• HTML & the Dom
• What makes Javascript Different

8. What is Javascript?

9. What is Javascript?

10. What is Javascript?
• The Language of Client-Side Web Development

11. What is Javascript?
• The Language of Client-Side Web Development
• Available in every browser

12. What is Javascript?
• The Language of Client-Side Web Development
• Available in every browser
• A Powerful Dynamic Programming Language

13. Web Architecture

14. Web Architecture
Client/Server Model

15. Web Architecture
Client/Server Model

16. Web Architecture
Client/Server Model

17. Web Architecture
Client/Server Model

18. Web Architecture
Client/Server Model

19. Web Architecture
Client/Server Model

20. Web Architecture
Client/Server Model

21. Web Architecture
Client/Server Model

22. Web Architecture
Client/Server Model

23. Available in Every Browser

24. Available in Every Browser
• No additional tools required

25. Available in Every Browser
• No additional tools required
• Start playing around right away!

26. Browser Demo
hello.html

27. Programming Basics
Just Jump In

28. Programming Basics
Just Jump In

29. Programming Basics
Numbers

30. Programming Basics
Numbers

31. Programming Basics
Numbers
›2+2

32. Programming Basics
Numbers
›2+2
==> 4

33. Programming Basics
Numbers
›2+2
==> 4
› 5.0 * 0.5

34. Programming Basics
Numbers
›2+2
==> 4
› 5.0 * 0.5
==> 2.5

35. Programming Basics
Strings

36. Programming Basics
Strings

37. Programming Basics
Strings
› “Hello” + “World”;

38. Programming Basics
Strings
› “Hello” + “World”;
==> “HelloWorld”

39. Programming Basics
Strings
› “Hello” + “World”;
==> “HelloWorld”
› 2+ “Hello”;

40. Programming Basics
Strings
› “Hello” + “World”;
==> “HelloWorld”
› 2+ “Hello”;
==> “2Hello”

41. Programming Basics
Strings
› “Hello” + “World”;
==> “HelloWorld”
› 2+ “Hello”;
==> “2Hello”
› “Hello”.length;

42. Programming Basics
Strings
› “Hello” + “World”;
==> “HelloWorld”
› 2+ “Hello”;
==> “2Hello”
› “Hello”.length;
==> 5

43. Programming Basics
Variables

44. Programming Basics
Variables

45. Programming Basics
Variables
› var five = 5;

46. Programming Basics
Variables
› var five = 5;
==> 5

47. Programming Basics
Variables
› var five = 5;
==> 5
› five + 10;

48. Programming Basics
Variables
› var five = 5;
==> 5
› five + 10;
==> 15

49. Programming Basics
Variables
› var five = 5;
==> 5
› five + 10;
==> 15
› five;

50. Programming Basics
Variables
› var five = 5;
==> 5
› five + 10;
==> 15
› five;
==> 5

51. Programming Basics
Variables

52. Programming Basics
Variables
› var students = 5;

53. Programming Basics
Variables
› var students = 5;
==> 5

54. Programming Basics
Variables
› var students = 5;
==> 5
› students = students + 10;

55. Programming Basics
Variables
› var students = 5;
==> 5
› students = students + 10;
==> 15

56. Programming Basics
Variables
› var students = 5;
==> 5
› students = students + 10;
==> 15
› students;

57. Programming Basics
Variables
› var students = 5;
==> 5
› students = students + 10;
==> 15
› students;
==> 15

58. Programming Basics
If/Then

59. Programming Basics
If/Then

60. Programming Basics
If/Then
var students = 5;

61. Programming Basics
If/Then
var students = 5;
if (students > 10) {
alert(“Big Class!”);
} else {
alert (“Small Class!”);
}

62. Browser Demo
if_then.html

63. Programming Basics
Loops

64. Programming Basics
Loops

65. Programming Basics
Loops
var students = 5;

66. Programming Basics
Loops
var students = 5;
while (students <10) {
students = students + 1;
document.write(“More!<br/>”);
}
document.write(students + “ students”)

67. Browser Demo
while.html

68. Programming Basics
Functions

69. Programming Basics
Functions

70. Programming Basics
Functions
var plusTen = function(num) {
return num + 10;
}

71. Programming Basics
Functions
var plusTen = function(num) {
return num + 10;
}
› var students = 5;

72. Programming Basics
Functions
var plusTen = function(num) {
return num + 10;
}
› var students = 5;
› students = plusTen(students);

73. Programming Basics
Functions
var plusTen = function(num) {
return num + 10;
}
› var students = 5;
› students = plusTen(students);
==> 15

74. HTML and the DOM

75. HTML and the DOM

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. HTML and the DOM

78. Browser Demo
dom.html

79. HTML and the DOM

80. HTML and the DOM

81. HTML and the DOM

82. DOM Manipulation

83. DOM Manipulation
<html>
<body>
<h1>Hello</h1>
<div id=‘container’>
<p id=‘inner’>I’m in the middle!</p>
</div>
</body>
</html>

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. Browser Demo
dom_manipulation.html

86. DOM Manipulation
Stay Tuned for the Next Talk

87. Javascript: What’s Different?

88. Javascript: What’s Different?
• Prototypal Inheritance
• Closures
• Event-based Programming

89. Javascript: What’s Different?
Inheritance

90. Javascript: What’s Different?
Inheritance
Traditional Inheritance

91. Javascript: What’s Different?
Inheritance
Traditional Inheritance
Shape

92. Javascript: What’s Different?
Inheritance
Traditional Inheritance
Shape

93. Javascript: What’s Different?
Inheritance
Traditional Inheritance
Shape
Square

94. Javascript: What’s Different?
Inheritance
Traditional Inheritance
Shape
Square

95. Javascript: What’s Different?
Inheritance
Traditional Inheritance
Shape
Square
Triangle

96. Javascript: What’s Different?
Inheritance
Traditional Inheritance Prototypal Inheritance
Shape
Square
Triangle

97. Javascript: What’s Different?
Inheritance
Traditional Inheritance Prototypal Inheritance
Shape This
Square
Square
Triangle

98. Javascript: What’s Different?
Inheritance
Traditional Inheritance Prototypal Inheritance
Shape This
Square
Square
Triangle

99. Javascript: What’s Different?
Inheritance
Traditional Inheritance Prototypal Inheritance
Shape This
Square
Copy
Square
Triangle Square

100. Javascript: What’s Different?
Inheritance
Traditional Inheritance Prototypal Inheritance
Shape This
Square
Square
Triangle Triangle

101. Javascript: What’s Different?
Closures

102. Javascript: What’s Different?
Closures

103. Javascript: What’s Different?
Closures
var students = 5;

104. Javascript: What’s Different?
Closures
var students = 5;
var howManyStudents = function() {
return students;
}
howManyStudents();

105. Javascript: What’s Different?
Closures
var students = 5;
var howManyStudents = function() {
return students;
}
howManyStudents();
==> 5

106. Javascript: What’s Different?
Event Based Programming

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. Browser Demo
click.html

109. Resources
• CodeAcademy (codeacademy.com)
• Douglass Crockford Videos (http://
www.yuiblog.com/crockford/)
• Book: JavaScript, The Good Parts (Douglass
Crockford)

110. Questions?

111. Thank You
Kevin Ball
Co-Founder & CTO
kball@fashioningchange.com
@kbal11