Tag Archives: javascript

JavaScript – Processing.js 2D library – part 003.

In this tutorial I will show you how to use images with processing.js.
You can use image from your computer or from url.
Let’s see one simple code example:

You can see same example on openprocessing web tool.
The openprocessing web tool allow you to use Processing.js and P5.js .

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .

JavaScript – FlipClock .

Another tutorial about javascript and HTML5 .
The FlipClock is a javascript source code and tool to let you to make a flip clock .
As you know :
A flip clock is an electromechanical, digital time keeping device with the time indicated by numbers that are sequentially revealed by a split-flap display.
This javascript come with many options and feature to set your flip clock:

  • Hourly Counter
  • Minute Counter
  • Daily Counter
  • 12hr Clock
  • 24hr Clock
  • General Counter

You need to download it and then you can try the examples from examples folder.
The next example come with the base of the css file and the flipclock.js .
I just set the clockFace setting to TwentyFourHourClock.
You can used this javascript to show: counter, countdown or interval.

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .

JavaScript – Thunderforest Maps API .

The Thunderforest Maps let you to use map styles in your apps and on your websites.
You can have a free account see: Hobby Project
You can also buy it:

  • Solo Developer
  • Small Business
  • Large Business

The maps come with this map layers:

  • OpenCycleMap
  • Transport
  • Landscape
  • Outdoors
  • Transport Dark
  • Spinal Map
  • Pioneer
  • Mobile Atlas
  • Neighbourhood

This is one example using the Pioneer layer map into old style , see the next image:

This is the source code to test it with your API key:

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .

JavaScript – start with TypeScript .

About TypeScript is an open-source language and compiler that runs both in the browser  -through SystemJS  and on NodeJS.
Is developed by Microsoft, like an open-source language and compiler that runs both in the browser through SystemJS and on NodeJS.
Now TypeScript compiles to clean, simple JavaScript code.
You can runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer).
There are two main ways to get the TypeScript tools:

  • using npm (the Node.js package manager)
  • or installing TypeScript’s Visual Studio plugins

The easiest way to get started with TypeScript is through the TypeScript playground found on the TypeScript website play.
The TypeScript version 2.4 has already introduced dynamic import expressions, safer callback parameter checking, weak types, and string enums.
About dynamic import expressions then allows users to asynchronously request a module at any arbitrary point in your program.
The string enums allows enum members to contain string initializers.
Allow to return types as inference targets can now make inferences for the return type of a call.
To get started with the latest stable version of TypeScript, you can grab it through NuGet with:

You can use the following command with npm:

Also you can download it from official website.
To compile it use this:

Now, let’s install it and try it.
First use git command to put into your computer:

Make a file named ts_es001.ts and use this command:

The result will be : ts_es001.js file.
Create your ts_es001.html file with this content:

This is most simple example of using typescript tool with node.js .

Posted in All, javascript, node.js, Programming. Tagged with , , , , , .

JavaScript – browser user agent.

This is a simple tutorial with java script to see the browser user agent.
About user agent:
– user agents are unique to every visitor on the web;
– everyone that is browsing the web right now has a user agent;
– browsers are a example of a user agent;
– other tools can act as agents;
– user agent has identified itself to the web server with a process called content negotiation;
– it’s possible to send a fake user agent, a process known as “spoofing.”
Now about how to see the user agent with browser.
Let’s start with create your folder and add a index.html file.
Add also into this folder another folder named js.
Into js folder add a file named index.js file.
Into index.html file add this source code:

Into index.js file add this source code:

When you open the index.html file with your browser the you can see your browser user agent.
For example the result of this script into my browser is:

Posted in All, HTML 5, javascript. Tagged with , , , , , .