Fig369 / Cbc14

Folder for each week with files created and Homework assignments submitted

Week 1

• Introductions
• What is HTML?
• What is CSS?
• What is Javascript?
• How is the DOM used?
• What is OOP?
• What is Node?
• What is SQL?
• What is Express.js?
• What is NPM?
• Why is HTML important?
• Why is CSS important?
• Why is the DOM important?
• Why is Javascript important?

Week 2

HTML

• HTML Structure
• HTML typography
• HTML links
• HTML lists
• HTML media
• HTML tables
• HTML ids & classes
• HTML forms
• HTML divs & spans
• Block vs Inline Elements
• HTML5

CSS

• Selectors { Property: Value's}
• CSS implementation
• CSS colors
• CSS units (Absolute & Relative)
• CSS fonts
• CSS height & width
• CSS borders
• CSS backgrounds
• CSS gradients
• Developer Tools
• Box Models
• CSS margin & padding
• CSS alignment
• CSS floats
• CSS display
• CSS positioning

Review

Command Line?

Github?

VS Code?

Markdown?

HTML?

CSS?

Week 3

• CSS animation
• CSS Pseudo elements and classes

week 4

Javascript Basics

• What is Javascript?
• Why Javascript?
• Javascript in the browser
• How to implement
• • Internal
• • External
• • • Closing Body tag
• • • Defer
• Comments
• • Inline Comments
• • Block Comments
• • Javadoc Comments
• • Trailing Comments
• Properties
• Methods
• Parameters/arguments
• Execution from the console
• Variables
• Data Types
• Type Conversion
• Javascript Math
• Javascript Arrays
• Working with Strings
• Javascript Objects
• Javascript Dates
• Javascript Conditional Statements
• Javascript Switch Statements
• Javascript Functions
• Javascript Scope
• Javascript Loops
• Javascript iteration
• Script flow & style

Why do I care?

• Javascript is the most popular programming language in web development.
• Different types of data are used for different purposes. Understanding the different types and how to convert them is vital to programming in Javascript.
• Variables store data values.
• The math object is useful for performing mathematical tasks on numbers.
• Arrays are ways to store a collection of items under a single variable name.
• Knowing how to work with strings is important for working with text data.

What do I need?

• VS Code
• W3Schools

Week 5

Javascript Part Duex

Javascript debugging

• Console.log( ) method
• Debugger keyword
• Breakpoints
• Stepover
• Resume
• Watch
• Call Stack
• Editing with chrome dev tools

Javascript DOM

• Document Object Model
• • Javascript can be used to read, write, and update the HTML document Object oriented representation
• Window object
• Document object
• HTML collection
• Node list
• • A collection of document nodes (element nodes, attribute nodes, and text nodes).
• Array.from( )
• Document.all (deprecated)
• Document.head
• Document.body
• Document.getElementById( )
• Document.getElementsByClassName( )
• Document.querySelector( )
• Document.querySelectorAll( )
• Chaining selectors together
• $.childNodes
• $.children
• Children of children
• $.firstChild
• $.firstElementChild
• $.lastChild
• $.lastElementChild
• $.childElementCount
• $.parentNode
• $.parentElement
• • Get parents of parents
• $.nextSibling
• $.nextElementSibling
• • Get siblings of siblings
• $.previousSibling
• $.previousElementSibling
• document.createElement( {ele} )
• $.className
• $.id
• $.setAttribute( {attr}, {value} )
• $.getAttribute( {attr} )
• $.removeAttribute( {attr} )
• $.hasAttribute( {attr} )
• $.appendChild( )
• $.createTextNode( )
• $.replaceChild( {old}, {new} )
• $.remove( )
• $.classList
• • .add( )
• • .remove( )
• • .toggle( )
• .textContent
• .innerHTML
• .outerHTML
• .value
• .style

Javascript Events

• $.addEventListener( {event}, callback( ) )
• The event object
• e.preventDefault( )
• Passing a named function vs anonymous function
• Event object target property
• Mouse events
• • Click
• • Dblclick
• • Mousedown
• • Mouseup
• • Mouseenter
• • Mouseleave
• • Mouseover
• • Mouseout
• • Mouseover & mouseout vs mouseenter & mouseleave
• • Mousemove
• Clearing inputs
• • More events
• • Submit
• • Keydown
• • Keyup
• • Keypress
• • Focus
• • Blur
• • Cut
• • Paste
• • Input
• • Change

Event bubbling & delegation

• What is bubbling?
• e.stopPropagation( )
• What is delegation?

Regular Expressions

• Define a pattern
• $pattern.exec( )
• $pattern.test( )
• $string.match( )
• $string.search( )
• $string.replace( )
• Regex previewer extension
• Flags
• • i
• • g
• Metacharacters
• • ^
• • $
• • .
• • ?
• • \
• Character Sets
• • [ ]
• • [^]
• • [$ - $]
• • • A-Z
• • • a-z
• • • 0-9
• Quantifiers
• • ${min}
• • ${min, max}
• • ${min, }
• Word character sets
• • \w
• • \W
• • \d
• • \D
• • \s
• • \S
• • \b

HTML validation

• Required
• Minlength & maxlength
• Min & max
• Type
• Pattern
• Invalid event & css pseudo selector
• Valid css pseudo selector
• Required css pseudo selector
• • When present, it specifies that an input field must be filled out before submitting the form.

Advanced array methods

• .sort( )
• .find( )
• .map( )
• .reduce( )
• .filter( )

Javascript timing

• setTimeout( {function}, {time in milliseconds} )
• setInterval( {function}, {time in milliseconds} )
• clearTimeout( timeVar )
• clearInterval( timeVar )

JSON

• JavaScript Object Notation
• { “Key” : “value” }
• JSON.parse( { json string } )
• JSON.stringify( { object } )

Javascript local & session storage

• What is local storage?
• What is session storage?
• localStorage.setItem(“key”, “value”)
• sessionStorage.setItem(“key”, “value”)
• localStorage.removeItem(“key”)
• localStorage.getItem(“key”)
• localStorage.clear( )

Why do I care?

• Debugging tools help developers find and fix errors in a program before releasing it to the public.
• Javascript can be used to read, write, and update the HTML document.
• Javascript gives us a way to listen and react to "things" that happen to HTML elements.
• Understanding bubbling and delegation is important because you have to be aware of how event handlers travel through elements and how to control that.
• Regular expressions are used for pattern matching and validation
• Some kinds of validation can be done using HTML and CSS.
• Javascript timing is an important concept. You can use the timing event to do many things (e.g., displaying an alert box a few seconds after a button was clicked).
• JSON makes it possible to store JavaScript objects as text
• Understanding the difference between local and session storage is very important. Local storage is retained indefinitely. Session storage is lost once the session is ended (e.g., closing the browser).

Week 6

“Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family.” -Kofi Annan

Even more Javascript

ES6

• Let & const
• Let vs var
• Template literals
• Arrow functions
• Rest operator
• Spread operator
• Object destructuring
• Ternary operator

Javascript this

• What is this?
• This is the object executing the current function/method
• The “new” keyword
• This in an arrow function is bound to the previous this
• Call
• Bind
• Apply

Javascript OOP

• What is object oriented programming?
• ES5 syntax
• Class keyword
• Constructor function
• Instantiation
• An instance of this class.
• Static methods

Javascript inheritance

• What is inheritance?
• Extends keyword
• super( ) constructor
• super.method( )

Asynchronous Javascript

• What is synchronous Javascript?
• What is asynchronous?
• Callbacks
• Callback hell
• Promises
• • Promise object
• • .then( )
• • .catch( )
• Async/Await

AJAX

• Asynchronous Javascript And XML
• JSON vs XML
• No page reload/refresh
• Get, post, put, & delete
• HTTP statuses
• • 200
• • 403 & 404
• • 500
• Xhr.open( “ $method “, “ location “, $asyncBool )
• Xhr.onreadystatechange
• • readyState values
• Xhr.onload
• Xhr.onprogress
• Xhr.onerror
• Xhr.send( )
• this.responseText

Fetch API

• fetch( $resource, [ $init ] )
• Promise based
• Init options
• • Method
• • Mode
• • Headers
• • • Content-Type
• • • Authorization

Try & Catch

• Try
• • The try statement defines the code block to run (to try).
• Catch
• • Error parameter
• • The catch statement defines a code block to handle any error.
• Throw
• • The throw statement defines a custom error.
• finally
• • The finally statement defines a code block to run regardless of the result.

Typescript

• What is Typescript?
• Superset of Javascript
• Compiles to vanilla Javascript
• Types
• • String
• • Number
• • Boolean
• • Array
• • Any: A type that disables type checking and effectively allows all types to be used.
• • Void: The type void can be used to indicate a function doesn't return any value.
• • Null
• • Tuple
• • Enum
• • Generics
• Automating compiling
• Watch multiple files
• Type erasure and error behavior
• Defining a string
• Defining a number
• Defining a boolean
• Defining an any
• Defining an array
• • dataType[ ]
• • Array
• Tuple
• Any data type after initial pattern
• Defining a void
• Defining parameter types
• • Parameters are values or arguments passed to a function.
• Defining return types
• • The value we want to return from the function.
• ? optional parameter
• Void return type
• | union typing
• Custom class/interface typing
• Interface keyword
• Implements keyword
• Duck typing
• Generics
• • < $ >
• • extends
• Enum
• • Can only be number values
• • Assigning values

Typescript encapsulation

• What is encapsulation?

• Getters & setters

• Access modifiers

• Public

• • Can be accessed anywhere without restrictions.

• Private

• • Ensures that class members are visible only to that class and are not accessible outside the containing class.

• Protected

• • similar to the private access modifier, except that protected members can be accessed using their deriving classes.

• Readonly

  Typescript modules

  • What are typescript modules?

• Export keyword

• Import keyword

• • Import { thing } from “ ./relative_path “
• • The import keyword is used to use the declared module in another file.

Why do I care?

• ECMAScript is the scripting language that forms the basis of JavaScript.
• Refers to an object (this current object).
• We can use object oriented programming to simulate real world object.
• Inheritance allows you to reuse properties and methods of an existing class when you create a new class.
• Asynchronous programming is a technique that enables your program to start a potentially long-running task, and then rather than having to wait until that task has finished, to be able to continue to be responsive to other events while the task runs. Once the task is completed, your program is presented with the result.
• AJAX can be used for interactive communication with an XML file. XML (Extensible Markup Language): A markup language similar to HTML but without predefined tags to use. With XML, you create your own tags instead.
• The Fetch API provides an interface for fetching resources (including across the network).
• Try statement: Used on a block of code that is most likely to cause an exception.
• Catch statement: Catches the exception that was thrown in the try statement.
• It is a superset of JavaScript and adds additional syntax to JavaScript.
• Used to pack data and functions into one component. Allows you to determine how the data and functions should be accessed (e.g., read-only).
• Polymorphism allows you to perform a single action in different forms. Example: using a method name withdrawal() to withdraw from a bank account digitally or physically.