Marcus  Flatley

Marcus Flatley

1603346850

An Introduction to Computer Vision in JavaScript using OpenCV.js

Introduction

OpenCV, or Open Source Computer Vision Library, is a powerful library used for image processing and image recognition. The library has a massive community and has been used extensively in many fields, from face detection to interactive art. It was first built in C++, but bindings have been created for different languages, such as Python and Java. It is even available in JavaScript as OpenCV.js, which is what we’ll be using for this tutorial.

In this project, we will create a webpage where a user can upload an image in order to detect all the circles contained in it. We will highlight the circles with a black outline, and the user will be able to download the modified image.

The code for this project is available in this GitHub repo.

Prerequisites

To complete this tutorial, you will need to pull in the OpenCV.js library. The 3.3.1 version is available here:

https://docs.opencv.org/3.3.1/opencv.js

Save this file locally as opencv.js in a place where you can easily locate it.

Step 1 — Setting Up the Project

To get started, you will first need to create a space for your project. Create a directory named opencvjs-project:

mkdir opencvjs-project

Move your local copy of opencv.js to this directory.

Next, add an index.html file with the following template:

<!DOCTYPE html>
<html>
<head>
  <title>OpenCV.js</title>
</head>
<body>

  <!-- Our HTML will go here-->

  <script type="text/javascript">
    // Our JavaScript code will go here
  </script>

</body>
</html>

In addition to the existing empty <script> tag in this file, add a new <script> tag which references the local opencv.js file. The script is quite large and takes a bit of time to load, so it is better load it asynchronously. This can be done by adding async to the <script> tag:

<script type="text/javascript">
  // Our JavaScript code will go here
</script>
<script async src="opencv.js" type="text/javascript"></script>

As OpenCV.js may not be ready immediately due to the file size, we can provide a better user experience by showing that the content is being loaded. We can add a loading spinner to the page (credit to Sampson on StackOverflow).

First, add a <div> element <body>:

<body>

  <!-- Our HTML will go here-->
  <div class="modal"></div>

  <script type="text/javascript">
    // Our JavaScript code will go here
  </script>
  <script async src="opencv.js" type="text/javascript"></script>

</body>

Next, add the following CSS into a separate <style> tag in the <head> of index.html. The spinner is invisible by default (thanks to display: none;):

/* display loading gif and hide webpage */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8)
                url('http://i.stack.imgur.com/FhHRx.gif')
                50% 50%
                no-repeat;
}

/* prevent scrollbar from display during load */
body.loading {
    overflow: hidden;
}

/* display the modal when loading class is added to body */
body.loading .modal {
    display: block;
}

To show the loading gif, we can add the "loading" class to the body. Add the following to the empty <script>.

document.body.classList.add('loading');

When OpenCV.js loads, we’ll want to hide the loading gif. Modify the <script> tag which references the local opencv.js file to add an onload event listener:

<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>

Then add onOpenCvReady to the other <script> tag to handle removing the "loading" class:

index.html

// previous code is here

function onOpenCvReady() {
  document.body.classList.remove('loading');
}

Open the HTML page in your browser and check that OpenCV.js loads as expected.

Note: Using your browser’s developer tools, you should verify that there are no error messages in the Console tab and that the Network tab shows the opencv.js file being referenced properly. You will be periodically refreshing this page in your browser to view your latest changes.

Now that you’ve set up the project, you’re ready to build the image upload functionality.

Step 2 — Uploading the Image

To create the upload functionality, start by adding in an <input> element to index.html:

<input type="file" id="fileInput" name="file" />

If we just want to display the source image, we’ll also need to add an <img> element and an event listener, which responds to change on the <input> element. Copy the following tag and place it under the <input> tag:

<img id="imageSrc" alt="No Image" />

Get both the <img> element and the <input> element using their id values:

// previous code is here

let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');

Now, add the event listener, which triggers when the <input> changes (i.e., when a file is uploaded). From the change event, it’s possible to access the uploaded file (event.target.files[0]), and convert it into a URL using URL.createObjectURL). The image’s src attribute can be updated to this URL:

// previous code is here

inputElement.onchange = function() {
  imgElement.src = URL.createObjectURL(event.target.files[0]);
};

Screenshot of  image upload interface with the uploaded image displayed to its right

Next to the original image, we can display a second image indicating the detected circles. The image will be displayed with a <canvas> element, which is used for drawing graphics with JavaScript:

<canvas id="imageCanvas"></canvas>

We can add another event listener which updates the <canvas> with the uploaded image:

// previous code is here

imgElement.onload = function() {
  let image = cv.imread(imgElement);
  cv.imshow('imageCanvas', image);
  image.delete();
};

