Intro to Javascript
0 likes568 views
This document provides an introduction to JavaScript. It discusses what JavaScript is, its use in client-side web development, and how it is available in every browser. It then covers programming basics like numbers, strings, variables, conditionals, loops, and functions. Finally, it discusses how JavaScript interacts with HTML through the DOM and some key differences in JavaScript like prototypal inheritance, closures, and event-based programming.
Intro to Javascript
- 1. Introduction to Javascript Kevin Ball Co-Founder & CTO [email protected] @kbal11
- 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
- 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>
- 86. DOM Manipulation Stay Tuned for the Next Talk
- 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 [email protected] @kbal11
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n