• introducció
• pràctica guiada
• css
• exercicis

Introducció.

Durant la primera unitat hem treballat sobre Javscript i s’ha usat HTML per l’estructura i l’entrada de dades.

En aquesta unitat coneixerem un poc més de l’estructura HML i els estils CSS.

Una bona estructura HTML ens facilita el treball amb CSS i Javascript.

Índex

HTML

1. HTML és un Hyper Text Markup Language (llenguatge de marques)
2. HTML és l’estàndart per escriure pàgines HTML.
3. HTML descriu l’estructura d’una pàgina web
4. HTML són una sèrie d’elements
5. HTML diu al navegador com s’ha de mostrar el contingut
6. HTML són elements de peces de contingut tal com “això és una capçalera”, “això és un paràgraf”, “això és un enllaç”, etc.

CSS

1. CSS stands for Cascading Style Sheets
2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media
3. CSS saves a lot of work. It can control the layout of multiple web pages all at once
4. External stylesheets are stored in CSS files

Bootstrap

1. Bootstrap is a free front-end framework for faster and easier web development
2. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
3. Bootstrap also gives you the ability to easily create responsive designs

3. Elements d’un algoritme

Per aconseguir dissenyar i implementar un algoritme s’usen els següents elements:

(consultau els links sobre els termes per veure la seva descripció teorica al llenguatge javascript)

1. Variables: permeten guardar valors que es podran modificar. Les variables tenen un nom, tenen un abast d’accesibilitat i poden ser del tipus:
   • Boleà: un bit que pot tenir el valor vertader o fals.
   • Numèric
   • Cadena de caràcters. String
   • Llistes: conjunts de variables amb una estructura i accesibilitat concreta.
2. Operadors: són elements que ens permeten interactuar amb les variables, com pot ser sumar, restar, concatenar, …
3. Condicionals: Permeten controlar el recorregut de l’algorisme. Decideixen, mitjançant una premisa condicional quin camí ha d’agafar l’algoritme. Pot ser un condicional que s’executa una sola vegada (if) o un condicionals que fa un bucle (while, for, …).
4. Comentaris: Els comentaris són elements que ajuden a explicar el funcionament de l’algoritme. Quan s’implementa són parts del codi que no s’executen.

4. Tipus de variables

Les variables a Javascript es declaren mitjançant la paraula var o la paraula let. Més endavant explicarem la seva diferència, per ara usarem la declaració var.

var somUnaVariable; //declaració d'una variable buida.

4.1. Numérics

S’empren per enmagatzemar valors numèrics o decimals. Usam el punt en lloc de la coma per valors decimals.

var iva = 16;        // variable tipus sencer
var total = 234.65;  // variable tipus decimal

4.2. Cadenes de text. String

S’empren per enmagatzemar caràcters, paraules o frases de text. Per assignar el valor de la variable tancam el valor entre cometes dobles o simples.

var missatge = "Som una frase";
var missatge2 = 'També puc anar amb cometes simples';
var lletra = 'c'; //també pot ser un únic caràcter.
var buit =''; //o un valor buid

Les cometes dobles i simples es poden intercalar per tenir una sortida adequada sense “tancar” la paraula.

var text1 = "Una frase amb 'cometes simples' dins";
var text2 = 'Una frase amb "cometes dobles" dins';



A vegades s’han d’usar símbols per representar coses com:

Si volem tenir	S’escriu…
Una nova línia	\n
Un tabulador	\t
Una cometa simple	\'
Una cometa doble	\"
Una barra inclinada	\\

Per tant, la forma correcta d’escriure les anteriors frases és:

var text1 = 'Una frase amb \'cometes simples\' dins';
var text2 = "Una frase amb \"cometes dobles\" dins";



Este mecanismo de JavaScript se denomina “mecanismo de escape” de los caracteres problemáticos, y es habitual referirse a que los caracteres han sido “escapados”.

4.3. Arrays o vectors

Un array és una colección de variables, que poden ser totes del mismo tipus o diferents. Per entendre la seva utitlitat ho feim amb un exemple:

var dia1 = "Dilluns";
var dia2 = "Dimarts";
...
var dia7 = "Diumenge";

El codi anterior és correcte, malgrat aixó sí que podem dir que és ineficient i complica la programació. Imagina si volem enmgatzemar els mesos de l’any. Tendriem 12 + 7 variables diferents i vos puc assegurar que complica la programació.

Per això s’empren les agrupacions de variables i es fa de la següent manera:

var dies = ["Dilluns", "Dimarts", "Dimecres", "Dijous", "Divendres", "Dissabte", "Diumenge"];

Ara tenim una única variable anomenada dies que guarda tots els valors relacionats.

Per definir una variable array ho feim de la següent forma:

var nomArray = [valor1, valor2, ..., valorN];

Per accedir als seus elements es fa donant la posició que ocupa, les posicions comencen de 0 fins a N.

Fixa´t en el codi anterior, com s’ha dit l’array comença a partir de la posició 0. Al codi es fa la transformació mitjanaçant una resta del diaTriat ([diaTriat-1]).

var dia = dies[0];    // dia = "Dilluns"
dia = dies[5];            // dia = "Dissabte"

Exercici Mesos.

Fent un fork del programa anterior fes un array dels 12 mesos de l’any. Canvia la manera de mostrar el resultat i fes-ho mitjançant un alert().

4.4. Booleans

Es conèixen amb el nom de variables de tipus lògic. Poden tenir els valors true o false (vertader o fals).

Per exemple, són el resultat dels condicionals que sols poden ser vertader o fals. També es poden declarar variables:

var haEntrat=true;var correcte=false;

4. 
Operadors

