the fifth class of the spring 2017 untangling the web

1. UNTANGLING THE WEB
Week 5: front end frameworks, intro to javascript, project 2 discussion

2. AGENDA
• Talk about homework 4
• Intro to bootstrap and UI-kit
• Javascript exercises
• Review – how to communicate between the page and the script
• Functions and how to call them and write them
• Variables – initialization and scope
• Calling built-in functions – date, time, math functions, etc.
• Control flow – for loops, while loops, if/then/else
• Project 2

3. HOMEWORK 4
• New stuff in this homework
• Getting onto the server
• Using git clone to move your website to the server
• Integrating html, css, and js onto a page
• Old stuff revisited in this homework
• Editing files
• Creating a github project repository
• Adding files to that repo, committing, and pushing files to the server

4. UI FRAMEWORKS
• There are a number of different frameworks
• Some are just styling
• Bootstrap (from twitter)
• UI-Kit
• Some are more full-featured frameworks
• React
• Angular
• Vue
• For the most part, we are going to talk about the styling frameworks today
• Choose one and stick with it. I suggest bootstrap, but UI-Kit is my current favourite
for more advanced projects

5. BOOTSTRAP
• Built by Twitter originally, but open sourced and now has a large following
• Some features are built on top of jquery
• http://jquery.com/: “jQuery is a fast, small, and feature-rich JavaScript library. It makes things
like HTML document traversal and manipulation, event handling, animation, and Ajax much
simpler with an easy-to-use API that works across a multitude of browsers. With a
combination of versatility and extensibility, jQuery has changed the way that millions of
people write JavaScript.”
• We will not use jquery directly very much in this course, but know it exists

6. BOOTSTRAP
• Most functions are just CSS, though, and you invoke them by attaching classnames
to your HTML objects
• Remember last week when we wrote CSS to target by class? Using a period in the
CSS targets the styling by class name
• So in your HTML you can use classnames that have definitions in the bootstrap CSS
files
• For instance, in a button this makes it a “danger” button:
<a href="#" class="btn btn-danger">Danger</a>

7. BOOTSTRAP EXERCISE 1
• Using the button definitions below, create one of each of the five button types in
bootstrap:
• btn-default
• btn-primary
• btn-success
• btn-info
• btn-warning
• btn-danger
• Start from this as an example: http://jsfiddle.net/fv2ohh8y/3/
• Note the external resources!

8. EXERCISE 1 ANSWER
• http://jsfiddle.net/fv2ohh8y/4/

9. BOOTSTRAP EXERCISE 2
• Reference: http://www.w3schools.com/bootstrap/
• Example: https://jsfiddle.net/oazgbqay/7
• Play with the page, understand what a responsive UI means
• Using the refence above, edit the page so that a tooltip pops up over the gray area
at the top (the “jumbotron”) that reads “Hooray!”

10. EXERCISE 2 ANSWER
• https://jsfiddle.net/oazgbqay/8/

11. BOOTSTRAP THEMES
• Because the CSS is open source, by editing the bootstrap CSS and re-releasing,
many different visual styles are possible.
• https://bootswatch.com/ is a good source of some of these, but there are many
different sites
• https://jsfiddle.net/oazgbqay/9/

12. BOOTSTRAP TEMPLATES
• https://startbootstrap.com/template-categories/all/
• There are also many templates available to get you started with bootstrap that
provide a website starting point for you. Some are paid, many are free.

13. UI-KIT
• Really just an alternative to bootstrap. Different look. Some different functionality
• I like that it has an icon set you can use to keep all of your iconography consistent
• Reference: https://getuikit.com/docs/documentation_get-started.html
• Example: https://jsfiddle.net/k0xp1jzy/

14. USING BOOTSTRAP OR UI-KIT ON YOUR
PAGES RATHER THAN JSFIDDLE
• Easiest to use a CDN, but could also place the .js and .css files on your site directly
• http://getbootstrap.com/getting-started/
• https://getuikit.com/v2/docs/documentation_get-started.html
• <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/css/uikit.min.css" />
• <script
src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/js/uikit.min.js"></script>

