Professor Lisa Friedrichsen's
Computer Science YouTubes, Resources & Reference Material
New! JavaScript Terminology Playlist
- JavaScript array vs. object: why and how to use each as a data storage container
- JavaScript window, document, and console objects, the 3 big built-in objects: why are they important and how do we access their properties and methods?
- JavaScript functions, methods, and properties -- what's the difference?
JavaScript 101 Playlist
- What can JavaScript do?
- What is JavaScript? JavaScript is not Java!
- Where do I put JavaScript in HTML files? Part 1 of 2
- Where do I put JavaScript in HTML files? Part 2 of 2
- Using a button to change paragraph text
- Why document.write() is so confusing!
- Why console.log() is a JavaScript developer's best friend!
- Refactoring your code: 5 ways of doing the same thing
- Variable scope - var, let and const - Part 1 of 2
- Variable scope - var, let and const - Part 2 of 2
- Web page for GPA Calculator Examples
- JavaScript syntax, terminology (object, method, property, variable, assignment statements)
- Creating and calling functions, addEventListener method
- Arrays, for and while loops, if and switch statements
- forEach() method compared to for loop for arrays and node lists
- Debugging
- Working with the Document Object Model (DOM)
- Something for fun - an image slider and the Web page for the image slider
- Basic problem solving and debugging techniques (featuring Excel and JavaScript examples)
- Some of my favorite web development and JavaScript resources
Functions 101 Playlist
- Functions 101 - Part 1 WHY do we use functions?
- Functions 101 - Part 2 WHAT do functions look like?
- Functions 101 - Part 2b What do functions look like? (refactored)
- Functions 101 - Part 3 WHEN do functions run?
- Functions 101 - Part 4 WHERE should functions be stored?
- Functions 101 - Part 5 HOW do functions run?
Math and JavaScript Playlist
- Introduction to math operators and functions
- Numbers or strings? Using an input box on a web page
- The + operator: add or concatenate? Both!
- The = operator: "is assigned to"!!
- Order of Operations for expressions and the many uses for (parentheses)
- Function declaration, function expression, arrow function notation
- Prefix ++i and postfix i++ operators: What's the difference?
- Decimal to Binary and why 0.1+0.2 does not equal 0.3 in JavaScript
- Assignment and Comparison Operators
- Logical AND && and OR || Operators
JavaScript.info Playlist
Note: I recommend going through the YouTubes in this sequence moving between Part 1 (pure JavaScript, taught as a standalone programming language) and Part 2 (connecting your JavaScript to the browser and web page).
- Introducing javascript.info
- Part 1: An introduction: 1.1 Introduction to JavaScript
- Part 1: An introduction: 1.2 Code editors
- Part 1: An introduction: 1.3 Developer console
- Part 1: JavaScript fundamentals: 2.1 Hello, world!
- Part 1: JavaScript fundamentals: 2.2 Code structure
- Part 1: JavaScript fundamentals: 2.3 The modern mode, "use strict"
- Part 1: JavaScript fundamentals: 2.4 Variables
- Part 1: JavaScript fundamentals: 2.5 Data types
- Part 1: JavaScript fundamentals: 2.6 Type Conversions
- Part 1: JavaScript fundamentals: 2.7 Operators
- Part 2: Document: 1.1 Browser environment, specs
- Part 2: Document: 1.2 DOM tree
- Part 2: Document: 1.3 Walking the DOM
- Part 2: Document: 1.3 Walking the DOM - Exercise 3
- Part 2: Document: 1.4 Searching: getElement*, querySelector*
- REVIEW (after Part 2, 1.4)
- Part 2: Document: 1.5 Node properties: type, tag and contents
- Part 2: Document: 1.6 Attributes and properties
- Part 2: Document: 1.7 Modifying the document
- Part 2: Document: 1.8 Styles and classes
- REVIEW (after Part 2, 1.8)
- Part 1: JavaScript fundamentals: 2.8 Comparisons
- Part 1: JavaScript fundamentals: 2.9 Interaction: alert, prompt, confirm
- Part 1: JavaScript fundamentals: 2.10 Conditional operators: if, '?'
- Part 1: JavaScript fundamentals: 2.11 Logical operators
- Part 1: JavaScript fundamentals: 2.12 Loops: while and for
- Part 1: JavaScript fundamentals: 2.13 The "switch" statement (part 1)
- Part 1: JavaScript fundamentals: 2.13 The "switch" statement (part 2)
- Part 1: JavaScript fundamentals: 2.14 Functions (part 1)
- Part 1: JavaScript fundamentals: 2.14 Functions (part 2)
- Part 1: JavaScript fundamentals: 2.15 Function expressions and arrows (part 1)
- Part 1: JavaScript fundamentals: 2.15 Function expressions and arrows (part 2)
- Part 1: JavaScript fundamentals: 2.16 JavaScript specials
- Part 1: Code quality: 3.1 Debugging in Chrome
- Part 1: Code quality: 3.2 Coding Style
- Part 1: Code quality: 3.3 Comments
- Part 1: Code quality: 3.4 Ninja code
- Part 1: Objects, the basics: 4.1 Objects
- Part 1: Data types: 5.1 Methods of primitives
- Part 1: Data types: 5.2 Numbers
- Part 1: Data types: 5.3 Strings
- Part 1: Data types: 5.4 Arrays
- Part 1: Data types: 5.5 Array methods (part 1)
- Part 1: Data types: 5.5 Array methods (part 2)
- Part 2: Introduction to browser events: 2.1 Introduction to browser events
- Part 2: Introduction to browser events: 2.2 Bubbling and capturing
- Part 2: Introduction to browser events: 2.3 Event delegation
- Part 2: Introduction to browser events: 2.4 Browser default actions
- Part 2: Forms, controls: 4.1 Form properties and methods
- Part 2: Forms, controls: 4.2 Focusing: focus/blur
- Part 2: Forms, controls: 4.3 Events: change, input, cut, copy, paste
- Part 2: Forms, controls: 4.4 Forms: event and method submit
JavaScript YouYubes that relate to the JavaScript as taught @ Johnson County Community College (JCCC) from Fall 2019 - Spring 2022:
WEB 114 & WEB 124: Web Scripting: JavaScript I & II
WEB 114: JavaScript I - Final Project Information
- Your Final Project Instructions - Create a JavaScript game!
- Final Project Examples
- Creating your final project JavaScript Game part 1 of 3
- Creating your final project JavaScript Game part 2 of 3
- Creating your final project JavaScript Game part 3 of 3
WEB 124: JavaScript II Information
- Weekly Project Instruction Sheets
- JavaScript30.com projects
- Playlist for JavaScript30 YouTubes
- How to get started with JavaScript30.com
- Demo 1: JavaScript Drum Kit
- Demo 2: JavaScript + CSS Clock
- Demo 3: Update CSS Variables with JavaScript
- Final Project Information:
- Final Project Instructions
- Final Project Demo - Shopping Cart Part 1 Modifying an array of objects to create an online shopping cart
- Final Project Demo - Shopping Cart Part 2 using forEach(), createElement(), and append() to add content to a web page.
JavaScript YouYubes that relate to the Murach textbook used @ JCCC from Fall 2018 - Summer 2019:
Murach JavaScript and jQuery 3rd Edition Debrief
- Playlist for the Murach series
- Chapter 1 debrief
- Chapter 1 debrief part 2: commented code
- Chapter 2 Exercise 2-1 debrief
- Chapter 2 Exercise 2-3 debrief
JavaScript YouTubes that relate to a textbook used through Summer of 2018:
JavaScript: The Web Warrior Series, 6th Edition
Chapter 1 Introduction to JavaScript
- Examining the Chapter 1 html file
- Where do I store my JavaScript? (It can be anywhere in the html file...just like css...but...)
- Where do I store my JavaScript part 2?
- Chapter 1 Hands-On Project Debrief: objects, methods, properties, and lots of JavaScript syntax tips
- Chapter 1 Terminology Review: key html and JavaScript terminology
Chapter 2 Working with Functions, Data Types, and Operators
- Examining the Chapter 2 files Part 1 of 2: high level look at the html form tags
- Examining the Chapter 2 files Part 2 of 2: high level look at the JavaScript -- functions and event listeners
- Debriefing on Hands on Exercise 2-1: onclick event attribute vs. functions vs. event listeners
- Debriefing on Hands on Exercise 2-2: more on functions, event listeners, and variables
- Debriefing on Hands on Exercise 2-3: more on functions, event listeners, and using the element inspector to understand your html, css, and debug your JavaScript
- Debriefing on Hands on Exercise 2-4: more on functions, variables, assignment statements, and event listeners
Chapter 3 Building Arrays and Controlling Flow
- Examining the Chapter 3 files Part 1 of 3: arrays, getElementsByTagName, functions, while loop
- Examining the Chapter 3 files Part 2 of 3: More on arrays, do while loop, functions, variables
- Examining the Chapter 3 files Part 3 of 3: Yet more on arrays, if loop, if else loop, for loop, switch statements, variables, functions, event listeners
- Debriefing on Hands on Exercise 3-1: functions, getElementsByTagName, for loop, addEventListener
- Debriefing on Hands on Exercise 3-2: functions, event listeners, if statements, Modernizr library
- Debriefing on Hands on Exercise 3-3: functions, for loops, variables, arrays
- Debriefing on Hands on Exercise 3-4: functions, nested if statements, ===, i++, value property, innerHTML property
- Debriefing on Hands on Exercise 3-5: switch vs. if statements
Chapter 4 Debugging and Error Handling
- A high level look at the Chapter 4 in-chapter exercise debugging, troubleshooting, window.alert, console.log, Inspect Element
- A high level look at jslint.com
Chapter 5 Working with the Document Object Model (DOM)
- A high level look at the Chapter 5 in-chapter exercise Working with the Document Object Model (DOM) to create, delete, and reorder img content. Also use of the style property to use JavaScript to restyle content.
Chapter 6 Enhancing and Validating Forms
- A high level look at the Chapter 6 in-chapter exercise Form validation
If you like these YouTubes, please subscribe! Thank you!!
Feedback? Comments? Ideas? Write to Lisa Thank you!!