Programowanie w js - tabliczka mnożenie

Z Krzysiem A. spędziłem dziś nieco czasu ucząc się programowania stron, tym razem w JS.

<style><!--
th, td {
 border: 1px solid black;
 padding: 10px;
 }
 th {
 background: aqua;
 font-weight: bold;
 font-style: italic;
 }
--></style>
<div id="obszar">Jeżeli zadziała to tu będzie tabliczka mnożenia.</div>
<p>
<script>// <![CDATA[
const dane = document.getElementById('obszar');
 
 let tt = '<table>';
 
 tt += '<tr><td></td>';
 for (let j=1; j<=10; j++) {
 tt += '<th>(' + j +')</th>';
 }
 tt += '</tr>';
for (let i=1; i <= 10; i++){
 tt += '<tr><th>(' + i + ')</th>';
 for (let j=1; j<=10; j++) {
 tt += '<td>' + i*j +'</td>';
 }
 tt += '</tr>';
 }
 tt += '</table>';
 dane.innerHTML = tt;
// ]]></script>
</p>

Kategorie: _blog, programowanie / html, programowanie / js

Słowa kluczowe: programowanie, tabliczka mnożenia

Komentarze: (0)

Krzywe Hilberta w Java Script

Zachciało mi się to co kiedyś napisałem w VBA przepisać  dziś na JS.

/* Rem
Rem Krzywe Hilberta wg. algorytmu Niklausa Wirth'a
Rem zawartego w książce "Algorytmy + struktury danych = programy"
Rem w chwili radości (21 grudnia 2002) z Pascala na VBA przetłumaczył Wojtek34

A dziś, czyli w boże ciało 3 czerwca 2021, ponieważ nie muszę chodzić na procesje przetłumaczylem sobie
na Java Scripy nie bardzo słabo znając ten język i środowisko przeglądarki.
*/

var XX; var YY;
var x; var y;
var h;

function Hilbert () {
 N = 5; h0 = 700;
 
 InicjujPisanie ();
 
 h = h0; x0 = h / 2; y0 = x0;

 for (i = 1; i < N; i++) { 
 h = h / 2;
 x0 = x0 + h / 2; y0 = y0 + h / 2;
 x = x0; y = y0; UstawPioro (8 / i);
 A (i);
 }
}

function InicjujPisanie() {
 x = 0; y = 0;
}

function UstawPioro (grubosc) {
 XX = x; YY = y;
 ctx.lineWidth = grubosc;
}

function Kresl () {
 ctx.moveTo (XX, YY);
 ctx.lineTo (x, y);
 XX = x; YY = y;
 
 ctx.stroke(); //po zakończeniu rysowania obrysowujemy linię
}

function A(i) {
 if (i > 0) {
 D (i - 1); x = x - h; Kresl();
 A (i - 1); y = y - h; Kresl();
 A (i - 1); x = x + h; Kresl();
 B (i - 1);
 }
}

function B(i) {
 if (i > 0) {
 C (i-1); y = y + h; Kresl();
 B (i-1); x = x + h; Kresl();
 B (i-1); y = y - h; Kresl();
 A (i-1);
 }
}

function C(i) {
 if ( i > 0 ) {
 B (i-1); x = x + h; Kresl();
 C (i-1); y = y + h; Kresl();
 C (i-1); x = x - h; Kresl();
 D (i-1);
 }
}

function D(i) {
 if ( i > 0 ) {
 A (i-1); y = y - h; Kresl();
 D (i-1); x = x - h; Kresl();
 D (i-1); y = y + h; Kresl();
 C (i-1);
 }
} 

A oto efekt działania tego kodu na ekranie.

Jak przeglądarka nie rozumie co to Canvas!

Kategorie: programowanie, _blog, programowanie / html, programowanie / js

Słowa kluczowe: krzywe hilberta, rekurencja

Pliki

• filelist.xml
• hilbert w VBA.doc
• hilbert w VBA.htm
• hilbert.js
• hilbert.js.txt
• image001.gif
• p4.txt

Komentarze: (0)

Kalkulator w js sobie napisałem

Aby się przekonać, że jeszcze coś potrafię usiadłem i napisałem w 3 sesjach po godzinkę. Prawie wszystko działa, choć po przeniesieniu do notki, w tym środowisku coś ramki się rozjeżdżają i nie wiem dlaczego.

11 kwietnia 2013 roku sobie usiadłem i napisalem kalkulator, bo kolega się uczy programować to ja też mogę.

Kategorie: _blog, programowanie, programowanie / html, programowanie / js

