Saber computacional III

From Wikiversity
La màquina analítica del matemàtic Charles Babbage totalment mecànic del 1837

Aquesta secció desenvolupa el coneixement bàsic dels algorismes per a la resolució de reptes.

Definició. Un Algorisme és un conjunt estructurat d'instruccions orientades a cercar un objectiu.

Els objectius d'un algorisme van des de la identificació, càlculs o transformació de dades a activitats diverses segons el context.

Ruta del curs segons el BOE:

  • Diagrames de flux i pseudocodi.(1ESO)
  • Estructures condicionals.(2ESO)
  • Bucles.(3ESO)
  • Recursivitat i funcions.(4ESO-A i 4ESO-B)

La màquina[edit]

Des de molt antic s'utilitzen mecanismes per facilitar diverses feines tant militars com religioses, la troballa més impactant és el mecanismes d'Anticitera, 87 a.C., un artefacte grec que preveu el moviment estel·lar seguint textos babilònics, molt coneguts pel seu registres estel·lars en notació de sexagesimals, però lo més fascinant és que aquest mecanisme porta moltes inscripcions de festivitats vinculades amb el calendari egipci entre d'altres.

Troballa al fons del mar
Reconstrucció de l'engranatge

Aquests artefactes antics es poden considerar com a maquinària capaç de reproduir activitats estàtiques i cícliques, inclús interactuar amb l'entorn per prendre decisions mitjançant mecanismes molt curiosos.

Què manca doncs als artefactes antics respecte dels actuals?

  • A l'actualitat hi ha maquinària que encara fa feines semblants però d'altres han introduït als seus mecanismes enginys electrònic que els dota d'autonomia gràcies una programació simple fins a sistemes operatius amb diversos programes.

Com s'organitzen els dispositius amb sistema operatiu?

  • Els dispositius amb sistema operatiu utilitzen diversos programes i aquests programes depenen totalment del sistema operatiu. Els programes per a webs fets amb JavaScript depenen dels navegadors que a la vegada depen del sistema operatiu.

La programació[edit]

Definició. Un programa és un conjunt d'ordres que, interpretades per la màquina, efectuen diverses activitats dins de les seves possibilitats.

En resum els programes són algorismes utilitzats pels dispositius, és a dir, programes que els dispositius poden executar. A la pràctica es diu programa a qualsevol arxiu executable i s'anomena codi a tot el que conté.

Per dissenyar programes s'utilitzen diversos esquemes com els diagrames de flux entre d'altres i per escriure un programa es poden utilitzar diversos llenguatges com JavaScript.

Diagrames de flux[edit]

Un diagrama de flux és la representació esquemàtica per guardar, interpretar i estudiar l'activitat lògica de les ordres dins d'un programa.

Els diagrames de flux per a la programació estan proveïts d'una gran quantitat d'elements visuals de caràcter simbòlic. Per facilitar la comprensió i agilitzar el treball ens centrarem en els elements genèrics més destacats a partir dels quals es poden incloure o substituir per elements més adequats de forma natural.

Elements[edit]

Elements d'un diagrama de flux simplificat són:

  • Un inici i un final de programa.
  • Uns rectangles on s'escriu una llista d'ordres simples.
  • Uns rombes on s'escriu una condició obrint disjuntives del tipus cert i fals, o sí i no, o 1 i 0 respectivament.
  • Unes fletxes encadenen tots i cadascun dels diferents elements segons els objectius de l'algorisme.

Didàcticament per qüestions de similitud amb un programa escrit; les fletxes majoritàriament avancen de forma descendent (pel centre o l'esquerra) però reculen de forma ascendent (per la dreta).

Exemples naturals de diagrames de flux:

Reptes

1) Fes un diagrama de flux per demanar algun objecte als companys i detalla les respostes depenent de cada fet:

  • Un full
  • Un bolígraf
  • Una goma
  • Un llapis
  • Un regla
  • Una tisora
  • Un carregador
  • Una maquineta

JavaScript[edit]

Classificació cronològica

1r. Codi màquina en binari.

2n. Llenguatge d'assemblador.

3r. Llenguatges d'alt nivell:

  • C.
  • Fortran.
  • Smalltalk.
  • Ada.
  • C++.
  • C#.
  • Cobol.
  • Delphi.
  • Java.
  • PHP.

4t. Programació orientada a objectes.

