wz

Tutoriál sestavený z článků v rubrice

JavaScript: výpočty v řetězcích - využití v ``

03:46 22.09.2015

V moderních prohlížečích následující příklad nespadne s chybou. V tomto příkladu je vypsán obsah proměnných, aniž bych musel používat ukončování uvozovek a spojování jednotlivých sub-řetězezců pomocí znaku plus.

var a = 3;
var b = 4;

document.write(`
mámě dvě čísla a,b.
hodnota a je ${a},
hodnota b je ${b},
hodnota součtu a + b je ${a + b}
`);

Více viz. např. zde. Vše např. v Chrome 41 fungovalo i v případě, kdy jsem ve scriptu začal používat i jQuery.

JavaScript - text na více řádcích

03:32 22.09.2015

Jak mít pro přehlednost v JavaScriptu text na více řádcích? V moderních prohlížečích např. pomocí těchto uvozovek ``. Příklad:

document.write(`v tomto textu
je použito několikrát enter,
přesto se nebojím javascriptových
chyb`);

Např. v Chrome 41 se korektně vypíše (neplést s elementem br, výstup je bez enterů).

JavaScript: Konstanty

03:18 08.09.2015

Není to zas tak dávno, co některé prohlížeče začaly podporovat konstanty. Pro ně je vymezeno klíčové slovíčko const. Nějaké základní povídání (např. co se týče podpory prohlížečů), je např. na těchto stránkách.

Příklad

const CAPITAL = 'Prague';

console.log(CAPITAL);

var func = function(){
  const STATE = 'ENGLAND';
  console.log(STATE);
  console.log(CAPITAL);
};

func();

const STATE = 'CZECH';
console.log(STATE);

func();
                                      
const state = 'NORWAY';
console.log(state);

Co se v příkladu provede?

  1. vytvoří se konstanta s názvem CAPITAL a do konzole se vypíše její hodnota Prague
  2. Vytvoří se funkce func(), ve které se vytváří a vypisuje konstanta STATE s hodnotou ENGLAND. Platnost této konstanty je jen uvnitř funkce. Rovněž se tu vypisuje obsah konstanty CAPITAL z global scope.
  3. Zavolá se funkce func (=provede se 1x)
  4. V jiném (global) scope se vytvoří konstanta, která se jmenuje STATE a její hodnota je CZECH. To lze, protože konstanty jsou blok-scoped
  5. Hodnota konstanty se vypíše do konzole - vidíme tam CZECH
  6. Zavolá se funkce func(). V konzoli se díky tomu objeví texty ENGLAND a Prague
  7. Vytvoří se a vypíš konstanta state. Její název má jinou velikost písmenek než je tomu u konstanty STATE, takže k problémům nedošlo.

JavaScript - množiny (Set)

22:31 17.04.2015

Už je to několik verzí, co v Chrome či Firefoxu můžeme používat objekt Set. Jak název napovídá, jde o datovou strukturu známou jako množina. Více. např. zde.

Ukázka použití:

var mySet = new Set();

console.log(mySet);
mySet.add(1);
console.log(mySet);

mySet.add(2);
console.log(mySet);

mySet.add(2);
console.log(mySet);

console.log(mySet.has(1));
console.log(mySet.has(3));

Do konzole se v tomto příkladu vypíše:

Set {}
Set {1}
Set {1, 2}
Set {1, 2}
true
false

JavaScript: Array map() aneb Pro každý prvek pole...

13:35 15.03.2015

V následujícím příkladu jsou dvě pole. V každém z nich jsou prvky s číslem, které jsem zdvojnásobil. Viz. níže včetně výstupu do konzole:

        var o1 = [2,3];
        console.log(o1);
        var o1Exp = o1.map(function(num){ return num*2 });
        console.log(o1.constructor);
        console.log(o1);
        console.log(o1Exp);
        
        var o2 = [
          {name:"Martin",age:15},
          {name:"Petr",age:20}
        ];
        console.log(o2);
        var o2Exp = o2.map(function(obj){ 
          obj.age = obj.age*2;
          return obj;
        });
        console.log(o2.constructor);
        console.log(o2);
        console.log(o2Exp);
[2, 3]
Array()
[2, 3]
[4, 6]

[Object { name="Martin", age=15}, Object { name="Petr", age=20}]
Array()
[Object { name="Martin", age=30}, Object { name="Petr", age=40}]
[Object { name="Martin", age=30}, Object { name="Petr", age=40}]

JavaScript: Několik způsobů vytvoření objektu

09:37 15.03.2015

