UNTANGLING THE WEBWeek 5: front end frameworks, intro to javascript, project 2 discussion

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

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

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

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

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>

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!

EXERCISE 1 ANSWER

• http://jsfiddle.net/fv2ohh8y/4/

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!”

EXERCISE 2 ANSWER

• https://jsfiddle.net/oazgbqay/8/

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/

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.

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/

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>

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/

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)

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/

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

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

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

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

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/

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

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

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

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