screenshot of the original image and a duplicate displayed in a canvas to its right

In this step, you’ve set up the image upload and display functionality. In the next step, you’ll explore how to use OpenCV to detect circles.

Step 3 — Detecting Circles

This is where the power of OpenCV is evident, as detecting circles is a built-in task. We want to find the circles when the user clicks a button, so we’ll need to add the button and an event listener:

<button type="button" id="circlesButton" class="btn btn-primary">Circle Detection</button>
// previous code is here

document.getElementById('circlesButton').onclick = function() {
  // circle detection code
};

Depending on the image, circle detection may take a while, so it is a good idea to disable the button to prevent the user from hitting it multiple times. It could also be useful to show a loading spinner on the button. We can reuse the loading gif from the initial script load:

// previous code is here

document.getElementById('circlesButton').onclick = function() {
  this.disabled = true;
  document.body.classList.add('loading');

  // circle detection code

  this.disabled = false;
  document.body.classList.remove('loading');
};

The first step to detecting the circles is reading the image from the <canvas>.

In OpenCV, images are stored and manipulated as Mat objects. These are essentially matrices that hold values for each pixel in the image.

For our circle detection, we’re going to need three Mat objects:

  • srcMat - Holds the source image (from which circles are detected)
  • circlesMat - Stores the circles we detect
  • displayMatOne - Displays to the user (on which we will draw our highlighted circles)

For the final Mat, we can make a copy of the first using the clone function:

// circle detection code
let srcMat = cv.imread('imageCanvas');
let displayMat = srcMat.clone();
let circlesMat = new cv.Mat();

The srcMat needs to be converted to grayscale. This makes circle detection faster by simplifying the image. We can use cvtColor function to do this.

This function needs:

  • the source Mat (srcMat)
  • the destination Mat (in this case, the source and the destination Mat will be the same srcMat)
  • a value which refers to the color conversion. cv.COLOR_RGBA2GRAY is the constant for grayscale.
cv.cvtColor(srcMat, srcMat, cv.COLOR_RGBA2GRAY);

The cvtColor function, like other OpenCV.js functions, accepts more parameters. These are not required, so they will be set to the default. You can refer to the documentation for better customization.

Once the image is converted to grayscale, it’s possible to use the HoughCircles function to detect the circles.

This function needs:

  • a source Mat from where it’ll find the circles (srcMat)
  • a destination Mat where it’ll store the circles (circlesMat)
  • the method to detect circles (cv.HOUGH_GRADIENT)
  • the inverse ratio of the accumulator resolution (1)
  • the minimum distance between the center point of circles (45)

There are more parameters, thresholds for the algorithm (75 and 40), which can be played with to improve accuracy for your images.

It is also possible to limit the range of the circles you want to detect by setting a minimum (0) and maximum radius (0).

cv.HoughCircles(srcMat, circlesMat, cv.HOUGH_GRADIENT, 1, 45, 75, 40, 0, 0);

Now, we should have a Mat object with the circles detected in it.

Next, we’ll draw the circles in our <canvas>.

#opencv #javascript #machine-learning #programming #developer

What is GEEK

Buddha Community

An Introduction to Computer Vision in JavaScript using OpenCV.js

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

  • babashka >= 0.4.0
  • Clojure CLI >= 1.10.3.933
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Computer Vision using Mediapipe

Computer vision can be defined as a field of artificial intelligence that trains computers to interpret and understand the visual world. Using digital images from cameras and videos and deep learning models, machines can accurately identify and classify objects and then react to what they “see.”

Computer vision is an interdisciplinary scientific field that deals with how computers can gain high-level understanding from digital images or videos.

In today’s world computer vision is very useful in many fields such as — :

*_ Inventory management — : _**In the case of inventory management, the applications can be in the field of security camera image analysis where a computer vision algorithm can generate a very accurate estimate of the items available in the store. Another field can be Analyzing the use of shelf space to identify suboptimal configurations.

* **Manufacturing — : **In the Field of manufacturing Computer vision can help in **predictive maintenance **of the machines.

*** Healthcare — : In the field of healthcare computer Vision can be used in medical image analysis.** Images from CT scans and X-rays are analyzed to find anomalies such as tumors or search for signs of neurological illnesses.

* **Autonomous vehicles — : **The field of computer vision plays a central role in the domain of autonomous vehicles since it allows them to perceive and understand the environment around them in order to operate correctly. One of the most exciting challenges in computer vision is object detection in images and videos. This involves locating a varying number of objects and the ability to classify them, in order to distinguish if an object is a traffic light, a car, or a person, as in the video below.

