Výukový program JS

JS HOME Úvod do JS JS Kam vést Výstup JS JS prohlášení Syntaxe JS Komentáře JS JS proměnné JS Let JS Const Operátoři JS JS aritmetika Zadání JS JS datové typy Funkce JS JS objekty Události JS JS struny JS String Methods JS String Search Šablony řetězců JS JS čísla Metody čísel JS JS Arrays Metody JS Array JS Array Sort Iterace pole JS JS Array Const JS Termíny Formáty data JS JS metody získávání data JS metody nastavení data JS Math JS Náhodný JS Booleans JS Srovnání Podmínky JS Přepínač JS JS Loop For JS Loop For In JS Loop For Of Zatímco JS Loop JS Break JS Iterables Sady JS Mapy JS Typ JS Konverze typu JS JS Bitwise JS RegExp Chyby JS Rozsah JS JS Zvedací zařízení Přísný režim JS JS toto klíčové slovo Funkce šipky JS JS třídy JS JSON Ladění JS Průvodce stylem JS JS Best Practices Chyby JS Výkon JS JS Reserved Words

Verze JS

Verze JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historie JS

JS objekty

Definice objektů Vlastnosti objektu Objektové metody Zobrazení objektu Objektové přístupové objekty Konstruktory objektů Prototypy objektů Iterovatelné objekty Sady objektů Mapy objektů Reference objektu

Funkce JS

Definice funkcí Funkční parametry Vyvolání funkce Volání funkce Funkce Použít Funkční uzávěry

JS třídy

Úvod do třídy Třídní dědičnost Třída Statická

JS Async

JS zpětná volání JS asynchronní JS Sliby JS Async/Await

JS HTML DOM

Úvod do DOM Metody DOM Dokument DOM Prvky DOM DOM HTML Formuláře DOM DOM CSS DOM animace Události DOM DOM Event Listener Navigace DOM DOM uzly Kolekce DOM Seznamy uzlů DOM

Kusovník prohlížeče JS

Okno JS Obrazovka JS Umístění JS Historie JS JS Navigator Popup Alert JS Časování JS Soubory cookie JS

Webová rozhraní API JS

Úvod do webového rozhraní API Web Forms API Webová historie API Web Storage API Web Worker API Web Fetch API Web Geolocation API

JS AJAX

Úvod do AJAXu AJAX XMLHttp Požadavek AJAX Odpověď AJAX Soubor XML AJAX AJAX PHP AJAX ASP Databáze AJAX Aplikace AJAX Příklady AJAX

JS JSON

Úvod do JSON Syntaxe JSON JSON vs XML Datové typy JSON Analýza JSON JSON Stringify Objekty JSON Pole JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Selektory jQuery HTML jQuery jQuery CSS jQuery DOM

Grafika JS

Grafika JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Příklady JS

Příklady JS JS HTML DOM Vstup HTML JS JS HTML objekty JS HTML události Prohlížeč JS Editor JS Cvičení JS JS kvíz Certifikát JS

JS Reference

Objekty JavaScriptu HTML DOM objekty


Doporučené postupy pro JavaScript


Vyhnout se globálním proměnným, vyhnout se new, vyhnout se ==, vyhnout seeval()


Vyhněte se globálním proměnným

Minimalizujte používání globálních proměnných.

To zahrnuje všechny datové typy, objekty a funkce.

Globální proměnné a funkce mohou být přepsány jinými skripty.

Místo toho použijte místní proměnné a naučte se používat uzávěrky .


Vždy deklarujte místní proměnné

Všechny proměnné použité ve funkci by měly být deklarovány jako lokální proměnné.

Lokální proměnné musí být deklarovány pomocí var klíčového slova nebo letklíčového slova nebo constklíčového slova, jinak se z nich stanou globální proměnné.

Přísný režim neumožňuje nedeklarované proměnné.


Prohlášení nahoře