Els operadors permeten manipular el valor de les variables, realitzar operacions matemàtiques i comparar diferentes variables.

Permeten als programes realitzar càlculs complexes i prendre decisions lògiques en funció de comparacions i altres tipus de condicions.

4.1. Assignació

L’operador d’assignació és el més emprat. El símbol emprat és = 

var numero1 = 3; //assigna el valor 3 a numero1

A l’esquerra sempre s’h de posar el nom de la variable.

var numero1 = 3;
var nombres[1] = 4; //assigna el valor 4 dins la posició 1 de l'array nombres
numero1 =2; //la variable numero1 ara val 2.

4.2. Increment i decrement

S’usen dos operadors sobre les variables numèriques per poder incrementar o decrementar els seus valors. Sols són vàlids sobre variables numèriques.

Exemple:

var numero = 5;
++numero;
alert(numero);  // numero = 6

Que és equivalent a:

var numero = 5;
numero = numero + 1;
alert(numero);  // numero = 6

El mateix amb el decrement:

var numero = 5;
--numero;
alert(numero);  // numero = 4

L’anterior exemple és equivalent a:

var numero = 5;
numero = numero - 1;
alert(numero);  // numero = 4

També es poden emprar com a sufixe:

var numero = 5;
numero++;
alert(numero);  // numero = 6

Mira el resultat del següent exemple per veure les diferències:

var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, numero1 = 6

var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6

Si l’operador va com a prefixe (davant) l’operació s’executa al proncipi, si és al darrera es fa despres de realitzar l’operació.

4.3. Lògics

Els operadors lògics són imprescindibles per programar. S’usen per prendre decisions. El seu resultat serà true o false (valor lògic o booleà).

4.3.1. Negació

És l’operador que nega el valor d’una variable.:

var visible = true;
alert(!visible);  // mostra "false" y no "true"

variable	!variable
true	false
false	true

Si aplicam una operació booleana sobre un:

• número, val false si val 0 i true per qualsevol altre.
• Texte, val false si la cadena és buida ("") i val true si no és buida.

Si la variable original es de tipo booleano, es muy sencillo obtener su negación. Sin embargo, ¿qué sucede cuando la variable es un número o una cadena de texto? Para obtener la negación en este tipo de variables, se realiza en primer lugar su conversión a un valor booleano:

var quantitat = 0;
buid = !quantitat;  // buid = true

quantitat = 2;
buid = !quantitat;  // buid = false

var missatge = "";
buid = !missatge;  // buid = true

missatge = "Bienvenido";
buid = !missatge;  //  buid = false

4.3.2. AND

L’operació lògica AND obté el resultat combinant dos valors boleans. L’operador que s’usa és &&, i el resultat de l’operació és vertader sols si els dos operands són vertaders.

variable1	variable2	variable1 && variable2
true	true	true
true	false	false
false	true	false
false	false	false

var valor1 = true;
var valor2 = false;
resultado = valor1 && valor2; // resultat = false

valor1 = true;
valor2 = true;
resultado = valor1 && valor2; // resultat = true

4.3.3. OR

L’operació lògica OR tambè combina dos valors booleans. L’operador s’indica amb || i el seu resultat és true si un dels dos operands és vertader.

variable1	variable2	variable1 || variable2
true	true	true
true	false	true
false	true	true
false	false	false

var valor1 = true;
var valor2 = false;
resultado = valor1 || valor2; // resultat = true

valor1 = false;
valor2 = false;
resultado = valor1 || valor2; // resultat = false

3.3.4. Matemátics

Els operadors que es poden usar són: suma (+), resta (-), multiplicació (*), divisió (/) i mòdul(%).


var numero1 = 10;
var numero2 = 5;

resultat = numero1 / numero2;  // resultat = 2
resultat = 3 + numero1;        // resultat = 13
resultat = numero2 – 4;        // resultat = 1
resultat = numero1 * numero 2; // resultat = 50

L’operador mòdul calcula el reste de la divisió sencera de dos numeros. Per exemple si dividim 10 entre 5, la divisió dona el resultat 2, el reste és 0, per tant el módul de 10 i 5 és igual a 0.

En el cas, de 9 i 5, el resultat es 1 i el reste 4, per tant el módul de 9 i 5 es igual a 4.

var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultat = 0

numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultat = 4

Podem abraviar la notació:

var numero1 = 5;
numero1 += 3;  // numero1 = numero1 + 3 = 8
numero1 -= 1;  // numero1 = numero1 - 1 = 4
numero1 *= 2;   // numero1 = numero1 * 2 = 10
numero1 /= 5;   // numero1 = numero1 / 5 = 1
numero1 %= 4;   // numero1 = numero1 % 4 = 1

4.5. Relacionals

Els operadors a javascript, com a les matemàtiques per delimitar franjes: major que (>), menor que (<), major o igual (>=), menor o igual (<=), igual que (==) y diferent de (!=).

El resultat de sempre és un valor booleà:

var numero1 = 3;
var numero2 = 5;
resultat = numero1 > numero2; // resultat = false
resultat = numero1 < numero2; // resultat = true

numero1 = 5;
numero2 = 5;
resultat = numero1 >= numero2; // resultat = true
resultat = numero1 <= numero2; // resultat = true
resultat = numero1 == numero2; // resultat = true
resultat = numero1 != numero2; // resultat = false

Fixa’t amb la diferència entre = i == . Assignació i comparació.

// L'operador "=" assigna valors
var numero1 = 5;
resultat = numero1 = 3;  // numero1 = 3 y resultat = 3

// El operador "==" compara variables
var numero1 = 5;
resultado = numero1 == 3; // numero1 = 5 y resultado = false

