spse:pm3:javascript-uvod [wiki Avrio.cz]

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
~~NOCACHE~~
~~REVEAL theme=dokuwiki&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&size=1280x960~~


====== Co to je JavaScript, vývoj scriptovacích jazyků ======
===== JavaScript =====
  * univerzální (nezávislý na platformě) scriptovací objektově-orientovaný jazyk
  * představila společnost Netscape (B. Eich)
  * obvyklé použití – klientský scriptovací jazyk (použití přímo v prohlížeči)
  * vkládaný do HTML – ovládá grafické a interaktivní prvky stránky (obrázky, formuláře, odkazy, záložky) nebo vzhled stránek
  * syntakticky podobný C++, Java
  * nemá vlastní grafické nástroje (využívá HTML a CSS)


====== Co JavaScript neumí? ======
  * žádné grafické schopnosti (ale může využít grafických schopností HTML a CSS)
  * neumožňuje práci se soubory - velké omezení pro programovací jazyk, logické z bezpečnostních důvodů
  * nepodporuje práce se sítí – jen odeslání formulářů na server, přechod na adresu URL

====== Historie ======
  * 1995 – představen jako doplněk k HTML
  * Java v názvu – žádná příbuznost k JAVA, jen obchodní tah
  * 1997 – standardizace ECMA (Europen Computer Manufacturers Association) – základní standard, ze kterého vychází i např. ActionScript
  * 1998 – ISO standardizace


====== jádro JavaScriptu ======
//základní syntaxe, datové typy, proměnné, příkazy, větvení//

===== syntaxe =====
  * znaková sada Unicode (2 byte – 256 znaků)
  * **case senzitive** jazyk – rozlišuje malá a velká písmena
  * **vždy středníky** za datovými a příkazovými strukturami 
  * složené závorky pro bloky příkazů
  * komentáře jako v PHP, C++, Javě...

---->
<code javascript>
// JavaScript Document
retezec = "Hello, world";
var a = 12; var b = 15;

//používáme středníky

if (a<10) {
  document.write(a);
  a++;
}
/*používáme složené závorky na datové a příkazové bloky*/

</code>
<----

===== Vkládání skriptu do stránky =====
  * Skript se píše mezi značky <script> a </script>. Ty můžete vložit do sekce body nebo do sekce head (záleží na účelu skriptu).
<fragment-block>
<code html>
<html>
<head>
...
<script type="text/javascript">
.. javascript tělo skriptu ..
</script>
...
</head>
<body>
..tělo dokumentu..
<script type="text/javascript">
.. javascript tělo skriptu..
</script>
..tělo dokumentu..
</body>
</html>
</code>
</fragment-block>
==== Úkol ====
  * ''document.open();'' - otevírá dokument
  * ''document.write();'' - zapisuje do dokumentu
  * ''window.alert();'' - vypisuje do výstražného okna


<WRAP center round tip 60%>
   * **Úkol**
    * vypište něco na obrazovku
    * vyvolejte výstražné okno s nějakým textem
</WRAP>



=====datové typy, proměnné, operátory =====
==== Datové typy ====
  * primitivní datové typy
    * číslo (number)
    * řetězec (string)
    * logická hodnota (boolean)
    * null, undefined
  * pole
  * objekty

==== Čísla ====
  * matematické operace s čísly pomocí objektu Math
<fragment-block>
<code javascript>
// javascript Document
var x = Math.sin(90);
var y = Math.sqrt(9); //druhá odmocnina

var y = (3).toString(2); // zápis do binární soustavy - výsledek bude 11
var y = (0x1A).toString(10); // zápis do decimální soustavy z hexadecimální - výsledek 26
</code>
</fragment-block>

=== Čísla - speciální hodnoty ===
  * Infinity - kladné nebo záporné nekonečno
  * NaN - Not A Number - nečíselná hodnota

==== Řetězce - string ====
  * datový typ reprezentovaný znaky UNICODE
  * text uzavřený do uvozovek nebo apostrofů
<fragment-block>
<code javascript>
var text = "Hello world";
var datum = '1.1.2020';
</code>
</fragment-block>
==== Escape sekvence ====

