www.elektronik.si

solomojster · Objavljeno: Tor Feb 14, 2017 1:00 pm Naslov sporočila:

Tole sem preizkusil. Lepo izpisuje na terminalu. Bom poiskal še ledico in upor......

bostjanoksidian · Objavljeno: Čet Feb 16, 2017 4:55 pm Naslov sporočila:

Pomlad prihaja
Takole izgleda http://89.212.21.12/.

Razvoj IoT naprav gre preko Napredne dostopne točke. Vidite WiPi USB WiFi anteno(Na RPI3 je ne rabite). OD HW je priključena še ta stara RPI kamera, tipka, dve ledici, 8 relejskih izhodov in seveda DHT22 tipalo Smile

. Ostali smo pri JavaScript, pokazali bomo v kratkem , kako se namesti wordpress, joomlo, ali kateri koli drug odprto koden projekt.

Važno je, da uporabljamo orodje PhpMyAdmin, ki pri namestistvi peveri pravilno delovanje trojčka Apache2/Php/MySql.
Načeloma velja, da uspešna namestitev orodja PhpMyAdmin, zagotavlja delovanje odprtokodnih produktov. Smile

bostjanoksidian · Objavljeno: Pet Feb 17, 2017 3:16 am Naslov sporočila:

Sedaj smo že povsem ogreti
http://89.212.21.12/javascript/vaja7

<!JavaScript>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>JavaScript</title>
</head>
<body>
Opozorilo<br/>
<script language="JavaScript">
alert('Pazi se!')
alert('Poglej v naslov in status')
document.title='Ne se hecat'
window.status='Grizem!!'
alert('Nisi priden' + '\n' + 'ker me ne upo\u0161teva\u0161')
var ime = prompt('Neposlu\u0161ne\u0161','Bo\u0161tjan')
if (ime != null && ime != "")
{
document.write('Nasvidenje ',ime,'!!')
}
</script>
</body>
</html>

Objekt alert ustavi izvajanje programa in zahteva pozornost uporabnika Smile

Objekt prompt zahteva vnos podatka in priredi vrednost vnosa spremenljivki ime.
document.write('Nasvidenje ',ime,'!!')
Vidimo , kako izpišemo vrednost spremenljivk v metodi write Smile

ime != null && ime != ""
Zanimiv je strukturni stavek if. Vidimo kako zapišemo dva pogoja , ki morata biti oba izpolnjena, da se izvede prostor if.

Popravite program tako, da se bo poslavljanje izpisalo samo ob vašem imenu Smile

http://89.212.21.12/javascript/vaja8

<!JavaScript>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>JavaScript</title>
</head>
<body>
Diagonala<br/>
<script language="JavaScript">
for(i=1;i<10;i++){
j=1
while(j<10){
if(i==j){
document.write('*');
}
else{
document.write(' ');
}
j++
}
document.write('<br/>')
}
</script>
</body>
</html>

Vaja 8 je presek vsega , kar vemo o JaviScript do sedaj.
Imamo dvojno zanko. V notranji zanki imamo strukturo if. V prostoru if izpišemo "*" če imata i in j enako vrednost, drugače izpišemo " ". Hm kako sedaj napisati program, ki bo diagonalo napisal obrnjeno ????????????????

Za vajo napišite program, ki bo izpisal diagonalo v drugo stran.
Torej če se v originalu diagonala izpisuje zgoraj levo proti spodaj desno, poizkusite napisati program, da se bo diagonala izpisovala zgoraj desno proti spodaj levo.

Smile

solomojster · Objavljeno: Ned Feb 19, 2017 9:27 am Naslov sporočila:

Nehote sem ti poslal "črva" j-- .Sedaj je stran blokirana. Vaja5. Sorci...... Rolling Eyes

Branez · Objavljeno: Ned Feb 19, 2017 9:45 am Naslov sporočila:

Ni več!

bostjanoksidian · Objavljeno: Ned Feb 19, 2017 5:49 pm Naslov sporočila:

bostjanoksidian · 2017-02-20 (3).png

