JavaScript

JavaScript Demonstrations of Api's, Applications, Games, Code Examples

**************************

JavaScript Sandbox

** JavaScript Sandbox Home Page **

**************************

JavaScript Top 160 Topics Array in an HTML Table via Codepen

*** Codepen Array in an HTML Table ***

JavaScript 30

Work in Progress

JavaScript Form Validation in Node Backend..wip

Fetch, REST, Promise

JavaScript Functions

** MDN Functions **

A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).


  Execute the function named myFunction.

  function myFunction() {
    alert("Hello World!");
  }
  myFunction()
  ;

** Do Factory Function Initialization ** | ** Do Factory Function Invoking ** | ** Do Factory Function Objects **
** Do Factory Function Objects Passing a Function as a Callback **
** JavaScript Function Call ** | ** MDN Function Call **

JavaScript Objects

JavaScript Objects Do Factory | JavaScript Objects JavaScript Info | JavaScript Objects Eloquent JavaScript
JavaScript Objects W3 | JavaScript Object MDN | ** Object Properties **

JavaScript Arrays

** MDN Array ** | ** w3 JavaScript Array Methods ** | Array Bubble Sort
Code Boxx JavaScript Arrays, Push, Concat, Unshift, Splice | MDN Array Concat | MDN Array Splice
MDN Array Unshift | MDN Array Push | MDN Array For Each
YT 8 Array Methods, filter, map, find, forEach, some, every, reduce, includes
YT Remove Duplicates in an Array | ** Array Sort Methods ** | ** Mastering JS Sort Arrays **

JavaScript Callbacks

w3 JavaScript Callback | ** JS Tuts JavaScript Callback ** | Codeburst JavaScript Callback
Free Code Camp JavaScript Callback | ** JavaScript Info JavaScript Callback ** | MDN JavaScript Callback
w3 Try It JavaScript Callback 3

Summary
Use the function keyword to declare a function
Use the functionName() to call or invoke a function to execute it.
A function implicitly returns undefined, use the return statement to explicitly specify the return value for the function.
The arguments is an object that is accessible only inside the function body. It represents the arguments of the function.
The function hoisting allows you to place the call to the function before the function declaration.

Synchronous and Asynchronous JavaScript Callbacks

w3 Asynchronous JavaScript

JavaScript Promises

JavaScript Async/Await

w3 JavaScript Async/Await | JS Async/Await JS Tuts | w3 Set Intervals

JavaScript Events and Event Handlers

w3 JavaScript Events

Eloquent JavaScript Event Handlers | MDN JavaScript Event Handlers
** Free Code Camp JavaScript Event Handlers **

Medium JavaScript Event Handlers and Event Listeners | * Medium JavaScript Events * |

JavaScript Info Bubbling and Capturing
I Love Coding Event Handler

w3 Dom Events| w3 event onmouseover| w3 onfocus
** Smashing Magazine Dom Events ** | JavaScript Info Document and resource loading

JavaScript Debugging

W3 DeBugging | MDN DeBugger | Stackify Practical Guide
Chrome DeBugging

Json Data Samplers

Awesome Json Datasets | ** Fake JSON ** | Observable JSON Placeholder | ** Go Make Things JSON Api **



  {
    "name": "John",
    "age": 31,
    "pets": [{
        "animal": "dog",
        "name": "Fido"
      },
      {
        "animal": "cat",
        "name": "Felix"
      },
      {
        "animal": "hamster",
        "name": "Lightning"
      }
    ]
  }

JavaScript Strings



var str1 = "Hello ";
var str2 = "world!";
var str3 = " Have a nice day!";
var res = str1.concat(str2, str3);

** 15 JavaScript String Functions ** | ** Edureka 20 JavaScript String Functions


Concatenate the two strings to alert "Hello World!".

  var str1 = "Hello ";
  var str2 = "World!";
  alert(str1 + str2);

** w3 Exercises JS String Methods1 ** | MDN String Slice | ** MDN Strings **
** Open Book Project Strings ** | ** JavaScript Tutorials Strings ** | ** JavaScript Tuts String Slice **

w3 Schools Exercises

w3 JavaScript Exercises

JavaScript String replace() examples


  Use the correct String method to replace the word "Hello" with the word "Welcome".

  var txt = "Hello World";
  txt = txt.
  replace
  ("Hello", "Welcome");

To Upper Case

MDN toUpperCase |


  Convert the value of txt to upper case.


  var txt = "Hello World";
  txt = 
  txt.toUpperCase()
  ;

To Lower Case

MDN toLowerCase |

RG GitHub Repos | RG GitHub Gist
** JavaScript Info ** | ** I Love Coding Resources **

JavaScript Top 50