15. SOME JAVASCRIPT
• We’ll go through a number of exercises, but I want to review how to impact the
page from your javascript and how to launch your javascript from the page
• innerHTML is where the page contents are changed, but you have to first find the
object. So give each HTML object you’ll want to change an ID
• Then in the javascript use document.getElementById to find that object
• https://jsfiddle.net/3p9fm0w7/

16. TO REMEMBER!
• In jsfiddle, you’ll generally want to set your javascript to run in the body (click the
settings in the upper right of the javascript pane)
• And when you get into trouble and don’t see things working remember to use the
developer console (f-12 on PC, Cmd+Opt+I on Mac)

17. VARIABLES AND SCOPE
• Generally, variables in JS are global to the file that they are in, but there are many
exceptions that we’ll cover later
• Since scripts in the body are run when the page loads, you can initialize variables
outside of any function, and then use them from within functions
• So “var count = 0;” site outside the function
• “Count++;” sits inside the function
• https://jsfiddle.net/3p9fm0w7/1/

18. BUILT IN FUNCTIONS
• Date, math functions, etc
• A bit of a dense read, but here is a good reference
• https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects

19. DATE
• Let’s look at date more carefully
• The following example uses the console.log statement, so you’ll have to open your
developer console
• https://jsfiddle.net/mL75y122/
• Reference: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Date

20. MATH
• Let’s look at a couple of math functions
• https://jsfiddle.net/v7tr5cov/
• Reference: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Math

21. STRING
• Anything that manipulates text generally uses the string functions
• https://jsfiddle.net/r5Lckof3/1/
• A few things to note in here:
• The body onload is calling a function, that function must be declared before the body
(so in the head) which in jsfiddle is by changing the settings
• Strings are an array of characters, and you can reference individual characters to build
up a new string

22. CONTROL FLOW
• In the last example we used the setInterval function. This is a form of control flow in
that it re-runs the contents of that function every x milliseconds
• Most control flow expressions test a variable rather than the time, though
• For instance, the for loop looks at the state of a counter variable
• Notice the if statement here as well
• https://jsfiddle.net/6ewnaLp1/

23. PROJECT 2
• There will be a presentation, but nothing as formal as for project 1. No slides, no
changing computers. Just from my computer opening your website.
• Maximum 3 minutes per group, plus 2 minutes for questions. I will stop things if
they go long this time.
• Goal is to give your elevator pitch, backed up by showing the website
• Nothing needs to work, ie. No back-end is needed.
• But it needs to be responsive and styled properly

24. PROJECT 2 GRADING
• 15 points total
• 4 points for being properly hosted and checked into github
• I can open the page properly from my computer, it looks right, links work, and the code is
checked in
• 3 points for showing a proper github history (meaning that changes are checked in as
work progresses, good commit messages, everyone contributing)
• 5 points for well-designed and responsive styling of the page, using either your own CSS
or a framework like bootstrap or UI-Kit
• 3 points for javascript and behaviours leading to effective interaction
• These don’t need to tie to a database or a backend of any sort, these are display behaviours

25. HOMEWORK 5
• We’re going to start on a multi-week project to create a pizza ordering website
• Initially, this website will just have to show images of various toppings, and a button
next to each one.
• When the button is pressed that topping is added to the pizza and a total is shown
at the bottom
• The code is to be checked into github and running on your webserver, so you will
submit a link to your github project, and a link to it running on your server
• You do not need to ensure that a topping is added only once, but there should be a
clear button to clear the order

26. HOMEWORK 5
<img> tag for images (keep the images in
github and deploy to your site)
Buttons that call javascript
Javascript that adds to a running total, and
shows that total on the page
A clear button to zero the total and update
the display
A point for styling the page