#computer-vision #opencv #mediapipe #anaconda-navigator #python #computer vision using mediapipe

Marcus  Flatley

Marcus Flatley

1603346850

An Introduction to Computer Vision in JavaScript using OpenCV.js

Introduction

OpenCV, or Open Source Computer Vision Library, is a powerful library used for image processing and image recognition. The library has a massive community and has been used extensively in many fields, from face detection to interactive art. It was first built in C++, but bindings have been created for different languages, such as Python and Java. It is even available in JavaScript as OpenCV.js, which is what we’ll be using for this tutorial.

In this project, we will create a webpage where a user can upload an image in order to detect all the circles contained in it. We will highlight the circles with a black outline, and the user will be able to download the modified image.

The code for this project is available in this GitHub repo.

Prerequisites

To complete this tutorial, you will need to pull in the OpenCV.js library. The 3.3.1 version is available here:

https://docs.opencv.org/3.3.1/opencv.js

Save this file locally as opencv.js in a place where you can easily locate it.

Step 1 — Setting Up the Project

To get started, you will first need to create a space for your project. Create a directory named opencvjs-project:

mkdir opencvjs-project

Move your local copy of opencv.js to this directory.

Next, add an index.html file with the following template:

<!DOCTYPE html>
<html>
<head>
  <title>OpenCV.js</title>
</head>
<body>

  <!-- Our HTML will go here-->

  <script type="text/javascript">
    // Our JavaScript code will go here
  </script>

</body>
</html>

In addition to the existing empty <script> tag in this file, add a new <script> tag which references the local opencv.js file. The script is quite large and takes a bit of time to load, so it is better load it asynchronously. This can be done by adding async to the <script> tag:

<script type="text/javascript">
  // Our JavaScript code will go here
</script>
<script async src="opencv.js" type="text/javascript"></script>

As OpenCV.js may not be ready immediately due to the file size, we can provide a better user experience by showing that the content is being loaded. We can add a loading spinner to the page (credit to Sampson on StackOverflow).

First, add a <div> element <body>:

<body>

  <!-- Our HTML will go here-->
  <div class="modal"></div>

  <script type="text/javascript">
    // Our JavaScript code will go here
  </script>
  <script async src="opencv.js" type="text/javascript"></script>

</body>

Next, add the following CSS into a separate <style> tag in the <head> of index.html. The spinner is invisible by default (thanks to display: none;):

/* display loading gif and hide webpage */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8)
                url('http://i.stack.imgur.com/FhHRx.gif')
                50% 50%
                no-repeat;
}

/* prevent scrollbar from display during load */
body.loading {
    overflow: hidden;
}

/* display the modal when loading class is added to body */
body.loading .modal {
    display: block;
}

To show the loading gif, we can add the "loading" class to the body. Add the following to the empty <script>.

document.body.classList.add('loading');

When OpenCV.js loads, we’ll want to hide the loading gif. Modify the <script> tag which references the local opencv.js file to add an onload event listener:

<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>

Then add onOpenCvReady to the other <script> tag to handle removing the "loading" class:

index.html

// previous code is here

function onOpenCvReady() {
  document.body.classList.remove('loading');
}

Open the HTML page in your browser and check that OpenCV.js loads as expected.

Note: Using your browser’s developer tools, you should verify that there are no error messages in the Console tab and that the Network tab shows the opencv.js file being referenced properly. You will be periodically refreshing this page in your browser to view your latest changes.

Now that you’ve set up the project, you’re ready to build the image upload functionality.

Step 2 — Uploading the Image

To create the upload functionality, start by adding in an <input> element to index.html:

<input type="file" id="fileInput" name="file" />

If we just want to display the source image, we’ll also need to add an <img> element and an event listener, which responds to change on the <input> element. Copy the following tag and place it under the <input> tag:

<img id="imageSrc" alt="No Image" />

Get both the <img> element and the <input> element using their id values:

// previous code is here

let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');

Now, add the event listener, which triggers when the <input> changes (i.e., when a file is uploaded). From the change event, it’s possible to access the uploaded file (event.target.files[0]), and convert it into a URL using URL.createObjectURL). The image’s src attribute can be updated to this URL:

// previous code is here

inputElement.onchange = function() {
  imgElement.src = URL.createObjectURL(event.target.files[0]);
};

Screenshot of  image upload interface with the uploaded image displayed to its right

Next to the original image, we can display a second image indicating the detected circles. The image will be displayed with a <canvas> element, which is used for drawing graphics with JavaScript:

<canvas id="imageCanvas"></canvas>

