Negocios electrónicos y
TECNOLOGÍAS DE CONSTRUCCIÓN DE SERVICIOS WEB
Para el proyecto final 28 Mayo 2018:
Ejercicio JavaScript Validar formulario y Jerarquía JS
Es un comprimido pon los dos archivos que contiene en la misma carpeta y acciona los botones del formulario, estudialo y comprenderlo para que en clase podamos seguir avanzando. clic aquí
Ejemplo validador dinamico completo
Ver ejercicio cualquier campo de un formulario
Ejercicios JS 3er Parcial Abril 2018
Manipulacion de archivos PHP 3er parcial abril 2018
Material de estudio TEORIA 3er parcial abril 2018
Ejercicios clase 1 a 3
Ejercicios PHP
EXAMEN I, ejemplo sobre la funcionalidad requerida. Tu programa debe ser similar al que se muestra aquí
Bienvenidos.
El presente es un espacio de apoyo al aprendizaje de "TECNOLOGÍAS DE CONSTRUCCIÓN DE SERVICIOS WEB"
En el encontrarás el temario, y apuntes para que refuerces tus conocimientos.
Reglamento – acuerdos:
- Respeto: La base de la convivencia social, recuerda que a través de tus palabras defines tu persona.
- Asistencia, podrás faltar máximo 3 veces
- Trabajo, efectuar las prácticas de aprendizaje
- Participar en clase. No tengas inconveniente en preguntar, es mejor manifestar nuestro desconocimiento que permanecer en la ignorancia
- Trabajo en equipo de temas que se te indicaran
- Calidad, estas en formación profesional, el entorno laboral es voraz y muy competitivo
- Tu principal objetivo debe ser aprender.
- Responsabilidad, somos adultos y como tal sabemos que la sociedad nos impone que nuestros actos tienen consecuencias
Evaluación:
- · Practicas
- · Exámenes
- · Entrega de CD de evidencias (personal): Todo tu trabajo y prácticas tienes que entregarlas en un CD antes de finalizar el curso. Te será indicada la fecha
- · Trabajo en equipo y tareas
- · Sobre todo: CALIDAD en tus productos de aprendizaje
----------
Consultar:
-Manual HTML
Jerarquía de objetos en un documento
JavaScript organiza todos los elementos de una página en una jerarquía. Cada elemento se ve como un objeto. Cada objeto puede tener ciertas propiedades y métodos. Con la ayuda de JavaScript puede fácilmente manejar los objetos. Para esto es muy importante comprender la jerarquía de los objetos.
Veamos una página:

Tenemos dos imágenes, un enlace y un formulario con dos campos de texto y un botón. Desde el punto de vista de JavaScript la ventana del navegador es el objeto-ventana. Éste objeto contiene ciertos elementos como la barra de estado.
Dentro de una ventana se puede cargar un documento HTML. Ésta página es un objeto-documento, esto significa que el objeto-documento representa el documento HTML.
El objeto-documento es un objeto muy importante en JavaScript, se usa una y otra vez. Las propiedades del objeto documento son por ejemplo el color de fondo de la página. Pero lo más importante es que todos los objetos son propiedades del objeto documento.
Un objeto HTML es, por ejemplo, un enlace o un formulario.
Veamos lo siguientes objetos mostrados como jerarquías:

Lo que queremos es poder obtener información sobre los distintos objetos y manejarlos. Para esto tenemos que conocer como acceder a los diferentes objetos. Puede ver los nombres de los objetos en la jerarquía. Si ahora quisiera saber como referirse a la primer imagen de la página HTML tiene que observar la jerarquía.
Comenzando desde la parte superior. El primer objeto se llama documento.
La primer imagen se representa por medio de images[0]. Esto significa que podemos acceder a este objeto a través de JavaScript por medio de document.images[0]. Si por ejemplo quisiera saber lo que el usuario ingresó en el primer elemento del primer formulario, nuevamente siguiendo la jerarquía sería:
document.forms[0].elements[0]
Pero, ¿cómo podemos saber el valor ingresado?. Lo primero que tendría que hacer es referirse a las propiedades que tiene el elemento. una de ellas nos ayuda a nosotros a responder la pregunta anterior. La propiedad es: value, por lo tanto podríamos hacer:
nombre=document.forms[0].elements[0].value;
Una cosa que tenemos que tener en claro es que se puede también manejar por medio de los nombres de cada uno de los elementos de la página. Por ejemplo veamos el siguiente trozo de HTML.
<form name="primero">
Ingrese su nombre:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
Ingrese su dirección de correo:<br>
<input type="text" name="correo">
<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">
</body>
Para referirnos al valor del correo ingresado lo podemos hacer por medio de:
document.primero.correo.value
Para intercambiar una imagen la llevamos a cabo con:
window.document.la_imagen.src="button_d.gif";

Cuando carga un documento en el Navegador, crea un número de objetos JavaScripts con propiedades basadas en el HTML dentro del documento y otra información pertinente. Estos objetos existen en una jerarquía que refleja la estructura de la página HTML. La siguiente figura ilustra la jerarquía de objetos.
A continuación está un esquema que usa un mapa sensible para describir la jerarquía básica de objetos del JavaScript.
En esta jerarquía, los descendientes de un objeto son propiedades suyas. Por ejemplo, una forma llamada form1 es un objeto así como una propiedad de document, y es refecrido como
document.form1.
Cada instancia del navegador tiene los siguientes objetos:
Para validar los campos de un formulario, se pueden resumir 3 pasos que se indican a continuación
Para usar JS en un formulario, y validar sus datos se requiere primeramente de declarar un formulario, se hace de la siguiente manera:
La validación de campos de un formulario se hace incluyendo código JS dentro de las etiquetas html <head></head> de la siguiente manera:
En el campo onsubmit llamar a la función con return nombrefuncion(); como en el siguiente ejemplo:
<form id="form1" name="form1" method="post" action="#" onsubmit="return valida();">
Observa el campo onsubmit="return valida();" el cual llama a la función JS que hará la validación
Efectúa el ejercicio que se indica en este tutorial "4a. JAVASCRIPT: como usarlo para validar un formulario".
Para hacerlo, crea un archivo en Dreamweaver con extensión .htm, o en el bloc de notas y guárdalo: Archivo > Guardar como > con extensión .htm y en "Tipo" selecciona la opción "todos los archivos".
Abre el archivo que creaste con un navegador, pruebalo, tiene que mostrar mensajes cuando no se llenen los campos de texto
------------------FIN 4. Introducción a JavaScript
En esta parte encontraras ejercicios vistos en clase.
Es muy importante que los hagas y los tengas como evidencia de tu trabajo ya que serán calificados:
Instrucciones: copia los archivos, efectúa los ejemplos y colócalos dentro de la carpeta: "ejercicios" la cual tiene que estar dentro de la carpeta "htdocs" recuerda que es allí donde se colocan los programas PHP
COMENZANDO:
int fputs ( resource $handle , string $string [, int $length ] )
file — Transfiere un fichero completo a un array
Una de las múltiples formas y de las mas sencillas para recoger información de un archivo con PHP es con la función file, que además pasa el valor del fichero a un array siendo cada elemento del array una línea del archivo a abrir, lo que puede ser útil sobre todo si queremos buscar o trabajar sólo con algunas líneas.
Ejemplo en ejecución (Recuerda que para que se lea la información de un archivo esté debe tener contenido):
Materiales de ayuda:
-Manual HTML
Manual en linea (Estudio para primer examen)
Ejercicio travel: Obtén los siguientes archivos
EXAMEN 2 Imágenes:
Practica integradora (final del bloque 2)
Bloque 3
Herramientas de desarrollo:
Bases de la construcción web interactiva Programación JavaScript
Objetivo: Generar paginas web dinámicas mediante programación JavaScript, Conocer la jerarquía JS, la referencia a objetos, los eventos (interacción con el usuario) y validaciones dinámicas de formularios de N elementos.
Material de apoyo educativo. Manual de referencia de programación Javascript
INTRODUCCIÓN A JAVASCRIPT
Jerarquía de objetos en un documento
JavaScript organiza todos los elementos de una página en una jerarquía. Cada elemento se ve como un objeto. Cada objeto puede tener ciertas propiedades y métodos. Con la ayuda de JavaScript puede fácilmente manejar los objetos. Para esto es muy importante comprender la jerarquía de los objetos.
Veamos una página:

Tenemos dos imágenes, un enlace y un formulario con dos campos de texto y un botón. Desde el punto de vista de JavaScript la ventana del navegador es el objeto-ventana. Éste objeto contiene ciertos elementos como la barra de estado.
Dentro de una ventana se puede cargar un documento HTML. Ésta página es un objeto-documento, esto significa que el objeto-documento representa el documento HTML.
El objeto-documento es un objeto muy importante en JavaScript, se usa una y otra vez. Las propiedades del objeto documento son por ejemplo el color de fondo de la página. Pero lo más importante es que todos los objetos son propiedades del objeto documento.
Un objeto HTML es, por ejemplo, un enlace o un formulario.
Veamos lo siguientes objetos mostrados como jerarquías:

Lo que queremos es poder obtener información sobre los distintos objetos y manejarlos. Para esto tenemos que conocer como acceder a los diferentes objetos. Puede ver los nombres de los objetos en la jerarquía. Si ahora quisiera saber como referirse a la primer imagen de la página HTML tiene que observar la jerarquía.
Comenzando desde la parte superior. El primer objeto se llama documento.
La primer imagen se representa por medio de images[0]. Esto significa que podemos acceder a este objeto a través de JavaScript por medio de document.images[0]. Si por ejemplo quisiera saber lo que el usuario ingresó en el primer elemento del primer formulario, nuevamente siguiendo la jerarquía sería:
document.forms[0].elements[0]
Pero, ¿cómo podemos saber el valor ingresado?. Lo primero que tendría que hacer es referirse a las propiedades que tiene el elemento. una de ellas nos ayuda a nosotros a responder la pregunta anterior. La propiedad es: value, por lo tanto podríamos hacer:
nombre=document.forms[0].elements[0].value;
Una cosa que tenemos que tener en claro es que se puede también manejar por medio de los nombres de cada uno de los elementos de la página. Por ejemplo veamos el siguiente trozo de HTML.
<form name="primero">
Ingrese su nombre:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test Input" onClick="test1(this.form)">
<P>
Ingrese su dirección de correo:<br>
<input type="text" name="correo">
<input type="button" name="button2" value="Test Input" onClick="test2(this.form)">
</body>
Para referirnos al valor del correo ingresado lo podemos hacer por medio de:
document.primero.correo.value
Para intercambiar una imagen la llevamos a cabo con:
window.document.la_imagen.src="button_d.gif";
Otro ejemplo de ver la jerarquía JS:

