Post on 11-Apr-2017
UNTANGLING THE WEBClass 6: More bootstrap, more javascript, more examples
AGENDA• This is partially a catch-up class, because some folks are stuck
• Review git and server commands• Review project setup and starting a new website• Review bootstrap and flexbox• Bootstrap tables and responsive UI
• Some new git commands• Variables and user input/output• Text processing in javascript• Variable scope in javascript
• Homework 6 – Due Feb 22nd
GIT REVIEW• Starting a new project on github, adding a readme• Git clone• Edit in visual studio code• Git add• Git commit• Git push
Demo
WEB SERVER REVIEW• Connecting via SSH• Navigating directories
• Everything goes under public_html• Git clone
• Demo
MAKING CHANGES TO THE WEB SERVER
• Ssh in again• Navigate to the project directory• Git pull
• Demo
BASIC HTML• <!DOCTYPE html>• <HTML>, <HEAD>, and <BODY> tags• In the head:
• <TITLE>• <LINK>• <SCRIPT>
• <DIV> and <SPAN>• <P>, <H1>, <H2>, <H3>• <BUTTON>• <IMG>• <INPUT>• <A>
BASIC CSS• Target by tag, class, or id
• Tag, .class, #id• Tags are hierarchical• Flexbox
• flex containers versus items• Other CSS tags of note
• Color, background-color, text-align, font-family, font-size, borders, margins, etc
BASIC BOOTSTRAP• Including the dependencies• Some bootstrap stylings we’ve looked at
• Jumbotron• Buttons
• And some we haven’t• Panels• Dropdowns• Tables
• We’ll cover tables in more detail in a bit, after we’ve finished the review
BOOTSTRAP TABLES• Grid system
• Based on 12 columns• Responsive to screen size• Can give columns different layouts by size, or depend on automatic behavior
• See summary here: http://getbootstrap.com/css/
BASIC JAVASCRIPT• <script> tag to include in the HTML page directly, or from another file• Calling a function from HTML• Accessing the DOM to write back to the page• Variables• Adding, subtracting, multiplying, etc.• If statements• Looping using for loops• While loops
PLAYING ON JSFIDDLE• Easy way to send a quick link• When asking for help on slack, send a fiddle if possible• This is not the best place to do all your development, though• In order to move things from fiddle into your own files (demo)
ON TO NEW STUFF• Git• Bootstrap tables• Some javascript topics
NEW GIT COMMANDS• Some more git commands
• Git log• git log --pretty=format:"%h %ad | %s%d [%an]" --graph --date=short
• Git aliases• git config --global alias.hist "log --pretty=format:'%h %ad | %s%d [%an]' --graph --
date=short“• Now we have “git hist” for the above• Git blame• Git checkout
• Older versions, git checkout <version>• Back to current, git checkout master
VARIABLES AND USER INPUT• <input> and <textarea>• Parsing text
• Numbers versus strings• Comma-separated values
• https://jsfiddle.net/f7h28jaa/
VARIABLE SCOPE• A reminder that variables are only accessible from within the block they
are declared, or children of that block:• In a file, variables declared outside any functions are global to all the
functions in that file• In a function, variables declared at the top of the function are accessible to
everywhere within that function• In a for loop, variables declared within the loop are accessible ONLY within
the loop• Any identically named variables will be taken from the closest block
• Don’t name the same or your more global variables will be hidden
HOMEWORK 6• Allow the user to type their items into the ordering page in addition to pressing
the buttons• Use the split and trim functions to allow multiple items to be typed in• Correct for case• Update the total when you have processed each item
• Add a receipt to your pizza ordering application.• When an “order” button is pressed prepare a receipt. This can be on the same page
(easiest) or you can use the bootstrap popover class (harder)• This receipt should be nicely formatted with columns for item, picture, and price• There should also be a subtotal, tax, and total which you calculate on the fly
• Due Feb 22nd before class
HOMEWORK 6 HINTS• This is a bit larger homework• Think about how you add your items, since they need to be accessed
from both buttons and text now an array of items and prices may make sense
• Remember the split and trim and toLowerCase string methods• Do some error checking to make sure there is an entry!