** Do Factory ** | * TypeScript * | Fetch Api
W3 JS Reference | ES6 Basics

JavaScript Info The Modern JavaScript Tutorial Guide

JavaScript Operators

I Love Coding Operators

JavaScript Templating

** Wesbos JavaScript Template Strings ** | Medium JavaScript Templating | Ejs Templating | Handlebars

** Css-Tricks JavaScript Templating ** | UnderScore Template

Medium Vanilla JavaScript Templating | Codepen Templating with Vanilla JavaScript | Dev to lit-html Templating
** JavaScript Plain English Web Component Templates | * Extensive Overview JavaScript Templating Tools and Resources *
MDN Template Literals

JavaScript "This" Keyword

** w3schools This Definition ** | ** Codeburst This Definition ** | ** MDN This Definition **
Codepen Scratchpad

JavaScript Object Constructors

** w3 JavaScript Object | w3schools.com Object Constructors | JavaScript Info Object Constructors
MDN Object constructor

JavaScript Built-in Constructors

Medium Built-in Constructors | Dev to Guide Constructors | Stack Overflow Built-in Constructors

JavaScript Bubbling

JavaScript info Bubbling | Stack Overflow Bubbling and Capturing |

JavaScript Lexical Scope

In Plain English Lexical Scope | Medium Lexical Scope | Educative io Lexical Scope

JavaScript Type Coercion

Free Code Camp JavaScript Type Coercion

* Coder Wall *
* JavaScripting * | JavaScript Basics | Play Code io
W3 ES6 |

JavaScript Var Let Scope

** I Love Coding Variables and Scopes ** | ** I Love Coding Var Let Const **
** Var Let Const Alligator io **

API and Axios

API Random User .me | Axios 2 | * Axios on Github * | API Fruity Vice

JavaScript Template Literals

Template Literals CSS Tricks | Template Literals JavaScript Tutorials | * Template Literals Lit Html Polymer *
Template Literals Wes Bos

All Things JavaScript

Converting a JavaScript String to an Array | All Things

Git Hub ~ Git Repos ~ Git Gists

GitHub | Git Repos | GitHub Gist

JavaScript Array

** JavaScript Array Methods JavaScript Info ** | JavaScript Array MDN | JavaScript Array JavaScript Info
JavaScript Array W3 | JavaScript Array.Shift MDN | JavaScript Array.Pop
JavaScript forEach Code burst | Free Code Camp Array Methods | Learn JS Data
Flatten Arrays in Vanilla JavaScript with flat() and flatMap()
JavaScript Multidimensional Array | javascripttutorial Array |

Math.min and Math.max Apply = Invoke, Spread Syntax

** MDN Spread Syntax ** ** MDN Spread Examples ** ** MDN Spread in Array literals **

JavaScript For, Do, While Loops

JavaScript Arrow Function

Arrow Function Basics | YouTube Arrow Function Basics | Code Snippets Arrow Function

Run in Terminal cd to folder, file, node run file name

Arrow Function.js

JavaScript Object Notation (JSON)

JSON Double Quotes!! vs Single Quotes

JSON Double Quotes vs Single Quotes

Note: Syntax Rules!! JSON is double quotes "..." not single quotes '...' Key Value Pairs: {"Name": "Value"} JavaScript Object -vs- JavaScript Object Notation Differences

JavaScript Object | JavaScript Object Notation (JSON)


  
  let person = {
    "name": "Robert",
  }
console.log(person)

JSON Lint Validator

From JavaScript Object to JSON = JSON.Stringify

JSON.Stringify

From JSON back to JavaScript Object = JSON Parse

JSON Parse

JSON Data Samples

Data Sample Color Names | Json Sample Data 1 | Json Sample Data 2
Sitepoint Json Sample Data
* JSON Schema Learn * |

JSON Stringify and Parsing

JavaScript Functions

I Love Coding Cheat Sheet Pdf
** JavaScript Functions Every Possible Way ** | * JavaScript Functions JavaScript Info * | JavaScript Function Declaration
w3 JavaScript Function Call | MDN JavaScript Functions | JavaScript Tuts Call Function
Code Academy JavaScript Function Methods |

JavaScript Objects

JavaScript Objects Geeks | JavaScript Objects Info | JavaScript Object Free Code Camp
JavaScript Object Do Factory | JavaScript Object Different Ways Coder Wall

YouTube, Do Factory, Fireship, MDN, Firefox, Etc.

Frameworks and Libraries

Angular io | Angular Docs | React Js
Vue Js | TypeScript

JavaScript Reference and Resources

Javascript Console and Terminal

Dev Google Console | Firefox Console | Safari Web Inspector
JS Console | Medium JS Console | MDN Console.Log
Mac Terminal Top 20