Los operadores relacionales también se pueden utilizar con variables de tipo cadena de texto:

var texto1 = "hola";
var texto2 = "hola";
var texto3 = "adeu";

resultat = texto1 == texto3; // resultat = false
resultat = texto1 != texto2; // resultat = false
resultat = texto3 >= texto2; // resultat = false

Contruïm el nostre propi Servidor, ho feim sobre vIRTUALbOX i l’integram a la nostra xarxa local.Afegim un servidor local DNS.

1. Instal·lam un servidor HTTP
2. Realitzam tasques de gestió al nostre Servidor
3. Comunicacions GET i POST entre host i Servidor
4. Instal·lam un servidor DNS local

PART I. INSTAL·LACIÓ SERVIDOR WEB APACHE

-Client: “How! Som una computadora”
-Server: “How! quina computadora?”
-Client: “How! la 8.1.5.43:8080”
-Server: “Què vols?”
-Client: “echo “Hello World”
-Server: “idoi HELLO WORLD”Amb seqüències d’ordres conegudes hom es posa en comunicació amb altres, les màquines tambè. El comportament protocolari.
Els idiomes són els diferents llenguatges (html,javascript , php, java, …) que s’empren.

El servidor Apache

Un dels servidors http més populars i més emprats és l’APACHE, és un projecte obert i gestionat desde la seva organització. És una aplicació que permet afegir serveis mitjançant moduls

Instal·lam el servidor Apache+Wordpress usant un paquet de Bitnami.

Aquí tenim la documentació oficial del projecte.

Com funciona?

1. El Servidor s’ha de posar en marxa!!
2. El programa de bitnami:
   
   
3. Script “ctl.sh” situat a wordpress/apache2/script/, usant les comandes:
   • ./ctl.sh start
   • ./ctl.sh stop
   • ./ctl.sh restart
4. Comprovam l’accès al Servidor.
5. No hem posat bé la direcció
6. El servidor no està en marxa
7. Altres…

Les estructures de control serveixen per controlar l’execució d’un programa. Aquestes es construeixen mitjançant decicions lògiques muntades per operadors.

Les estructures de control són del tipus decisició única:

si (escumpleixlacondició) fes aquestatasca()
sino fes aquestaaltratasca() 

que podria decidir si un

o de decisió repetitiva:

var x=0;
repeteix mentres (x<10) {
fesoperacions
augmenta x en 1;
}

que repeteix una seqüència d’accions de manera repetida. Controlada per una condició, en el cas de l’exemple la variable x ha de ser menor que 10. La variable x augmenta a cada volta.

Podem calcular els valors amb una taula que ens mostra el valors de les variables a cada volta. Aquest sistema ens permet calcular a mà el resultat de “bucles” on podriem afegir més variables.

x	0	1	2	3	4	5	6	7	8	9	10
(x<10)	no	no	no	no	no	no	no	no	no	no	sí

Tenim per tant unes eines de control que permeten que un programa no sigui una seqüència de instruccions, per tantel programa pot decidir amb les condicions implementades.

3.1. Estructura if

És l’estructura condicional més emprada i s’empra per prendre decisions en funció d’una condició. La definició formal és:

if(condicio) {
  ...
}

Si la condició es compleix (es a dir, si el seu valor és true) se executen totes les instruccions de dins {...}. Si la condició no es compleix (valor false) no s’executa cap instrucció de dins {...} i el programa executa les següents instruccions.

exemple:

var mostrarMissatge = true;

if(mostrarMissatge) {
  alert("Hola Món");
}

L’exemple es pot escriure com:

var mostraMissatge = true;

if(mostrarMissatge == true) {
  alert("Hola Món");
}

Cal recordar que = serveix per assignar valors, == per comparar valors (o variables) i === serveix per comparar variables i tipus.

var mostraMissatge = true;

// Comparam
if(mostraMissatge == false) {
  ...
}

// Error - assignam valor false a la variable
if(mostraMissatge = false) {
  ...
}

La condició  if() pot combinar els operadors lògics:

var mostrat = false;

if(!mostrat) {
  alert("És la primera vegada que es mostra el missatge");
mostrat=true;
}

Els operadors AND y OR permeten encadenar varies condicions simples per construir condicions complexes:condiciones complejas:

var mostrat = false;
var usuariVolMissatges = true;

if(!mostrat && usuariVolMissatges) {
alert("És la primera vegada que es mostra el missatge");
mostrat=true;
}

La condició anterior sols mostraà el missatge si mostrat=fals i usuariVolMissatges=true, altrament no mostrarà cap missatge.

Exercici Combinació condicionals

Completa les condicions dels if per tal que els missatges es mostrinde manera correcte:

var numero1 = 5;
var numero2 = 8;

if(...) {
  alert("numero1 no es major que numero2");
}
if(...) {
  alert("numero2 es positiu");
}
if(...) {
  alert("numero1 es negatiu o distiferent de zero");
}

Ver solución

3.4.2. Estructura if…else

En ocasiones, las decisiones que se deben realizar no son del tipo “si se cumple la condición, hazlo; si no se cumple, no hagas nada”. Normalmente las condiciones suelen ser del tipo “si se cumple esta condición, hazlo; si no se cumple, haz esto otro”.

Para este segundo tipo de decisiones, existe una variante de la estructura if llamada if...else. Su definición formal es la siguiente:

if(condicion) {
  ...
}
else {
  ...
}

Si la condición se cumple (es decir, si su valor es true) se ejecutan todas las instrucciones que se encuentran dentro del if(). Si la condición no se cumple (es decir, si su valor es false) se ejecutan todas las instrucciones contenidas en else { }. Ejemplo:

var edad = 18;

if(edad >= 18) {
  alert("Eres mayor de edad");
}
else {
  alert("Todavía eres menor de edad");
}

Si el valor de la variable edad es mayor o igual que el valor numérico 18, la condición del if() se cumple y por tanto, se ejecutan sus instrucciones y se muestra el mensaje "Eres mayor de edad". Sin embargo, cuando el valor de la variable edad no es igual o mayor que 18, la condición del if() no se cumple, por lo que automáticamente se ejecutan todas las instrucciones del bloque else { }. En este caso, se mostraría el mensaje "Todavía eres menor de edad".

El siguiente ejemplo compara variables de tipo cadena de texto:

var nombre = "";

if(nombre == "") {
  alert("Aún no nos has dicho tu nombre");
}
else {
  alert("Hemos guardado tu nombre");
}

La condición del if() anterior se construye mediante el operador ==, que es el que se emplea para comparar dos valores (no confundir con el operador = que se utiliza para asignar valores). En el ejemplo anterior, si la cadena de texto almacenada en la variable nombre es vacía (es decir, es igual a "") se muestra el mensaje definido en el if(). En otro caso, se muestra el mensaje definido en el bloque else { }.

La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas:

if(edad < 12) {
  alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
  alert("Eres un adolescente");
}
else if(edad < 35) {
  alert("Aun sigues siendo joven");
}
else {
  alert("Piensa en cuidarte un poco más");
}

No es obligatorio que la combinación de estructuras if...else acabe con la instrucción else, ya que puede terminar con una instrucción de tipo else if().

Ejercicio 6

El cálculo de la letra del Documento Nacional de Identidad (DNI) es un proceso matemático sencillo que se basa en obtener el resto de la división entera del número de DNI y el número 23. A partir del resto de la división, se obtiene la letra seleccionándola dentro de un array de letras.

El array de letras es:

var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];

Por tanto si el resto de la división es 0, la letra del DNI es la T y si el resto es 3 la letra es la A. Con estos datos, elaborar un pequeño script que:

1. Almacene en una variable el número de DNI indicado por el usuario y en otra variable la letra del DNI que se ha indicado. (Pista: si se quiere pedir directamente al usuario que indique su número y su letra, se puede utilizar la función prompt())
2. En primer lugar (y en una sola instrucción) se debe comprobar si el número es menor que 0 o mayor que 99999999. Si ese es el caso, se muestra un mensaje al usuario indicando que el número proporcionado no es válido y el programa no muestra más mensajes.
3. Si el número es válido, se calcula la letra que le corresponde según el método explicado anteriormente.
4. Una vez calculada la letra, se debe comparar con la letra indicada por el usuario. Si no coinciden, se muestra un mensaje al usuario diciéndole que la letra que ha indicado no es correcta. En otro caso, se muestra un mensaje indicando que el número y la letra de DNI son correctos.

Ver solución

3.4.3. Estructura for

Las estructuras if y if...else no son muy eficientes cuando se desea ejecutar de forma repetitiva una instrucción. Por ejemplo, si se quiere mostrar un mensaje cinco veces, se podría pensar en utilizar el siguiente if:

var veces = 0;

if(veces < 4) {
  alert("Mensaje");
  veces++;
}

Se comprueba si la variable veces es menor que 4. Si se cumple, se entra dentro del if(), se muestra el mensaje y se incrementa el valor de la variable veces. Así se debería seguir ejecutando hasta mostrar el mensaje las cinco veces deseadas.

Sin embargo, el funcionamiento real del script anterior es muy diferente al deseado, ya que solamente se muestra una vez el mensaje por pantalla. La razón es que la ejecución de la estructura if() no se repite y la comprobación de la condición sólo se realiza una vez, independientemente de que dentro del if() se modifique el valor de la variable utilizada en la condición.

La estructura for permite realizar este tipo de repeticiones (también llamadas bucles) de una forma muy sencilla. No obstante, su definición formal no es tan sencilla como la de if():

for(inicializacion; condicion; actualizacion) {
  ...
}

La idea del funcionamiento de un bucle for es la siguiente: “mientras la condición indicada se siga cumpliendo, repite la ejecución de las instrucciones definidas dentro del for. Además, después de cada repetición, actualiza el valor de las variables que se utilizan en la condición”.

• La “inicialización” es la zona en la que se establece los valores iniciales de las variables que controlan la repetición.
• La “condición” es el único elemento que decide si continua o se detiene la repetición.
• La “actualización” es el nuevo valor que se asigna después de cada repetición a las variables que controlan la repetición.

var mensaje = "Hola, estoy dentro de un bucle";

for(var i = 0; i < 5; i++) {
  alert(mensaje);
}

La parte de la inicialización del bucle consiste en:

var i = 0;

Por tanto, en primer lugar se crea la variable i y se le asigna el valor de 0. Esta zona de inicialización solamente se tiene en consideración justo antes de comenzar a ejecutar el bucle. Las siguientes repeticiones no tienen en cuenta esta parte de inicialización.

La zona de condición del bucle es:

i < 5

Los bucles se siguen ejecutando mientras se cumplan las condiciones y se dejan de ejecutar justo después de comprobar que la condición no se cumple. En este caso, mientras la variable i valga menos de 5 el bucle se ejecuta indefinidamente.

Como la variable i se ha inicializado a un valor de 0 y la condición para salir del bucle es que i sea menor que 5, si no se modifica el valor de i de alguna forma, el bucle se repetiría indefinidamente.

Por ese motivo, es imprescindible indicar la zona de actualización, en la que se modifica el valor de las variables que controlan el bucle:

i++

