Tag Archives: javascript

JavaScript – filter an array with Google Chrome.

This problem can be easily resolved in the Google Chrome browser.
You must press F12 to start Chrome Developer Tools.
Then add the java script to the Console.
The filter method is part of the ECMAScript 5.
The result array contains the values that are not ‘Blue’.

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

A simple sphere with Three.js .

This tutorial is about how to add a simple wireframe sphere into your webpage using the a javascript 3D library named three.js .
This 3D library and some demo and examples can be found here.
The tutorial for today is let you to know how to deal with a simple object.
First you need to make a folder named project.
Into this folder create two folder named js and css.
Into the project create a index.html file and add this content:

Make a file named style.css into css folder and add this:

This wi
Into js folder create a file named index.js and add this source code:

This java script file follow some steps to make the wireframe sphere:

  • make the scene;
  • set the camera;
  • create the renderer space;
  • add the renderer space to HTML document;
  • create sphere
  • add one material ;
  • make a wireframe from geometry variable;
  • create wireframe object;
  • create a line like wireframe object;
  • deal with line material;
  • add line to the scene;
  • set the position of camera;
  • create the render function to animate the content;
  • run all with render function.

The result is something like this:

Some changes can be used into this example to see how is working.
You can remove the css folder and style file but you need to remove this line from index.html file:

The sphere variable can be added into java script source code:

This will make some change into the render canvas.

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

How to build and improve our web pages.

An important element in building and improving our web pages is the content to be added.
The basic element is the language we use, which at the end is transformed into HTML, CSS and scripting.
The average user wants to be attracted by improving content.
So the administrator, designer and content writer – the author has to attract visitors, so adding content is strictly necessary on time unit.
The basic issue of the three people is basically content participation and methods of changing the web page.
Another problem occurs when the one who makes changes will have to store vast knowledge about these methods.
Today I will show you a simpler way of modifying web content by using so-called cheatsheets.
You will need to see these two links: htmlcheatsheet.com and html-css-js.com – icons.
Navigating through the two links will provide you with important help for web page building, as well as an important database for future content editing.
Let’s see one example with icons:
The math signs with icons:
∇ ∫ ∬ ∭ ∮
Another example with some geometric icons:

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

Side menu with jQuery.

This side menu is a very simple example with HTML5, CSS and jQuery.
The result is this:

You can see the source code:

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

Random lines with jQuery.

This is a complex tutorial about HTML5, jQuery and javascript.
The result of this tutorial will be a text and one canvas with random animated lines.
The result is this animated line into html5 file (also you can see my codepen example) :
Because I used jQuery , first line of code into head section was:

To see the result: the text and canvas I used into body section this tags:

The next step is to have a style into my html5 file, so I put this code into head section:

Next steps:

  • select canvas for draw ( I used c variable );
  • make a random points into canvas ( I used a function);
  • make points and lines ( I used b function);
  • make create, animate and line function object as a combination of a prototype;

JavaScript allows you to use a Function object as a combination of a prototype to use for the new object and a constructor function to invoke.
The event.pageX property returns the position of the mouse pointer, relative to the left edge of the document.
Let’s see now the full source code:

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