S'utilitzarà el llenguatge JavaScript pel seu us freqüent dins de pàgines web coneguts com scripts, està molt supervisat i té moltes actualitzacions que innoven i milloren el llenguatge, i les seves similitud amb altres llenguatges més rigorosos. Una ràpida execució del programa pel navegador el fa ideal per fer pràctiques.

Sintaxi[edit]

Per aprendre la sintaxi cal aprendre un lèxic bàsic de JavaScript i sense simplificacions, ja que traeixen la intuïció del principiant. Reduir simplificacions permetrà introduir instruccions resistent als errors. Així sempre posarem punt i coma per fer salts de línia o per introduir una nova instrucció sense salts.

Variables[edit]
var elSeuNomDusuari="camellet";

Les variables, el fonament de la programació, s'encarreguen d'emmagatzemar valors, són com el ciment a la construcció.

  • És obligatori declarar les variables sempre, encara que diguin que es poden estalviar i sempre al principi del programa, funció o rutina, i abans de treballar cap variables.

El nom són com etiquetes de les variables i no poden començar per un número ni tenir espais ni utilitzar paraules reservades ni símbols diferents del abecedari ni accents, i per inventar noms diferents es fa servir habitualment el mètode del camell que substitueix els espais per majúscules.

Exemples: 

var nomDUsuariNou = "Jordi";
var nUmeroIdentificador = 3349280;
var codiCertificador = "800245FF-x-40A"

Declaració d'una variable a buida, d'una variable b amb valor inicial 7,5 on és obligat utilitzar la notació de punt pels decimals, d'una variable c amb la cadena de text 7.5, i dues variables d i e amb la mateixa cadena de text Tr3s' 3s"b on les comes simples i dobles són com els parèntesis, una obre i la segona tanca, i la barra \ desactiva el tancament de les comes per poder escriure el seu símbol: 

var a;
var b = 7.5;
var c = "7.5";
var d = "Tr3s' 3s\"b";
var e = 'Tr3s\' 3s"b';

És important avisar si guardem un número o una cadena de text. L'ordinador guarda el número com un valor en binari per operar directament i en canvi si és una cadena de text llavors l'ordinador el guarda com una cadena de lletres o símbols casualment numèrics. Les cadenes de text no es poden multiplicar per 2 perquè és com multiplicar una lletra per un número que el navegador encara no entén aquest tipis de multiplicació.

Comentaris[edit]

Es pot introduir comentaris acompanyant les ordres del programa, ja sigui per explicar el funcionament de les ordres o per anular ordres sense esborrar-les. Els comentaris s'han d'escriure sense accents ni símbols no reglamentats ja que el programa falla ràpidament. Tenim dos tipus de comentaris, que el navegador no els veu com ordres que formen part del programa(destacats en gris).

  • Per fer comentaris en tot el que queda de línia de codi farem servir les dues barres //:
var a; //A partir d'aquI Es un comentari fins i tot l'ordre var b = 8;
  • Per fer comentaris puntuals intempestius utilitzarem com a parèntesi els símbols d'obrir comentari /* i tancar comentari */:
var a="3"; /*var b = "213"; */ var c;
Operacions[edit]

Es poden fer operacions amb nombres, +, -, / i *, i una operació amb cadenes de text, +. S'han de diferenciar bé i no refiar-se de la sort.

  • Primer posem les variables receptores de valors i després de la igualtat van les operacions que generen el valor a guardar, on poden reaparèixer les mateixes variables sense cap conflicte.
nouValor = 3+21/5+2*4;
numeroCreixent = 2*numeroCreixent + 1;
  • Les operacions al programa respecten les prioritats de les operacions prioritzant els parèntesis.
