.  270 S18 . 
        ☃   ☀
⇒ Quiz 2/23: 25 points: 15 html css, 10 js
⇒ NODE due 2/23, friday, 10pm.
TEST 1: 3/05 and 3/07
⇒ FIZZBUZZ due 3/09, friday, 10pm.
⇒ Read Introduction of Eloquent JavaScript
⇒ Read Duckett HTML/CSS & JavaScript.
Projects    
0. THIMBLE       1.SIMPLE (+)       2.NODE       3.FIBFIZZ (JS)       4. FORM VALIDATION       5. CANVAS       6. PORTFOLIo 2 7.SKI      
my thimble / public           your thimbles           your cisprod.
- You are responsible for notes, readings and classroom discussions. Topics may be changed, re-ordered or skipped over.
- Chaos reigns; come to class.
  syllabus / policies (pdf)   ·   faq (grades, lab hours,honesty, etc...)   ·   2gb flash: see me   ·  




VS CODE - Setup & Basics
wk  1        2          3          4          5           6          7       ☀       8          9          10         11         12         13         14   
 22 24 26 | 29 31 02 | 05 07 09 | 12 14 16 | 19 21 23 | 26 28 02 | 05 07 09 | * | 19 21 23 | 26 28 30 | 02 04 06 | 09 11 13 | 16 18 20 | 23 25 27 | 30 02 04 
 01 02 03   04 05 06   07 08 09   10 11 12   13 14 15   16 17 18   19 20 21       22 23 24   25 26 27   28 29 30   31 32 33   34 35 36   37 38 39   40 41 42 
 
⁂   Code from Texts & References
☢   Test Information & Review
- Create a CAP one page (8.5" x 11"), one side, name on back - TEST 1 Review TEST 2 Review multiple choice day 1 code read/write day 2 - Final Exam Schedule - Registrar everybody comes to the final
 