We can add another event listener which updates the <canvas> with the uploaded image:

// previous code is here

imgElement.onload = function() {
  let image = cv.imread(imgElement);
  cv.imshow('imageCanvas', image);
  image.delete();
};

screenshot of the original image and a duplicate displayed in a canvas to its right

In this step, you’ve set up the image upload and display functionality. In the next step, you’ll explore how to use OpenCV to detect circles.

Step 3 — Detecting Circles

This is where the power of OpenCV is evident, as detecting circles is a built-in task. We want to find the circles when the user clicks a button, so we’ll need to add the button and an event listener:

<button type="button" id="circlesButton" class="btn btn-primary">Circle Detection</button>
// previous code is here

document.getElementById('circlesButton').onclick = function() {
  // circle detection code
};

Depending on the image, circle detection may take a while, so it is a good idea to disable the button to prevent the user from hitting it multiple times. It could also be useful to show a loading spinner on the button. We can reuse the loading gif from the initial script load:

// previous code is here

document.getElementById('circlesButton').onclick = function() {
  this.disabled = true;
  document.body.classList.add('loading');

  // circle detection code

  this.disabled = false;
  document.body.classList.remove('loading');
};

The first step to detecting the circles is reading the image from the <canvas>.

In OpenCV, images are stored and manipulated as Mat objects. These are essentially matrices that hold values for each pixel in the image.

For our circle detection, we’re going to need three Mat objects:

  • srcMat - Holds the source image (from which circles are detected)
  • circlesMat - Stores the circles we detect
  • displayMatOne - Displays to the user (on which we will draw our highlighted circles)

For the final Mat, we can make a copy of the first using the clone function:

// circle detection code
let srcMat = cv.imread('imageCanvas');
let displayMat = srcMat.clone();
let circlesMat = new cv.Mat();

The srcMat needs to be converted to grayscale. This makes circle detection faster by simplifying the image. We can use cvtColor function to do this.

This function needs:

  • the source Mat (srcMat)
  • the destination Mat (in this case, the source and the destination Mat will be the same srcMat)
  • a value which refers to the color conversion. cv.COLOR_RGBA2GRAY is the constant for grayscale.
cv.cvtColor(srcMat, srcMat, cv.COLOR_RGBA2GRAY);

The cvtColor function, like other OpenCV.js functions, accepts more parameters. These are not required, so they will be set to the default. You can refer to the documentation for better customization.

Once the image is converted to grayscale, it’s possible to use the HoughCircles function to detect the circles.

This function needs:

  • a source Mat from where it’ll find the circles (srcMat)
  • a destination Mat where it’ll store the circles (circlesMat)
  • the method to detect circles (cv.HOUGH_GRADIENT)
  • the inverse ratio of the accumulator resolution (1)
  • the minimum distance between the center point of circles (45)

There are more parameters, thresholds for the algorithm (75 and 40), which can be played with to improve accuracy for your images.

It is also possible to limit the range of the circles you want to detect by setting a minimum (0) and maximum radius (0).

cv.HoughCircles(srcMat, circlesMat, cv.HOUGH_GRADIENT, 1, 45, 75, 40, 0, 0);

Now, we should have a Mat object with the circles detected in it.

Next, we’ll draw the circles in our <canvas>.

#opencv #javascript #machine-learning #programming #developer

CSS Boss

CSS Boss

1606912089

How to create a calculator using javascript - Pure JS tutorials |Web Tutorials

In this video I will tell you How to create a calculator using javascript very easily.

#how to build a simple calculator in javascript #how to create simple calculator using javascript #javascript calculator tutorial #javascript birthday calculator #calculator using javascript and html

Introduction With Basic JavaScript

The world’s most misunderstood programming language is JavaScript but JavaScript is now used by an incredible number of high-profile applications. So, it’s an important skill for any web or mobile developer to enrich the deeper knowledge in it.

Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world.

Its syntax is based on the Java and C languages — many structures from those languages apply to JavaScript as well. JavaScript supports object-oriented programming with object prototypes, instead of classes. JavaScript also supports functional programming — because they are objects, functions may be stored in variables and passed around like any other object.

Let’s start off by looking at the building blocks of any language: the types. JavaScript programs manipulate values, and those values all belong to a type. JavaScript’s types are:

· Number

· String

· Boolean

· Function

· Object

· Symbol

and undefined and null, which are … slightly odd. And Array, which is a special kind of object. Date and RegExp, which are objects that you get for free. And to be technically accurate, functions are just a special type of object. So the type of diagram looks like this:

#beginner-javascript #javascript #javascript-introduction #javascript-fundamental #basic-javascritp