V tomto příspěvku je vytvořeno několik objektů v JavaScriptu. Každý trochu jiným způsobem. Výstup do konzole je přiložen níže.

        function C1(name){
          this.name = name;
          this.getName = function(){
            return this.name;
          }
        }
        
        var o1 = new C1("Petr");
        console.log(o1);
        console.log(o1.getName());

        var o2 = {name:"Martin",getName:function(){return this.name} }
        console.log(o2);
        console.log(o2.getName());

        var o3 = new function(){
          this.name = "Monika";
          this.getName = function(){
            return this.name;
          }
        }

        console.log(o3);
        console.log(o3.getName());

        var o4 = {};
        o4['name'] = 'Tomáš';
        o4['getName'] = function(){
          return this.name;
        }

        console.log(o4);
        console.log(o4.getName());
        console.log(o4.constructor);

        var o5 = {};
        o5.name = 'Lenka';
        o5.getName = function(){
          return this.name;
        }

        console.log(o5);
        console.log(o5.getName());
        console.log(o5.constructor);
 C1 { name="Petr", getName=function()}
Petr

Object { name="Martin", getName=function()}
Martin

Object { name="Monika", getName=function()}
Monika

Object { name="Tomáš", getName=function()}
Tomáš
Object()

Object { name="Lenka", getName=function()}
Lenka
Object()

JavaScript: Příklad definování metody třídy

09:23 15.03.2015

V tomto příspěvku je příklad vytvoření třídy a její instance v JavaScriptu. Třída obsahuje 2 metody, obě byly nadefinovány jiným způsobem.

function C1(name,surname){
   this.name = name;
   this.surname =  surname;
   this.getName = function(){
      return this.name;
   }
}
        
C1.prototype.getSurname = function(){
   return this.surname;
}
        
var o1 = new C1("Petr","Novák");
console.log(o1);
console.log(o1.getName());
console.log(o1.getSurname());

Výstup do konzole:

 C1 { name="Petr", surname="Novák", getName=function(), getSurname=function()}
Petr
Novák

JavaScript: Příklad objektu

09:08 15.03.2015

Tento příspěvek obsahuje příklad vytvoření objektu v JavaScriptu. Testovací výstup, který se vypsal do konzole, je přiložen níže.

      <script>
        var o1 = {name:"Martin", getName:function(){return this.name;} }
        console.log(o1);
        console.log(o1.getName());
        console.log(o1.name);
      </script>
 Object { name="Martin", getName=function()}
Martin
Martin

JavaScript: Pole - příklad vytvoření

23:44 14.03.2015

Tento příspěvek obsahuje příklad vytvoření několika polí / objektů a výpis některých vlastností do konzole. V příkladu vidíme, že pole lze vytvořit více způsoby a že rozdíl mezi polem a objektem není moc veliký. Pole je speciální druh objektu.

        var a1 = ["adam","baba"];
        console.log(a1);
        console.log(typeof a1);
        console.log(a1[0]);
        console.log(a1.constructor);
        //console.log(a1.0);//SyntaxError: missing ) after argument list
        console.log("-----");
        
        var a2 = new Array('cecilka','dan');
        console.log(a2);
        console.log(typeof a2);
        console.log(a2[0]);
        console.log(a2.constructor);
        //console.log(a2.0);//SyntaxError: missing ) after argument list
        console.log("-----");
        
        
        var a3 = {0:'eva',1:'franta'};
        console.log(a3);
        console.log(typeof a3);
        console.log(a3[0]);
        console.log(a3.constructor);
        //console.log(a3.0);//SyntaxError: missing ) after argument list
        console.log("-----");
        
        var a4 = {'a':'gabina','b':'hugo'};
        console.log(a4);
        console.log(typeof a4);
        console.log(a4[0]);
        console.log(a4.constructor);
        console.log(a4.a);

Co se v konzoli ukázalo vidíme zde:

 ["adam", "baba"]
object
adam
Array()
-----
["cecilka", "dan"]
object
cecilka
Array()
-----
Object { 0="eva", 1="franta"}
object
eva
Object()
-----
Object { a="gabina", b="hugo"}
object
undefined
Object()
gabina

JavaScript: Třída objektu

22:59 11.02.2015

   function MyObject(){
      this.getName = function(){
        return 'getName result';
      }
    };

    var instance1 = new MyObject();
    var name = instance1.getName();
    var con = instance1.constructor;

V tomto příkladu proměnná name bude obsahovat text "getName result" a proměnná con bude obsahovat referenci na funkci, která objekt vytvořila. Tj. funkcí je v tomto případě MyObject(). Typeof (instance1.constructor) by vrátilo function.