Saber computacional III

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

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.

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ó

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

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

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

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

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 i gramàtica

var elSeuNomDusuari="camellet";

Les variables, el fonament de la programació, s'encarreguen d'emmagatzemar tot tipus de valors, són com el ciment a la construcció. Hi ha molts tipus de variables i constants però per simplicitat gràcies a les variables embolcall de JavaScript es distingirà preferentment un número d'un text, és important que aquest darrer sempre ha de portar cometes ja sigui simples o dobles:

Això és un número: 3894.427

Això és un text: "332.349" o també '4256.771'

És obligatori declarar les variables sempre.

var ...

Es declara una variable escrivint var davant del nom o etiqueta, es recomana no estalviar les declaracions de variables. Tota declaració es fa al principi del programa, funció o rutina entera. Així queda establert el tipus de valor o usabilitat de cada variable abans de fer cap operació amb elles.

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

Exemples:

1.-Es proposa fer la declaració d'una variable anomenada nomDUsuariNou amb el text "jordi", un altre variable anomenada nUmeroIdentificador amb el número 3349280 i un codi en text que sigui 800245FF-x-40A.

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

2.-Es proposa fer la 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';

L'ordinador guarda un 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 de vegades 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 interpreta aquest tipus d'operació fora de context.

Comentaris

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

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

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

SVG amb script

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 algoritme bàsic 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="8000">
<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 món");

}
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","15pt");
 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 ab = "+(ab));

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 ordenadament.

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 la segona paraula','?');
escriu("La multiplicació és ="+(a*b));
escriu("Les teves paraules encadenades són ="+d+c);

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");

Exercicis de divisibilitat

Un nombre p és divisible per un altre nombre q, matemàticament s'escriu q|p, només si en fer la divisió p/q dona un nombre enter. Per tant quan es fa la divisió no dona decimals, és a dir, no hi ha residu i per tant residu=0. La instrucció per demanar el residu de la divisió p/q és p%q.

1.- Modifica l'algoritme bàsic per determinar si és o no divisible per 3 el valor escrit.

 var x;
 var a;
 a=2;
 x=demanaUnNombre('Escriu un número','0');
 if(x%a==0){
  escriu("El número "+x+" és divisible per "+a);
 }
 else{
  escriu("El número "+x+" no és divisible per "+a);
 }

2.- Modifica l'algoritme bàsic per determinar el conjunt dels divisors de l'u al 1000 del valor escrit per consola.

 var x;
 var a;
 var llista;
 a=1;
 llista="{ ";
 x=demanaUnNombre('Escriu un número','0');
 for(;a<10;){
  if(x%a==0){
   llista=llista+a;
   a=a+1;
   for(;a<10;){
    if(x%a==0){
     llista=llista+", "+a;
    }
    a=a+1;
   }
  }
 }
 llista=llista+" }";
 escriu("El número "+x+" és divisible pels valors del conjunt "+llista);

Exercicis de funcions

Concepte matemàtic de funció és suficient per saber interpretar les diferents metàfores que es fan arreu.

Direm funció a qualsevol aplicació de un conjunt D en

\mathbb {R} ,

llavors per qualsevol element de D li correspon un únic element de

\mathbb {R} .

{\begin{array}{rrcl}f:&D&\longrightarrow &\mathbb {R} \\&x&\mapsto &y=f(x)\end{array}}

1.- Feu el diagrama de flux del programa donat que intenta representar la paràbola donada per la funció

f(x)={\frac {x^{2}}{70}}.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000" onload="programa(evt)">
<script><![CDATA[
var xmlns="http://www.w3.org/2000/svg";
var Root=document.documentElement;
function programa(evt){
 C=document.getElementById("camino");
 var x;
 var y;
 var d1=0;
 var d2=200;
 var p=10;
 var linia="M";
 x=d1;
 y=x*x/70;
 linia=linia+x+","+y;
 for(x=d1;x<=d2;x=x+p){
  y=x*x/70;
  linia=linia+"L"+x+","+y;
 }
 C.setAttribute("d",linia);
}
]]></script>
 <path id="camino" d="M" fill="none" stroke-width="0.2" stroke="black"/>
</svg>

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

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",100);
 T.setAttributeNS(null,"y",20+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="M-2,60v-30h30v30z" stroke="#ccf" fill="#fcc" opacity="0.1"/>
  <text id="catet1" x="6" y="48" font-size="9">C1</text>
 </g>
 <g onmousedown="cat2(evt)">
  <path d="M32,28v-30h30v30z" stroke="#ccf" fill="#fcc" opacity="0.1"/>
  <text id="catet2" x="42" y="13" font-size="9">C2</text>
 </g>
 <g onmousedown="hipo(evt)">
  <path d="M44,66v-30h30v30z" stroke="#ccf" fill="#fcc" opacity="0.1"/>
  <text id="hipot" x="55" y="53" font-size="9">H</text>
 </g>
 <path onmousedown="prova()" d="M20,70v-50h60zM20,20h7v7h-7z" stroke="#000" fill="#ffd"/>
</g>
</svg>