Class Javascript tutorial 1
Třídy - class v javascript
Něco málo opakování na úvod:
Proměnná (variable) je místo, kam si ukládáme čísla, řetězce(text, znaky), objekty.
Narazíte možná často, že tomu tak není a kód není ukončen a na dalším řádku je definice
jiné proměnné, ale nespoléhejte na to, že si s tím prohlížeč vždy poradí a řádně ukončujte bloky kódu středníkem!
Je třeba jí co nejdříve definovat, jinak je to na malér.
Pole (array) je místo, kam ukládáme víc proměnných za sebou (do pole můžeme ukládat i objekty).
Objekt zpravidla vytváříme pomocí třídy.
Objektů může by mnoho, ale třída, pomocí které jsou vytvořeny, tak ta může být jen jedna.
Co je to třída?
Třída je taková šablona pro ukládaní dat, nebo vykonávání příkazů.
Lze jí přirovnat k formuláři, nebo dotazníku, kde má object (osoba) vyplnit
jméno, příjmení a další osobní údaje.
Formulář bude mít pro všechny zúčastněné stejné položky pro vyplnění,
ale každá osoba (object) do něj zapíše jiné údaje.
Takže nejdříve si vytvoříme třídu PersonalData.
Třída začíná velkým písmenem a slova se oddělují Velkým
písmenem, nebo _ podtržítkem (pro lepší čitelnost).
Třídní proměnné musíme označit this tečkou a názvem proměnné.
Před jméno třídní proměnné je dobré (až nutné) vložit prefix podtržítko _ a název
proměnné _nameOfVariable a tím ji odlišit od ostatních proměnných, potulujících
se v dalším kódu.
a protože constructor třídy umožňuje přímo při vytovření novéh Objectu vložit
i základní údaje, tak toho musíme využít.
nebo přistoupit k datům a použít privátní funkci
nebo použít veřejnou funkci např. pro získání popisu co třída umí
Něco málo opakování na úvod:
Proměnná (variable) je místo, kam si ukládáme čísla, řetězce(text, znaky), objekty.
var str = "ahoj světe!";
Kód, který patří k deklaraci, či definici určité proměnné, ukončujeme středníkem;Narazíte možná často, že tomu tak není a kód není ukončen a na dalším řádku je definice
jiné proměnné, ale nespoléhejte na to, že si s tím prohlížeč vždy poradí a řádně ukončujte bloky kódu středníkem!
// takhle raději ne - v budoucnu byste také mohli předělávat mnoho stránek kódu
a = 2
b = 3
// takhle je to správně, n před názvem proměnné označuje,
// že si tam, v našem případě, ukládáme číslo (number)
// s pak řetězec (string)
var nA = 2;
var nB = 3;
var sHello = "Hello world!";
// typ proměnné bychom sice v dalším kódu mohli ověřit
// pomocí <b>if (typeof myVariable == 'string')</b> atd.
// ale je to zbytečná práce navíc a znepřehledňuje to kód.
Deklarace proměnné je zapsání proměnné aniž by jste do ní vložili data.Je třeba jí co nejdříve definovat, jinak je to na malér.
var myDeklarationOfVariable;
Definice proměnné znamená, že do proměnné vložíme - přiřadíme jí hodnotu.
var myDefinitionOfVariable = "Tak, a už jsi definovaná!";
Definovat proměnnou můžeme i prázdným řetězcem, nebo u čísel se zadává -1 a pak již
kontrolujeme v kódu, jestli se hodnota proměnné změnila.Pole (array) je místo, kam ukládáme víc proměnných za sebou (do pole můžeme ukládat i objekty).
var ar = new Array("ahoj", "světe", "čau", "lidi!");
Objekt (Object) je místo, kam si můžeme ukládat nejen data, ale může obsahovat i funkce atd.Objekt zpravidla vytváříme pomocí třídy.
Objektů může by mnoho, ale třída, pomocí které jsou vytvořeny, tak ta může být jen jedna.
Co je to třída?
Třída je taková šablona pro ukládaní dat, nebo vykonávání příkazů.
Lze jí přirovnat k formuláři, nebo dotazníku, kde má object (osoba) vyplnit
jméno, příjmení a další osobní údaje.
Formulář bude mít pro všechny zúčastněné stejné položky pro vyplnění,
ale každá osoba (object) do něj zapíše jiné údaje.
Takže nejdříve si vytvoříme třídu PersonalData.
Třída začíná velkým písmenem a slova se oddělují Velkým
písmenem, nebo _ podtržítkem (pro lepší čitelnost).
Třídní proměnné musíme označit this tečkou a názvem proměnné.
Před jméno třídní proměnné je dobré (až nutné) vložit prefix podtržítko _ a název
proměnné _nameOfVariable a tím ji odlišit od ostatních proměnných, potulujících
se v dalším kódu.
class PersonalData {
// constructor slouží k základnímu nasavení konkrétního Object-u - osoby, věci atd.
constructor(name,family_name, profession) {
// před privátní proměnné dávejte prefix podtržítko
// za čas to nejedenkrát oceníte
this._name = name;
this._family_name = family_name;
this._profession = profession;
// myVariable = profession; // error
}
// třída může obsahovat i funkce. Pokud před funkcí není označení static
// pak se jedná o privátní fukci a může se používat jen přes konkrétní Object
// tedy přes osoba = new PersonalData( parametry ....)
// osoba.showPrivateContent()
// může mít i parametry
showPrivateContent(param){
alert (param " " + this._name + " " + this._family_name + " " + this._profession);
}
// tuto funkci může použít každy, aniž by musel vytvářet Object (konkrétní osobu)
// stačí PersonalData.showPrivateContent(param) a už běží!
// funkce ale nemá přístup k osobním údajům konktrétních Object-ů
// může mít i parametry
static showPublicIfno(param){
alert("Hello! This class can stored private data about any singers! " + param);
}
}
Dále si vytvořím Object (osobu), která vystavíme novou šablonu (formulář - třídu)a protože constructor třídy umožňuje přímo při vytovření novéh Objectu vložit
i základní údaje, tak toho musíme využít.
var michaelJackson = new PersonalData("Michael","Jackson","singer");
Nyní si již můžeme něco zjistit o tomto Objectu ze zadaných údajů např. jméno:
var strNameOfObject = michaelJackson._name;
nebo přistoupit k datům a použít privátní funkci
michaelJackson.showPrivateContent();
nebo použít veřejnou funkci např. pro získání popisu co třída umí
PersonalData.showPublicIfno('Bye Bye!');
77LW NO topic_id
AD
Další témata ....(Topics)
Jeden znak: a, b nebo c | [abc] | [abc] | a bb ccc |
Znak kromě: a, b nebo c | [^abc] | [^abc] | d, ff, mmm ale ne a, bb, ccc |
Znak od až po: a-z | [a-z] | [a-z] | jez, mez, bez ale ne keřík - neumí diakritiku |
Znak není v rozsahu: a-z | [^a-z] | vybere prázdné mezery i pismena s diakritikou | |
Znak v rozsahu: a-z nebo A-Z | [a-zA-Z] | neumí diakritiku | |
Jakýkoliv jednotlivý znak | . | bere vše i diakritiku, kromě znaku konce řádku | |
Znak mezery | \s | ^\r
\t\f\v a mezery | |
Znak není mezera | \S | vše kromě mezer viz výš | |
Číslice | \d | pouze číslice | |
Libovolné jiné než číslice | \D | vše výjma číslic | |
Jakýkoliv znak písmena | \w | \w+ | celá slova pokud neobsahují diakritku či nepísmena |
Jakýkoli znak jiný než písmeno | \W | \W+ | *-+#@ ale ne _ podtržítko |
Vše co bude v závorce (group) | (...) | (he) | všechna he ze slov |
Buď a nebo b | (a|b) | (a|b) | vybere vešechna a i b ze slov |
Nula nebo jeden znak a | a? | bao? | bao , ba, ale ne samotne b |
Nula nebo více | a* | bao* | ba, bao ale ne b, bax, bac |
Jeden nebo více | a+ | a až nekonečno aaaa i a uprostřed slova | |
Přesně 3 znaky a | a{3} | aaa aaaa jen první 3 znaky, ale ne aa | |
3 nebo více znaků a | a{3,} | aaa až nekonečno aaaaaaaa | |
Mezi 3 a 6 znaky a | a{3,6} | aaa aaaaaa ale ne aa | |
Začátek řetězce | ^ | ^\w+ | např. slovo je začátek nového řádku |
Konec řetězce | $ | \w+$ | (veme konci) poslední slovo na konci |
Hranice slova | \b | d\b | (veme d na konci slov) hrad led |
Není hranice slova | \B | a\B | a v ab, ale ne v ba |
Nový řádek |
| \r
?| | cross platform newline / nalezne nový řádek napříč platformami |
Tab - tabulátor | \t | ||
Carriage return CR | \r | návrat vozíku https://cs.wikipedia.org/wiki/Carriage_return | |
// multiline string old school tip trick
// create elemnt div style none or hidden with text
var sMulitilineString = document.getElementById('idHiddenDiv').innerHTML; // get text from hidden div
// ES6 with quotes
const htmlString = 'Say hello to
multi-line
strings!';
(typeof "813") // string
(typeof 813) // number
parseInt("10.33") // returns 10 string to integer
parseInt('2def8'); // 2
parseInt('a2def8'); // NaN
parseFloat("10.33") // returns 10.33 string to float
var test_1 = 'string';
var test_2 = ' example';
var suma = test_1 + test_2;
var length = suma.length; // 14
var le = test_1.length; // 6
charAt(index)
/* Returns the character at the specified index */
var str = new String('Sample');
str.charAt(3)); // p
// startsWith
var str = "HELLO WORLD";
var res = str.charAt(0); // H
// endsWith
var res = str.charAt(str.length - 1); // D
charCodeAt(index)
/* Returns an integer representing the Unicode encoding
of the character at the specified location */
var str = new String('Sample');
str.charCodeAt(3)); // 112
fromCharCode([code1[, code2[, ...[, codeN]]]])
/* Returns a string from a number of Unicode character values */
var e = window.event;
var str = String.fromCharCode(e.keyCode); // keydown etc.
concat([item1[, item2[, . . . [, itemN]]]])
/* Returns a new array consisting of a combination of two or more arrays */
var arr1 = new Array("Hello, ", "Dolly uranove");
var arr2 = new Array("World!", "dort");
var myConcatArray = arr1.concat(arr2);
alert(myConcatArray[3]); // dort
concat([string2[, string3[, . . . [, stringN]]]])
/* Returns a string value containing the concatenation
of two or more supplied strings */
var string1 = new String("Hello, ");
var string2 = new String("World!");
var myConcatString = string1.concat(string2); // Hello, World!
indexOf(subString[, startIndex])
/* Returns the character position where the first occurrence
of a substring occurs within a String object */
lastIndexOf(substring[, startindex])
/* Returns the last occurrence of a substring within a String object */
localeCompare(stringExp)
/* Returns a value indicating whether two strings
are equivalent in the current locale */
var str1 = "1";
var str2 = "2";
var n = str1.localeCompare(str2); // -1
var str1 = "2";
var str2 = "2";
var n = str1.localeCompare(str2); // 0
var str1 = "a";
var str2 = "b";
var n = str1.localeCompare(str2); // -1
var str1 = "b";
var str2 = "a";
var n = str1.localeCompare(str2); // 1
match(rgExp)
/* Executes a search on a string using a regular expression
pattern, and returns an array containing the results of that search */
var rgExp = /some text/g;
replace(rgExp, replaceText)
/* Returns a copy of a string with text replaced
using a regular expression or search string */
search(rgExp)
/* Returns the position of the first substring
match in a regular expression search */
n // A newline character
. // Any character except a newline
r // A carriage return character
t // A tab character
b // A word boundary (the start or end of a word)
B // Anything but a word boundary
d // Any digit (same as [0-9])
D // Anything but a digit (same as [^0-9])
s // Single whitespace (space, tab, newline, etc.)
S // Single nonwhitespace
w // A "word character” (same as [A-Za-z0-9_])
W // A "nonword character” (same as [^A-Za-z0-9_])
slice(start, [end])
/* Returns a section of an array or string */
var myString = new String("This is a test");
var mySlice = myString.slice(2,6); // is i // pos: 2 to 5 // 0==T, 1==h, 2==i, 3==s, 4==" ", 5==i
mySlice = myString.slice(-3); // est // end of string
mySlice = myString.slice(0); // This is a test
split([separator[, limit]])
/* Returns the array of strings that results
when a string is separated into substrings */
var str = "one two three";
var words = str.split(" ");
var len = words.length; // 3
substring(start, end)
/* Returns the substring at the specified location
within a String object */
var inpTxt = "Hello there";
alert(inpTxt.substring(6, 10)); // ther
substr(start [, length ])
// Returns a substring beginning at a specified
// location and having a specified length
var s = "The love in Spain.";
ss = s.substr(12, 5); // Spain
tolocaleLowerCase()
/* Returns a string where all alphabetic characters
have been converted to lowercase, taking into account
the host environment's current locale */
toUpperCase()
/* Returns a string where all alphabetic characters
have been converted to uppercase */
var myString = "My text";
myString.anchor //places an HTML anchor with a NAME attribute around specified text in the object
myString.big
myString.blink
myString.bold
myString.concat
myString.fixed
myString.fontcolor
myString.fontsize
myString.charAt
myString.charCodeAt
myString.indexOf
myString.italics
myString.lastindexOf
myString.length
myString.link
myString.match
myString.replace
myString.search
myString.slice
myString.small
myString.split
myString.strike
myString.sub //places HTML SUB tags around text in a String object
myString.substr
myString.substring
myString.sup
myString.toLowerCase
myString.toString
myString.toUpperCase
myString.valueOf
var str = "58";
var res = str.valueOf();
var type = (typeof res); // string
var str = 58;
var res = str.valueOf();
var type = (typeof res); // number
Toogle DIV javascript example code:
Jak skrýt, nebo zobrazit kontejner DIV:Nezapomeňte přiřadit DIVu ID, aby k němu bylo možno přistupovat pomocí getElementById a vše fungovalo i v jiných prohlížečích (Opera, Firefox, Google Chrome) a ne jen v Internet Exploreru.
<div id="idSomeDiv"> text div </div>
<input type="button" size="200" value="Skryj-zobraz"
onclick="var dH = document.getElementById('idSomeDiv');
if(dH.style.visibility == 'hidden') {
dH.style.visibility = 'visible';
} else {
dH.style.visibility = 'hidden';
}">
toString([radix])
/* prevede objekt na string */
toLocaleString()
var myDate = new Date();
document.write( myDate.toLocaleString());
// 24. února 2009 10:50:02
valueOf()
var number = new Number();
number = Number(100);
if (!isNaN(number))
document.write(number.valueOf()); // 100
hasOwnProperty(proName)
var theObj = { prom : 'bla' };
if ( theObj.hasOwnProperty )
{
document.write( "Has 'prom': " + theObj.hasOwnProperty( 'prom' ) + 'n' ); // true
document.write( "Has 'prom2': " + theObj.hasOwnProperty( 'prom2' ) + 'n' ); // false
}
isPrototypeOf(object2)
function fc(){
var reg = new RegExp();
return (RegExp.prototype.isPrototypeOf(reg)); // return true.
}
propertyIsEnumerable(proName)
var a = new Array("apple", "banana", "cactus");
document.write(a.propertyIsEnumerable(2)); // true
Example code
header("HTTP/1.1 301 Moved Permanently");
header("Location: https://www.newsite.com/new-page.php");
header("Connection: close");
exit();
If using file name without .php as part of smoothly url - example:
$fileName = basename(__FILE__, '.php');
header("HTTP/1.1 301 Moved Permanently");
header("Location: https://www.mysite.cz/auto-moto/".$fileName."/");
header("Connection: close");
exit();
Date: 23.07.2020 - 12:31Editace: 21.5.2020 - 20:34
Počet článků v kategorii: 77
Url:class-javascript-tutorial-1