Geek Girl Tech Con Charlotte - Intro to JavaScript

Transcript

1. JAVASCRIPT FOR BEGINNERS http://bit.ly/geekgirl-js
2. ERIC ALLEN @ALLENERICR @THISISSOCIAL
3. I BUILD THE INTERNET… …AND YOU CAN, TOO.
5. JAVASCRIPT JavaScript is the programming language of the web. - W3Schools
6. FRONT END JavaScript, HTML, and CSS are often referred to as the “front end” or “client” side of websites. Browsers render these languages to display the interface of the website to the user. Server technologies like PHP, Ruby, Python, etc. make up the “back end” or “server” side of websites.
7. WHAT’S IT GOOD FOR? JavaScript is like the duct tape of the Internet. It can be used for pretty much anything. It gives you extremely powerful access to animation, retrieving data from servers after the page has loaded, connecting to 3rd party APIs like those from your favorite social networks.
8. JQUERY jQuery is a JavaScript library that makes a lot of things much easier to write. It is used by about 61% of the top 100,000 sites. One of it’s big advantages is being able to use CSS selectors to access elements on the page. It also simplifies working with user interactions. It isn’t all rainbows and smiley faces, but that’s a talk for another time.
9. NODE.JS Node.js is a server side technology that runs on JavaScript. Remember how we said JavaScript can pretty much be used for anything?
10. LET’S START WITH THE FUNDAMENTALS Programming languages have variables which can contain values. Examples: var testString = “Testing”; var testNumber = 42; var testBoolean = true;
11. The var keyword is what tells JavaScript we are declaring a variable.
12. Variables allow you to store data so that it can be referred to later.
13. LET’S SEE SOME EXAMPLES Head over to http://repl.it/ so we can play around with some JavaScript
14. This part of the presentation is being live coded with the class. Sorry.
15. MATH We’ll often need to perform mathematical operations in our code. Basic math can be performed with different operators. Operators are characters that JavaScript recognizes as performing a certain function.
16. Addition: + Subtraction: - Mutliplication: * Division: / Remainder Division (Modulus): % Exponents: ^ Increment: ++ Decrement: - - ARITHMETIC OPERATORS
17. LET’S DO SOME MATH Head back to http://repl.it/ so we can perform some quick math
18. This part of the presentation is being live coded with the class. Sorry.
19. ARRAYS Arrays are collections of data where each item in the collection is assigned a numerical index. These indexes always start at 0. You can think of them like a list of items. To access a single item in the array you use the variable name of the array and the index of the item you want to access.
20. var fruitArray = [ ‘banana’, //0 ‘apple’, //1 ‘orange’ //2 ]; console.log(fruitArray[1]); //this will output “apple”
21. var numberArray = [ 12345, //0 67890, //1 14323, //2 78519, //3 ]; console.log(numberArray[0]); //this will output 12345
22. IF STATEMENTS If statements are one of the basic building blocks of programming logic. You tell the interpreter to execute the code inside the statement if a certain condition is met.
23. Equality: === Inequality: !== Less Than: < Less Than or Equal To: <= Greater Than: > Greater Than or Equal To: >= AND: && OR: || COMPARISON OPERATORS
24. var fruit = “banana”; if(fruit === “apple”) { console.log(“Apples are awesome.”); } else { console.log(“Boo! This is a “ + fruit + “.”); }
25. LOOPS Loops allow you to iterate through an array or to execute some code a specific number of times. We will be talking about the for loop and the while loop.
26. FOR is great for iterating through arrays WHILE is great for running code until a condition is met
27. var fruitArray = [ ‘apple’, ‘banana’, ‘orange’ ]; for(var i = 0; i < fruitArray.total; i++) { console.log(‘Current fruit: ‘ + fruitArray[i]); }
28. var fruitArray = [ ‘apple’, ‘banana’, ‘orange’ ]; var notOrange = true; var count = 0; while(notOrange) { if(fruitArray[count] === ‘orange’) { notOrange = false; } console.log(fruitArray[count] + “is not an orange.”); count++; }
29. OBJECTS Objects are similar to arrays, but instead of numeric indexes, the items in an object have names, these named values are called parameters Object parameters are accessed by using the name of the object a period and then the name of the parameter you would like to access. Objects can also store functions.
30. var fruitObject = { type: “banana”, //fruitObject.type color: “yellow”, //fruitObject.color price: 0.99 //fruitObject.price }; console.log(fruitObject.type); //this outputs “banana”
31. FUNCTIONS Functions are reusable blocks of code that perform an action. You can create a function out of any parts of your code. You call a function by using it’s name and then a set of parentheses ( ).
32. function fruitFunction() { var fruitArray = [ ‘apple’, ‘banana’, ‘orange’ ]; for(var i = 0; i < fruitArray.total; i++) { console.log(‘Current fruit: ‘ + fruitArray[i]); } } fruitFunction(); //this triggers our code above
33. NOW LET’S BUILD SOMETHING
34. Let’s head over to http://codepen.io/ and start building our example. We’ll be getting into simple jQuery selectors and some basic jQuery methods while we are coding. We could spend all day talking about jQuery so this will just be a quick introduction.
35. This part of the presentation is being live coded with the class. Sorry.
36. http://www.w3schools.com/
37. http://api.jquery.com/
38. QUESTIONS?