Cuando carga un documento en el Navegador, crea un número de objetos JavaScripts con propiedades basadas en el HTML dentro del documento y otra información pertinente. Estos objetos existen en una jerarquía que refleja la estructura de la página HTML. La siguiente figura ilustra la jerarquía de objetos.
A continuación está un esquema que usa un mapa sensible para describir la jerarquía básica de objetos del JavaScript.
En esta jerarquía, los descendientes de un objeto son propiedades suyas. Por ejemplo, una forma llamada form1 es un objeto así como una propiedad de document, y es refecrido como
document.form1.
Cada instancia del navegador tiene los siguientes objetos:
- navigator: tiene propiedades para el nombre y versión del Navegador que está siendo usado, para los tipos MIME soportados por el cliente, y para los plug-ins instalados en el cliente.
- window: El objeto principal, tiene propiedades que se aplican a la ventana entera. Hay también un objeto window por cada "ventana hija" en un documento con frames.
- document: contiene propiedades basadas en el contenido del documento, tales como título, color de background, enlaces y formas.
- location: tiene propiedades basadas en el URL actual.
- history: contiene propiedades que representan URLs que el cliente ha pedido anteriormente.
JavaScript Esturcturas de control.
JAVASCRIPT: como usarlo para validar un formulario
Para validar los campos de un formulario, se pueden resumir 3 pasos que se indican a continuación
1. Declarar un formulario
Para usar JS en un formulario, y validar sus datos se requiere primeramente de declarar un formulario, se hace de la siguiente manera:
<head> <title>Documento sin título</title> </head> <body> <!--comentario--> <form id="form1" name="form1" method="post" action="#"> <!--declara el formulario--> <input type="text" name="nombre" id="nombre" /> <input type="submit" name="enviar" id="enviar" value="Enviar" /> </form> </body> |
2. Se crea el programa JS, en este caso una funcion para validar campos
La validación de campos de un formulario se hace incluyendo código JS dentro de las etiquetas html <head></head> de la siguiente manera:
<head> <title>Documento sin título</title> <script language="javascript"> function valida() // comentarios en javascript { //inicia funcion var cmpedad=document.form1.edad; var cmpnombre=document.form1.nombre; //usamos filtros asignados a una variable para validad los tipos de datos var nu=/^([0-9]{1,2})$/; var ltr = /^([a-zA-Z]*)$/; // Usando filtros n caracteres * if (cmpedad.value=="" || !nu.test(cmpedad.value) ) {} //cierra funcion </script> </head> |
3. Se llama a la función invocándola desde la etiqueta del formulario:
En el campo onsubmit llamar a la función con return nombrefuncion(); como en el siguiente ejemplo:
<form id="form1" name="form1" method="post" action="#" onsubmit="return valida();">
Observa el campo onsubmit="return valida();" el cual llama a la función JS que hará la validación
Tarea:
Efectúa el ejercicio que se indica en este tutorial "4a. JAVASCRIPT: como usarlo para validar un formulario".
Para hacerlo, crea un archivo en Dreamweaver con extensión .htm, o en el bloc de notas y guárdalo: Archivo > Guardar como > con extensión .htm y en "Tipo" selecciona la opción "todos los archivos".
Abre el archivo que creaste con un navegador, pruebalo, tiene que mostrar mensajes cuando no se llenen los campos de texto
------------------FIN 4. Introducción a JavaScript
B3. Programación PHP
En esta parte encontraras ejercicios vistos en clase.
Es muy importante que los hagas y los tengas como evidencia de tu trabajo ya que serán calificados:
Instrucciones: copia los archivos, efectúa los ejemplos y colócalos dentro de la carpeta: "ejercicios" la cual tiene que estar dentro de la carpeta "htdocs" recuerda que es allí donde se colocan los programas PHP
COMENZANDO:
1. Recuperación y almacenamiento de variables desde un formulario
2.Estructuras de programación PHP
3. INTRODUCCIÓN AL MANEJO DE ARCHIVOS CON PHP.
Cuando necesitamos crear, guardar, leer o escribir archivos en la creación de sitios web, el manejo de éstos se convierte en una prioridad. Para ello, vamos a ver una serie de funciones y algunos ejemplos para familiarizarnos con el manejo de archivos a nivel básico en php.
FUNCIÓN FOPEN
La función fopen() sirve para abrir ficheros (archivos). Su sintaxis general:
| <?php //Ejemplo $fp = fopen(fichero, modoDeApertura); ?> |
Donde $fp es el descriptor o identificador del fichero abierto que necesitaremos más tarde.
fichero puede ser un archivo de texto. Si no existe el archivo o dirección especificadas, se devuelve un error.
Hay distintos modos de apertura de archivos, vamos a ver los más habituales.
A la hora de abrir un archivo, hay que saber de qué forma queremos abrirlo. Podemos abrirlo para escritura y lectura, pero de distintas formas:
| Modo | Observaciones |
| r | Abre el archivo sólo para lectura. La lectura comienza al inicio del archivo. |
| r+ | Abre el archivo para lectura y escritura. La lectura o escritura comienza al inicio del archivo. |
| w | Abre el archivo sólo para escritura. La escritura comienza al inicio del archivo, y elimina el contenido previo. Si el archivo no existe, intenta crearlo. |
| w+ | Abre el archivo para escritura y lectura. La lectura o escritura comienza al inicio del archivo, y elimina el contenido previo. Si el archivo no existe, intenta crearlo. |
| a | Abre el archivo para sólo escritura. La escritura comenzará al final del archivo, sin afectar al contenido previo. Si el fichero no existe se intenta crear. |
| a+ | Abre el archivo para lectura y escritura. La lectura o escritura comenzará al final del fichero, sin afectar al contenido previo. Si el fichero no existe se intenta crear. |
Ejemplos:
| <?php //Ejemplo $fp = fopen("/apr2/fichero.txt", "r"); $fp = fopen("/apr2/fichero2.txt", "w"); $fp = fopen("http://www.aprenderaprogramar.com/texto.txt", "a+"); $fp = fopen("ftp://ftp.elmundo.es/fichero.txt", "w"); ?> |
Ahora bien, con esta simple instrucción sólo tendremos el archivo abierto para leer, escribir, o leer y escribir. Pero ahora tendremos que hacer uso de las otras instrucciones para escribir o recuperar los datos que estimemos oportunos.
FUNCIÓN FCLOSE
La función fclose(identificadorDelFichero) cierra un archivo abierto.
Esta función debe ser utilizada después de abrir y manipular el archivo como veremos en los siguientes ejemplos.
FUNCIONES FGETS Y FEOF, para leer un archivo
La función fgets() recupera el contenido de una línea de un archivo. Su sintaxis general es:
| <?php //Ejemplo fgets(descriptorDelFichero); ?> |
Ejemplo, que tienes que efectuar como un programa:
| <?php // Ejemplo // Leemos la primera línea de fichero.txt // fichero.txt tienen que estar en la misma carpeta que el fichero php // fichero.txt es un archivo de texto normal creado con notepad, por ejemplo. $fp = fopen("fichero.txt", "r"); $linea = fgets($fp); fclose($fp); ?> |
Ahora bien, con el ejemplo anterior sólo leeremos la primera línea del fichero de texto, si quisiéramos leer línea a línea hasta el final necesitaríamos el uso de un bucle while, por ejemplo.
Ejemplo, que tienes que efectuar como un programa:
| <?php // Ejemplo // Iremos leyendo línea a línea del fichero.txt hasta llegar al fin (feof($fp)) // fichero.txt tienen que estar en la misma carpeta que el fichero php // fichero.txt es un archivo de texto normal creado con notepad, por ejemplo. $fp = fopen("fichero.txt", "r"); while(!feof($fp)) { $linea = fgets($fp); echo $linea . "<br />"; } fclose($fp); ?> |
El ejemplo superior nos mostrará el contenido del fichero de texto línea a línea hasta que llegue al final. Comprobarás que hemos incluido una nueva función denominada feof (que viene significando algo así como file end of file o “marca de final de archivo”).
La sintaxis general para esta función es: feof (identificadorDelArchivo)
La función feof nos devuelve true cuando hemos llegado al final de archivo y false si no lo hemos alcanzado todavía.
La condición while (!feof($fp)) podríamos haberla escrito también de la siguiente manera: while (feof($fp)==false) .
Esta sintaxis es equivalente, puedes utilizar la que prefieras, pero debes acostumbrarte a entender ambas formas de escritura.
Finalmente, fíjate como una vez hemos de terminado de operar con el fichero escribimos la instrucción fclose(identificadorDelFichero) para cerrar la conexión, cosa que debemos hacer siempre.
------------------FIN
4. Como escribir un archivo en php
funcion empleada:
fputs()
fwite()
fputs()
fwite()
La funcion fptus() aunque hay mas funciones hoy explicare esta, recibe tres parametros de los cuales 2 son obligatorios y el tercero es opcional.
fputs() y fwite() son alias (sinónimos), ambas funcionan y hacen lo mismo
Descripción:
fputs() escribe el contenido de string al flujo de archivo apuntado por handle.
Valores devueltos:
Valores devueltos:
fputs() devuelve el número de bytes escritos, o FALSE si se produjo un error.
forma:
int fputs ( resource $handle , string $string [, int $length ] )
Significado de los parámetros:
-El primero apunta al archivo
-El segundo es el texto que se escribirá en el archivo
-El tercero es el largo de la cadena, si no lo ponemos se escribe toda la cadena.
Un ejemplo para que entiendan el funcionamiento
<?php
$archivo=”tecnologiaid.txt”;
$texto=”Este es el texto que agregaremos en nuestro archivo”;
$fp=fopen($archivo, a);
fputs($fp, $texto);
fclose($fp);
? >
Veamos un ejemplo que tienes que efectuar como un programa, ANALIZALO:
| <?php $txt="A lo largo de su trayectoria profesional destaca su experiencia como medico en el IMSS (1975), y una extensa labor en el Instituto de Seguridad Social del Estado de México y Municipios"; //agregamos salto de linea: $salto="\r\n"; $txt.=$salto; $archivo="escrito.txt"; //abrir /* 'a+' Apertura para lectura y escritura; coloca el puntero al fichero al final del fichero. Si el fichero no existe se intenta crear */ if($fp= fopen($archivo,'a+')); { echo "<br>El archivo se abrio<br>"; //escribir fputs($fp, $txt); echo "<br><h2>ahora leemos el archivo recien escrito</h2><br>"; //coloca el puntero al inicio del archivo rewind($fp); //Leer archivo -vuelca la informacion del archivo a pantalla fpassthru($fp); echo "<br><br><hr><h2>Ahora leemos el achivo line a linea</h2><br>"; // Iremos leyendo línea a línea del fichero.txt hasta llegar al fin (feof($fp)) // fichero.txt tienen que estar en la misma carpeta que el fichero php // fichero.txt es un archivo de texto normal creado con notepad, por ejemplo //coloca el puntero al inicio del archivo, de otra forma ya no lee nada, pues se coloco el puntero al final rewind($fp); while(!feof($fp)) { $linea = fgets($fp); echo $linea . "<br />"; } } fclose($fp); ?> |
ejemplo escribir en un archivo datos desde un formulario
------------------FIN
5. LEER ARCHIVO
función file — Transfiere un fichero completo a un array
file — Transfiere un fichero completo a un array
Una de las múltiples formas y de las mas sencillas para recoger información de un archivo con PHP es con la función file, que además pasa el valor del fichero a un array siendo cada elemento del array una línea del archivo a abrir, lo que puede ser útil sobre todo si queremos buscar o trabajar sólo con algunas líneas.
forma de uso:
$array= file($archivo);
donde $archivo es la variable que recibe el nombre de un archivo existente y con permisos de lectura (linux)
Ejemplo que tienes que efectuar como un programa:
| <?php $archivo="escrito.txt"; $array= file($archivo); for ($i=0; $i<count($array); $i++) { echo "Desde el archivo este es el elemento: " .$i. " -> ". $array[$i]."<br>"; } ?> |
Leyendo un archivo y asignandolo a un arreglo usando file(), se almacena cada linea del archvo como un elemento del arreglo
Ejemplo en ejecución (Recuerda que para que se lea la información de un archivo esté debe tener contenido):
Desde el archivo este es el elemento: 0 -> A lo largo de su trayectoria profesional destaca su experiencia como enfermera en el IMSS (1975), y una
Desde el archivo este es el elemento: 1 -> extensa labor en el Instituto de Seguridad Social del Estado de México y Municipios
Desde el archivo este es el elemento: 2 -> lo largo de su trayectoria profesional destaca su experiencia como enfermera en el IMSS (1975), y una
Desde el archivo este es el elemento: 3 -> extensa labor en el Instituto de Seguridad Social del Estado de México y MunicipiosA lo largo de su trayectoria profesional destaca su experiencia como enfermera en el IMSS (1975), y una
Nota importante:
Recuerda que también puedes leer un archivo usando las FUNCIONES FGETS Y FEOF que se mencionaron más arriba
------------------FIN

