Yvonne V. Richardson
  • Home
  • Portfolio
    • Project Management
    • Presentations and Lectures
    • Code Samples >
      • Android Java Resume Application
      • Student-Oriented Code Samples
    • Articles >
      • Which JavaScript is It?
      • Free Software
    • Documentation
    • UX and Game Graphics >
      • Making Believable Graphics
  • Web Development
    • Simple Sites
    • Web Sites
    • The Cloud
  • Educational Technology
    • Online Education
    • Online Shared Meeting Spaces
    • Presentation: The Unit Circle
    • Technical ToolBox
    • Mathematics 2 >
      • Math 2 Goals and Objectives
      • Math 2 Course Schedule
      • Math 2 Scoring Rubrics
      • Math 2 Blog
      • Math 2.4 Probability >
        • Math 2.4 Objective A
        • Math 2.4 Objective C
      • Math 2.4 Evaluation
      • Math 2 Thanks You
      • Contact Us
    • Productivity Tools
  • Colleges
  • Links
  • Contact Us
  • Web Development 1

​​Which JavaScript is It?

A recent survey indicated that Node.js is downloaded more often than Angular.js, and Angular is downloaded more often than React.js. Knowing a little about each one increases understanding of the worldwide JavaScript ecosystem.

JavaScript
JavaScript is a programming, or scripting, language that focuses on formatting interactive client-side Web pages. It is mostly abbreviated as JS. This high-level programming language uses the concept of Object-oriented-programming (OOP), but it is based on prototype inheritance.

Node.js
Node.js is not a programming language. Node.js is a cross-platform, open-source JavaScript environment that asynchronously runs JavaScript on the server-side. This fast, lightweight runtime allows JavaScript code to run outside the browser. It can generate dynamic page content and collect form data, in addition to manipulating server files. It can also add, delete, and modify database data. The Node.js package ecosystem is the largest set of open source libraries in the world.

Libraries contain modules, which are blocks of code that are related by their functionality. They communicate with applications in the same manner as any other object-oriented code. Applications can be a single file or a collection of files and folders. Node.js includes three types of modules:  core, local, and third-party.
  • Core Modules
    Core modules include the minimum functionalities into your app. Node.js core or NPM modules are imported by the require() function. For example, the following code allows your program to use the http server.
    var http = require('http');

  • Local Modules
    Local modules are created locally in your Node.js application. They organize the functionalities of your application into separate files and folders.

  • Third Party Modules
    These modules are packaged and distributed via the Node Package Manager (NPM), for the Node.js community. Modules can be installed in the project folder or globally. Some of the popular third-party modules are mongoose, express, angular, and react.

Angular.js
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. Angular has no keywords of its own, because it is entirely based on HTML and JavaScript. Instead, it has directives that extend HTML by binding to data with expressions that are enclosed in double curly brackets. Angular supports separation of concerns by using the Model-View-Controller (MVC) design pattern.
  • Model
    The model is wherever your data is stored, in general. The Angular model is not the data, but the object tree that is built from that data.
  • View
    The view is the HTML template for every component. It is the outcome of the component, not a “thing” with which the component interacts.
  • Controller
    The controller is the component that contains the logic for each part of the app.

In other words, the controller operates on the model to create and/or display the view, although Angular only has the controller and the model. For example, the body of the following HTML page is an Angular application. It uses a model, but is not complex enough to require a controller.
​
<!DOCTYPE html>
<html >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
    <input type="text" ng-model="name" />
    <div>
       Hello {{name}}
    </div>
</body>
</html>


React.js
React is a frontend framework that creates and manipulates a virtual DOM in memory, previous to making the changes in the browser DOM. The two primary pieces that are imported to use it are the following.
  • React -  the JavaScript library that is used to define and create the elements in a React application.
  • ReactDOM - the JavaScript library that allows React to interact with the DOM.

React code can be initially authored directly in HTML, but a React environment must be created for production environments. This environment is primarily npm and Node.js, and the command line will generate an empty application in the specified directory. When you use the command npm start, an example React app will display in the browser. Then, you can modify files in the app directory to build the Web page.

React.js uses components, functions, and hooks.
  • Components
    Components are independent, reusable bits of code that are used like JavaScript functions.
  • Functions
    Functions are written and behave like normal JavaScript functions. Their value is returned by name for use in the DOM.
  • Hooks
    Hooks allow function components to access state and other React features. Although Hooks are intended to replace class components, there are no plans to remove classes and class components from React.

The following is sample code that uses the ReactDOM component to display information that is generated in a function in a React app.

function WhatGoesWhere() {
  return <p>This is Tab A.</p>;
}
<div id="slotB"></div>
ReactDOM.render(<WhatGoesWhere />, document.querySelector("#slotB"));


Summary
A familiarity with JavaScript makes it easy to learn the other environments and frameworks. Object-oriented development techniques help Web developers learn and use Node.js. A little more study will allow you to master Angular.js. React has a different  orientation because of its reliance on the Document Object Model, but it still allows you to make robust Web sites. In a short time, you will be able to author JavaScript functions in any of these frameworks, and use the Angular directives as if they were JavaScript functions from any library.

References
https://angular.io/guide/built-in-directives
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference​
https://flaviocopes.com/javascript-reserved-words/
https://reactjs.org/docs/react-dom.html
https://www.framer.com/blog/posts/react-vs-vanilla-js/
https://www.geeksforgeeks.org/difference-between-node-js-and-javascript/
https://www.geeksforgeeks.org/node-js-modules/
https://www.konstantinfo.com/blog/angularjs-vs-nodejs-vs-reactjs/
https://www.quora.com/What-specifically-are-the-model-view-and-controller-in-Angular-5
https://www.tutorialsteacher.com/angularjs/angularjs-tutorials
https://www.tutorialsteacher.com/nodejs/nodejs-modules
https://www.w3schools.com/angular/angular_directives.asp
https://www.w3schools.com/jsref/​
JavaScript Comparison.pptx
File Size: 2015 kb
File Type: pptx
Download File


WEEBLY.COM

In 2007, Weebly was named one of TIME Magazine’s 50 Best Websites of the year. In 2011, Business Insider included Weebly in its "15 Cool New Apps That Are Crushing It On Chrome" list. Weebly provides its customers with easy, intuitive ways to rapidly develop a web presence. The drag & drop website builder uses content elements to reduce the dependence on coding. Web designers can also add content to predefined Web sites.
Some presentations contain images that were included with purchased software.
 
Copyright 2012, 2018, 2021 Yvonne V. Richardson