Sumes amb l'operador +:
a= 3+2; // suma dos nombres, 3+2, i es guarda dins a
b= 7+a; // suma un nombre, 7, i una variable, a, i es guarda dins b
c= b+8;// suma una variable, b, i un nombre, 8, i es guarda dins c
d= a+b;// suma dues variables, a i b, i es guarda dins d
d=d+2;// augmenta en dues unitats el valor de d
Restes amb l'operador -:
a= 3-2; // resta dos nombres, 3-2, i es guarda dins a
b= 7-a; // resta a un nombre, 7, la variable, a, i es guarda dins b
c= b-8;// resta a una variable, b, el nombre, 8, i es guarda dins c
d= a-b;// resta dues variables, a i b, i es guarda dins d
Multiplicacions amb l'operador *:
a= 3*2; // multiplica dos nombres, 3+2, i es guarda dins a
b= 7*a; // multiplica un nombre, 7, i una variable, a, i es guarda dins b
c= b*8;// multiplica una variable, b, i un nombre, 8, i es guarda dins c
d= a*b;// multiplica dues variables, a i b, i es guarda dins d
Divisions amb l'operador /:
a= 3/2; // divideix amb decimals dos nombres, 3 entre 2, i es guarda dins a
b= 7/a; // divideix amb decimals un nombre, 7, per la variable, a, i es guarda dins b
c= b/8;// divideix amb decimals una variable, b, pel nombre, 8, i es guarda dins c
d= a/b;// divideix amb decimals dues variables, a entre b, i es guarda dins d
Encadena text amb l'operador +:
La operació d'encadenar + es concep com l'acció d'ajuntar, enganxar o adherir dues cadenes de text.
a= "3+2"; //a Es el text "3+2", el programa tE prohibit efectuar sumes o la operaciO que sigui.
b= "7"+a; //7 s'enganxa directament a "3+2", llavors b Es "73+2" i no veu el signe "+" perquè és la operació d'enganxar.
c= b+"+8";//b s'enganxa a "+8", llavors c Es "73+2+8"
d= a+b;//a s'enganxa a b, i es guarda dins d com "3+273+2"
e= "h"+"o"+"l"+"a";//llavors e Es "hola"
Comparacions[edit]

Les comparacions apareixen de moltes necessitats centrades principalment en preguntar quelcom o imposar condicions. Hi ha 6 comparacions i s'han d'escriure exactament com segueix:

Operadors simples Operadors oposats
Significat Significat
x < y És x més petit que y ? x >= y És x més gran o igual que y ?
x > y És x més gran que y ? x <= y És x més petit o igual que y ?
x == y És x igual a y ? x != y És x diferent a y?

Fragments destacats de programes:

  • Demana un número i compara si més petit que 3, i només en cas afirmatiu l'escriu:
x=demanaUnNombre('Escriu un número','0');
if(x<3){
   escriu("El "+x+" és més petit que 3");
}
  • Demana un número i compara és més petit que 3, i només en cas afirmatiu l'escriu i només en cas negatiu escriu la raó:
x=demanaUnNombre('Escriu un número','0');
if(x<3){
   escriu("El "+x+" SÍ és més petit que 3");
}
else{
   escriu("El "+x+" NO és més petit que 3");
}

Per fer un bucle, repetir un fragment, introduïm el for que insisteix mentre succeeixi el contrari del que s'espera.

  • Escriurem nombres i fins que no siguin més grans que 7 no sortirem del programa:
x=demanaUnNombre('Quin número és més gran que 7','0');
for(;x<=7;){
   x=demanaUnNombre('Quin número és més gran que 7','0');
}
escriu("Molt bé");
Funcions[edit]

SVG amb script[edit]

Per poder fer programació lúdica s'ha pensat en la utilització d'escripts incrustats dins d'una imatge del tipus vectorial *.svg ja preparada per rebre ordres.

Utilitzant "l'editor Llibreta", "editor de text" o bé "aquest editor text", deseu sempre l'arxiu amb 3 condicions:
Nom: rectangleVostreNom.svg
Tipus: tots els arxius o equivalent *.*
Codificació: UTF-8.

Clica veure codi i enganxeu sempre tot el codi que apareix al requadre. Les entregues per classroom es fan adjuntant arxius (icona del clip). 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" height="4000">
<script><![CDATA[
var xmlns="http://www.w3.org/2000/svg";
var Root=document.documentElement;
var salto=0;
function programa(){
 //sempre declareu les variables a utilitzar amb "var".
 escriu("Hola mon");

}
function demanaUnNombre(t1,t2){return parseInt(prompt(t1,t2));}
function demanaUnText(t1,t2){return prompt(t1,t2);}
function escriu(pat){
 T=document.createElementNS(xmlns,"text");
 T.setAttributeNS(null,"x",30);
 T.setAttributeNS(null,"y",70+salto);salto=salto+30;
 T.setAttributeNS(null,"font-size","20pt");
 Msg=document.createTextNode(pat);
 T.appendChild(Msg);
 Root.appendChild(T);
}
]]></script>
 <rect onclick="programa()" x="10" y="10" width="80" fill="#edd" height="30" stroke="black"/>