Słowa kluczowe: kalkulator, kalkulator w js

Pliki

• main-kalkulator1.html

Komentarze: (0)

Równania Maxwella

Zachciało mi się mieć koszulkę, z równaniami Maxwell'a ale jakoś nie idzie mi wyprodukowanie tego PDFa :-) bo zawsze wtapiam na łączeniu <math> z HTML5 i coś mi nie wychodzi. Trudno.

W wszystko to dlatego, że widzę wyraźny związek pomiędzy Genesis 1:1 - "Na początku Bóg stworzył niebo i ziemię" a tymi równaniami. Wszak niebo to przestrzenie, w których wszystko się dzieje, ziemia to materia, a na początku oznacza, że Bóg stwarzanie rozpoczął od czasu.

Tu powinno się wyświetlać, bo wstawiam blok <math> ale coś nie działa, skoro pod spodem nic nie ma.

Wstawiam też obrazek z załącznika, gdzie jest to jako grafika:

A tak wygląda kod do tego, co nie działa:

\nabla \cdot \vec{E} = \frac{\varrho}{\varepsilon} \\
\nabla \times \vec{E} = - \frac{\partial \vec{B}}{\partial t} \\
\nabla \cdot \vec{B} = 0 \\
\nabla \times \vec{B} = \mu \vec{j} + \mu \varepsilon \frac{\partial \vec{E}}{\partial t}\\ 
-----------\\
\oint_{S} \vec{E} \cdot \mbox{d}\vec{S} = \frac{Q}{\varepsilon}\\
\oint_{l} \vec{E} \cdot \mbox{d}\vec{l} = - \frac{\partial \Phi_B}{\partial t}\\
\oint_{S} \vec{B} \cdot \mbox{d}\vec{S} = 0\\
\oint_{l} \vec{B} \cdot \mbox{d}\vec{l} = \mu I + \mu \varepsilon \frac{\partial \Phi_E}{\partial t}\

Kategorie: _blog, programowanie / html

Słowa kluczowe: równania maxwell'a, Gen1:1, math, html

Pliki

• CodeCogsEqn-4.pdf
• CodeCogsEqn-41.pdf
• CodeCogsEqn-5.pdf
• CodeCogsEqn.png
• CodeCogsEqn.svg

Komentarze: (0)

Czytanie wspak

Nie wiem, ale tego mema zrobiłem w HTML-u,
używając tylko CSS-a
a więc raczej jestem kawałkami zdolny.

<DIV style="margin: 0 30%; border: black 1px dashed; padding: 1em; font-family: sans-serif; text-align: center;"
<P>Kiedy w końcu nauczę się czytać słowo
<div style="
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);">"<B>PCHAĆ</B>"</div>
w takim sposób aby zrozumieć "<B>CIĄGNĄĆ</B>"?</p></div>


<P>Nie wiem, ale tego mema zrobiłem w HTML-u,<BR>
używając tylko CSS-a<BR>
a więc raczej jestem kawałkami zdolny.

Kategorie: osobiste, _blog, programowanie / html / css, programowanie / css

Słowa kluczowe: css, html, pchać, ciągnąć

Komentarze: (0)

Style CSS do oznaczenia dróg w Polsce

W Wikipedii znalazłem style do wypisywania numerów i oznaczeń dróg powiatowycy takich jak 816 którą właśnie podróżuję, i 82 którą jechałem wczoraj.

A może jest jeszcze sposób na autostrady?

Dopisek:

Nie wiem co znaczy taki styl, a jeżdzę taką drogą codziennie. 902

Kategorie: informatyka, html, _blog, programowanie/html/css

Słowa kluczowe: html, css

Komentarze: (0)

Zegarek w CANVAS

Kategorie: html, informatyka, _blog, programowanie/html/canvas

Słowa kluczowe: html, informatyka, grafika, html5, zegarek, java, js, canvas

Komentarze: (0)

Grafika w JavaScript, jQuery i Canvas

Tę notkę napisał Kuba z użyciem jQuery.

jQuery jest użyte tu po to, żeby kod javascript wykonał się dopiero po załadowaniu kodu HTML i wyświetleniu strony.

Na górze.

Na dole.

Kategorie: _blog, programowanie / html / canvas

Słowa kluczowe: canvas, html

Komentarze: (0)

Grafika w JavaScript i Canvas

Czasem muszę się pobawić w programowanie. Tym razem Canvas w JavaScript.

Na górze.

Na dole, po tym tej linijce jest wpisany kod w js, który może się wykona, a może nie..

Kategorie: _blog, programowanie / html / canvas

