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.
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.
<!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.js uses components, functions, and hooks.
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
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.
<!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.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.
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/
|
| ||
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.