1 :: Web Development Tools & Environment : VS Code, Thimble, FileZilla, Firefox & Chrome (Eloquent JavaScript: Introduction)
- MDN: Getting Started with the Web - Download and Install these tools!! - Web Browser Requests pages from a server Server responds with markup and supporting files Browser builds DOM and RENDERS the pages Poorly structured pages revert to quirks mode - may be rendered in unpredictable ways Mozilla Firefox Quantum Google Chrome - VS Code VS code - NOT Visual Studio IDE VSC documentation VSC extensions 'open in browser' by techER 'ftp-simple' by humy2833 'HTMLHint' by Mike Kaufman 'HTML CSS Support' by ecmel 'CSS Peek' by Pranay Prakash 'jshint' by Dirk Baeumer 'VSCode Great Icons' by Emmanuel Beziat 'Guides' by spywhere 'Beautify' by HookyQR 'Default Dark+ Contrast' by K3A - Emmet (built in to VS Code) Time-saving shortcuts - R O I Emmet in VS Code Emmet Documentation Emmet tricks - Thimble Mozilla Thimble is an online code editor that makes it easy to experiment with HTML, CSS & JavaScript. Mozilla Thimble - create a free account Wyatt's minimal Thimble starting point - Node.js Node.jsĀ® is a JavaScript runtime built on Chrome's V8 JavaScript engine. NPM is package mgr - reusable code You must install node.js on your machine! Download Node.js USE 8.94 LTS => long term support node documentation NPM: node package manager - reusable code to include node.js in vs code - FTP: File Transfer Protocol: As its name suggests, the File Transfer Protocol (FTP) is a standardized network protocol used to transfer files between a client and a server over the internet or any other TCP/IP network. FileZilla - Image Editor paint.net Paint.NET is image and photo editing software for PCs. - Version Control System (VCS) Video: What is version Control? git git documentation
2 :: The Internet & the Web: TCP/IP, ISP, DNS & http (Duckett-HC Introduction) (EJS Ch.12)
About the Web and Internet - mdn: How the Internet works "Network of networks" TCP/IP IP address space packets 1960s: US governement ARPANET, fault-tolerant, cold war & nukes ISP Late 1980s - commercial access to Internet "Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure." Visualization of the Internet - mdn: How the Web works "The Web is a collection of interconnected documents (web pages) and other web resources, linked by hyperlinks and URLs." -- wikipedia Client vs. Server Early 1990s http DNS html only at first - then css and javascript later
3 :: The Basics of Client-side Programming : HTML, CSS, JavaScript & the DOM API (Duckett-JJ Introduction)
Client-side Web Programming Basics - Web developers have THREE masters 1. browser - adhere to standards so page is rendered correctly and predictably - no quirks 2. user - come for the style and pizzazz, stay for the content (content is king) 3. search engines: SEO & search engine bots (web crawlers or spiders or robots) - Modern web development assigns: 1. structure to HTML 2. style and layout to CSS 3. behavior to JavaScript. - Web development prototype tool - see first assignment!! Wyatt's Thimble START - mdn: Web Technology - HTML, CSS, JavaScript, DOM Hello Page / the code CLIENT! Web programming integrates three different technologies: HTML, CSS & JavaScript When people say web programming is easy, they often think it is simply HTML. Not even close. - mdn: HTML basics NOT a programming language markup language element = opening tag + content + closing tag tags scaffolding container for content attributes provide extra / essential information to the tag - mdn: CSS basics NOT a programming language style sheet language - apply styles to selected elements from HTML rules selector* declaration block declaration property: value styles applied to html layout: hardest to control - mobile first box model: MBPC grid colors text, font, size - mdn: JavaScript basics IS a programming language variables comments operators loops branch on conditions functions events - DOM API DOM document object model (wikimedia) DOM is how JS interacts with html and css DOM built when page is loaded JavaScript uses the ID of an element to get access to that element (usually) var ref = document.getElementById( IdOfElement ); ref.innerHTML = "<h1>The new element to insert into document!</h1>" #META: how does the 'h1' tag above NOT behave like an 'h1' tag?
4 :: HTML : Structure & Organization using markup tags (Duckett-HC Ch.1-5)
HTML is not a programming language; it is a markup language that defines the structure of your content through the use of markup tags that look like this: <body> - w3schools.com w3schools.com - less detailed, but solid w3schools HTML Tutorial W3 Schools: Try It editor html tags by category - MDN: mozilla development network mdn: HTML Intro - more depth Markup Tags / Elements: - usage each tag pair (open/close), together with its contents, defines an element. use lower case for tags properly nest elements -attributes provde more information about element attached to the open tag of the element quote attribute values class, id, src, charset, href, type, title, style, alt, rel <a href="http://jbwyatt.com">wyatt</a> <img src="IMG/doggy.jpg"  alt="my doggy"> - categories inline: no new line, takes up only width it needs <span class="xyz">content</span> OR block: always starts on new line - takes up full width self-closing (empty - no content): <img> <br> <hr> <link> <input> OR opening & closing tag: <html> content </html> <div> content </div> <p> content </p> - page loaded and DOM built - WAIT for this to complete before applying JS! DOM document object model (wikimedia) - mdn: head tag / meta <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html> - mdn: text structure tags div, p, h1-h6, header, footer list tags ol, ul, li emphasis tags em, strong, b, i, u group inline elements, no visual change , apply style or "hooks" span forms form inut - mdn: hyperlinks hyperlinks are the most important tag in html specify a URL on the web http://jbwyatt.com specify http protocol specify a local URL (file path) relative path files in same directory going down going up ../ email mailto <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> - mdn: img tag show an image on your page <img src="doggy.jpg" alt="picture of my dog"> jpg, png, gif, bmp can use image as a link <a href="http://jbwyatt.com"><img src="doggy.jpg" alt="picture of my dog"></a> < - mdn: html tag reference html, head, meta, title, script, link body, h1-h6, div, p, header, footer br, hr comment ol, ul, li a, img - W3 Schools HTML Tag Reference - My HTML Examples
5 :: CSS : Style, rules, selectors, declarations, properties: values (Duckett-HC Ch.10-13, 15)
"Imagine an invisible box around every HTML element" CSS is not a programming language; it is a language that allows layout & styling of web pages. While HTML is used to define the structure and provide scaffolding for your content, CSS is used to style the page and control how it is laid out. Layout becomes complicated with different sized viewing windows (phones, tablets, desktops). -stylesheets external: <link href="xyz.css" rel="stylesheet"> internal: <style></style> inline: <tag style="property1:value; property2:value"> ... - DOM - styles are attached to DOM nodes DOM document object model (wikimedia) - rules specify styles rule => selector + declaration block declaration block = 1+ declarations declaration = property:value pair - rules allow you to style a page's layout color text w3schools CSS Tutorial CSS Demo Page mdn: How CSS works - layout "Imagine an invisible box around every HTML element" box model M -> B -> P -> C use this declaration to make percentages include border & padding box-sizing : border-box; (content-box does not count) - responsive use percentages (not pixels) for width of block elements width : 80%; (not 400px) media queries can determine size of viewing window @media screen and (max-width: 1300px) { body { background: blue; } } -flex box flex box .flex-container { display: flex; justify-content: center; } <div class="flex-container"> <div>111</div> <div>222</div> <div>333</div> </div> - css-grid layout example using a grid:
    COLORS
    TEXT