Prihajamo do najzanimivejšega dela vsebine programiranje.
Svetovna programersko pedagoška literatura je polna vaj, nalog, primerov z zvezdicami.
Zgodovinsko se vaje opirajo na prestari DOS zaslon.
Pri programiranju moramo vedeti, da imamo pri "risanju" razno raznih likov z uporabo teksta ukaz pojdi v novo vrstico in na začetek nove vrstice.
V vrstico lahko vpisujemo znake(Črke, številke in posebne znake).
To je vse kar imamo.....
Kot prastari pisalni stroji, ki so imeli tipkovnico in posebno ročico, s katero si premaknil list papirja v novo vrstico in na začetek vrstice......
Pomikanje vrstice nazaj in brisanje ni dovoljeno.
Še jaz se tega komaj spomnim, novejša digitalna generacija , si lahko kak star pisalni stroj pogoogla... Smile

http://89.212.21.12/javascript/vaja9/

<!Javascript>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;charset=UTF-8/>
<title>JavaScript</title>
<script language=JavaScript>
function trikotnik(k)
{
if(k>50) k=50;
document.write('<html>\n <head>\n </head>\n');
document.write(' <body>\n Pravokotni trikotnik s stranico ',k,'<br/>\n');
for(var i=1;i<=k;i++) { //Zanka ki doloci vrstice
document.write(' ');
for(var j=1;j<=i;j++){//V vsako vrstico napisemo zvezdice
document.write('*');
}
document.write('<br/>\n');
}
document.write(' </body>\n</html>');
}
</script>
</head>
<body>
<form name="obrazec">
<input type=text name=velikost size=5 value=8 />
<input type=button value="Stranica trikotnika" onclick="javascript:trikotnik(velikost.value)"/>
</form>
</body>
</html>

Imamo JavaScript prostor z vpisano metodo trikotnik(k)
Imamo vnosno polje z imenom "velikost"
In imamo dogodek "onclick", ki izpiše metodo v novo stran.

Zopet imamo vse podatke od strani z enim branjem iz strežnika. Ta "nova" stran mora biti pravilno opisana v html(in CSS) jeziku.
JavaScript/Vaja9 je zanimiva, ker ponuja eno od možnosti vstopa v pedagoško/programerski svet vaj baziranih na prastarem pisalnem stroju.

function trikotnik(k)
{
if(k>50) k=50;
document.write('<html>\n <head>\n </head>\n');
document.write(' <body>\n Pravokotni trikotnik s stranico ',k,'<br/>\n');
for(var i=1;i<=k;i++) { //Zanka ki doloci vrstice
document.write(' ');
for(var j=1;j<=i;j++){//V vsako vrstico napisemo zvezdice
document.write('*');
}
document.write('<br/>\n');
}
document.write(' </body>\n</html>');
}

Zelen strukturni stavek if omejuje vhodno spremenljivko k na 50. Torej bo trikotnik imel stranico do 50 Smile

.
Plavi ukazi so osnovna html struktura.
Notranja rdeča koda nam je že poznana. Spremenjena je le v toliko, da izpiše trikotnik, ki ima stranico dolžine k. Smile

Kaj pa kvadrat s stranico k ?
Kaj pa pravokotnik s stranico k,2*k ?
Kaj pa vodoravna črta z dolžino k?
Kaj pa navpična črta z dolžino k?
Kaj pa diagonala z dolžino k?
Ali bi znali napisat program tako, da bo trikotnik obrnjen na glavo?
Kaj pa kvadrat s stranico k in vrisano diagonalo?
Kaj pa kvadrat s stranico k in vrisanima obema diagonalama?
Obstaja ogromno vaj na to temo, pogooglajte malo Smile

Z bogato vsebino osnove programiranja se tu ne bomo ukvarjali.

http://89.212.21.12/javascript/vaja91/
Vaja JavaScript/vaja91 je samo poseben primer vaje9 z dvema vrednostima.
Gledano skozi oči programerja, nam omogoča vnos dveh vrednosti, kar zopet omogoča več vaj, ki imajo lahko dve vhodni vrednosti.
Podobno nadaljujemo s tremi, štirimi, ali n vrednostmi.

Ali bi znali vajo spremeniti tako, da bi imeli 3 vhodne vrednosti.

http://89.212.21.12/javascript/vaja10/
Izpis sinusoide
Poizkusite dodati navpično koordinatno črto(Torej tisto ki označuje 0).
Poizkusite dodat vhodno vrednost, ki bo določila amplitudo sinusoide.
Prav poseben programerski dosežek je izpis sinusoide vodoravno Smile

Raje ne poskušajte, res ne, ni šala.... Smile

Zgornje vaje spadajo med težje, če niste vešč(a) vam mimogrede pokurijo dneve razmišljana...

