UNIVERSIDAD SALESIANA DE BOLIVIA

INGENIERIA DE SISTEMAS

Integrantes: Diego Wilmer Pillco Tancara

Materia: Programación en Internet

TRABA
Docente: Ing. Carmen Rosa Mollinedo

Fecha: 06/04/2018 JO DE
LA PAZ-BOLIVIA
INVESTI
GACIÓN
 2018

CONTENIDO

1. Introducción.................................................................................................3

2. Abrir la Consola del Navegador..................................................................4

3. Union De Cadenas.....................................................................................5

4. Intercalar.....................................................................................................6

5. Contar Consonantes Y Vocales..................................................................7

5.1. Ejemplo para contar el número de vocales y consonantes de una

cadena con PHP count_chars()..................................................................8

5.2. Ejemplo para contar el número total de vocales y consonantes de

una cadena con PHP..................................................................................8

6. Operadores Básicos.................................................................................10

6.1. Add....................................................................................................10

6.2. Delete................................................................................................11

6.3. forEach..............................................................................................11

6.4. La propiedad size..............................................................................12

6.5. Iteración............................................................................................13

6.6. Otros métodos...................................................................................13

2
 COMO HABILITAR EL MANDO DE CONSOLA DE UN NAVEGADOR

1. Introducción

Los navegadores son probablemente el software más utilizado de todos. En

este manual se explica su funcionamiento interno. Veremos qué ocurre cuando
escribes google.com en la barra de direcciones hasta que la página de Google
aparece en la pantalla.

La Consola del Navegador es como la Consola Web, pero se aplica a todo

el navegador en lugar de a una sola pestaña de contenido.

Por lo tanto, registra el mismo tipo de información que la Consola Web:

solicitudes de red, JavaScript, CSS, errores y advertencias de seguridad y
mensajes registrados explícitamente por código JavaScript. Sin embargo, en lugar
de registrar esta información para una sola pestaña de contenido, registra
información para todas las pestañas de contenido, complementos y código propio
del navegador.

Si también desea utilizar las otras herramientas de desarrollador web en la

caja de herramientas (Toolbox) Web estándar con código de complemento o
explorador, considere la posibilidad de utilizar el cuadro de herramientas del
navegador (Browser Toolbox).

Del mismo modo, puede ejecutar expresiones JavaScript utilizando la

consola del explorador. Sin embargo, mientras la Consola Web ejecuta el código
en el ámbito de la ventana de la página, la consola del explorador los ejecuta en el
ámbito de la ventana chrome del navegador. Esto significa que puedes interactuar
con todas las pestañas del navegador usando el gBrowser global e incluso con el
XUL utilizado para especificar la interfaz de usuario del navegador.

Nota: La línea de comandos de la consola del navegador (para ejecutar

expresiones JavaScript) está desactivada de forma predeterminada. Para
habilitarla, establezca la preferencia devtools.chrome.enabled a true en about:

3
config o configure la opción "Habilitar explorador chrome y add-on debugging
toolboxes" (Firefox 40 y posterior) en la opción Configuración de la herramienta de
desarrollador (developer tool settings).

2. Abrir la Consola del Navegador

Puede abrir la consola del navegador de dos formas:

Desde el menú: seleccione "Consola del navegador" en el submenú

"Desarrollador web" en el menú de Firefox (o en el menú Herramientas si muestra
la barra de menús o está en OS X)

Desde el teclado: pulse Ctrl+Shift+J (o Cmd+Shift+J en un Mac).

También puedes iniciar la consola del navegador lanzando Firefox desde la

línea de comandos y pasando el argumento -jsconsole:

/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

La consola del navegador se ve así:

4
 Puede ver que la consola del navegador se ve y se comporta de forma muy
similar a la Consola Web:

 La mayor parte de la ventana es ocupada por el panel que

muestra mensajes

 arriba, la barra de herramientas le permite filtrar los

mensajes que se muestran

 abajo, el interprete de linea de comandos le permite

evaluar la expresión JavaScript.

3. Unión De Cadenas

Normalmente podemos unir cadenas (concatenarlas) usando el operador ' +

' del siguiente modo:

4. Intercalar

A la hora de crear un hash para una contraseña, es conveniente no incluir