6 :: JavaScript & Node.js®: programming with the cmd shell (Duckett-JJ Ch.1-4, 10) (EJS-Ch.1-4)
"1" + "1" = "11" - 1 = 10 node.js node as a REPL - NOT in vs code terminal using node in vs code - integrated terminal debugging javascript IN vs code command window hacks Our JavaScript Rules
w3schools JavaScript Reference JavaScript Tutorial JavaScript Examples data types (6): "buns of" type conversion variables if else and conditions for loops functions arrays objects
mdn: JavaScript Guide JavaScript Reference types and grammar control flow loops functions arrays
EJS: 2nd ed. Values and types(6) in JS: numbers, strings, Booleans, objects, functions, and undefined values. Variables, expressions and statements Functions Objects and arrays
7 :: JavaScript & the DOM : JS meets HTML & CSS and provides behavior for a page (Duckett-JJ Ch.5-6) (EJS-Ch.13)
my javascript reference JSBin variables, types and arrays: 2 functions manipulate types and arrays and report via DOM manipulations jsbin.com: html, css and javascript web sandbox template: basic html, css and js with event and output hooks into html via ids and getElementById() basic DOM output: event function showing basic innerHTML and style property DOM manipulations of html elements basic DOM output: event function loops and branches and then outputs via DOM manipulations variables, types and arrays: 2 functions manipulate types and arrays and report via DOM manipulations
8 :: Forms : getting & validating user input to the server (Duckett-HC Ch.7) (Duckett-JJ Ch.13) (EJS Ch.18)
forms: valid, invalid, validation
9 :: Canvas : graphics on the web (EJS-Ch.16)
canvas: simple canvas with random colors using rgba and random rectangles
 
CODE EDITOR:
    1. VS Code       -- documentation
    2. Notepad++   -- hints and tips

BROWSER:
    1. Firefox - but MUST be able to DEBUG
    2. Chrome - but MUST be able to DEBUG

IMAGE EDITOR:
    1. paint.net
    2. gimp image editor

FTP:
    1. FileZilla
TEXTS NEEDED
    1. Eloquent JavaScript 2nd ed. - free online book
        EJS - new 3rd ed.
        EJS - Interactive Code Sandbox
     
    2. HTML & CSS: Design & Build Websites, Duckett, 2011
        [REQUIRED] ISBN: 978-1-118-00818-8
        (Amazon)     (Bookstore)  
        Text Web Site   -   Code from Text (view or download) (local)

    3. JavaScript & JQuery: Interactive Front-End Web Development, Duckett, 2014
        [REQUIRED] ISBN: 978-1-118-53164-8
        (Amazon)     (Bookstore)  
        Text Web Site   -   Code from Text (view or download) (local)


  MEDIA QUERIES
@media screen and (max-width: 1100px) {
         body { background: yellow;}
      }
         
 
 
