JavaScript: call by Value or call by Reference

What is call by value ?
In call by value method, the called function creates a new set of variables and copies the values of arguments into them.
Means
Whatever value we will pass to the function, it will create a copy of that and will act on the copied one. So the origin value doesn’t change.

What is call by reference ?
In call by reference method, instead of passing a value to the function being called a reference/pointer to the original variable is passed.
Means
Whatever value we will pass to the function, it will act on the same value and if it modifies that value, it will get changed for the whole context.

The above definitions and explanations is generic to any language. Now lets get into some JavaScript code to understand it.

JS Example: Call by value

 function modifier(arg1){
  /*Creates copy of the parameter passed to the function and operates on it.*/
  console.log(arg1); //=> foo
  /*Change made in the local copy of the function*/
  arg1 = arg1 + " changed";
  console.log(arg1); //=> foo changed
}

/*Create a variable which stores the string "foo"*/
var foo = "foo";
modifier(foo);
/*Though function made changes, its value is still same. As function made changes in its local copy.*/
console.log(foo); //=> foo

In JavaScript, there are 5 primitive values:
1) Number
2) String
3) Boolean
4) Undefined
5) Null.

Now, In the above example
– We have created a var foo, which contains “foo” i.e a string having value foo.
– Now, as we know that Strings are of primitive type in JS. We can say that var foo contains a primitive value.
– And in JS, primitive values are called by value.

JS Example: Call by reference

function objModifier(obj1){
  console.log(obj1.name); //=> fooBar
  obj1.name = obj1.name + " changed";
  console.log(obj1.name); //=> fooBar changed
}

var myObj = {name: "fooBar"}
console.log(myObj.name); //=> fooBar
objModifier(myObj);
console.log(myObj.name); //=> fooBar changed

Every thing other than Number, String, Boolean, Undefined and Null are object in JavaScript. And objects are reference value in JS.
So, in above example, when we are passing myObj to the function objModifier, the reference is passed and the change made inside the method is reflected every where.

To summarize
To differentiate the difference between call by value and call by reference, we can have a rule of thumb as:

– Number, String, Boolean, Undefined and Null are primitives.
– Primitives are call by value.

– Every thing other than Number, String, Boolean, Undefined and Null are object.
– And objects are call by reference.

Tagged with: ,
Posted in Javascript

Why lint JavaScript?

References: http://www.jslint.com/lint.html

Posted in Javascript

Understanding Javascript “this”

Posted in Javascript

HTML5 Canvas: Text underline workaround

text-decoration : underline …… But what to do in case of Canvas text.

Recently I had to show some texts on canvas, requirement was it should be underlined. I started googling and did not find any solution for that as canvas does not support any such property. Now the only option was some work-around , I did it and would like to share it with you.

Disclaimer : I am not a javascript expert, just a beginner in the world of javascript. So, if you find any thing wrong or you have some suggestions write me at durgesh.priyaranjan@gmail.com or mention it in the comment section below.

What I had?

A html canvas:

<canvas id="myCanvas" width="578" height="200"></canvas>

Requirements:

a) Text to be displayed : “ScriptStock”
b) The font size should be 30pt
c) Text color should be blue
d) Text alignment can be any of the three : left, center,right
e) Font family should be Calibri.

What I did to display the text on canvas?

var canvas = document.getElementById("myCanvas");//get canvas element as js object
var context = canvas.getContext("2d");//get canvas context to play with it

//initialize the variables with the required data
var text = "ScriptStock";
var textAlign = "center";
var textColor = "blue";
var fontSize = "60pt";
var fontFamily = "Calibri";

//Set the position of the text on canvas
//I am setting it as center of the canvas. You can set as per your need.
var x = canvas.width / 2;
var y = canvas.height / 2;

//Set the canvas context properties
context.font = fontSize + " " + fontFamily;
context.textAlign = textAlign;
context.fillStyle = textColor;

//Display the text on canvas
context.fillText(text, x, y);

//Call the function to underline the text
//We need to pass some values to our function so that it can perform the necessary calculations.
textUnderline(context,text,x,y,textColor,fontSize,textAlign);

The utility function for underline:

var textUnderline = function(context, text, x, y, color, textSize, align){

  //Get the width of the text
  var textWidth =context.measureText(text).width;

  //var to store the starting position of text (X-axis)
  var startX;

  //var to store the starting position of text (Y-axis)
  // I have tried to set the position of the underline according 
  // to size of text. You can change as per your need
  var startY = y+(parseInt(textSize)/15);

  //var to store the end position of text (X-axis)
  var endX;

  //var to store the end position of text (Y-axis)
  //It should be the same as start position vertically. 
  var endY = startY;

  //To set the size line which is to be drawn as underline.
  //Its set as per the size of the text. Feel free to change as per need.
  var underlineHeight = parseInt(textSize)/15;

  //Because of the above calculation we might get the value less 
  //than 1 and then the underline will not be rendered. this is to make sure 
  //there is some value for line width.
  if(underlineHeight < 1){
    underlineHeight = 1;
  }

  context.beginPath();
  if(align == "center"){
    startX = x - (textWidth/2);
    endX = x + (textWidth/2);
  }else if(align == "right"){
    startX = x-textWidth;
    endX = x;
  }else{
    startX = x;
    endX = x + textWidth;
  }

  context.strokeStyle = color;
  context.lineWidth = underlineHeight;
  context.moveTo(startX,startY);
  context.lineTo(endX,endY);
  context.stroke();
}

You can play with the above implementation at JSFiddle.

Please let me know if you have any better idea for same.

Keep Visiting.

Posted in Canvas, HTML, Javascript

CSS: Tansform and Transition – Get Started

Vendor Prefixes

CSS transition and transform are currently in experimental stage. So, it should be used with the vendor prefixes. Below is the prefixes for different browsers:


  -ms- //Internet Explorer
  -o- //Opera
  -wekit- //Chrome and Safari
  -moz- //Mozilla Firefox 

But we should also insert the css property without the vendor prefix. So that you dont need to modify it in future when browsers will support these experimental css properties. Like if we wish to rotate some div by 30 degree, then we should write style as :


div
{
  -ms-transform : rotate(30deg); //Internet Explorer 10 (hopefully)
  -o-transform : rotate(30deg); //Opera
  -webkit-transform : rotate(30deg); //Chrome and Safari
  -moz-transform : rotate(30deg); //Mozilla Firefox
  transform : rotate(30deg); // To make your style future proof
}

This was a brief idea about how and why to use vendor prefixes for the css transition and transform. Now lets move on to css transition.

Transition

CSS 3 transition can be used for adding effect while changing from one style to another. But all the CSS styles can not be used for the transition effect. Please refer this resource to get all list of CSS properties which can be animated.

Knowingly or unknowingly we have been using transition effects in terms of hover.So we will use the same for learning different css transition properties.

Now lets start with some real code and examples. We will learn CSS transition in steps.And yes you can check the demo of these examples on the provided links.

Step 1 : Changing background and color on mouse hover
Lets create a button having class as scriptstockBtn


<button class="scriptstockBtn">ScriptStock</button>

Then we will write the style for buttons as


.scriptstockBtn
{
  background-color: #4a060f;
  padding: 5px 10px;
  color: #FFF;
  font-weight: bold;
}

Now if we wish to change the background color and text color of the button on mouse hover then we can style it as:


.scriptstockBtn:hover
{
  background-color: #140b4a;
  color: #cbae1c;
}

What it does ? It changes the background color and text-color on hover.

Now if we wish to change this into a 10 second animation for background color change.So now our target is to

– Change the background-color from #4a060f to #140b4a
We need let the browser know that it has to change the background property. To do this we should add “transition-property: background-color” in our style.

– duration for change should be 10 seconds
We need let the browser know that it has to change the property in the duration of 10 secs. To do this we should add “transition-duration: 10s” in our style.

Note – Dont forget to add the vendor prefixes for the transition-property and transition-duration.

After adding these changes our css for the button will look something like


.scriptstockBtn
{
  background-color: #4a060f;
  padding: 5px 10px;
  color: #FFF;
  font-weight: bold;
  
  -o-transition-property: background-color;
  -ms-transition-property: background-color;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  transition-property: background-color;
  
  -o-transition-duration: 10s;
  -ms-transition-duration: 10s;
  -webkit-transition-duration: 10s;
  -moz-transition-duration: 10s;
  transition-duration: 10s;
}

Check the demo here here.

This was the our first 10 mins learning session. We will learn more about transition in the upcoming sessions.

Keeep visiting.

Posted in CSS, HTML, Javascript

Welcome

Welcome to ScriptStock

ScriptStock is about sharing my experiences and knowledge with Javascript developers and web UI designers as a Javascript programmer. I am not a javascript ninja, but just a beginner. So I would love to hear feedback, improvement suggestions and corrections.
I will try to come up with some challenging, interesting and helpful post for enthusiastic web developers.

Keep visiting,
Durgesh
(durgesh.priyaranjan@gmail.com)

Tagged with:
Posted in Welcome