Untangling spring week5

UNTANGLING THE WEB
Week 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 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

Untangling spring week5

Related slideshows

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Untangling spring week5

Similar to Untangling spring week5 (20)

Recently uploaded

Recently uploaded (20)

Untangling spring week5