Tag Archives: javascript

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 , , , , , .

JavaScript – deck – online slides.

Here’s another tutorial on javascript that I think should be remembered.
This javascript tool named deck.js help you to:

  • Create a deck with slides.
  • Slide has content into simple HTML.
  • You can choose themes, like: slide styles and one for deck transitions.
  • Also, you can include extensions to add extra functionality to your deck, or leave it stripped down.

This javascript tool can be found here and come with this structure:

  • deck.core
  • deck.goto
  • deck.menu
  • deck.navigation
  • deck.scale
  • deck.status

How this working ?
Let’s see a simple example.
First download the deck.js from here.
Open the folder and you will find a html file named boilerplate.html.
This file show a basic example of slideshow.
You just need to change this part of source code with your content:

A good presentation of the functionality of this tool is here.
A list of themes, extensions and tools available for deck.js can be found here.

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

JavaScript – Booklet – part 001.

Today I tested the Booklet jQuery tool, because I did not find too much data on this tool on the internet.
This help me to display the content on the web in a flipbook layout.
In this tutorial, I will only present a book of web page sizes, changing the color of the cover and adding text.
This tool also allows other features, but I will return to the right time.
It was built using the jQuery library and is licensed under the MIT license.
You can read documentation and download it from here.
I download and unarchive this tool to default folder booklet-master.
Because this tool come with a index.html file, I create a index2.html file and I add my source code.
To change the default brown cover I change this line of code from this file jquery.booklet.latest.css ( from src folder ).
.booklet .b-page-cover {padding:0; width:100%; height:100%; background:#dddddd;}
This is my index2.html file and result is a book with some text.

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

JavaScript – Matter.js the 2D physics engine .

The tutorial today is about Matter.js – 2D physics engine for the web.
Let’s try one simple example.
You need a folder named project with index.html file and a js folder with index.js file.
The content of index.html is:

The content of index.js file from js folder is:

Let’s see the result of this script with codepen.io web tool.
You can try all demos.

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