</svg>

Exercicis on és obligatori modificar l'algoritme bàsic la part ressaltada en groc, es guarda i s'obre sempre amb navegador i cliquem el rectangle dibuixat:

1.- Modifica l'algoritme bàsic per fer que escrigui << Hola classe >>.
Nom del programa: holaVostreNom.svg
Diagrama del programa: holaVostreNom.png
2.- Modifica l'algoritme bàsic per fer que demani i etiqueti dos nombres, i escrigui la suma d'etiquetes.
Nom del programa: operacioVostreNom.svg
Diagrama del programa: operacioVostreNom.png
 
var a;
var b;
a=demanaUnNombre('Escriu el número a','0');
b=demanaUnNombre('Escriu el número b','0');
escriu("El valor de la operació és a*b = "+(a*b));
3.- Modifica l'algoritme bàsic per fer que demani dos nombres i dos cadenes de text, i tot seguit escrigui la suma dels dos primers i després la suma dels dos últims. 
var a;
var b;
var c;
var d;
a=demanaUnNombre('Escriu un número','0');
b=demanaUnNombre('Escriu un número','0');
c=demanaUnText('Escriu una paraula','?');
d=demanaUnText('Escriu una paraula','?');
escriu("La multiplicació és ="+(a*b));
escriu("Les teves paraules encadenades són ="+c+d);
4.- Modifica l'algoritme bàsic per escriure els nombres del 1 al 100 avançant de dos en dos, i finalment escrigui el l'últim número on s'ha quedat. 
var x;
x=0;
for(;x<8;){
   x=x+1;
   escriu(x);
}
escriu("El comptador ha arribat fins a "+x+" comptant de un en un");
5.- Modifica l'algoritme bàsic per escriure els nombres del 1 al 100 de forma creixent i tot seguit de forma decreixent fins a -20. 
var x;
x=0;
for(;x<8;){
   x=x+1;
   escriu(x);
}
for(;x>-3;){
   x=x-1;
   escriu(x);
}
escriu("El comptador ha arribat fins a "+x+" comptant de un en un");

Exemples:

1) Sumador de 2 en 2 i s'atura en sobrepassar 50.
El procés s'inicia a Inici, continua en un calaix d'ordres simples on tenim:
  • A=50, que vol dir que el valor 50 es guarda amb l'etiqueta A. S'ha afegit una fletxa didàctica supèrflua indicant el moviment del valor.
  • N=0, que vol dir que el valor 0 es guarda amb l'etiqueta N. És la forma típica amb la que s'inicia un comptador o sumador de valors.

En finalitzar aquest calaix la fletxa ens porta a una disjuntiva amb la pregunta: ¿ És N més petit o igual que A ?

  • Cert: llavors la fletxa de sí ens porta al calaix on: suma 2 al valor de N i aquesta suma es guarda a N on s'esborra el valor anterior i la fletxa ens porta novament a la disjuntiva.
  • Fals: llavors la fletxa del no ens porta al calaix final destinat a escriure el número amb l'etiqueta N on finalment la fletxa finalitza a Fi.
2) Escriptor una successió del zero fins a sobrepassar 50.
El procés s'inicia a Inici, continua en un calaix d'ordres simples on tenim:
  • A=50, que vol dir que el valor 50 es guarda amb l'etiqueta A. S'ha afegit una fletxa didàctica supèrflua indicant el moviment del valor.
  • N=0, que vol dir que el valor 0 es guarda amb l'etiqueta N. És la forma típica amb la que s'inicia un comptador o sumador de valors.
  • t=" ", variable text d'un espai i s'etiqueta amb t.

En finalitzar aquest calaix la fletxa ens porta a una disjuntiva amb la pregunta: ¿ És N més petit o igual que A ?

  • Cert: llavors la fletxa de sí ens porta al calaix on:
  • Concatena el valor de N a la llista de valors t.
  • suma 1 al valor de N i aquesta suma es guarda a N on s'esborra el valor anterior i la fletxa ens porta novament a la disjuntiva.
  • Fals: llavors la fletxa del no ens porta al calaix final destinat a:
  • Posar un punt i final a la llista de nombres t.
  • Escriure la llista de nombres acumulats a t.