ES Lint JavaScript Validation Linting Environment

* JS Lint * | ES Lint Org | * Vanilla JS Testing and Toolkit *

Online JavaScript Apps

JavaScript Reference

MDN | W3Schools | * JavaScript Info *

JavaScript Time Moments js

Moments js | CDN Moments js | Codepen Moments Example 1 | * Codepen Moment JS Example 2 *

Utilities

1loc Snippets

Javascript Tools

JavaScript Libraries and Frameworks

David Walsh ES6 Features

David Walsh

API

API University

Javascript Backend Frameworks Node and NPM

NodeJS | NPM js | Medium Article Backend
Beginner Node.js YouTube | Crash Course Node.js YouTube

Javascript Build/Scaffolding Tools Task Runners

Yoeman | Grunt | Gulp | Bower

JavaScript Template Literals and Template Engines

JavaScript Promises

Promises in 100 Seconds | MDN Promises Resources |

Javascript Utilities Debugging, Minify and Code Checker Tools

Javascript Testing Debugging and Performance Testing

Mocha JavaScript test Framework | Jest JavaScript test Framework | * Jasmine * | Chai Assertion Library

MEAN Stack

YouTube Channels Tutorials and Playlists

ES5

MDN JavaScript Guide | Free Code Camp ES5 changes |

ES6

ES6 Wes Bos | Prototypes Coding Train Youtube

Other Tools and Resources HTML5 CSS3 Editors IDE's

Databases Mongo DB

YouTube Mongo DB Traversy | YouTube Mongo DB Traversy Cloud Atlas

JavaScript Interview Questions

JavaScript Mock Interview 1 | JavaScript Mock Interview 2 | JavaScript Mock Interview 3 | JavaScript Interview Questions

Arrays Methods and Higher Order Functions

Array Methods w3schools | filter array method | Most Out of Arrays
array foreach method | foreach and for loop |

Study.com Lessons

** Loops in JavaScript **
splice, slice, push... | 10 Array Methods | push | Youtube Coding Train Push

Local _Sandbox JavaScript

Sandbox Array Methods| Array Methods Map and Fill| ES6 Import Export

Traversy DOM Crash Course 1 through 4 Youtube

JavaScript DOM Crash Course - Part 1 | JavaScript DOM Crash Course - Part 2 | JavaScript DOM Crash Course - Part 3 | JavaScript DOM Crash Course - Part 4

AXIOS

AXIOS Crash Course

REST Api

REST API Tutorial

MVC

* Simple MVC App in Plain JavaScript *

Express Template Engines

Express Resources Template Engines

HTML Document Object Model (DOM)

I Love Coding DOM
JavaScriptInfo DOM Tree | YouTube 1 InnerHTML | YouTube 2 InnerHTML
Geeks for Geeks DOM | YouTube textContent vs innerHTML in the JavaScript DOM | Preventing cross-site scripting attacks when using innerHTML in vanilla JavaScript

Promises

Fetch API | MDN Using Fetch | * Promise API * | * IT Next Fetch with jsonPlaceHolder *

Command Line

Learn the Command Line Code Academy | Command Line EDX