Sliki prikazujeta prvo stran, ki zahteva vnos vrednosti "velikost" in drugo sliko , ki je posledica dogodka "onclick".

Zadnja slika je pisalni stroj "Olimpia"

bostjanoksidian · Objavljeno: Pon Feb 20, 2017 5:03 pm Naslov sporočila:

Na hitro dobil sem LCD na dotik za RPI B+, RPI2, RPI3

Instalacija iz prve, dodal sem jo v install šolske izdaje(Razvojni kotiček).

https://www.youtube.com/watch?v=SkIZ54SKrLM

Vidite kako na šolski izdaji s pomočjo peresa prižigam ledico. Smile

Pripel sem še nekaj slik za prvi vtis.

Na hitro, ko preklopiš na LCD, HDMI neha delat, VNC deluje normalno, ni mi še uspelo(do sedaj) prestavit iz LCD nazaj na HDMI, ampak, bom že našel rešitev, v najslabšem primeru samo na novo zapečem šolsko izdajo Smile

bostjanoksidian · Objavljeno: Tor Feb 21, 2017 7:53 am Naslov sporočila:

Preden zapustimo internetni brskalnik še nekaj izbranega

http://89.212.21.12/javascript/vaja11/
Vstop v čudoviti svet grafike

<!JavaScript>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sinus</title>
</head>
<body>
y=sin(x)
<div id="tocka" style="position:absolute;top:50pt;left:50pt"><canvas id="diagram" width="480" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas></div>
<script language="JavaScript">
var c = document.getElementById("diagram");
var ctx = c.getContext("2d");
for ( i = 0 ; i < 480 ; i++ ){
ctx.fillStyle = "#FF0000";
ctx.fillRect(i, 200 * (1-Math.sin(i/24)), 1, 1);
}
</script>
</body>
</html>

Na plasti (div) imamo grafično polje (canvas) z imenom "diagram".
JavaScript prostor ima poleg nastavitve lastnosti samo strukturni stavek for.
Zanka spreminja vrednost spremenljivke i od 0 do 480.
V prostoru zanke izpišemo kvadrat dimenzije 1,1 na točko i, 200 * (1-Math.sin(i/24))
Točke se izrisujejo po x osi (i), in po y osi (Math.sin(i/24)). Dobimo lep diagram sinusne funkcije. Smile

Izpišite graf brez značke div.
Spremenite barvo diagrama.
Povečajte debelino črte diagrama. (Namig, spreminjajte dimenzijo kvadrata)
Dodajte cos diagram Smile