Słowa kluczowe: canvas, html

Komentarze: (0)

Wstawka w Math w kodzie HTML i kolejność użycia CSS

Wstawka w Math. $x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$

I co ważne - kod można wstawić a edytor TinyMCE już go nie zniszczy, bo Kuba wprowadził tam jakieś zaklęcie.

Wzór w samym paragrafie:

$x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$

Nie do końca kumam kolejność stosowania class w CSS, i tu sobie robię testy.

a teraz w div, w class='artykul'

też w div ale w class='artykul wzor'

To jest P w clasie wzor -> więc jest na niebieskawo?

A poniżej jest definicja clasy .wzor ale TinyMCE jej zawartość komentuje

Kategorie: informatyka, programowanie, _blog, programowanie / html

Słowa kluczowe: html, html5, math, css

Komentarze: (0)

3 kolumny bez table

 Oto metoda zrobienia 3 kolumn w treści bez użycia tabelek.

Tak to wygląda w źródle:

A taki jest efekt:

Wersja #2

Kategorie: Informatyka, _blog, programowanie/html, programowanie/css, programowanie

Słowa kluczowe: html, div, css

Komentarze: (0)

Krzywe Hilberta

Pewien grudnowie nocy 2002 roku zachciało mi się przypomnieć rekurencję i krzywe Hilberta ładnie namalować. Ale był problem. Na komputerze domowym nie miałem żadnego kompilatora, żadnego języka który grafikę potrafiłby malować. Napewno? Był Word a w nim VBA, który szybko opanowałem. I powstało takie coś.

Kilka lat później wyksportowałem to Wordem do HTMLa, czyli zrobił się jakiś GIF, ale też kod, którego dziś pewnie żadna przeglądarka nie ruszy. Ale zachowuję ku pamięci. 

Rem
Rem Krzywe Hilberta wg. algorytmu Niklausa Wirth'a
Rem zawartego w książce "Algorytmy + struktury danych = programy"
Rem w chwili radości (21 grudnia 2002) z Pascala na VBA przetłumaczył Wojtek34
Rem

Dim XX, YY As Double
Dim x, y As Double
Dim h As Double
Dim grubość As Double

Sub Hilbert()
 N = 5: h0 = 600
 
 InicjujPisanie
 i = 0: h = h0: x0 = h / 2: y0 = x0
 Do
 i = i + 1: h = h / 2
 x0 = x0 + h / 2: y0 = y0 + h / 2
 x = x0: y = y0: UstawPióro 4 / i
 A (i)
 Loop Until i = N
 
End Sub

Private Sub InicjujPisanie()
 Selection.WholeStory
 Selection.Delete Unit:=wdCharacter, Count:=1 ' kasuj też wszystko z dokumentu !
 x = 0: y = 0
End Sub

Private Sub UstawPióro(grubość1)
 XX = x: YY = y
 grubość = grubość1
End Sub

Private Sub Kreśl()
 ActiveDocument.Shapes.AddLine(XX, YY, x, y).Select
 Selection.ShapeRange.Line.Weight = grubość
 Selection.EndKey ' to służy temu, aby na ekranie pojawiło się to co się namalowało
 XX = x: YY = y
End Sub

Private Sub A(i As Integer)
 If i > o Then
 D i - 1: x = x - h: Kreśl
 A i - 1: y = y - h: Kreśl
 A i - 1: x = x + h: Kreśl
 B i - 1
 End If
End Sub

Private Sub B(i As Integer)
 If i > o Then
 C i - 1: y = y + h: Kreśl
 B i - 1: x = x + h: Kreśl
 B i - 1: y = y - h: Kreśl
 A i - 1
 End If
End Sub

Private Sub C(i As Integer)
 If i > o Then
 B i - 1: x = x + h: Kreśl
 C i - 1: y = y + h: Kreśl
 C i - 1: x = x - h: Kreśl
 D i - 1
 End If
End Sub

Private Sub D(i As Integer)
 If i > o Then
 A i - 1: y = y - h: Kreśl
 D i - 1: x = x - h: Kreśl
 D i - 1: y = y + h: Kreśl
 C i - 1
 End If
End Sub 

A oto efekt działania tego kodu na kartce A4 w Wordzie.

Kategorie: programowanie, _blog, programowanie / vba, programowanie / html

Słowa kluczowe: krzywe hilberta, vba, rekurencja

Pliki

• filelist.xml
• hilbert w VBA.doc
• hilbert w VBA.htm
• hilbert.js
• hilbert.js.txt
• image001.gif
• p4.txt

Komentarze: (0)