Code and Pre Tags!!


          font: { 24px ; } p { color: red; } body { background-color: #eee; }

code stuff here


          //todo.json key value pair must be in " " { "key:" "value" }

Chester the Pre and Code Tester!!!

Pre Tester

Code Tester

Coffeescript

Coffeescript Cookbook

JavaScript Snippets 1loc

1loc Snippets

Khan Academy

Processing Js

D3 JS

Hitesh Choudhary YT D3JS Practical Guide | D3JS
Medium D3JS | Chroma JS

JavaScript Applications Builder Resources

app.js, index.html, style.css

To-Do List Application Example

HTML DOM querySelector() Method

querySelector | Codepen querySelector | ** JavaScript info querySelector **
** JavaScript info querySelector Summary**

Introduction to browser events

JavaScript info Browser Events | YT Browser Events | ** Mozilla Events **

Variation 2 Basic To Do Application in Vanilla JavaScript

js, //selectors, //event listeners, //functions

** YT Dev Ed Beginner Vanilla Javascript Project Tutorial ** | Github Files for App
HTML Form Tags | Mozilla Form Tags

CSS

W3 CSS Transition | MOZ CSS Transition | CSS Tricks CSS Transition
W3 CSS Display Flex | CSS Tricks Display Flex | CSS Flex Help

Break Statement, If Else, While Loop, For Loop

W3 JS Break Statement | JS Info if else | JS Info Loops while for

Local Storage

HTML Local Storage | JS Local Storage | JS Info Local Storage

Json.Parse

Restful Json.Parse | Moz Json.parse | Logrocket Json.parse

Calculator JavaScript Application

Calculator Application

Web Dev Simplified Calculator

** Web Dev Simplified YT ** | Web Dev Simplified Github
Font Gotham Rounded | Webopedia Operand

How to use ES6 classes to organize code

Medium | BDO | Stack Overflow
Free Code Camp

How to sync JavaScript code with a UI

JavaScript Functions, Invocation, IIFE, Call, Apply

JavaScript Function Invocation | ** Mozilla First Class Functions ** | YT Self Executing Functions

Self Executing Anonymous Function and functional programming

IIFE

** Mozilla IIFE ** |

Do Factory Invoking functions with call() and apply()

Do Factory JavaScript Functions | Do Factory JavaScript Functions Invoking

Node Js and Express js

Node and Express Medium |

JavaScript Fetch Api

Digital Ocean JavaScript Fetch Api ** Json Placeholder **

Odds and Ends

MDN Definition of Mutable ** JavaScript For Loop PlayGround ** | * Higher Order Functions and Arrays * | Template Literals | JavaScript Palindromes

JT Alarm Clock Assignment

SetIntervals w3 Set intervals

Round Clock Face JavaScript


  setInterval(() => {
    d = new Date(); //object of date()
    hr = d.getHours();
    min = d.getMinutes();
    sec = d.getSeconds();
    hr_rotation = 30 * hr + min / 2; //converting current time
    min_rotation = 6 * min;
    sec_rotation = 6 * sec;
  
    hour.style.transform = `rotate(${hr_rotation}deg)`;
    minute.style.transform = `rotate(${min_rotation}deg)`;
    second.style.transform = `rotate(${sec_rotation}deg)`;
  }, 1000);

Clock Face png | Style Transform | Style Transform JavaScript
Green Sock Clock Animation |

HTML

Audio

MDN Audio | w3 Audio |

Build A Clock With JavaScript YT Web Dev Simplified

In this video we will be covering CSS position, and transform extensively. We will also use CSS variables to make the JavaScript integration much easier. By the end of this quick video you will have a fully functional clock and more importantly increased your CSS and JavaScript skills significantly.

** Web Dev Simplified Variation ** | ** Codepen Web Dev Simplified Variation **

In this video lesson, you will learn to develop Alarm Clock in JS using datetime input control, setTimeout method and Audio Object.

** Verkko Net YT Alarm Clock ** CSS Animation Clock

World Clocks from CSS Animations or ???

Analog Clock Development Tutorial JavaScript CSS

** YT ** Analog Clock Development Tutorial JavaScript CSS

Bubble Sort

YT Quokka Currency App

YT Currency App Development Advanced Topics Async/Await/Promises

Robert L. Gorman ~ Digital Marketing Services

Website Development ~ Email Marketing ~ Digital Marketing

5 Stars Key Stuff

Daily

Code Editors

JavaScript Fundamentals

TypeScript

REST Api

innerHTML

REST API Endpoint

HTML DOM

DOM

Codepen

ADVANCED

Regex

Json Server

JavaScript Apps Projects

Web Components

Stencil js

React and JSX

Code Grepper

Mozilla (MDN)

Json to Table Data Table

Interview Questions

MDN Reference

JavaScript Info

Do Factory

JavaScript 30

Object Oriented Programming

JavaScript Libraries

Test Driven Development

Dev to

JavaScript Tutorials

JavaScript Cheat Sheets and Guides

VS Code Extensions

JS Objects

JS Array

W3 Array Reference

Miscellaneous

JavaScript Date Time

JavaScript

JavaScript Demonstrations of Api's, Applications, Games, Code Examples

**************************

JavaScript Sandbox

**************************

JavaScript Top 160 Topics Array in an HTML Table via Codepen

JavaScript 30

Work in Progress

Fetch, REST, Promise

JSON

JSON Data

Data Fetch Promise Synch Asynch

Clocks

JavaScript Functions

JavaScript Objects

JavaScript Arrays

JavaScript Callbacks

Synchronous and Asynchronous JavaScript Callbacks

JavaScript Promises

JavaScript Async/Await

JavaScript Events and Event Handlers

JavaScript Debugging

Json Data Samplers

JavaScript Strings

w3 Schools Exercises

JavaScript Top 50

JavaScript Info The Modern JavaScript Tutorial Guide

JavaScript Operators

JavaScript Templating

JavaScript "This" Keyword

JavaScript Object Constructors

JavaScript Built-in Constructors

JavaScript Bubbling

JavaScript Lexical Scope

JavaScript Type Coercion

JavaScript Var Let Scope

API and Axios

JavaScript Template Literals

** All Things JavaScript **

Git Hub ~ Git Repos ~ Git Gists

All Things JavaScript