Šablóna dokumentu HTML5 pre jQuery

K šablónam (templates), ktoré sa nachádzajú na stránkach How to ..., dopĺňam šablónu pre prácu s populárnou JavaScriptovou knižnicou jQuery. Šablóna je vytvorená v jazyku HTML5 a používa knižnicu jQuery vo verzii 1.9.1.

V prvom príklade je uvedená rozšírená šablóna a postupne sú predstavené "zoštíhlené" varianty.

Príklad: Základná šablóna HTML5 pre jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 / jQuery Template</title>
    <meta charset="utf-8">
    <meta name="author" content="PhDr. Matej Lednár, PhD.">
    <link rel="stylesheet" href="style.css">     
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style>
    </style>
  </head>
  <body>
    <script>
      $(document).ready(function() {
        // JavaScript code
      });
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 / jQuery Template</title>
    <meta charset="utf-8">
    <meta name="author" content="PhDr. Matej Lednár, PhD.">
    <link rel="stylesheet" href="style.css">     
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style>
    </style>
  </head>
  <body>
    <script>
      $(document).ready(function() {
        // JavaScript code
      });
    </script>
  </body>
</html>

Príklad: Zjednodušená šablóna HTML5 pre jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 / jQuery Template</title>
    <meta charset="utf-8">
    <meta name="author" content="PhDr. Matej Lednár, PhD.">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  </head>
  <body>
    <script>
      $(document).ready(function() {
        // JavaScript code
      });
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 / jQuery Template</title>
    <meta charset="utf-8">
    <meta name="author" content="PhDr. Matej Lednár, PhD.">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  </head>
  <body>
    <script>
      $(document).ready(function() {
        // JavaScript code
      });
    </script>
  </body>
</html>

Pre účely spoznávania jazyka jQuery nie je potrebné používať metódu ready(). Tá sa používa, ak je potrebné počkať na nahratie DOM (všetkých elementov dokumentu). Rovnaký efekt je možné docieliť umiestnením skriptu na spodok dokumentu (bottom).

Príklad: Šablóna HTML5 pre jQuery bez metódy ready().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 / jQuery Template</title>
    <meta charset="utf-8">
    <meta name="author" content="PhDr. Matej Lednár, PhD.">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  </head>
  <body>
 
    <!-- HTML elements -->
 
    <script>
        // JavaScript code
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 / jQuery Template</title>
    <meta charset="utf-8">
    <meta name="author" content="PhDr. Matej Lednár, PhD.">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  </head>
  <body>

    <!-- HTML elements -->

    <script>
        // JavaScript code
    </script>
  </body>
</html>

Záver

Pre používanie aktuálnej verzie knižnice je potrebné sledovať stránky jQuery a upraviť zápis <script src="http://code.jquery.com/jquery-1.9.1.js"></script> na najnovšiu verziu.

Šablóna dokumentu HTML5 pre jQuery

Záver

Komentáre

Pridať komentár