En este caso, el valor de la variable i se incrementa en una unidad después de cada repetición. La zona de actualización se ejecuta después de la ejecución de las instrucciones que incluye el for.

Así, durante la ejecución de la quinta repetición el valor de i será 4. Después de la quinta ejecución, se actualiza el valor de i, que ahora valdrá 5. Como la condición es que i sea menor que 5, la condición ya no se cumple y las instrucciones del for no se ejecutan una sexta vez.

Normalmente, la variable que controla los bucles for se llama i, ya que recuerda a la palabra índice y su nombre tan corto ahorra mucho tiempo y espacio.

El ejemplo anterior que mostraba los días de la semana contenidos en un array se puede rehacer de forma más sencilla utilizando la estructura for:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(var i=0; i<7; i++) {
  alert(dias[i]);
}

Ejercicio 7

El factorial de un número entero n es una operación matemática que consiste en multiplicar todos los factores n x (n-1) x (n-2) x ... x 1. Así, el factorial de 5 (escrito como 5!) es igual a: 5! = 5 x 4 x 3 x 2 x 1 = 120

Utilizando la estructura for, crear un script que calcule el factorial de un número entero.

Ver solución

3.4.4. Estructura for…in

Una estructura de control derivada de for es la estructura for...in. Su definición exacta implica el uso de objetos, que es un elemento de programación avanzada que no se va a estudiar. Por tanto, solamente se va a presentar la estructura for...in adaptada a su uso en arrays. Su definición formal adaptada a los arrays es:

for(indice in array) {
  ...
}

Si se quieren recorrer todos los elementos que forman un array, la estructura for...in es la forma más eficiente de hacerlo, como se muestra en el siguiente ejemplo:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(i in dias) {
  alert(dias[i]);
}

La variable que se indica como indice es la que se puede utilizar dentro del bucle for...in para acceder a los elementos del array. De esta forma, en la primera repetición del bucle la variable i vale 0 y en la última vale 6.

Esta estructura de control es la más adecuada para recorrer arrays (y objetos), ya que evita tener que indicar la inicialización y las condiciones del bucle for simple y funciona correctamente cualquiera que sea la longitud del array. De hecho, sigue funcionando igual aunque varíe el número de elementos del array.

JavaScript incorpora una serie de herramientas y utilidades (llamadas funciones y propiedades, como se verá más adelante) para el manejo de las variables. De esta forma, muchas de las operaciones básicas con las variables, se pueden realizar directamente con las utilidades que ofrece JavaScript.

3.5.1. Funciones útiles para cadenas de texto

A continuación se muestran algunas de las funciones más útiles para el manejo de cadenas de texto:

length, calcula la longitud de una cadena de texto (el número de caracteres que la forman)

var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10

+, se emplea para concatenar varias cadenas de texto

var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"

Además del operador +, también se puede utilizar la función concat()

var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"

Las cadenas de texto también se pueden unir con variables numéricas:

var variable1 = "Hola ";
var variable2 = 3;
var mensaje = variable1 + variable2; // mensaje = "Hola 3"

Cuando se unen varias cadenas de texto es habitual olvidar añadir un espacio de separación entre las palabras:

var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "HolaMundo"

Los espacios en blanco se pueden añadir al final o al principio de las cadenas y también se pueden indicar forma explícita:

var mensaje1 = "Hola";
var mensaje2 = "Mundo";
var mensaje = mensaje1 + " " + mensaje2; // mensaje = "Hola Mundo"

toUpperCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en mayúsculas:

var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

toLowerCase(), transforma todos los caracteres de la cadena a sus correspondientes caracteres en minúsculas:

var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"

charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:

var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2);     // letra = l

indexOf(caracter), calcula la posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si el carácter se incluye varias veces dentro de la cadena de texto, se devuelve su primera posición empezando a buscar desde la izquierda. Si la cadena no contiene el carácter, la función devuelve el valor -1:

var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b');     // posicion = -1

Su función análoga es lastIndexOf():

lastIndexOf(caracter), calcula la última posición en la que se encuentra el carácter indicado dentro de la cadena de texto. Si la cadena no contiene el carácter, la función devuelve el valor -1:

var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
posicion = mensaje.lastIndexOf('b');     // posicion = -1

La función lastIndexOf() comienza su búsqueda desde el final de la cadena hacia el principio, aunque la posición devuelta es la correcta empezando a contar desde el principio de la palabra.

substring(inicio, final), extrae una porción de una cadena de texto. El segundo parámetro es opcional. Si sólo se indica el parámetro inicio, la función devuelve la parte de la cadena original correspondiente desde esa posición hasta el final:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5);     // porcion = "Mundo"
porcion = mensaje.substring(7);     // porcion = "ndo"

Si se indica un inicio negativo, se devuelve la misma cadena original:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(-2); // porcion = "Hola Mundo"

Cuando se indica el inicio y el final, se devuelve la parte de la cadena original comprendida entre la posición inicial y la inmediatamente anterior a la posición final (es decir, la posición inicio está incluida y la posición final no):

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4);     // porcion = "a"

Si se indica un final más pequeño que el inicio, JavaScript los considera de forma inversa, ya que automáticamente asigna el valor más pequeño al inicio y el más grande al final:

var mensaje = "Hola Mundo";
var porcion = mensaje.substring(5, 0); // porcion = "Hola "
porcion = mensaje.substring(0, 5);     // porcion = "Hola "

split(separador), convierte una cadena de texto en un array de cadenas de texto. La función parte la cadena de texto determinando sus trozos a partir del carácter separador indicado:

var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];

Con esta función se pueden extraer fácilmente las letras que forman una palabra:

var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]

3.5.2. Funciones útiles para arrays

