Komentář k článku

V tomto článku se naučíme jak upravit HTML tag přesně podle našich požadavků. Vysvětlení provedu na příkladu vypsání binární hodnoty (0 – 255, byte) po jednotlivých bitech v řádku tabulky. Cílem je upravit tag <tr></tr> přidáním nového atributu tr-byte tak, aby dokázal vytvořit kompletní řádek tabulky <tr><td></td>…</tr> s osmi buňkami včetně hodnot v jednotlivých buňkách tabulky. Použijeme ho např. takhle: <tr tr-byte value=“27“></tr>

HTML, tag, atribut

Jazyk HTML prošel vývojem od svých počátků až po současnou verzi HTML5. Popisuje webovou stránku pomocí značek, tzv. tagů. Tagy mohou obsahovat atributy, které zpřesňují či doplňují jejich význam.

Angular

AngularJS je javascriptová knihovna, která implementuje MVC architekturu. Pomocí Angularu lze snadno programovat webové či mobilní aplikace, viz můj článek Naprogramujte si vlastní android aplikaci (bez znalosti Javy)

Upravený HTML tag <tr></tr>

V terminologii Angularu tvoříme direktivu, v terminologii HTML tvoříme nový atribut. Kód budeme psát do dvou souborů: index.html (sem přijde HTML kód, tj. tagy) a app.js (sem přijde práce s Angularem a definice vlastní directivy).

A) soubor app.js

1) Definujeme proměnnou a modul
var app = angular.module('app', []);
2) Definujeme direktivu "trByte" (v HTML se bude jako atribut zapisovat v tagu <tr tr-byte></tr>

app.directive('trByte', function(){
    return {
      restrict: "A",
      replace: true,
      scope: {
          value: "="
      },
      template: "<tr><td>{{Byte[7]}}</td><td>{{Byte[6]}}</td><td>{ {Byte[5]}}</td><td>{{Byte[4]}}</td><td>{{Byte[3]}} </td><td>{{Byte[2]}}</td><td>{{Byte[1]}}</td><td>{ {Byte[0]}}</td></tr>",
      controller: function($scope){
        var Byte = [];
        if (!($scope.value === parseInt($scope.value)) || ($scope.value < 0) || ($scope.value > 255) ) {$scope.Byte = ["-", "-", "-", "-", "-", "-", "-", "-"]; return;};
        
        for (var i = 7; i>-1; i--) {if ($scope.value >= Math.pow(2, i)) {Byte[i] = 1; $scope.value = $scope.value - Math.pow(2, i);} else {Byte[i] = 0;};};
        $scope.Byte = Byte;
        }
    };
});

3) A to je v souboru app.js všechno.

Kdo nepotřebuje popis, jak to celé funguje, může pokračovat na bod B)

Na řádku 1 definujeme direktivu s názvem "trByte", přičemž v HTML kódu ji použijeme jako atribut <tr tr-byte></tr>
Na řádku 2 až 7 vracíme objekt, jehož vlastnost restrict říká, že direktiva se definuje jako atribut tagu (A = atribut). Vlastnost replace říká, že se direktiva nahradí HTML kódem z vlastnosti template.
Na řádku 5 až 7 určujeme, že použijeme další atribut value; tj. skutečné použití našeho upraveného tagu bude např.: <tr tr-byte value=“27“></t>
Na dalších řádcích je vlastnost template, což je HTML kód, kterým se nahradí náš upravený tag <tr tr-byte></tr>. Je to vlastně řádek tabulky s osmi buňkami. V každé buňce je jeden prvek pole Byte. Jeho hodnotu získáme z controlleru.

Nejprve se zkontroluje, zda atribut value obsahuje celé číslo (1. část podmínky) a zda je toto číslo v rozsahu od 0 do 255 (2. a 3. část podmínky). Pokud to není splněno, do všech prvků pole Byte se zapíše znak mínus ("-").
Je-li v atributu value celé číslo v rozsahu od 0 do 255, pak se do prvků pole zapíše jeho osmibitová binární hodnota – do jednoho prvku pole vždy jeden bit.

Ve vlastnosti template máme osm jednotlivých tagů <td></td>, do kterých zapisujeme prvky pole Byte, např. <td>{{Byte[7]}}</td> - a to je právě prvek pole Byte, jehož hodnota je vypočítána v controlleru.

B) soubor index.html

Nový atribut (direktivu) máme hotovou, teď ji vyzkoušíme na HTML stránce. Aby vše fungovalo, musíme načíst knihovnu AngularJS a náš vlastní soubor app.js (pozor na správný zápis včetně cesty k souboru).

Zapíšeme HTML tabulku, ale místo <tr><td>obsah</td>…</tr> použijeme náš nový atribut <tr tr-byte></tr> společně atributem value, do kterého vložíme hodnotu v rozsahu od 0 do 255.
Věřím, že příklad použití je dostatačně srozumitelný:

<html ng-app="app">
<head>
	<title>Byte v tabulce jako osmibitová hodnota</title>
	<style>
		table {border-width:1px; border-color: #666; border-style: solid; font-size:18px; border-spacing:0; border-collapse:collapse; width: 100%;}
		thead {background-color: white; color: black; font-weight:bold;}
		th {padding:3px; text-align:center; background-color: lightblue;}
		td {padding: 3px; border: 1px #ddd dotted; text-align: center; color: black;}
	</style>
</head>
<body>
	<table>
		<thead>
			<tr><th colspan='8'>Byte</th></tr>
		</thead>
		<tbody>
			<tr><td colspan="8">hodnoty</td></tr>
			<tr tr-byte value='140'></tr>
			<tr tr-byte value='77'></tr>
			<tr tr-byte value=''></tr>
		</tbody>
	</table>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
	<script src="js/app.js"></script>
</body>
</html>

Tabulka obsahuje jednořádkovou hlavičku a tělo se čtyřmi řádky, přičemž 2., 3. a 4. řádek používá náš upravený tag s novým atributem (v posledním řádku je záměrně vynechána hodnota atributu value).

Přikládám zdrojové soubory...

html-atribut-tr-byte.zip 991.00 B