Slide notes for Beginners Programming

  1. Title slide: Hello and welcome
  2. Table of contents: This is what we will cover in this workshop
  3. Intro
  4. Code is just another language: When we want to talk to humans and give them instructions, we use a human language, like English, Chinese or Urdu. When we want to talk to computers and give them instructions, we use code. JavaScript in particular is code that talks to a web browser.
  5. JavaScript is interpreted: By the JavaScript engine inside the web browser. JavaScript, and other languages like HTML and CSS, are interpreted to output web pages that a computer user can use.
  6. How the Web works:
  7. Server-side vs client-side: Server-side code is run on the server, and the result is then sent to the client and displayed. Think of the code that finds the results when you do an Amazon search. Client-side code on the other hand is sent to the client as is, then interpreted by the client and displayed. We are only covering client-side code in this course.
  8. HTML: HTML is the language you use to structure your page content and give it meaning. HTML is composed of elements: tags that wrap around content.
  9. CSS: CSS is the language you use specify what you want your content to look like. It is made up of rules that select element to style, and change their style properties to new values.
  10. JavaScript: The JavaScript language is comprised of objects that you manipulate to create exciting dynamic functionality on web pages. Programming for the Web.
  11. Browser developer tools: Every browser has a set of developer tools that can be used to solve problems with web site code (fix bugs). These include a console that can be used to directly test the page's JavaScript. Developer tools are accessed using Ctrl + Shift + I (Cmd + Opt + I on Mac OSX, F12 on Internet Explorer)
  12. Variables
  13. Variables: You create a variable using the var keyword, followed by the variable name you choose. You assign a variable using the assignment operator, for example myVariable = "Chris". You can assign the variable different values after it has been created.
  14. Common variable data types: An integer is a whole number value, and is assigned without quote. A string is a series of characters, and must be surrounded in quotes. A boolean is a true/false value. Arrays and other objects return a data type of object.
  15. Syntax rules: There are various syntax rules you need to remember about JavaScript. The most important ones are listed here.
  16. Operators: These slides list the most common JS operators. Most of these are obvious. + is used to add numbers together and join strings together. Modulo returns the remainder after one number is divided by another, and is mainly useful for detecting whether a number is even or odd. For example, 4 % 2 is 0, as 2 divides exactly into 4. 5 % 2 is 1, as 2 divides into 5 twice, with 1 left over.
  17. Operators: These operators are mostly used to compare values (comparison operators). We've already seen assignment, and we'll see a lot more of the others later in the course. For example, < tests whether one value is less than another — 3 < 5 returns true, because 3 is less than 5.
  18. Operator precedence is the order in which operators are executed in a sum. Division/multiplication are executed first, then addition/subtraction. This is why 8 + 4 / 3 * 4 perhaps doesn't return the result you thought it might. The divide is run first, then the multiply, then finally the addition. You can force the order using brackets, for example (8 + 4) / (3 * 4)
  19. Conditions and loops
  20. Conditional code allows us to test a condition (for example 5 < 3.) If the condition returns true then one block of code will be run. If it returns false, something else will happen. Let's look at the code structure.
  21. if ... else pseudocode: The basic if ... else code structure looks like this.
  22. if ... else example: and here is a real code example. Here we prompt the user to enter a town/city name. If they enter "Manchester" then they'll see the first alert message. If they enter anything else, they'll see the second alert.
  23. if ... else if ... else example: else if() {} is used to chain a further condition check onto the code block.
  24. logical OR and AND: As you can see in the code examples, these operators can be used to create a conditional check where either or both conditions need to return true before the overall condition will return true.
  25. Nesting if ... else: This is just fine.
  26. Loops: These code structures allow you to run the same code several times, updating part of the code each time to iterate through a set of data for example.
  27. For loop pseudocode: The for loop structure looks like this.
  28. For loop features
  29. For loop example: Here is a real for loop example.
  30. Document Object Model
  31. The browser converts HTML to a DOM tree: The Document node is the top node in the tree. Then all the elements in your page are converted into nodes, which form a hierarchy based on how they are nested. The html node is top, then the head and body, then the elements inside those.
  32. JavaScript and CSS accessing the DOM: When you used CSS and JavaScript to affect nodes in the DOM, they walk up and down the tree until they find the element(s) they want.
  33. Example: JavaScript updating element contents: In this example, we grab a reference to the <h1> element using the document.querySelector() function, then store it in a variable called myH1. We then update the content inside the element by setting a new value for myH1's innerHTML property.
  34. Canvas
  35. Canvas is a way to script images using JavaScript. This doesn't sound very impressive to begin with, but you can do a lot with this, such as coding games inside the browser.
  36. Create a canvas + get a context: To manipulate a canvas, there are three steps to go through:
  37. Draw squares: it is easy to draw squares in canvas — fillRect and strokeRect allow you to draw filled and outline rectangles, respectively. Their four arguments are the x and y coordinates on the canvas, and the x and y dimensions. You cna use fillStyle and strokeStyle to set the colours the rectangles will be, and lineWidth will set the thickness of the stroke.
  38. Canvas loops: It doesn't take much imagination to start combining loops with drawing on a canvas, to create pretty patterns.
  39. More loop ideas: Here are some more ideas for you to try in your loops
  40. More loop ideas: And some more! Bear in mind that there is no easy primitive to draw a circle like there is for a rectangle, so you need to start a drawing path with beginPath(), draw a 360 degree arc(), and then end the drawing path with fill().
  41. Functions are blocks of code that can be defined once, and then called as many times as you like, meaning much more efficient code. We've already used a number of JavaScript's built-in functions, but here we'll look at how to define our own.
  42. Sample function: In this sample function, we see one way of defining a function — using the function keyword, followed by the name you want your function to have, followed by brackets(()), followed by curly braces ({}). Inside the curly brances we put our function code. In this case we are generating a random number between 1 and 10, after which we return the result out of the function using the return keyword. This in effect is the result you get returned when you run the function. You have to call (run) the function using its name followed by brackets.
  43. Function with argument: In this case the code structure is the same, except that inside the brackets we include an argument — this is a variable that we can use inside the function, depending on what result you want. In this case we can now generate a random number between 1 and any number, by specifying it as the argument when we call the function.
  44. Canvas function: This slide shows a simple example of a function that can generate a canvas sine wave of a certain length, at a certain position on the y axis, as specified by two arguments (separated by commas). A good example of how to encapsulte complex code so you only have to write it once.
  45. Events
  46. Events are... a feature of JavaScript that allow us to run code in response to user actions — such as clicking a button or moving the mouse — or actions run by other parts of the code — such as a database successfully being saved.
  47. Sample event usage (anonymous function): The simplest event example involes a button in your HTML. We grab a reference to this button, then attach an event handler property to it — onclick. Its value is set to an anonymouse function that wil fun when the button is clicked.
  48. Sample event usage (named function): This example does the same thing, but using a named function (which is the same structure as we saw earlier in the functions section.) This fnuction is rthen called on a separate line, but without the brackets you'd usaually use. This is because including the brackets would run the function straight away, but you don't want it to run until you've clicked the button. This code is more complex, but more reusable. You could potentially call this function multiple times.
  49. Credits