A continuación se muestran algunas de las funciones más útiles para el manejo de arrays:

length, calcula el número de elementos de un array

var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5

concat(), se emplea para concatenar los elementos de varios arrays

var array1 = [1, 2, 3];
array2 = array1.concat(4, 5, 6);   // array2 = [1, 2, 3, 4, 5, 6]
array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]

join(separador), es la función contraria a split(). Une todos los elementos de un array para formar una cadena de texto. Para unir los elementos se utiliza el carácter separador indicado

var array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" ");    // mensaje = "hola mundo"

pop(), elimina el último elemento del array y lo devuelve. El array original se modifica y su longitud disminuye en 1 elemento.

var array = [1, 2, 3];
var ultimo = array.pop();
// ahora array = [1, 2], ultimo = 3

push(), añade un elemento al final del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];
array.push(4);
// ahora array = [1, 2, 3, 4]

shift(), elimina el primer elemento del array y lo devuelve. El array original se ve modificado y su longitud disminuida en 1 elemento.

var array = [1, 2, 3];
var primero = array.shift();
// ahora array = [2, 3], primero = 1

unshift(), añade un elemento al principio del array. El array original se modifica y aumenta su longitud en 1 elemento. (También es posible añadir más de un elemento a la vez)

var array = [1, 2, 3];
array.unshift(0);
// ahora array = [0, 1, 2, 3]

reverse(), modifica un array colocando sus elementos en el orden inverso a su posición original:

var array = [1, 2, 3];
array.reverse();
// ahora array = [3, 2, 1]

3.5.3. Funciones útiles para números

A continuación se muestran algunas de las funciones y propiedades más útiles para el manejo de números.

NaN, (del inglés, “Not a Number”) JavaScript emplea el valor NaN para indicar un valor numérico no definido (por ejemplo, la división 0/0).

var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN

isNaN(), permite proteger a la aplicación de posibles valores numéricos no definidos

var numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
  alert("La división no está definida para los números indicados");
}
else {
  alert("La división es igual a => " + numero1/numero2);
}

Infinity, hace referencia a un valor numérico infinito y positivo (también existe el valor –Infinity para los infinitos negativos)

var numero1 = 10;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor Infinity

toFixed(digitos), devuelve el número original con tantos decimales como los indicados por el parámetro digitos y realiza los redondeos necesarios. Se trata de una función muy útil por ejemplo para mostrar precios.

var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564

En aquesta primera unitat aprendrem a dissenyar i implementar algoritmes.

Per dissenyar usam el pseudocodi gràfic i el pseudocodi escrit.

Per implementar els algoritmes usam el llenguatge javascript sobre la pàgina codepen.io

1.
Introducció.

Segons Turing “si vols que un computador faci A basta que li diguis que faci A” i l’objectiu que sigui senzill, clar, finit i ben definit.

Crear un algoritme és un procediment d’abstracció, que a partir d’unes premises es volen treure uns resultats.

Es necessari saber dibuixar i descriure el recorregut de un algoritme que implementa un requeriments previs. Un algoritme es descriu usant estructures de dades i sentències seqüencials, iteratives i condicionals.

2.
Què és un algoritme?

1. Un algoritme és una seqüència d’intruccions, variables i condicionals lògics que resolen un problema.
2. A programació s’anomena funció, i té un nom, pot tenir valors d’entrada que s’anomenen paràmetres i retorna un valor de sortida.
3. Una funció s’ha d’invocar o cridar desde un punt del “programa”.
4. Una funció o algoritme pot cridar altres funcions. També es pot cridar a ella mateixa, és el que s’anomena funció recursiva.
5. La implementació de un algoritme és pasar la idea del disseny a un llenguatge de programació.

Exemples d’algoritmes:

1. Cerca el nombre més alt de dos donats.

Per resoldre aquest algoritme tendrem una funció que li passam dos paràmetres i retorna el nombre major.

funció retornaMesAlt(x,y) —> x ó y

L’algorisme es pot escriure com:

funció retornaMesAlt(x,y){si (x>y) {return x;} else {return y;}}

Si ens fixam la funció té un condicional (x>y) que separa el recorregut de la funció, si es compleix el condicional ens retorna x (que serà més gran que y) sino, ens retorna y.

See the Pen mesAlt by PereAntoni (@pereantoni) on CodePen.

2. Crea un algorisme que ordeni una paraula per ordre alfabètic i que posi totes les a en majúscula.

En aquest cas ens trobam que no sabem quines eines disposam peró sí que podem esbosar el camí que resol el problema, més endavant el podrem implementar.

La solució a molts d’algoritmes és dividir-los en problemes més petits que siguin més fàcils d’encarar.

Els algoritmes més petits poden ser reutilitzables,

