Skrypty

W blogu są dodane skrypty globalne, które mogą być wykorzystane przy pisaniu postów.

Wyjaśnienia skrótów

Skrypt abbr.js umożliwia wyjaśnienie skrótów, przez dodanie atrybutu title, jeśli umieścimy go w elemencie <abbr>. Definicje są pobierane z pliku http://plotkarka.eu/b/abbr.html z wykorzystaniem języka HTML5.
<script src="http://plotkarka.eu/b/abbr.js"></script>

Przykład

WWW

Kolorowanie składni

Zmodyfikowany skrypt JUSH (JavaScript Syntax Highlighter)
Oryginał: http://jush.sourceforge.net/
Modyfikacja: http://plotkarka.eu/jush/
umożliwiający formatowanie kodu różnych języków z jednoczesnym dodaniem hiperłączy do dokumentacji W3C, MDN, PHP (php.net) i SQL (mysql.com). 
<script src="http://plotkarka.eu/jush/jush.js"></script>
<script>
 jush.style('http://plotkarka.eu/jush/jush.css');
 jush.highlight_tag('pre');
 jush.highlight_tag('code');
</script>
Kod umieszczamy w elemencie pre lub code z atrybutem class o wartości:
  • jush dla HTML
  • jush-css dla CSS
  • jush-js dla JavaScript
  • jush-php dla PHP
  • jush-sql dla SQL

Przykłady

HTML
Elementy i atrybuty HTML 5.1 W3C
<html>
<element title="">
CSS
Reguły CSS 2.1 W3C 
{color:}
JavaScript
ECMAScript (ECMA-262), HTML5 i DOM W3C różne wersje 
if
alert()
PHP
PHP różne wersje 
if
for
SQL
MySQL 5.7 
SELECT
CREATE TABLE

Interaktywne przykłady

W repetytorium i wskazówkach do zadań stosowany jest skrypt:
<script>
textarea1.addEventListener("input", function(){
iframe1.srcdoc=textarea1.value
})
addEventListener("load", function(){
iframe1.srcdoc=textarea1.value
})
</script>
Kod umieszczamy w elemencie textarea z atrybutem textarea1 będzie on wykonywany po załadowaniu strony lub zmianie zawartości w elemencie iframe z atrybutem iframe1.W przypadku kilku kodów na stronie zwiększamy kolejno numer identyfikatora. Atrybuty wysokości i szerokości ustawiamy ręcznie.

Przykład 1.


Kod 
<textarea id="textarea1" style="height: 50px; width: 100%;">
<b>Witaj</b> <i>świecie</i>
</textarea>
<iframe id="iframe1" style="height: 50px; width: 100%;">
</iframe>

Przykład 2.


Kod 
<textarea id="textarea1" style="height: 50px; width: 48%;">
<b>Witaj</b> <i>świecie</i>
</textarea>
<iframe id="iframe1" style="height: 50px; width: 48%;">
</iframe>
Style CSS 
textarea {
padding-top:5px;
border: 2px solid silver;
z-index: 2;
position: relative;
background: no-repeat right top url("data:image/svg+xml;utf8,<svg height="15" width="90" xmlns="http://www.w3.org/2000/svg"><text font-family="arial" font-size="9" opacity="0.5" text-anchor="start" x="0" y="10">EDYTOR KODU</text></svg>"),  no-repeat right bottom url("data:image/svg+xml;utf8,<svg height="15" width="90" xmlns="http://www.w3.org/2000/svg"><text font-family="arial" font-size="9" opacity="0.5" text-anchor="start" x="0" y="10">dostosuj &gt;&gt;&gt;</text></svg>");
background-color: rgb(255,255,255);
}
iframe {
padding: 1px;
resize: both;
z-index: 2;
position: relative; 
background: no-repeat right top url("data:image/svg+xml;utf8,<svg height="15" width="90" xmlns="http://www.w3.org/2000/svg"><text font-family="arial" font-size="9" opacity="0.5" x="0" y="10">PRZEGLĄDARKA</text></svg>"), no-repeat right bottom url("data:image/svg+xml;utf8,<svg height="15" width="120" xmlns="http://www.w3.org/2000/svg"><text font-family="arial" font-size="9" opacity="0.5" text-anchor="start" x="0" y="10">egzamin-e14.blogspot.com</text></svg>");
background-color: rgb(255,255,255);
}
Skrypt można stosować dla języków (X)HTML, XML, SVG, CSS i JavaScript.
Subskrybuj: Posty (Atom)