- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 5592
Example of inline if in javascript:
var a = 30;
var b = 40; v
ar c = ((a < b) ? 2 : 3);
Copy / pasted from here.
Example of inline checking of null:
var whatIWant = someString || "Cookies!";
Copy / pasted from here.
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 5272
Idea is to display image as a "brush", which means instead of black (or any other color) line to have image.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/index.css">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="bg sprites sprite_338x338_gc4_ring"></div>
<canvas id="myCanvas" width="338" height="338"></canvas>
</body>
<script>
var myImage = new Image();
myImage.src = "338x338_repeating_gc4_dim_hatch.png";
myImage.onload = function () {
var myCvns = document.getElementById("myCanvas");
var myCntx = myCvns.getContext("2d");
var pat = myCntx.createPattern(myImage, "no-repeat");
myCntx.lineWidth = 10;
//myCntx.strokeStyle = "red";
myCntx.strokeStyle = pat;
myCntx.arc(168, 170, 165, 0, 8, false);
myCntx.stroke();
}
</script>
</html>
Notice line:
myCntx.strokeStyle = pat;
With that we are actually using our pattern to display image. Instead of pat write "red", for example, to see the difference.
Live example:- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 5399
This morning I was reading this web site, about getters and setters in JavaScript, and here I want to copy / paste code which I saw there:
function wrapValue(_value) {
return {
get value() { return _value; },
set value(newValue) { _value = newValue; }
};
}
var x = wrapValue(5);
console.log(x.value); // output 5
x.value = 7;
console.log(x.value); // output 7
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 5460
I just want to write few things which I learned these days.
$.Callbacks - sort of a queue of functions, where all be executed at once on fire. Example:
function consoleLogtestOne() {
console.log("test one")
}
function consoleLogtestTwo() {
console.log("test two")
}
var myCallbacks = $.Callbacks();
myCallbacks.add(consoleLogtestOne);
myCallbacks.add(consoleLogtestTwo);
myCallbacks.fire();
With line of code:
myCallbacks.fire();
we are executing both functions at once.
Array.prototype.map(Function) - executes callback function for each member in array. Example:
/*global console*/
(function () {
"use strict";
var myNumbers = [1, 4, 9],
variableWhichWillDoNothing;
variableWhichWillDoNothing = myNumbers.map(function (currentValue, index, array) {
console.log("currentValue: " + currentValue);
console.log("index: " + index);
console.log("array: " + array);
console.log("---");
return "nothing";
});
console.log("Just to do something with doubles (to satisfy jsLint): " + variableWhichWillDoNothing);
}())
Result will be something like:
Function.prototype.apply() - provides arguments as array to function.
Check these two examples:
function applyLog() {
console.log.apply(console, arguments);
}
function justLog() {
console.log(arguments);
}
If you execute justLog like this:
justLog("test1", "test2")
Result will something like this:
As you can see result is an array.
Now lets execute applyLog:
applyLog("test1", "test2")
Result is something like:
As you can see no array.
Using apply and map you can generate array of elements, for example:
Array.apply(null, Array(24)).map(function (_, i) {return ('0' + i)});
Result:
["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "010", "011", "012", "013", "014", "015", "016", "017", "018", "019", "020", "021", "022", "023"]
slice - select elememts
Check this example:
('stanko').slice(-1)
Result:
"o"
Another:
('stanko').slice(-2)
Result:
"ko"
One more:
('stanko').slice(2)
Result:
"anko"