funcio ordenaA(paraula){paraula = ordena(paraula); //tenim la paraula ordenada mitjançant un algoritme que ens ordena la paraula.paraula = posaMajuscula(paraula,"a");//crearem un algoritme que ens posi les lletres donades a majúscula.}

Com podeu observar queda a l’aire la resolució, peró sí que ens queda clar el camí a seguir.

Hem subdividit el problema en petits problemes més fàcils de resoldre i els algoritmes creats ens podran servir més endavant.

Un algoritme surt de fer una seq¨ència de instruccions que d’unes entrades ens donen una sortida.

És molt important saber analitzar l’algoritme per preveure si és correcte o no.

Per aconseguir analitzar un algoritme ho podem fer mitjançant una taula de valors on per a cada instrucció podem anotar els valors de les variables.

Feim un primer exemple, li donam un array de nombres (cadena) i ens ha de retornar el nombre més alt.

function MesAlt(cadena){
//funcio que ens retorna el nombre més alt que hi ha dins una cadena.
let i=0;//variable que ens serveix per anar botant de posició en posició
let mesAlt=-1; //variable que ens guarda el nombre més alt

while(i<cadena.length){
//desde la posicó i=0 fins a i=cadena.length (la darrera)
if(cadena[i]>mesAlt){mesAlt=cadena[i];}
i++; 
}
return mesAlt;
}

La variable mesAlt=-1
Passam una cadena d’exemple [1,5,3,8]

i	0	1	2	3
cadena[i]	1	5	3	8
mesAlt	-1	1	5	5
(cadena[i]>mesAlt)	true	true	false	true
mesAlt	1	5	5	8
i++	1	2	3	4
cadena.lenght	4	4	4	4

Juntar dues cadenes: cadena = “a” + “a” //cadena=”aa”
Salt de línia a html “<br>”, salt de línia a javascript \n.

Exercici 1:
Cadenes de caracters. construcció d’strings.
1) Segueix el procediment per crear un programa que dibuixi la següent cadena de caràcters:
####
####
####
####
2) Implementa el programa amb javascript.

Exercici 2:
Construcció de cadenes usant bucles i condicionals.
Ara imagina que volem crear un programa que resolgui mitjançant un número qualsevol el problema, és a dir, que si volem que el quadrat sigui de 8 files amb els caràcters “####” o volem que sigui de 3 files x”####” ho poguem resoldre amb la mateixa solució.
Aquí ens hem de fixar amb una cosa MOLT IMPORTANT aquest problema és FER UNA CADENA QUE DIBUIXA UN QUADRAT, i no és PINTAR UN QUADRAT, és FER UNA CADENA de la mida demanada.

Solucions exercicis 1 i 2:

See the Pen exercicisJavascript1 by PereAntoni (@pereantoni) on CodePen.

Exercici 3:
En aquest tercer exercici volem que el programa realitzi un quadrat de mida x. O sigui que les files tendran x símbols i serà de x columnes.

Exercici 5:
Volem que l’usuari ens digui quin és el nombre de quadrats que vol que pinti el programa. També volem que controli si l’usuari ha realitzat una entrada correcta.

Exercici 6:
Aquest exercici segueix l’esquema que l’exercici 2 on l’usuari dona el nombre de repeticions que ha de fer el bucle de l’algoritme.

1. Que l’usuari ens digui quin és el nombre de línies que vol que escrigui el programa.
2. L’usuari ha de posar quina és la cadena que volem que es repeteixi.

“Per exemple:
l’usuari entra la cadena “repeteix” i 5 de número de repeticions, el programa ha de retornar:
repeteix
repeteix
repeteix
repeteix“