(Namig:dodajte ctx.fillRect(i, 200 * (1-Math.cos(i/24)), 1, 1) Wink

Dodajte koordinato x.
Dodajte vnosno polje po zgledu vaje9 in spreminjajte amplitudo.

bostjanoksidian · 2017-02-23 (2).png

Grafika na veliko....
http://89.212.21.12/javascript/vaja12/

<!JavaScript>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel=stylesheet href="../../css.css" type="text/css"/>
<title>Izris vrednosti izraza</title>
<script language="JavaScript">
function izris(){var c = document.getElementById("diagram");var ctx = c.getContext("2d");
for ( p = 0 ; p < 749 ; p++ ){
with (Math){
ctx.fillStyle = "#FF0000";
ctx.fillRect(eval(form1.enacbax.value),199- eval(form1.enacbay.value), 1, 1);}
}
}
function izbris(){var c = document.getElementById("diagram");var ctx = c.getContext("2d");
ctx.fillStyle = "#ffffff";
ctx.fillRect(0,0,750,400);
}
</script>
</head>
<body onload="izbris();">
<div style="position:absolute;top:80pt;left:5pt"><canvas id="diagram" width="750" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas></div>
Izris parametrične enačbe p(0..749)
<form name=form1>
x= <input type=text name=enacbax value="p" size=100/><br/>
y= <input type=text name=enacbay value="100*sin(2*PI/360*p)" size=100/><br/>
<input type=button value="Moj graf" onclick="javascript:izris()"/>
<input type=button value="Elipsa" onclick="javascript:form1.enacbax.value='375+200*cos(2*PI/360*p)';form1.enacbay.value='100*sin(2*PI/360*p)';izris()"/>
<input type=button value="Eksponent" onclick="javascript:form1.enacbax.value='p';form1.enacbay.value='p*2-pow(p,2)/100+pow(p,3)/96000';izris()"/>
<input type=button value="Polž" onclick="javascript:form1.enacbax.value='375+p/3.59*cos(2*PI/180*p)';form1.enacbay.value='p/3.59*sin(2*PI/180*p)';izris()"/>
<input type=button value="Strmina" onclick="javascript:form1.enacbax.value='p';form1.enacbay.value='max(0,min(2*p/3.59,100)-50)';izris()"/>
<input type=button value="Briši" onclick="javascript:izbris()"/>
</form>
</body>
</html>

Prostor JavaScript opiše metodi izbris in izris.
Metodi uporabimo ob dogkih onload in onclick.
Metoda izbris je enostavna, izpiše belo barvo v celoten pravokotnik.
Metodo kličemo ob nalaganju strani in ob pritisku na gumb "Briši".
Metoda izris izriše 750 točk s koordinatami eval(form1.enacbax.value in 199- eval(form1.enacbay.value)
Vnosna polja enacbax in enacbay parametrsko opišeta točki izpisa.
Dogodki onclick spreminjajo vrednost vnosnih polj v odvisnosti od parametra p.
Ukaz eval je posebnost tolmačev. Naloge tega tipa so v prevajalnikih neizvedljive(Bolj natančno, izredno težko izvedljive) Smile

Poskušajte izpisat več točk parametrske enačbe....
Kako napišemo navaden diagram. če imamo možnost izpisa parametrske enačbe?
Napišite kako lepo parametrsko enačbo in jo izpišite z gumbom "Moj graf" Smile

Napišite to lepo formulo v kodo in ustrezno preimenujte gumb.... Objavite dosežek..
Namig: Pri pisanju enačb upoštevajte pravopis JavaScript.
https://www.w3schools.com/[slovenščina je zame španska vas]/

solomojster · Objavljeno: Čet Feb 23, 2017 10:23 am Naslov sporočila:

Tista spirala mi je pa všeč. Jaz sem jo rešil po solomojstrsko. Potem sem jo poravil "solo-softversko". Zdaj pa vidim ,da sem bil prekratek....... Wink

(v šoli sedel na ušesih)

bostjanoksidian · Objavljeno: Čet Feb 23, 2017 12:28 pm Naslov sporočila:

solomojster · Objavljeno: Čet Feb 23, 2017 1:33 pm Naslov sporočila:

bostjanoksidian · Objavljeno: Pet Feb 24, 2017 7:20 am Naslov sporočila:

bostjanoksidian · Objavljeno: Pet Feb 24, 2017 7:41 am Naslov sporočila:

Motorje vzdržujemo na delavni temperaturi....
http://89.212.21.12/javascript/vaja13/

<!JavaScript>
<html>
<head>
<script language="JavaScript" type="text/javascript">
var timerID = null;
var timerRunning = false;
var id,pause=0,position=0;
function stopclock (){
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime () {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = '';
timeValue += hours ;
timeValue += ((minutes < 10) ? ':0' : ':') + minutes;
timeValue += ((seconds < 10) ? ':0' : ':') + seconds;
document.ura.vrednost.value = timeValue;
timerID = setTimeout('showtime()',1000);
timerRunning = true;
}
function startclock () {
stopclock();
showtime();
}
</script>
</head>
<body onload="javascript:startclock();" style="width: 100%; overflow-x: hidden; overflow-y: scroll">
<form name="ura" onsubmit="0">
<input name="vrednost" size="7"/>
</form>
</body>
</html>

Poleg dogodkov uporabnikov obstajajo še časovni dogodki.
Na grobo delimo časovne dogodke na absolutne(ki se prožijo na absolutni čas, npr ob 8.00 vsak ponedeljek) in relativne(ki se prožijo neprestano na vnaprej znan čas, npr vsake 100mS).

V našem primeru dogodek onload pokliče metodo startclock.
Metoda startclock pokliće metodo showtime.
Metoda showtime, uporabi časovnik setTimeout('showtime()',1000);, ki kliče metodo showtime (torej samosebe) čez 1000mS. Smile

Metoda showtime, se izvaje vsake 1000mS.

Popravite program tako, da se bo izpisoval čas brez sekund.
Ali bi znali napisati program, ki bo izpisoval številke 1,2,3.... do neskončno.. Smile

Kaj pa odštevanje(prištevanje) relativnega časa..