03. HTML Structure & Text & SEO (Duckett-HC Ch. 1 & 2)
STRUCTURE (ch 1): local code - online code :: ppt - pdf TEXT (ch 2): local code - online code :: ppt - pdf SEO: SEO youtube video jcp black hats (nyt) google SEO guide
TAGS: note: * indicates empty element with no content html head meta*, script, link*, title, body div, p h1, h2, h3, h4, h5, h6 b, i br*, hr* sup, sub W3 Schoole HTML Tag Reference html describes structure html element: opening and closing tag (some are self-closing) elements are commands to the BROWSER attributes tell more about elements href="http://jbwyatt.com" src="boy.jpg" class="bigBoy" id="top" W3 Schools HTML 5 Tutor (with Tryit) Template for html pages HTML Examples create pages & publish notepad++ ftp
04. HTML Lists, Links & Images (Duckett-HC Ch. 3, 4 & 5)
LISTS (ch 3): local code - online code :: ppt - pdf LINKS (ch 4): local code - online code :: ppt - pdf IMAGES (ch 5): local code - online code :: ppt - pdf
TAGS: ol, ul, li dl, dt, dd TAGS: a (most important element ) ATTRIBUTES: href="" - http://, mailto:, x.html, ../x.html, XYZ, x.html use relative addressing to navigate directory structure href="../../xyz.html" use id and href # links to different part of the same page id="abc" + href="#abc" TAGS: img, figure, figcaption ATTRIBUTES: src, alt height & width attributes allows faster page load but you MUST preserve aspect ratio do NOT use align attribute, use CSS jpg for pictures gif and png for logos (few colors) W3 Schoole HTML Tag Reference W3 Schools HTML 5 Tutor (with Tryit) SEMANTIC TAGS: name describes its meaning header nav section article section aside article footer
05. CSS Intro (Duckett-HC Ch. 10) Imagine an invisible box around every HTML element.
Imagine an invisible box around every HTML element. CSS Intro: local code - online code :: ppt - pdf
W3 Schools CSS Tutor (with Tryit) Future Value - Monthly/Yearly - jbw CSS stylesheet example 1 - example 2 microclasses or OOCSS SASS - syntactically awesome style sheets
Rule = selector + declaration Declaration = property: value; Location: In-Line Internal External Cascade: later rule takes precedence, more specific Some properties inherited, some not (use inherit value to force -- padding:inherit;) Priority of Rules -If more than one rule applies to an element, use the rule with the highest specificity. -If specificity is equal, use the last rule. -- id most important -- class, attribute selector, pseudo-class less specific -- element selector is least
06. CSS Color and Text Styling (Duckett-HC Ch. 11, 12)
CSS Color: local code - online code :: ppt - pdf web colors | names | hex values color calculator what the hex? - a guessing game... W3 Schools CSS Tutor (with Tryit) Example Code from Text 2^n, byte, hex 6 digit / 3digit hex decimal and rgb and rgba color names
CSS Text: local code - online code :: ppt - pdf Example Code from Text W3 Schools CSS Tutor (with Tryit) fonts: installed serif : print non-serif - computer : Verdana, Arial, Helvetica font-family, font-size, font-weight, font-style,ttext-decoration text-align link styling pseudo classes a:link, visited, hover
07. CSS Boxes(mbpc) & Layout (Duckett-HC Ch. 13, 15)
My CSS: responsive css and the other page My Grid: responsive & fixed using CSS float and box-sizing CSS Boxes: local code - online code :: ppt - pdf W3 Schools CSS Tutor (with Tryit) Example Code from Text MBPC centering -- text -- container (margin:auto and width) height width overflow: auto box-sizing: border-box;
CSS Layout: local code - online code :: ppt - pdf CSS Layout: float, center, divs in divs and counting pixels; Parents of Floated Elements: Solution and Centered Creating Multi-Column Layouts With Floats: Two Columns Creating Multi-Column Layouts With Floats: Three Columns W3 Schools CSS: float Example Code from Text JS/CSS: navigation control the layout float elements and clear floats use float to create a grid or columns My CSS: responsive css and the other page
08. JavaScript Programming (Duckett-JJ Intro & Ch. 1a, 1b, 1c)
JAVASCRIPT INTRO (intro): ppt - pdf
ABC'S of PROGRAMMING (ch 1): local code - online code SCRIPTS (1a): ppt - pdf OBJECTS & DOM (1b): ppt - pdf ABC'S of PROGRAMMING: JS + HTML (1c): ppt - pdf
a. JavaScript is a "script" series of instructions start with goal, develop tasks, C O D E! b. Objects model the world properties events methods (functions attached to an object) browser creates model of web page 1. Window Object - window where browser displays page each tab has a window object location property of window = URL of the page 2. Document Object - the html page ( DOM ! ) DOM has properties, events and methods JS can access and change content JS can govern how user interacts Get and display a page (see p. 41) 1. browser gets html page & associated files 2. create a model (DOM) in memory nodes: elements, text, attributes 3. render page uses DOM and associated CSS (default or your css) c. JavaScript + HTML runs within browser each browser has a "JavaScript Engine" provides page with behavior & makes pages interactive
Hello Page   html, css, js & notes Sales Tax Calculator (html) (css) (js) W3 Schools Javascript Tutor (with Tryit)
09. Basic JavaScript Instructions & FireBug (Duckett-JJ Ch. 2)
BASIC JS INSTRUCTIONS (ch 2): local code - online code :: ppt - pdf Firebug and the Console
Statements and Comments Variables var varName; Types numeric, string, boolean (true false) arrays, objects, undefined, null Arithnmetic Operators String Operators Output via the DOM - (example code from text) // Get the element with an id of cost. var el = document.getElementById('cost'); el.textContent = '$' + total; Arrays: code example (rendered code) index, list .length property var myArray = []; // empty array myArray[0]=75; var otherArray = new Array(100); //100 elements(0-99 index) Objects: properties, methods, events typeof gives type of object
Firebug and the Error Console
0A. Decisions & Loops (Duckett-JJ Ch. 4)
DECISIONS & LOOPS (ch 4): local code - online code :: ppt - pdf
prompt, output, loop, if  
0B. Functions, Methods & Objects (Duckett-JJ Ch. 3)
FUNCTIONS, METHODS & OBJECTS (ch 3): local code - online code :: ppt - pdf
JS Grammar (var, document.write(), arithmetic) html js css Types and conversions -- ( html with internal css and js) JS: order of code execution & document.write()
Functions & Methods logical grouping reuse executed when called named functions anonymous functions can construct so called when declared Objects Built-In Objects
0C. Document Object Model (Duckett-JJ Ch. 5)
DOCUMENT OBJECT MODEL (DOM) (ch.5): local code - online code :: ppt - pdf
JS: getElementById(), innerHTML, function, array DOM: innerHTML · DOM: Hide/Display jbwyatt navigation - js file footer simple: bottomNavigation() header slightly more complex: topNavigation() - create a string of html var output = '<li><a href="page.html... - insert string into an empty div set the id of the div <div id="topnav"> - get id and insert using js and html var o = documentgetElementById("topnav"); o.innerHTML = ...
0D. Events (Duckett-JJ Ch. 6)
EVENTS (ch 6): local code - online code :: ppt - pdf listener in html element attribute onclick in js onclick addEventListener Murach Code, Ch. 3
Z-order Image Manipulation   js   css
0E. Canvas: Using JavaScript to Create Graphics
Diving Into HTML5: canvas text Mozilla canvas tutor W3 Schools: canvas tutor Arc Rectangle JS: canvas, graphics and Math lib(random, round, floor) JS: Snow
Canvas rectangles and ellipses // x,y,w,h ctx.fillRect(Math.floor(Math.random()*400), Math.floor(Math.random()*250), Math.floor(Math.random()*140), Math.floor(Math.random()*100)); .... // x, y, radius, startAngle, endAngle, anticlockwise ctx.arc( Math.floor(Math.random()*450), Math.floor(Math.random()*250), Math.floor(Math.random()*40), 0.0, (Math.PI * 2), true); ctx.fill();// actually draws here EXAMPLES: DemoStudio, Mozilla Chrome Experiments Timeless Name & Ski Game BreakOut Game Tutorial uses rectangles and ellipses
0F. HTML Forms (Duckett-HC Ch. 7)
10. Error Handling & Debugging (Duckett-JJ Ch. 10)
JS Error Handling & Debugging: local code - online code :: ppt - pdf Finding errors: Firebug and the Error Console finding errors: web developer: syntax firebug: run-time, logic Bad HTML & CSS Validate? Validation Web Developer JS Syntax? Web Developer Logic? FireBug Array filled correctly? Array displayed correctly? Good
11. jQuery (Duckett-JJ Ch. 7)
jQuery: local code - online code ppt - pdf Library <script src="JS/jquery-2.0.2.min.js"></script> Tested Browser neutral 'ready' $(document).ready(function() { your code to execute on startup } ); // end ready load pages dynamically $('#id').load('file.html'); buggy validation issues $() gets elements needs # with id $('#id').load('file.html'); html() takes place of innerHTML var output = "html code"; $('#topNav').html(output);
click here to demonstrate hiding/showing
// begin by hiding all divs of class 'notes' $('.notes').hide(); // when heading is clicked, show the first child object // using id of 'notes' just hides it at first $(".notesHead").click(function () { var obj = $(this); var nextObj = obj.next(); nextObj.slideToggle(500); });
Navigation Example with JQuery: jbwyatt navigation - create a string of html var output = '<li><a href="page.html... - insert string into an empty div set the id of the div <div id="topnav"> - get id and insert using js and html var o = documentgetElementById("topnav"); o.innerHTML = ... - get id and insert using jQuery <script src="JS/jquery-2.0.2.min.js"></script> $('#topNav').html(output); same idea, different syntax
12. Form Enhancement & Validation [jQuery] (Duckett-JJ Ch. 13)