Finalment la fletxa finalitza a Fi.

Activitats per construir un diagrama de flux:

1) Dibuixa un diagrama lineal que:

  • Guardi 50 amb la etiqueta A.
  • Guardi 23.7 amb la etiqueta B.
  • Guardi la suma de les dues etiquetes amb la etiqueta S.
Finalment escriu la etiqueta S per pantalla.

3) Dibuixa un diagrama lineal que:

  • Guardi 3 amb la etiqueta R.
  • Guardi el doble de la etiqueta R amb la etiqueta T.
  • Guardi la etiqueta T més una unitat amb la etiqueta T.
Finalment escriu la etiqueta T per pantalla.

4) Dibuixa un diagrama que:

  • Guardi un número dins la etiqueta A.
  • Pregunti si A es més petit que 3.
  • En cas de ser cert escriu A<3.
  • En cas de ser fals escriu A>=3.
Finalment finalitza el programa.

Projecte[edit]

Mostra 1.- Esbrina què fa el programa. 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" onload="startup()" onmousemove="moure(evt)" onmouseup="apaga(evt)">
<script><![CDATA[
var x=0;
function startup(){
 C=document.getElementById("C");
}
function moure(evt){
 if(x==1){
  C.setAttributeNS(null,"cx",evt.pageX);
  C.setAttributeNS(null,"cy",evt.pageY);
 }
}
function mouMe(evt){
 x=1;
}
function apaga(evt){
 x=0;
}
]]></script>

<circle cx="60" cy="60" r="40" fill="white"
  stroke="black" stroke-width="3"/>
<circle id="C" onmousedown="mouMe(evt)" cx="60" cy="60" r="22" fill="darkgrey"
  opacity="0.7" stroke="lightgrey" stroke-width="8"/>
</svg>

Mostra 2.-Esbrina què fa el programa i feu que escrigui els quadrats per verificar el teorema de Pitàgores. 

<svg width="1500" height="1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="startup(evt)">
<script><![CDATA[
var xmlns="http://www.w3.org/2000/svg";
var Root=document.documentElement;
var C;
var CC;
var H;
var a,b,c;
var sl=0;
function startup(evt){
 C=document.getElementById("catet1");
 CC=document.getElementById("catet2");
 H=document.getElementById("hipot");
}
function demanaUnNombre(t1,t2){return parseInt(prompt(t1,t2));}
function demanaUnText(t1,t2){return prompt(t1,t2);}
function cat1(evt){
 a=demanaUnNombre("Catet 1","0");
 C.firstChild.nodeValue=a;
}
function cat2(evt){
 b=demanaUnNombre("Catet 2","0");
 CC.firstChild.nodeValue=b;
}
function hipo(evt){
 c=demanaUnNombre("Hipotenusa","0");
 H.firstChild.nodeValue=c;
}
function prova(){
 if(a*a+b*b-c*c==0){
  escriu("Sí");
 }
 else{
  escriu("NO");
 }
}
function escriu(pat){
 T=document.createElementNS(xmlns,"text");
 T.setAttributeNS(null,"x",200);
 T.setAttributeNS(null,"y",200+sl);sl=sl+22;
 T.setAttributeNS(null,"font-size","20pt");
 Msg=document.createTextNode(pat);
 T.appendChild(Msg);
 Root.appendChild(T);
}
]]></script>
<g transform="translate(0.5,0.5)">
 <g onmousedown="cat1(evt)">
  <path d="M2,50v-15h15v15z" stroke="#ccf" fill="#fcc"/>
  <text id="catet1" x="5" y="46" font-size="9">C1</text>
 </g>
 <g onmousedown="cat2(evt)">
  <path d="M32,17v-15h15v15z" stroke="#ccf" fill="#fcc"/>
  <text id="catet2" x="35" y="14" font-size="9">C2</text>
 </g>
 <g onmousedown="hipo(evt)">
  <path d="M51,59v-15h15v15z" stroke="#ccf" fill="#fcc"/>
  <text id="hipot" x="55" y="55" font-size="9">H</text>
 </g>
 <path onmousedown="prova()" d="M20,70v-50h60zM20,20h7v7h-7z" stroke="#000" fill="#ffd"/>
</g>
</svg>

Categoria lliçó[edit]

Retrieved from "https://beta.wikiversity.org/w/index.php?title=Saber_computacional_III&oldid=355922"