Claim Academy Intro to Programming
Download as PPTX, PDF1 like308 views
Alex Pearson introduces a course on programming and building a basic calculator application. The course goals are to learn about software development, build a first website using HTML/CSS, and create a program using JavaScript. Students will set up their development environment, learn programming concepts like data types and functions, and incrementally build a calculator with operations like addition and error handling. The class discusses taking the calculator further in version 2.0 with additional features.
Claim Academy Intro to Programming
- 2. WHAT’S THIS ALL ABOUT? Who: Alex Pearson Director of Curriculum & Instruction Claim Academy What: A step-by-step intro to your first website and JavaScript program Overview of Programming Intro to HTML/CSS Intro to JavaScript/JQuery Why: to get you excited about programming!
- 3. GOALS OF THIS COURSE: Get excited! Have fun! Get hype! Learn about software development. What is programming? What does a programmer do? Learn (a little) about the Web. What is “the internet”? How do I make it do what I want? Build your first website and program. How do I use HTML/CSS? How do I use JavaScript/JQuery?
- 4. THINGS NEEDED FOR CLASS: Computer: Mac, Windows, or Linux Sorry, no Chromebooks Preferred: >2GB of RAM Wi-Fi: Connection information below Name: Claim Password: Claimhome Brackets: A free text-editor from Adobe Download link: http://brackets.io Browser: Chrome, Firefox, Safari, Opera Please no Internet Explorer. Ever.
- 5. THINGS NEEDED FOR CLASS 2: Template Files .zip: download online https://github.com/NAlexPear/Intro-Class/tree/class- download Click “Download .zip” in the right sidebar Extracted Template Files: wherever you’d like Don’t forget where you put that file! Open Project in Brackets: File > Open Folder Make sure you have ‘css’, ‘js’, ‘images’ directories, and an index.html file (+ some other stuff) Live Preview: Set up your live preview Display ‘index.html’, then click the lightning bolt
- 6. QUICK BREATHER (5 minutes) Everything ready to go? 1) Introduce yourself to one of the people sitting next to you 2) Ask them what kind of laptop they have & why. 3) Ask them what experience they have with programming, IT, or computers. 4) Introduce your new friend to someone else.
- 7. EXERCISE 1: AM I PROGRAMMING? To the editor! (brackets)
- 8. EXERCISE 1: AM I PROGRAMMING? ...not yet
- 9. WHAT IS PROGRAMMING? The “verbs” of the computer world 2 + 3 var doThis = function(){ thing to do }; Where is programming used? At every “level” Hardware/Architecture (1000110011) Between hardware and an OS (Assembly) Within an OS (terminals, source code) On top of OS (programs, virtual machines) -including in browsers! (just not HTML/CSS) What did we just do with HTML/CSS, then?
- 10. WHAT IS THE WEB? The “web” is a (series of) connection(s): Users->browsers->the “Internet”->servers ...all communicating via Transfer Protocols (e.g. HTTP and HTTPS) USERS BROWSERS INTERNET SERVERS
- 11. ENOUGH TALK, LET’S TYPE HTML: “Hyper Text Markup Language” DOM: “Document Object Model” <!DOCTYPE HTML> <html> <head> <title></title> <link rel=”stylesheet”> <script></script> </head> <body> <div> <h1></h1> </div> <div> <p></p> </div> </body> DOCUMENT HTML head METADATA body div VISIBLE div STUFF
- 12. QUICK BREATHER (5 minutes) Anything need to be reviewed? 1) Ask your neighbor any questions you have so far! a) if you can’t answer them yet, ask me! 2) Tell your neighbor how much you love HTML and CSS (and what you’d like to learn about next) 3) Get everything ready for JavaScript!
- 13. WE GET TO PROGRAM! (finally) To the editor! (Chrome)
- 14. JAVASCRIPT BUILDING BLOCKS Data types: - number - string (“hello world”) - boolean (TRUE/FALSE) Operators 1: assignment - variables: =, +=, -=, *=, /=, %= Operators 2: data-type specific - numbers: +, -, *, /, %, ++, -- - strings: +, += - comparison (boolean): ===, !==, >, <, >=, <=, &&, ||
- 15. JAVASCRIPT BUILDING BLOCKS 2 Methods: functions attached to Objects - some are custom, some are built in! - Ex: .length, toUpperCase Functions: like variables, but for blocks of code - methods are a kind of function - you can create your own functions, too! - you can save functions as a variable var doSomething = function(parameters){ stuff to do; };
- 16. BUILDING A CALCULATOR 1: JQuery: extending JavaScript’s built-in methods - interacts with the DOM - makes ‘Events’ easier to implement - integrates seamlessly with JavaScript - $(‘html or css selectors here’).doSomething(); var calc = function(){}; $(document).ready(function(){ $(‘#button’).click(function(){ calc(); }); });
- 17. BUILDING A CALCULATOR 2: Back to regular ol’ JavaScript: - need to gather user input (prompt) - build functions for each operation - need to return answers from each function; var calc = function(){ var num1 = //something var num2 = //something var add = function(num1, num2){ return num1+num2; }; };
- 18. BUILDING A CALCULATOR 3: Thinking about user interaction: - how do we want the user to interact with these functions? - what are the limitations of this program? - think about data types! var operation = //something if(operation === //something){ alert(//some function); }else if (//something else){ alert(//some other function); };
- 19. BREAKING OUR CALCULATOR: Still thinking about users: how can we break it? - What if users don’t know what numbers are? - What if users don’t know what operations are valid or supported? - What is the data type of user input? - How can we communicate errors to users? var num1 = parseInt(input1,0); if(isNaN(num1) === true || isNaN(num2) === true){ //tell the user that something is wrong }else{ //carry on };
- 20. CALCULATOR v2.0 Think about calculator.js v2.0: what could we add? You did it! Now what’s next?
- 21. THANKS, AND GOOD LUCK! LinkedIn: https://www.linkedin.com/in/nalexpearson email: alex@claimacademystl.com twitter: @NAlexPear GitHub: NAlexPear Thanks for coding with me today! https://claimacademystl.com
Editor's Notes
- #2: Hi everybody!
- #8: take a look at index.html in the <title> part of the document, change the title of the webpage to whatever you’d like in the <body><div class=”header”><h1></h1></div></body> section, change the intro text to whatever you’d like in the <body><div class=”header><h3></h3></div></body> section, change the “programming is fun” text to whatever you’d like! Neat, huh? Notice how the text is instantly updated in the preview file. That’s because the browser is just reading a text document like you or I. Now change the <h3></h3> text into var add = 2+3; console.log(add); nothing happens, right? That’s because we’re not actually programming yet. HTML is just HYPER TEXT MARKUP LANGUAGE… or text that we can “mark up” to make prettier. By itself, HTML is static. It can point to programs, but it isn’t a program by itself. Now change the <h3></h3> text back into something cool. Then navigate to style.css. CSS = “cascading style sheets” very neat stuff, but the name should give you a hint about what it does Go into the h1 { } styling and change Helvetica to Times New Roman neat huh? Now try just writing any old text doesn’t show up This means that it’s not just text here. We’re getting closer to programming, but we’re not quite there yet. We can only manipulate the STYLE of something. if we think about it metaphorically, HTML is the NOUN (or series of nouns) CSS would be the ADJECTIVES Programming (or programs) would be VERBS Very simplified, and maybe not always true, but good rule of thumb
- #10: To answer that last question, we need to understand a little bit more about the Web. We obviously used a browser, but where does programming fit in? Hopefully you’re starting to see the depth of knowledge it might take to call ones-self a “full-stack” developer, or even a “front-end” or “web developer” regardless of languages and frameworks. Be wary of the poser, but be excited about how much there is left to learn! And might I recommend a certain developer bootcamp if this sort of thing is exciting.
- #11: Remember, that across the full “stack” of places to program, the “web” is only one option, and there’s a lot to deal with even when we restrict ourselves to the “web”. For today: -we’re just looking at the interaction between users and browsers, and that’s it -Also just static rather than dynamic web interactions dynamic interactions = facebook, blog pages, twitter (serves content dynamically) another layer of abstraction on top of static data static interactions = what we’re doing (even with code, since ours is JUST in the browser rather than being deployed to a server across the internets).
- #12: Enough of all that. Let’s mess with stuff again. Before we get to the “programming” part of the course, we have to know a little bit about how those programs interact with the text documents in front of us: HTML and CSS. We won’t spend much time on CSS, but we need to know a few things about how HTML documents are set up so that we can manipulate the document with our programs! We’ve already discovered that HTML is just fancy text. All of the “programming” comes from the browser already, because it reads the text according to certain rules and displays that text according to presets. Those rules and presets are the things that make they hyper-text into a “markup” language. We can play according to those markup rules with TAGS. You’ve already seen a few tags before. We’ve messed with <title> and <h1>, which was neat. Those tags had very specific roles that mostly dealt with formatting. There are also tags for italics, bold, paragraphs, etc. The most important tags, though, are the ones the divide the HTML document into a series of chunks that interact with one another in a way that a browser can render and humans can understand. We refer to this as the DOM, or document object model. This is the foundation for how we’ll interact with HTML, and will inform how we mess with tags and content from here on out. (EXPLAIN DOM DIAGRAM FROM THE OUTSIDE IN) + what you might find in each section. Change the following in each section: in DOCUMENT and HTML: nothing at all. in head: remind folks about <title> comment out <link> for the stylesheet add <script> to calculator.js, test function in body check out <img> tags and how they work (relative vs url) relative->directory tree (remind folks that it’s very important NOT to change the directory structure) change calculator url to an image url of their choice check out <div> tags already messed with some of the text inside of tags change <h1> into other header types to see what happens should notice that the CSS we linked before changes a lot of the visible properties of the header (neat, huh?) add a link to http://claimacademyslt.com with an anchor tag <a href=””> take a look at the div with class “button” class is styled using CSS, but it’s also turned into an event listener this is how we’ll interact with the DOM through JQuery and JavaScript
- #14: Enough with text and stuff! Let’s get to programming. We’re going to try out some of the simple concepts in the Javascript Console that comes packaged with Google Chrome. Everybody should open up the console with “control + shift + j”. This is how we’ll begin telling the browser what to do! Try typing in some simple math (addition, multiplication, division). Notice how the browser responds to our commands, rather than simply outputting text. Also, note how we can cause errors pretty easily when we screw something up! The nice thing about computers (and programming) is that they do exactly what you tell them to do. The frustrating thing about programming is that computers do exactly what you tell them to do. If there’s a bug, it’s your fault! Moving on to some important concepts in JavaScript to expand its functionality beyond basic addition...
- #15: Programming languages have to differentiate between different kinds of data. While you and I might recognize that “2” and “two” are conceptually the same, the computer doesn’t and can’t. We have to differentiate between asking the computer to add numbers together or concatenating them into a string. An example: type in 2 + 2 ( you should get 4 as an answer) now type in “2” + “2” (you should get “22” as an answer) The different responses happen because of these different data types. There are lots of data types in the programming world and in Javascript, but we’re only going to go over three today: numbers, strings, and booleans. With these three, we can build our final calculator program! We can do things to and with these data types by using operators. Operators allow us to manipulate data of certain types or allows us to extract information about those types. It’s how we make the sentences of programming. Most of the time, operators work best when you’ve saved the data you’re using in a variable. Variables allow you to save data values (or functions, which we’ll see later), name them, and then bring them up later for use. You’ll be using a lot of variables as you start programming. Let’s make your first couple with some assignment operators. The most important one (=) simply assigns a value to a variable. Let’s try some of these: var myName = “Alex”; var myAge = 26; var isMale = true; console.log(“Hi, my name is “ + nyName + “ and I am “ + myAge + “ years old.”); Cool, huh? Now You’ve already seen a few of these operators in action. Many of the numbers operators make intuitive sense (+, -, etc.). Let’s try some of the following in the console: console.log(myAge++); console.log(myAge); console.log(++myAge); var greeting = (“Hello, my name is”); console.log(greeting + “ “ + myName); For boolean, let’s introduce one more concept to make these a bit more useful. Most of the time, we use a boolean to check if something is true or false, then do a specific thing to once we’ve established that it’s true or false. Example: if myName is “Alex”, log “Hi Alex” to the console, or else log “who are you?”. These are called “if-else” statements. Here’re a few examples: if(myName === “Alex”){console.log(“Hi Alex!);} else {console.log(“Who are you?”)}; if(myAge < 30){console.log(“A young whippersnapper”);} else {console.log(“Still a whippersnapper”);} if(myAge >18 && isMale === true){console.log(“Have you signed up for the draft?”);}else{console.log(“move along then”)};
- #16: Neat, huh? You’ll find those kinds of operators in most programming languages. There are some syntactical differences between the language, but just about every language out there will have those same data types and operations, just like most spoken languages have verbs, adverbs, clauses, and direct objects. Now we’ve seen how to store data and manipulate it as variables. We can also store directives as functions. Some functions are attached to an object (like the data type “string”). Those are called methods. Some methods are built in already, which is a nice way of seeing how functions might work. Let’s give it a try! console.log(myName.length); console.log(myName.toUpperCase()); var input = prompt(“Look at this box! Put something in it”); console.log(input); Now let’s try a more complicated problem. See if you can do the following: use prompt to save a custom string as a variable calculate the length of that string save the length of the string as a new variable write a string to the console that tells the user how long their input was. Make sure that it’s a complete sentence, please. Now let’s see if we can wrap that up as its own custom function that we could call at any point! Imagine needing to call this same block of code 5 or 500 times on a page. It would be a lot easier if we could call a variable name instead of writing all of this business out again. So try wrapping all of that up in a function, then calling the function. Once again…. neat!
- #17: While working in the console can be fun, it doesn’t add anything to our websites. We need to be able to save our javascript files and connect them to the DOM outlined by the HTML (and styled using css). We’re actually going to start building our calculator by connecting it to the webpage, then testing the functionality of what we’ve written through bracket’s HTML preview. Start by going to the ‘js’ directory (where jquery.min.js is stored), and create ‘calculator.js’. Hooray! Then go to index.html and connect calculator.js to index.html through the <script> tag. Just like the JQuery library is connected above! Now we need to make sure that whatever we write in this file connects to the document, loads with the DOM, and provides some interactivity. We’re going to do that by making sure to call a function when a certain div is clicked. Let’s see how that might work (see slide). (Walk through each part of the function above, shouldn’t take too long. )
- #18: Inside calc, we need to gather user inputs, store them into variables, and return them (rather than log them to the console or output them somewhere). Returning something means that the value is stored, and can be used in some way when the function is called, but it’s not necessarily visible to the user unless we do something to it. Go ahead and fill in the rest of these variables and functions so that we have something almost useable! After this is done, we can test it out with the button. We might be missing something, though...
- #19: See powerpoint prompts above. After a brief brainstorm, we can talk about how to get user input about what operations need to be done and turn that into an output. Let’s use if/else-if statements to call the operation functions according to user input! As long as we nest all of that in calc(); we should be able to call something right now with some output. Neat, huh?
- #20: See powerpoint prompts above. After a brief brainstorm, we can talk about how to communicate to the user that they’re silly. Let’s run it again and see what error messages we get! How else might users screw up? (Add “else” condition to operations options to fix everything).
- #21: See powerpoint prompts above. After a brief brainstorm, we can talk about how to communicate to the user that they’re silly. Let’s run it again and see what error messages we get! How else might users screw up? (Add “else” condition to operations options to fix everything).
- #22: Thanks, good evening, and good night!