<code>
sekvence  význam
\n        nový řádek
\t        řádkový tabulátor
\v        svislý tabulátor
\r        návrat kurzoru (HOME)
\'        znak apostrof
\"        znak uvozovky
\\        zpětné lomítko
\b        backspace (BACK)

</code>

==== Spojování řetězců ====

  * provádí se pomocí znaménka **+**
<fragment-block>
<code javascript>

var text = "Hello world";
var datum = '1.1.2020';

var message = text + " Dnes je " + datum + ", hodně štěstí do nového roku";

</code>
</fragment-block>
<fragment-block>
=== Příklady funkcí pro práci s řetězci ===
<code javascript>

var message = text + " Dnes je " + datum + ", hodně štěstí do nového roku";
delka = message.length; //délka řetězce
posledni = messsage.charAt(message.length-1); // poslední písmeno v řetězci
cast = substring(0,5); // část řetězce mezi 1-5 znakem
poradi = message.indexOf('D'); // první pozice znaku D v řetězci

</code>
</fragment-block>
==== Pole ====
  * indexované - od nuly
  * asociativní pole

<fragment-block>
<code javascript>
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];
</code>

https://www.w3schools.com/js/js_arrays.asp
</fragment-block>

==== Objekty ====
  * soubor pojmenovaných hodnot uspořádaných do logického celku
  * objekty se většinou stanovují obecně, pak se vytváří kopie (instance) pomocí konstruktoru a s daty v objektech se pracuje pomocí funkcí – tzv. metod
  * prakticky celý klientský JavaScript je založen na Objektech – i když to není zřejmé
    * všechny prvky na html stránce jsou podřízené objektu Window
    * potomky tohoto objektu (třídy) jsou Document, Frame, Field, Link, Img, Anchor, ...


---->
<code javascript>
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

//person["lastName"];
</code>
<----

==== Funkce ====
  * JavaScript obsahuje řadu přednastavených funkcí (resp. metod), pro práci s čísly (např. metody objektu Math)
  * uživatel může definovat řadu funkcí nebo metod – tj. funkcí vázaných k určitým objektům
<fragment-block>
<code javascript>
function myFunction(p1, p2) {
  return p1 * p2;   // Funkce vrátí součin agrumentu p1 a p2
}
</code>
</fragment-block>
<fragment-block>
<code javascript>
var x = myFunction(4, 3);   // Funkce je zavolána, návratová hodnota se uloží do proměnné **x**

function myFunction(a, b) {
  return a * b;             // Funkce vrací součin **a** a **b**
}
</code>
</fragment-block>
==== Úkol ====

<WRAP center round tip 80%>
  * **Úkol**
    * definujte různé proměnné
    * proveďte matematické operace s čísly a řetězci a vypište je na obrazovku
</WRAP>

=====řídící struktury, větvení programu, cykly =====
==== If, Else ====
  * stejné jako v c/c++
<fragment-block>
<code javascript>
if (hour < 18) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}
</code>
</fragment-block>


==== Úkol ====
<WRAP center round tip 90%>
  * **Úkol**
    * vytvořte skript který bude využívat větvení pomocí podmínky if elseif a else
    * použijte porovnání číselných hodnot pomocí operátorů ''<,>,<=,=>''
    * otestujte výraz typu boolean
</WRAP>

==== Cyklus for ====
  * stejný jako v C/C++
<fragment-block>
<code javascript>
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
</code>
</fragment-block>
<fragment-block>
<code javascript>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var i;
for (i = 0; i < cars.length; i++) {
  document.write(cars[i]);
  document.write("<br>");
}
</code>
</fragment-block>

==== Úkol ====
<WRAP center round tip 90%>
  * **Úkol**
    * vytvořte pomocí for cyklu následující (nadpisy od H1 do H6):
<fragment-block>
{{:spse:pm3:pasted:20210105-211740.png}}
</fragment-block>
</WRAP>


/*
===== základy objektově orientovaného programování =====
s57
===== Regulární výrazy =====
====== JavaScript v prohlížeči ======
===== integrace v HTML =====
===== objekty Window, Screen, Navigator, Location, History =====
=====objekt Document – obrázky, odkazy, záložky =====
===== formuláře a jejich prvky =====
====== DOM ======
====== Ovládání CSS pomocí scriptů ======
======Ovladače událostí ======
====== Praktické příklady====== 
*/