sólo la contraseña, sino concatenar una cadena o un número más; lo mismo
cuando generamos claves para que interaccionen aplicaciones en varios
servidores; aunque hay veces en que, dados los pocos datos de que disponemos
a la hora de generar la clave, no tenemos mucho donde elegir a la hora de crear el
hash.

5
 Por ese motivo se me ocurrió esta función en PHP, lo que hace es intercalar
cadenas, es decir, tenemos dos cadenas, y queremos generar una cadena a partir
de las dos anteriores, podemos coger un carácter de una, otro de otra, y así
sucesivamente (como si estuviéramos barajando) hasta formar una cadena cuya

longitud es la suma de las dos. Por ejemplo si tenemos las palabras “ poesia” y
“binaria“, resultaría la cadena: pboiensairaia .

Aunque, ya que vamos a hacer algo así, ¿ por qué limitarlo ? Hagamos una
función que soporte una cantidad indeterminada de cadenas:

5. Contar Consonantes Y Vocales

En este post vamos a ver cómo contar el número de vocales y consonantes

de una cadena con PHP count_chars(), anteriormente publiqué un post parecido
de como contar el número de palabras en una cadena con PHP.

6
 Aunque la búsqueda sea parecida he creido conveniente usar la
función PHP count_chars() en la primera demo, así voy expandiendo el número de
funciones PHP sobre cadenas de las que hablo en el blog.

En la segunda combinaré dicha función con PHP preg_match(), de la cual

ya hablé anteriormente.

Según la documentación oficial PHP count_chars():

Cuenta el número de apariciones de cada byte-value (0..255) en string y lo

devuelve de varias maneras.

5.1. Ejemplo para contar el número de vocales y consonantes de una

cadena con PHP count_chars()

Os voy a poner un primer y sencillo ejemplo para contar de las volcales y

consonantes usadas en una cadena:

Ahora les detallo el código paso a paso:

 El el código fuente podéis ver como primero asigno a la

variable $cadena una frase.
 Después con recorro con un foreach() el array devuelto, este array
contiene únicamente los caracteres con al menos una
ocurrencia dentro de la cadena, es porque le pasamos el valor ‘1’.
Podéis probar con el valor ‘0’, os saldría todos los caracteres y el
número de ocurrencias en la cadena.

7
  Termino sacando por pantalla el caracter ascii traducido por la
función chr().

5.2. Ejemplo para contar el número total de vocales y consonantes de una

cadena con PHP

El anterior ejemplo nos devuelve un recuento de caracteres uno por uno,

con este nuevo ejemplo voy acontar el número total de vocales y consonantes en
una cadena con PHP preg_match().

Os detallo el código a continuación:

 Asigno a $cadena una frase e inicializo los

contadores $vocales y $consonantes.
 Recorro el array devuelto por count_chars().
 Con la función PHP preg_match() y el delimitador ‘i’  (no diferenciar
minúsculas y mayúsculas) uso la expresión
regular [aeiouáéíóúü] para mirar si el caracter es una vocal.
 En caso afirmativo le añado a la variable $vocales el número de
ocurrencias de dicha vocal.

8
  En caso negativo, doy por hecho que no es una vocal, así que miro
que el caracter sea una letra del abecedario de la A a la Z. De esta
manera nos libramos de los caracteres especiales (comas,
interrogaciones, admiraciones…), y le sumo a la
variable $consonantes el número de ocurrencias.
 Por último saco por pantalla los valores de las 2 variables.

6. Operadores Básicos

Para poder trabajar de forma efectiva con una colección, necesitaremos

métodos que permitan acceder a sus elementos. Estos serían los básicos:

 add: añade un elemento al Set

 delete: elimina un elemento del Set
 forEach: permite aplicar una función sobre cada elemento del Set
(según su orden de insercción)

6.1. Add

var mySet = new Set();

 
mySet.add( 1 );
mySet.add( 'foo' );

Para añadir un elemento a nuestro Set, utilizamos el método add:

Además de valores, podemos añadir expresiones a nuestro Set para que

sean evaluadas en tiempo de ejecución:

mySet.add( 4 * 2 ); // 8
 
