Javascript: Difference between revisions

From miki
Jump to navigation Jump to search
Line 106: Line 106:
}
}
myfct("Hello", "World");
myfct("Hello", "World");
</source>

== How-to ==
=== Wait until a function is loaded ===
We fire a <code>setTimeout</code> event until the function is available [https://stackoverflow.com/questions/793114/wait-until-function-is-loaded]:
<source lang="javascript">
$(function(){
$("#loadingGIF").show();
WaitForFunction();
});

function WaitForFunction()
{
if (!$.isFunction(FUNCTION_TO_WAIT_ON_HERE)) {
setTimeout( WaitForFunction, 100);
return;
}
Function_Loaded();
}

function Function_Loaded(){
$("#loadingGIF").hide();
}
</source>
Note that the code is not recursive because <code>setTimeout</code> does not call the given function but add it to a timer event queue.

=== Simulate click on a button ===
Use jQuery [https://stackoverflow.com/questions/5015054/how-to-use-simulate-the-action-of-clicking-button-with-jquery-or-javascript]:
<source lang=javascript>
$('#mybutton').trigger('click');
$('#mybutton').click(); // Simpler
</source>
</source>



Revision as of 00:38, 29 December 2017

Reference

Syntax

JS type

// Strings
var carname = "Volvo XC60";

// Numbers
var x = 3.14;
var y = 34;

JS operators

// Arithmetic operators
x = y + 2;
x = y - 2;
x = y * 2;
x = y / 2;
x = y % 2;       // Modulus (division remainder)
x = ++y;         // Pre-increment
x = y++;         // Post-increment
x = --y;         // Pre-decrement
x = y--;         // Post-decrement

// Assignment operators
x = y;
x += y;
x -= y;
x *= y;
x /= y;
x %= y;

// String operators
text3 = text1 + text2;     // Concatenation
text1 += text2;

// Comparison operators
x == 8;    // equal to
x === 5;   // equal value and equal type
x != 8     // not equal
x !== 5    // not equal value or not equal type
x > 5;
x < 5;
x >= 5;
x <= 5;

// Ternary operator
voteable = (age < 18) ? "Too young" : "Old enough";

// Logical operators
x && y;     // logical and
x || y;     // logical or
!x;         // not

// Bitwise operators
x = 5 & 1;  // bitwise and
x = 5 | 1;  // bitwise or
x = ~5;     // bitwise not
x = 5 ^ 1;  // bitwise xor
x = 5 << 1; // bitwise left shift
x = 5 >> 1; // bitwise right shift

// typeof
typeof "John";            // returns string

// delete
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
delete person.age;        // or delete person["age"] -- delete property from an object

// in
var cars = ["Saab", "Volvo", "BMW"];
"length" in cars          // true if property is in the specified object
"firstname" in person

// instanceof
cars instanceof Array;    // true if object is instance of specified class

// void
void(0);                  // evaluate expressions and returns undefined

JS statements

// switch
switch(fruits) {
    case "Banana":
        text = "Banana is good!";
        break;
    default:
        text = "I have never heard of that fruit...";
}

// while
while (i < 5) {
    // ...
}

JS functions

var myfct = function(arg1, arg2) {
     return arg1 + ", " + arg2;
}
myfct("Hello", "World");

How-to

Wait until a function is loaded

We fire a setTimeout event until the function is available [1]:

$(function(){
    $("#loadingGIF").show();
    WaitForFunction();
});

function WaitForFunction()
{
    if (!$.isFunction(FUNCTION_TO_WAIT_ON_HERE)) {
       setTimeout( WaitForFunction, 100);
       return;
    }
    Function_Loaded();
}

function Function_Loaded(){
      $("#loadingGIF").hide();
}

Note that the code is not recursive because setTimeout does not call the given function but add it to a timer event queue.

Simulate click on a button

Use jQuery [2]:

$('#mybutton').trigger('click');
$('#mybutton').click();          // Simpler

Debug

Firefox

  • In Firefox, Ctrl-Shift-C to open up the console and debugger tools.\
  • To browse an object, go to the console, and type the name of an object to open it up in the object explorer. For instance, to browse from the global context window:
>> windows