C C T B H P N

Lecture #4 - JavaScript

Execution Model, Object Model, Syntax, Libraries

Web References
Definition
JavaScript (ES6) specification A programming language based on objects composed of key-value pairs. Keys are names, and values may be a function (pointer), a literal, or another object.
It uses a prototype model to support specialization. If a function call can't be resolved on an object, function lookup walks up the object's prototype chain.
Jim = {
  "Name":"Fawcett",
  "Job":"Instructor,
  ...
}

When a JavaScript function is called its context (a JavaScript object) is loaded into an Execution Stack. When an event fires the context of its event handler function is enqueued in an Event Message Queue. Handlers don't execute until all functions have completed. Then, its context is loaded into the Execution Stack for processing.
Books and References Eloquent JavaScript - the book
Re-intro to JavaScript - MDN
Introduction to the DOM - MDN
Tutorials Tutorial - javascript.info, Tutorial - GeeksforGeeks.org, Tutorials - dyn-web/com
References Reference - MDN, Reference - javascript-reference.info, Reference - w3shools.com, quirksmode.org
Understanding ES6 Syntax and Features - taniarascia.com
Understanding Classes, Understanding Events, How to use Object Methods
Details of the Object Model - MDN
Beginners guide to variables and datatypes
Understanding the DOM - taniarascia.com
ES6 Overview in 350 Bullet Points
You don't know JavaScript
Fetch API - replaces XMLHttpRequest,
JavaScript Templating without a Library
Transducers - Data Processing Pipelines
Building Useful Things Building a Collection Object
Technical Details JavaScript jit, Just in time compilers, Mozilla's JavaScript engine,
Execution Context, Understanding Execution, Order of execution,
Details of the object model
Memory model, Call Stack
Miscellaneous createElement, addEventListener

Content:

This lecture is an introduction to the JavaScript programming lanaguage, also called ECMAScript, or ES. It is used to provide site navigation and, in conjunction with with CSS, manage display and positioning of content, based on user actions, e.g., the menus at the top of this page. Today we will explore JavaScript structure and it's execution model. JavaScript is often cited as one of the world's most popular programming languages1. It executes in all modern browsers, and, using node.js, in server applications, as well. JavaScript programming is a fundamental, and important, part of the web developer's skill-set.
  1. tiobe index
  1. Syllabus describes topics to be covered, reading material for you to digest before coming to class, and due dates for the assigned projects.
  2. Projects: Final Project #1, Final Project #2, Final Project #3
    You will do one of these - the choice of which is yours to make - and present on the last day of classes.
    Additional Requirements
    You are expressly requested to refrain from using site editors like Wix, web.com, or other web designers. You may use any of the facilities of Visual Studio or any other text editor of your choice. This same rule applies to your lab submissions as well. For your Final Project demos you will be required to use only page links for navigation. You may host and demonstrate your labs in the built-in Visual Studio web server.
    All projects must use:
    • Asp.net core MVC - main site
    • Asp.net Web API - web service
    • Web API Client
    • SQL db storage
    • At least one static page that uses new features of HTML5, CSS3, and JavaScript6.
  3. Programming Languages:
    Programming Languages - brief history.
  4. JavaScript
    JavaScript Definition
    JavaScript (ES6) specification A programming language based on objects composed of key-value pairs. Keys are names, and values may be a function (pointer), a literal, or another object.
    It uses a prototype model to support specialization. If a function call can't be resolved on an object, function lookup walks up the object's prototype chain.
    Jim = {
      "Name":"Fawcett",
      "Job":"Instructor,
      ...
    }

    When a JavaScript function is called its context (a JavaScript object) is loaded into an Execution Stack. When an event fires the context of its event handler function is enqueued in an Event Message Queue. Handlers don't execute until all functions have completed. Then, its context is loaded into the Execution Stack for processing.
    Nice JavaScript Summary, Eloquent JavaScript - the book, Introduction to the DOM - MDN JavaScript is an interesting, quirky, aggravating language:
    • It is a prototype-based language with objects that are associative arrays.
    • Properties and methods can be added to an object at any time.
    • It is a weakly typed language that has very context dependent conversions, ususally to objects.
    • It has value types, reference types, and garbage collection.
    • Everything is either a literal (value type) or object (reference type).
    • Even functions and arrays are objects.
    • It is single-threaded, using a function context stack and event queue to order processing.
    • It's execution environment is usually a browser, but that is not always the case these days.
    • When JavaScript code fails it often does so silently, making it difficult to debug.
    • It is so malleable that it is easy to break working code.
    JavaScript Demos
    Modern JavaScript - ES6
    Interactive Demo - Image Sizer
    Build component to resize image using + and - buttons. Demo Page
    Lab #4