var fn = () => 'Hello World';
 
mySet.add( fn() ); // Hello World

También podemos encadenar los métodos consiguiendo un flujo

más funcional:

9
 var mySet = new Set().add( 'foo' ).add( 'bar' );
 
console.info( mySet.size ); // 2

var mySet = new Set( [ 'foo', 'foo', 'bar' ] );

console.info( mySet.size ); // 2

Si añadimos un valor dos veces, éste se ignora:

La igualdad de valores se realiza mediante una comparación interna de

tipo estricto (===), lo que significa que ésta no aplica a objetos (los cuales, por
definición, son siempre diferentes en Javascript):

var objA = {},

objB = {};
 
console.info( objA === objB ); // false
 
var mySet = new Set( [ objA, objB ] );
console.info( mySet.size ); // 2

6.2. Delete

Para borrar un elemento, utilizamos el método delete. Javascript devuelve

un Boolean indicando el resultado de la operación:

mySet.delete( 'foo' ); // true

mySet.delete( 'foobar' ); // false
 
var result = mySet.delete( 'bar' );
 
console.info( result ); // false
console.info( typeof result ); // boolean

Igual que en el caso anterior, también podemos operar con expresiones:

var fn = ( x ) => Math.pow( x, 2 );

 
mySet.delete( fn( 12 ) ); // false (144)

Esta sí resulta una novedad con respecto al objeto Array el cual, como bien
sabemos, no incorpora un método nativo para eliminar un elemento.

10
 6.3. forEach

Al igual que el objeto Array y otros iterables, el objeto Set permite recorrer

sus elementos para aplicar una función (callback) sobre cada valor. El orden
utilizado es estrictamente el de inserción:

var mySet = new Set();

 
mySet.add( 1 );
mySet.add( 'foo' );
 
mySet.forEach( ( ele ) => console.info( ele ) );
// 1
// foo

El callback del forEach recoge hasta tres valores: los dos primeros

(idénticos) son el elemento sobre el que se itera mientras que el tercero apunta al
propio objeto Set:

mySet.forEach( ( ele, n, obj ) => console.info( ele ) );

// 1 1 Set {}
// foo foo Set {}

NOTA: Desconozco porque los dos primeros argumentos referencian al

mismo valor. Ya en la especificación, se establece de dicho modo: “the first two
arguments are a value contained in the Set. The same value is passed for both
arguments.”

6.4. La propiedad size

La propiedad size, tal y como su nombre sugiere, permite obtener el número

de elementos que componen un conjunto dado. El valor devuelto se corresponde
con el instante en que se realiza la consulta:

var mySet = new Set();

 
mySet.add( 1 );
mySet.add( 'foo' );
mySet.add( 'foobar' );
 
console.info( mySet.size ); // 3

11
  
mySet.delete( 'foo' );
console.info( mySet.size ); // 2

6.5. Iteración

Al estar trabajando con objetos iterables, podemos recorrer su contenido

utilizando un bucle de tipo for…of:

var mySet = new Set().add( 'foo' ).add( 'bar' ).add( 'foobar' );

 
for ( let ele of mySet ) {
console.info( ele );
}
 
// foo
// bar
// foobar

6.6. Otros métodos

Completando la API de este nuevo objeto tenemos los siguientes métodos:

 clear: elimina todos los elementos de un conjunto.

 has: comprueba que un valor, o el resultado de una expresión, se
encuentra en el Set. Devuelve un valor true o false.
 entries: devuelve un objeto de tipo iterable que contiene a su vez un
array con los valores de cada elemento del Set.
 values: devuelve un objeto de tipo iterable con el valor de cada uno
de los elementos del Set.
 keys: idéntico al método values.

12
var mySet = new Set( [ 'foo', 'bar', 'foobar' ] );
 
// has
console.info( mySet.has( 'bar' ) ); // true
console.info( mySet.has( 'xxx' ) ); // false
 
// entries
for ( let value of mySet.entries() ) {
console.info( value );
}
 
// values
for ( let value of mySet.values() ) {
console.info( value );
}
 
// keys
for ( let value of mySet.keys() ) {
console.info( value );
}
 
// Clearing
mySet.clear();
console.info( mySet.size ); // 0

13