Category Archives: javascript

JavaScript tutorial – part 001

Because many users used javascript with web browser or to make web development I will make few tutorials about JavaScript.
I will try to cover the most important details and features that JavaScript has to offer.
First , the JavaScript language has no concept of input or output because is designed to run as a scripting language in a host environment.
The JavaScript is an object-oriented dynamic language with types and operators, standard built-in objects, and methods.
The syntax is based on the Java and C languages.
JavaScript’s types are:

  • Number
  • String
  • Boolean
  • Function
  • Object
  • Symbol

Because Symbol type is new in Edition 6 then you need to know this: A symbol is a unique and immutable data type and may be used as an identifier for object properties.. See this example with one symbol type definition.

One good website to learn the basics of JavaScript it’s www.w3schools.com.
Let’s try to get screen resolution with javascript.
First you need to make your html file and to add this source code under <script></script>  html tags:

This variables will be used with this source code:

Detecting the screen resolution come when we used variables and then we used that to make redirecting on another page.
How to create an object constructor
This is the source code :

The output will be one window with this text: My_first_name ;

You can test it online with jsbin.com website.

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

GoJS with random function example.

This is a simple example with GoJS API.
If you want to use into website the you need to buy the API.
Also you can make a try with this example but will have this text:
test

<!DOCTYPE html>
<html>
<head>
<script src=”go-debug.js”></script>
<script id=”code” type=”text/javascript”>
function init(){
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, “myDiagram”,
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
“undoManager.isEnabled”: true,// enable Ctrl-Z to undo and Ctrl-Y to redo
initialContentAlignment: go.Spot.Center,
allowZoom: true,

“grid.gridCellSize”: new go.Size(20, 20),

});

var myModel = $(go.Model);
// in our model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
{ key: getRandomColor() },
];

myDiagram.model = myModel;
myPalette =
$(go.Palette, “myPalette”,  // must name or refer to the DIV HTML element
{
nodeTemplate: myDiagram.nodeTemplate,
model: new go.GraphLinksModel([  // specify the contents of the Palette
{ key: “Alpha” },
{ key: “Beta” },
{ key: “Gamma” },
{ key: “Delta” }
])
});
} //init

function getRandomColor() {
var letters = ‘0123456789ABCDEF’.split(”);
var color = ‘#’;
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

</script>
</head>
<body onload=”init()”>
<div style=”width:100%; white-space:nowrap;”>
<span style=”display: inline-block; vertical-align: top; padding: 5px; width:80px”>
<div id=”myPalette” style=”border: solid 1px gray; height: 400px; background-color:#CCCCCC;”></div>
</span>

<span style=”display: inline-block; vertical-align: top; padding: 5px; width:80%”>
<div id=”myDiagram” style=”border: solid 1px gray; height: 400px; background-color:#CCCCCC;”></div>
</span>
</div>
</body>
</html>
The source code will make two areas with four text and the next area will have output of random javascript random function. See this image:
test2

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

WebGL – sound test example with Three.js .

This is the result of my example : webgl test sound .

And this it’s the source code :

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>three.js misc – sound</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0″>
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
</style>
</head>
<body>
<div id=”container”></div>
<script src=”../js/three.min.js”></script>
<script src=”../js/controls/FirstPersonControls.js”></script>
<script src=”../js/Detector.js”></script>
<script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var container;
var camera, controls, scene, renderer;
var light, pointLight;

var mesh;
var material_sphere1, material_sphere2;

var clock = new THREE.Clock();

init();
animate();

function init() {

container = document.getElementById( ‘container’ );

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 25, 0 );

var listener = new THREE.AudioListener();
camera.add( listener );

controls = new THREE.FirstPersonControls( camera );

controls.movementSpeed = 70;
controls.lookSpeed = 0.05;
controls.noFly = true;
controls.lookVertical = false;

scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0035 );

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0.5, 1 ).normalize();
scene.add( light );

var sound1 = new THREE.Audio( listener );
sound1.load( ‘../sounds/sound.wav’ );
sound1.setRefDistance( 20 );
sound1.autoplay = true;
scene.add( sound1 );

var helper = new THREE.GridHelper( 500, 10 );
helper.color1.setHex( 0x444444 );
helper.color2.setHex( 0x444444 );
helper.position.y = 0.1
scene.add( helper );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.innerHTML = “”;
container.appendChild( renderer.domElement );
window.addEventListener( ‘resize’, onWindowResize, false );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
}

function animate() {
requestAnimationFrame( animate );
render();
}

function render() {

var delta = clock.getDelta(),
time = clock.getElapsedTime() * 5;
controls.update( delta );
renderer.render( scene, camera );
}
</script>
</body>
</html>

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