I want to understand some of the points plz

Question

this cod for 
I want to understand some of the points
//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var lastEvent;
var mouseDown = false;
//When clicking on control list items
$(".controls").on("click", "li", function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});
//When "New Color" is pressed
$("#revealColorSelect").click(function(){
  //Show color select or hide the color select
  changeColor();
  $("#colorSelect").toggle();
});
//update the new color span
function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  $("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
}
//When color sliders change
$("input[type=range]").change(changeColor);
//When "Add Color" is pressed
$("#addNewColor").click(function(){
  //Append the color to the controls ul
  var $newColor = $("<li>");
  $newColor.css("background-color", $("#newColor").css("background-color"));
  $(".controls ul").append($newColor);
  //Select the new color
  $newColor.click();
});
//i cant under stand from this  to end 
//On mouse events on the canvas
$canvas.mousedown(function(e){
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e){
  //Draw lines
  if(mouseDown) {
    context.beginPath();
    context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
    context.lineTo(e.offsetX, e.offsetY);
    context.strokeStyle = color;
    context.stroke();
    lastEvent = e;
  }
}).mouseup(function(){
  mouseDown = false;
}).mouseleave(function(){
  $canvas.mouseup();
});
1-what does function(e)  mean ?
and why he put it in function 
2-  lastEvent = e;  what this last event do ?
3- context.lineTo(e.offsetX, e.offsetY); ?????
why he dont put (lastEvent.offsetX, lastEvent.offsetY  like last line becuse 
lastEvent and e same ?

Andrei Fecioru · Accepted Answer

Hello,
Let me try to answer these one by one.
What's with this function(e) thing?
The basic idea is that you want to pass to the mousemove(), mousedown() and all these functions some kind of behaviour, not just pure data (like a string or a number). In other words, you want to tell the browser what to do when, for example, the user moves the mouse pointer. So you pass on an action, not some data.
JavaScript is great in this regard because (unlike some other languages like Java) it is also a functional language where functions are treated like first class entities: functions can be assigned to variables, returned as values from functions and passed on to other functions as input parameters. Functions are also the basic construct for abstracting behaviour (you put executable code inside a function).
So, in conclusion, if you want to tell the browser what to do when the mouse is moved; so you pass to the mousemove() function some kind of behaviour specification (i.e. a function) in which you define your desired actions. This is why the function you pass as an argument is also called an event handler: it is the action you want to perform when a certain event occurs.
What is the purpose of the lastEvent?
In the lastEvent variable we hold on to the mousedown event. We need to keep a reference to it because we need it later when we handle the mousemove event.
Why not use context.lineTo(e.offsetX, e.offsetY)?
Because e here refers to the mousemove event which we are currently handling. What we want to do is draw a line from the point where we pressed the mouse (this info is stored in the lastEvent event - see above) to the point where we have currently moved the mouse pointer (and this info is stored in the e event).
Hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

moath alqutoob

moath alqutoob

I want to understand some of the points plz

1 Answer

Andrei Fecioru

Andrei Fecioru