Programming Basics with JavaScript

Transcript

1. Learn to Program with Javascript
2. Whoami • Tom Wilson • Head Instructor of ChsCodeCamp • President of Jack Russell Software • Twitter: @twilson63 • Github: twilson63
3. Abstraction concept, idea, or term
4. What is programming? Programming is a creative process done by programmers to instruct a computer on how to do a task.
5. How do computers work? • Processing (CPU) • Memory (RAM, HD) • Input (Keyboard, Mouse, Camera, Mic, Net) • Output (Monitor, Printer, Internet)
6. Art of talking to Machines • Machines speak 0 and 1 • Humans speak complex languages • Software Languages bridge the gap
7. Terminology Crash Course • Basic Types • Variables • Control Flow • Complex Types
8. Basic Types • String Collection of characters surrounded by single or double quotes. Exercise 1
9. Basic Types • Numeric Types Numeric types are simply expressed by entering the number: 1 or 3.5 Exercise 2
10. Arithmetic Operators + Addition add the left and right - Substracts right hand from left * Multiplies values on either side / Divides left hand operand from the right % Divides left by right and returns remainder Exercise 2a
11. Basic Types • Boolean Type either true or false Exercise 3
12. Variables A variable is something that can be changed. Assigning values to symbols that make easier for humans to reference and maintain. var greeting = "Hello"; var ONE = 1; var TWO = 2;
13. Variables (CONT) var ONE = 1; var TWO = 2; say(ONE + TWO); var greeting = "HELLO"; say(greeting); greeting = "HOLA"; say(greeting);
14. Variables (CONT) var isSunny = true; say(isSunny); var isSunny = false; say(isSunny); Exercise 4
15. Assignment Assignment statements assigns a value to a declared variable. A variable is a set of symbols and characters combined to form a unique representation in the program to point or reference data. You create these variables by using a reserved word called ‘var’. This world instructs the program to create a reference from the word on the left side of the statement of the data or reference on the right. Using the assignment operator ‘=’ as the character that bridges the statement.
16. Assignment Operators = Assign right side to left variable y += x y = y + x y -= x y = y - x y *= x y = y * x y /= x y = y / x y %= x y = y % x
17. Control Flow • Conditional Statements • Looping Statements • Switch Statements
18. Conditional Statements // if statement if (true) { // do something } // if else statement if (true) { // do something } else { // do something }
19. Logical Operators // less than if (1 < 2) { // do something } // greater than if (2 > 1) { // do something }
20. Basic Comparison Operators === Equals !== Not Equals < Less Than > Greater Than <= Less Than or Equals >= Greater Than or Equals Exercise 5
21. Functions Block or set of statements grouped together and can be invoked by other statements. var greeting = function() { return "Hello"; } // call functions by adding parens at the end say(greeting());
22. Functions (CONT) Exercise 6 Lets create a guessing game
23. Functions (CONT) Input var x = function(param1) { say(param1); }
24. Functions (CONT) Output var x = function() { return 'Hello World'; } say(x());
25. Complex Types Arrays An array is a set of items: var myarray = [1,2,3,4,5];
26. Complex Types Objects JavaScript Objects represent self contained entities consisting of variables (called properties in object terminology) and functions (called methods) that can be used to perform tasks and store complex data. var emptyObject = {};
27. Complex Types Objects (CONT) function Dog(breed) { this.breed = breed; this.bark = function() { say('woof') }; } var jack = new Dog('Jack Russell'); jack.bark();
28. ATM Banking Example We will create an ATM Application: 1. Deposit Funds 2. Withdraw Funds 3. Check Balance
29. Functional Programming building custom functions to make the program more readable. -- see underscore.js
30. Building Blocks By having the power to create functions, you can create building blocks that create a level of abstraction that makes coding easier and managable.
31. JavaScript Koans A guided tour of the language.
32. Glimpse of the DOM Document Object Model
33. Glimpse of NodeJS Server-Side Javascript
34. Glimpse of CouchDb JavaScript in the Database
35. CodeCamp - Classes • HTML and CSS Basics • JQuery • NodeJS • Rails • PHP
36. Resources • Codecademy • Khan Academy • Javascript Koans • http://eloquentjavascript.net/