• Pases per fer la implementació:
  1. L’algoritme és molt semblant als anteriors, sols canvia que ara ha d’agafar la cadena que ens doni l’usuari (abans sempre era “####”). Feis un estudi del que ha de canviar. Després, seguint les pases, ho implementau.
  2. Implementació HTML.
     1. Feim el titular per el nou exercici i afegim dins un paràgraf un poc de descripció.
     2. Hem de posar dos inputs amb un identificador cada un:
        • per entrar la cadena
          <input id="idCadenaExercici6">
        • per entrar el nombre de repeticions (podeu provar de maquetar per tal que sigui entrada numèrica, ho deix per voltros, per desprès, ara pot quedar així)
          <input id="idRepetionsExercici6">
     3. Hem de posar el boto que cridarà la funció exercici6.
        <button onclick="exercici6()">exercici6</button>
  3. Implementació Javascript:
     1. Cream la funció exercici6().
        function exercici6(){alert ("prova");}
     2. Pitjam el boto d’exercici6 i miram si ens surt l’alert. Sino surt no pasam a la pròxima pasa, tenim alguna cosa malament.
     3. Molt bé, si ets aquí vol dir que funciona alguna cosa.
     4. Ara ens toca agafar les dades que són a l’HTML, al principi de l’algoritme afegim la declaració de les variables i feim que agafi els valors.
        let repeticions = document.getElementById("idRepeticionsExercici6").value;
let cadena = document.getElementById("idCadenaExercici6").value;
     5. Feim la comprovació de que entren les dades correctament afegint un alert:
        alert("Hem de repetir la cadena " + cadena + ", " + repeticions + " vegades");
     6. Si ens funciona podem seguir.
     7. Ara ens toca fer el bucle de repeticions, necessitam tenir una variable que ens controli les voltes que anam fent, afegim la variable i (de index).
        let i=0;
     8. Afegim el bucle:
        while (i<repeticions){
resultat = resultat + cadena + "\n"; //ens afegeix la cadena i un intro (\n) al resultat.
i++;
}
     9. Al final del codi hem de posar l’alert que ens mostra el resultat:
        alert(resultat);

Exercici 7:
Hem de dissenyar una funció que agafi dos nombres i un interval, i amb ells ha de retornar un nombre.

Exercici 8 Anàlisi d’algoritmes:

El següent codi conté dos exercicis on heu d’analitzar el codi. Els podeu visualitzar dins el vostre codepen.

See the Pen analisi algoritmes by PereAntoni (@pereantoni) on CodePen.

solució exercicis

Exercici 9 Anàlisi Algoritmes:

(fulla sencera per visualitzar o imprimir) – > aquí

Analitza cada un dels següents algoritmes amb els valors dels casos d’estudi i determina el resultat de l’alert o del return corresponent.

function calcula0(a,b){

//cas 1: valors entrada a=0, b=8

//cas 2: valors entrada a=7, b=0

let c=a+b;

if (c>8)    {return c;}

else        {return a;}

}

function calcula1(){

  //cas 1: let a=[1,5,6,3];

  //cas 2: let a=[3,5]

  let x=0;

  let resultat=0;

  while (x < a.length)

{resultat = resultat + a[x];

         x++;}

  return resultat;

}

function calcula2(){

  //cas 1: let a=[1,5,6,3];

  //cas 2: let a=[3,5];

  let x=0;

  let resultat=0; 

  while (x < a.length)

    {if (a[x]<4){

resultat = resultat + a[x];}

      x++;}

return resultat;

}

function calcula3(paraula){

//cas 1: paraula=”cocodril”

//cas 2 paraula=”serp aigua”

if (paraula.length>8){

return “sobren lletres”;}

else {return paraula;}}

Per els següents algoritmes els casos d’estudi són:
//cas1 variableArray=[“agró”,”ferreret”, ”milana”,”mart”];

//cas2 variableArray=[“mart”,”ferreret”, ”milana”];

function calcula6(variableArray){
variableArray.push(“mostel”);

if (variableArray.length>3)

{

variableArray.push(“mostel”);

variableArray.pop();

return(variableArray[3]);}

else {return variableArray[0];}

}

function calcula7(){

let a=12;

return “final”;

if (a==12){return “principi”;}

}

function calcula8(variableArray){

let a=12;

return variableArray[0] + a;

}

function calcula9(variableArray){

let a=”animal: ”;

return a.concat(variableArray[2]);

}

function calcula10(variableArray){

let b = variableArray[1].toUpperCase();

return b;

}

function calcula11(){

let paraula=”lletra”;

return paraula.charAt(2);}

function calcula11(variableArray){

return variableArray[2].concat(“ vola fina”);

}

function calcula12(variableArray){

return variableArray[].charAt(0);

}

function calcula13(){

let paraula=”licàntrop”;

return paraula.indexOf(“tr”);

}

function calcula13(variableArray){

let paraula=variableArray[0];

return paraula.indexOf(“r”);

}

function calcula14(variableArray){

return variableArray.join(“, “);

}

function calcula15(variableArray){

return variableArray.shift();

}

function calcula16(variableArray){

let a=’’;

variableArray.reverse();

a=variableArray[0].toUpperCase();

return a;

}

function calcula17(){

let a=”esclatassang”;

return a.subString(8); 

}

function calcula18(){

let a=”esclatassang”;

return a.subString(2); 

}

function calcula4(variableArray){

if (variableArray.length>3)

{return(variableArray[3]);}

else     {return variableArray[0];}

}

function calcula5(variableArray){

if (variableArray.length>3)

{variableArray.pop();

return(variableArray[3]);}

else {return variableArray[0];}

}

function calcula6(variableArray){

if (variableArray.length>3)

{variableArray.push(“pop”);

variableArray.pop();

return(variableArray[3]);}

else

{variableArray.push(“sipia”);

return variableArray[0];}

}

Disseny previ

Per solucionar el problema del rellotge que ens doni les hores altes varem pensar una possible algoritme.

Primer varem veure que: Cada posició ha d’agafar un valor dels quatre donats, varem quedar que estaven dins una array, per exemple poden ser [1,3,4,2] o [0,0,0,9] o [5,4,3,2]…

posicio1	posicio2	posicio3	posicio4
el major valor entre 0 i 2	depen de la posicio1: si (p1==2){ el major valor entre 0 i 2 }sino{ el major valor entre 0 i 9 }	el major valor entre 0 i 5	el major valor entre 0 i 9

Algoritme

Una vegada sabem les condicions determinam el camí de les instrucions.

Els valors són agafats per ordre posicio1 després posicio2, posicio3 i posició4.

“Cada vegada que una posició agafa un valor el borrarà de la llista, així feim que un valor no pugui ser agafat dues vegades.”

l’algoritme principal queda com segueix:

var valorsEntrada=agafamValorsEntrada(); 
var p1= agafaValorMaxim(valorsEntrada,2);
var p2;
if (p1==2){p2=agafaValorMaxim(valorsEntrada,2);}
else {p2=agafaValorMaxim(valorsEntrada,9);}
p3=agafaValorMaxim(valorsEntrada,5);
p4=agafaValorMaxim(valorsEntrada,9);

Ens em de fixar que cream una funció a part anomenada agafaValorMaxim(array,maximPermes) ja que és una tasca repetitiva i ens permet reutilitzar un algoritme que sempre ha de fer el mateix. El definim:

function agafaValorMaxim(array,maximPermes){
//funció que agafarà el valor màxim d'una array on el valor màxim permés és maximPermes.

var valorMaxim=-1;
valorMaxim=cercarValorMaxim;//while de cerca;
return valorMaxim;
}

Què necessitam per implementar?

Una vegada ja tenim pensada l’estructura de dades i recorregut de l’algoritme hem de recercar quins són els elements que ens permetran implementar la solució que ens sigui beneficisosa i comprovable.

Interfície

Per una banda estudiarem l’interficie d’usuari, tant d’entrada com de sortida. Usam HTML com a implementador i usarem els formularis, botons i inputs.

https://www.w3schools.com/html/html_forms.asp

Estructura de dades.

Cada algoritme té una estructura de dades que permet emmagatzemar la informació.

Cada algoritme o funció usarà una estructura addient al seu propòsit.

En el nostre cas:

[a,b,c,d]———->[funcio]———->[p1,p2,p3,p4]

empram una array d’entrada i una array de sortida, dins l’algoritme emprarem variables numèriques i condicionals.

Miram els mètodes de manipulació dels arrays -> aquí

Implementació

See the Pen problema hora by PereAntoni (@pereantoni) on CodePen.