Je dobrou praxí kódování umístit všechny deklarace na začátek každého skriptu nebo funkce.

Tohle bude:

  • Zadejte kód čističe
  • Poskytněte jediné místo pro hledání místních proměnných
  • Usnadněte si vyhnutí se nechtěným (implicitním) globálním proměnným
  • Snížit možnost nechtěných opakovaných prohlášení
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price - discount;

To platí také pro proměnné smyčky:

for (let i = 0; i < 5; i++) {


Inicializovat proměnné

Je dobrou praxí kódování inicializovat proměnné, když je deklarujete.

Tohle bude:

  • Zadejte kód čističe
  • Poskytněte jedno místo pro inicializaci proměnných
  • Vyhněte se nedefinovaným hodnotám
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};

Inicializace proměnných poskytuje představu o zamýšleném použití (a zamýšleném datovém typu).


Deklarace objektů s konst

Deklarováním objektů pomocí const zabráníte náhodné změně typu:

Příklad

let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Changes object to string

const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat";      // Not possible

Deklarujte pole s konst

Deklarace polí pomocí const zabrání jakékoli náhodné změně typu:

Příklad

let cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Changes array to number

const cars = ["Saab", "Volvo", "BMW"];
cars = 3;    // Not possible

Nepoužívejte nový objekt ()

  • Použijte ""místonew String()
  • Použijte 0místonew Number()
  • Použijte falsemístonew Boolean()
  • Použijte {}místonew Object()
  • Použijte []místonew Array()
  • Použijte /()/místonew RegExp()
  • Použijte function (){}místonew Function()

Příklad

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean
const x4 = {};           // new object
const x5 = [];           // new array object
const x6 = /()/;         // new regexp object
const x7 = function(){}; // new function object

Pozor na automatické převody typů

JavaScript je volně napsaný.

Proměnná může obsahovat všechny datové typy.

Proměnná může změnit svůj datový typ:

Příklad

let x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

Pozor, čísla mohou být náhodně převedena na řetězce nebo NaN(Není číslo).

Při provádění matematických operací může JavaScript převádět čísla na řetězce:

Příklad

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

Odečtení řetězce od řetězce negeneruje chybu, ale vrátí NaN(není číslo):

Příklad

"Hello" - "Dolly"    // returns NaN

Použijte === Srovnání

Operátor ==porovnání vždy před porovnáním převede (na odpovídající typy).

Operátor ===si vynutí porovnání hodnot a typu:

Příklad

0 == "";        // true
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

Použít výchozí nastavení parametrů

Pokud je funkce volána s chybějícím argumentem, hodnota chybějícího argumentu je nastavena na undefined.

Nedefinované hodnoty mohou narušit váš kód. Je dobrým zvykem přiřazovat argumentům výchozí hodnoty.

Příklad

function myFunction(x, y) {
  if (y === undefined) {
    y = 0;
  }
}

ECMAScript 2015 umožňuje výchozí parametry v definici funkce:

function (a=1, b=1) { /*function code*/ }

Přečtěte si více o parametrech a argumentech funkcí v části Parametry funkcí


Ukončete přepínače s výchozími nastaveními

Svá prohlášení vždy ukončete switchznakem default. I když si myslíte, že to není potřeba.

Příklad

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
    break;
  default:
    day = "Unknown";
}

Vyvarujte se čísel, řetězců a logických hodnot jako objektů

Vždy zacházejte s čísly, řetězci nebo booleany jako s primitivními hodnotami. Ne jako předměty.

Deklarování těchto typů jako objektů zpomaluje rychlost provádění a vytváří nepříjemné vedlejší efekty:

Příklad

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

Nebo ještě hůř:

Příklad

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

Vyhněte se použití eval()

Funkce eval()se používá ke spuštění textu jako kódu. Téměř ve všech případech by nemělo být nutné jej používat.

Protože umožňuje spouštění libovolného kódu, představuje také bezpečnostní problém.