Práctica 10

Investigación PHP y JavaScript

Regresar a Teoría

Descripción

Este reporte abarca una exploración detallada de los lenguajes de programación JavaScript y PHP. En la primera sección, se profundiza en JavaScript, abordando su definición, aplicaciones, y conceptos esenciales como el DOM (Document Object Model).

La segunda sección se centra en PHP, explicando su propósito. Se incluyen ejemplos de código para tareas comunes como la generación de contenido dinámico y el manejo de archivos.

A lo largo del reporte, se proporcionan referencias adicionales para profundizar en ambos lenguajes, ofreciendo una base sólida tanto para principiantes como para desarrolladores experimentados.

...

Reporte de JavaScript y PHP

JavaScript

¿Qué es el lenguaje JavaScript?

JavaScript es un lenguaje de programación interpretado que se utiliza principalmente para crear y controlar contenido dinámico en las páginas web. Fue desarrollado originalmente por Netscape como un medio para agregar programas al código HTML.

¿Para qué sirve el lenguaje JS?

JavaScript se utiliza para agregar interactividad y comportamiento dinámico a las páginas web. Esto incluye actualizar y cambiar HTML y CSS, realizar cálculos, validar formularios, crear animaciones, gestionar eventos del usuario y trabajar con datos asíncronos mediante AJAX.

¿A qué se refiere el DOM (Document Object Model) en el desarrollo Web?

El DOM (Document Object Model) es una interfaz de programación que permite a los lenguajes de script como JavaScript manipular, estructurar y dar estilo a los documentos HTML y XML. Proporciona una representación estructurada del documento y define métodos para acceder y manipular su estructura, estilo y contenido.

¿Cuál es la diferencia entre los archivos HTML, CSS y JS?

HTML (HyperText Markup Language): Es el lenguaje de marcado que se utiliza para estructurar el contenido en la web. Define la estructura básica de las páginas web mediante etiquetas.
CSS (Cascading Style Sheets): Es el lenguaje utilizado para describir la presentación de documentos HTML. Controla el diseño, la apariencia y la disposición de los elementos en la página.
JS (JavaScript): Es el lenguaje de programación que permite agregar comportamiento e interactividad a las páginas web. Manipula el DOM, maneja eventos, realiza cálculos y controla el flujo de la aplicación.

¿Para qué sirve la etiqueta <script>?

La etiqueta <script> se utiliza para incluir y ejecutar código JavaScript en un documento HTML. Puede contener el código directamente o referenciar un archivo externo de JavaScript.

¿En qué consisten los 3 métodos para cambiar elementos tipo Tag Name, ID y Class Name con JS?

Tag Name:

let elements = document.getElementsByTagName('tagName');
        for (let i = 0; i < elements.length; i++) {
            elements[i].style.color = 'blue';
        }
ID:
let element = document.getElementById('elementID');
        element.style.color = 'blue';
Class Name:
let elements = document.getElementsByClassName('className');
        for (let i = 0; i < elements.length; i++) {
            elements[i].style.color = 'blue';
        }

Elabora en Replit un programa básico “Hola mundo” con JS, describe el funcionamiento y elementos utilizados.

Para elaborar un programa básico "Hola mundo" en Replit, sigue estos pasos:
1. Crea un archivo HTML y un archivo JS.
2. En el archivo HTML, agrega una referencia al archivo JS usando la etiqueta <script>.

Archivo HTML (index.html):

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Hola Mundo</title>
        </head>
        <body>
            <h1>Hola Mundo</h1>
            <script>
                document.addEventListener('DOMContentLoaded', (event) => {
                    document.getElementById('mensaje').textContent = 'Hola Mundo desde JavaScript';
                    console.log('Hola Mundo desde JavaScript');
                });
            </script>
        </body>
        </html>

Descripción:
- HTML: Define la estructura básica de la página, incluyendo un título y un encabezado.
- JS: Utiliza un evento DOMContentLoaded para asegurarse de que el DOM esté completamente cargado antes de ejecutar el código. Después, busca el elemento con el ID "mensaje" y establece su contenido de texto en "Hola Mundo desde JavaScript". Luego, imprime "Hola Mundo desde JavaScript" en la consola.



Página de muestra de replit: https://01c30e0b-d849-4698-bc0e-525d1a9e1cce-00-28pgugjncufwv.worf.replit.dev/

¿Cuál es la sintaxis de la programación en JS?

La sintaxis básica de JavaScript incluye declaraciones de variables, estructuras de control, funciones y eventos. Aquí hay algunos ejemplos:

Declaración de variable:

let nombre = 'Juan';
Estructura de control (if-else):
if (nombre === 'Juan') {
            console.log('Hola Juan');
        } else {
            console.log('Hola desconocido');
        }
Función:
function saludar(nombre) {
            return 'Hola ' + nombre;
        }
Evento:
document.getElementById('miBoton').addEventListener('click', function() {
            alert('Botón clicado');
        });

¿Cómo se declaran variables en JS?

Las variables en JavaScript se pueden declarar utilizando var, let o const.

var: Tiene un ámbito de función y puede ser redeclarada.

var nombre = 'Juan';
let: Tiene un ámbito de bloque y no puede ser redeclarada en el mismo ámbito.
let nombre = 'Juan';
const: Tiene un ámbito de bloque y su valor no puede cambiar.
const nombre = 'Juan';

¿Cómo se declaran funciones en JS?

Las funciones en JavaScript se pueden declarar de varias maneras:

Declaración de función:

function saludar(nombre) {
            return 'Hola ' + nombre;
        }
Expresión de función:
const saludar = function(nombre) {
            return 'Hola ' + nombre;
        };
Función flecha:
const saludar = (nombre) => {
            return 'Hola ' + nombre;
        };

¿Cómo se llaman funciones en JS?

Las funciones se llaman utilizando su nombre seguido de paréntesis:

saludar('Juan');

¿Cómo declaras una función interna de un HTML con JS y cómo declaras un documento externo con JS?

Función interna en HTML:

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Interna</title>
            <script>
                function saludar() {
                    alert('Hola desde función interna');
                }
            </script>
        </head>
        <body>
            <button onclick="saludar()">Saludar</button>
        </body>
        </html>
Función en documento externo:
<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Externa</title>
            <script src="script.js"></script>
        </head>
        <body>
            <button onclick="saludar()">Saludar</button>
        </body>
        </html>
Archivo JS (script.js):
function saludar() {
            alert('Hola desde función externa');
        }

¿Cuáles ciclos de programación están disponibles en JS?

JavaScript soporta varios ciclos de programación, incluyendo:

for:

for (let i = 0; i < 10; i++) {
            console.log(i);
        }
while:
let i = 0;
        while (i < 10) {
            console.log(i);
            i++;
        }
do-while:
let i = 0;
        do {
            console.log(i);
            i++;
        } while (i < 10);
forEach (en arrays):
let array = [1, 2, 3, 4, 5];
        array.forEach(function(element) {
            console.log(element);
        });

¿Cuáles funciones de condicional están disponibles en JS?

JavaScript soporta varias estructuras condicionales, incluyendo:

if-else:

let edad = 18;
        if (edad >= 18) {
            console.log('Eres mayor de edad');
        } else {
            console.log('Eres menor de edad');
        }
switch:
let fruta = 'manzana';
        switch (fruta) {
            case 'manzana':
                console.log('Es una manzana');
                break;
            case 'naranja':
                console.log('Es una naranja');
                break;
            default:
                console.log('Fruta desconocida');
        }

PHP

¿Qué es el lenguaje PHP?

PHP (Hypertext Preprocessor) es un lenguaje de programación de propósito general, ampliamente utilizado para el desarrollo web del lado del servidor. Es un lenguaje de script incrustado en HTML que se utiliza para crear páginas web dinámicas e interactivas.

¿Para qué sirve el lenguaje PHP?

PHP se utiliza principalmente para:

  • Generar contenido dinámico en las páginas web.
  • Interactuar con bases de datos.
  • Gestionar sesiones de usuarios.
  • Realizar operaciones de archivos en el servidor.
  • Enviar y recibir cookies.
  • Crear aplicaciones web completas.

¿Cuál es la diferencia entre los archivos HTML y PHP?

HTML (HyperText Markup Language): Es un lenguaje de marcado utilizado para estructurar y presentar contenido en la web. Es estático y no tiene la capacidad de procesar datos o interactuar con servidores.
PHP: Es un lenguaje de script que se ejecuta en el servidor. Puede generar contenido HTML dinámico, interactuar con bases de datos y manejar lógica de negocio.

¿Para qué sirve la etiqueta <?php ?> ?

La etiqueta <?php ?> se utiliza para delimitar el código PHP dentro de un archivo. Todo el código PHP debe estar dentro de estas etiquetas para ser interpretado correctamente por el servidor.

¿Cuáles son los pasos y requisitos para cargar un archivo PHP en un servidor?

  1. Instalar un servidor web: Como Apache o Nginx.
  2. Instalar PHP: Asegurarse de que PHP esté instalado y configurado correctamente.
  3. Crear el archivo PHP: Escribir el código PHP en un archivo con extensión .php.
  4. Subir el archivo al servidor: Utilizar un cliente FTP o el panel de control del servidor para subir el archivo PHP.
  5. Configurar el servidor: Asegurarse de que el servidor esté configurado para interpretar archivos PHP.
  6. Acceder al archivo a través del navegador: Introducir la URL del archivo PHP en el navegador para ejecutarlo.

Elabora un programa básico “Hola mundo” con PHP, describe el funcionamiento y elementos utilizados.

Código PHP:

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Hola Mundo PHP</title>
        </head>
        <body>
            <?php
                echo "Hola Mundo desde PHP";
            ?>
        </body>
        </html>

Descripción:
- **HTML**: Define la estructura básica de la página.
- **PHP**: Utiliza la función echo para imprimir "Hola Mundo desde PHP" en la página web.



Página de muestra de replit: https://e285f189-e055-4a3b-ac05-47a64c9d0533-00-1xq0y84iacurb.kirk.replit.dev/

¿Para qué sirve la función echo en PHP?

La función echo en PHP se utiliza para enviar una o más cadenas de texto al navegador. Es una forma de generar contenido dinámico en una página web.

¿Cuál es la sintaxis de la programación en PHP?

La sintaxis básica de PHP incluye declaraciones de variables, estructuras de control, funciones y eventos. Aquí hay algunos ejemplos:

Declaración de variable:

$nombre = 'Juan';
Estructura de control (if-else):
if ($nombre == 'Juan') {
            echo 'Hola Juan';
        } else {
            echo 'Hola desconocido';
        }
Función:
function saludar($nombre) {
            return 'Hola ' . $nombre;
        }
Llamada a función:
echo saludar('Juan');

Describe la diferencia y consideraciones especiales al utilizar caracteres en mayúsculas en PHP, al utilizarlo en palabras reservadas y en variables.

Palabras reservadas: En PHP, las palabras reservadas (como if, else, while, echo) no distinguen entre mayúsculas y minúsculas. Es decir, if y IF son lo mismo.
Variables: Las variables en PHP distinguen entre mayúsculas y minúsculas. Por ejemplo, $Nombre, $nombre y $NOMBRE son tres variables diferentes.

¿Cómo se declaran variables en PHP?

Las variables en PHP se declaran utilizando el símbolo $ seguido del nombre de la variable:

$variable = 'valor';

¿Cómo se declaran funciones en PHP?

Las funciones en PHP se declaran utilizando la palabra clave function:

function nombreFuncion($parametro) {
            // Código de la función
        }

¿Cómo se llaman funciones en PHP?

Las funciones se llaman utilizando su nombre seguido de paréntesis:

nombreFuncion($valor);

¿Cuáles ciclos de programación están disponibles en PHP?

PHP soporta varios ciclos de programación, incluyendo:

for:

for ($i = 0; $i < 10; $i++) {
            echo $i;
        }
while:
$i = 0;
        while ($i < 10) {
            echo $i;
            $i++;
        }
do-while:
$i = 0;
        do {
            echo $i;
            $i++;
        } while ($i < 10);
foreach (en arrays):
$array = [1, 2, 3, 4, 5];
        foreach ($array as $element) {
            echo $element;
        }

¿Cuáles funciones de condicional están disponibles en PHP?

PHP soporta varias estructuras condicionales, incluyendo:

if-else:

if ($edad >= 18) {
            echo 'Eres mayor de edad';
        } else {
            echo 'Eres menor de edad';
        }
switch:
$fruta = 'manzana';
        switch ($fruta) {
            case 'manzana':
                echo 'Es una manzana';
                break;
            case 'naranja':
                echo 'Es una naranja';
                break;
            default:
                echo 'Fruta desconocida';
        }

Identifica los diferentes métodos reservados para el tratamiento de archivos.

PHP proporciona varios métodos para el manejo de archivos, incluyendo:

  • fopen(): Abre un archivo.
  • fclose(): Cierra un archivo.
  • fread(): Lee un archivo.
  • fwrite(): Escribe en un archivo.
  • file_get_contents(): Lee todo el contenido de un archivo en una cadena.
  • file_put_contents(): Escribe una cadena en un archivo.
  • fgets(): Lee una línea de un archivo.
  • feof(): Comprueba si se ha alcanzado el final del archivo.

Elabora un programa básico con PHP que permita crear un archivo de texto en el servidor, describe el funcionamiento y elementos utilizados.

Código PHP:

<?php
        $file = fopen("archivo.txt", "w") or die("No se puede abrir el archivo!");
        $text = "Hola, este es un archivo de texto creado con PHP.";
        fwrite($file, $text);
        fclose($file);
        echo "Archivo creado exitosamente.";
        ?>

Descripción:
- fopen(): Abre el archivo "archivo.txt" en modo de escritura ("w"). Si el archivo no existe, lo crea.
- fwrite(): Escribe la cadena de texto en el archivo.
- fclose(): Cierra el archivo después de escribir.
- echo: Imprime un mensaje indicando que el archivo se ha creado exitosamente.



Página de muestra de replit: https://d61d8e51-54ee-45d0-9f1a-604f8bc6943d-00-3qglxp5yo5i7d.riker.replit.dev/

¿Cómo se utiliza el método Open/Read en el manejo de archivos con PHP?

Código PHP:

<?php
        $file = fopen("archivo.txt", "r") or die("No se puede abrir el archivo!");
        while (!feof($file)) {
            echo fgets($file) . "<br>";
        }
        fclose($file);
        ?>

Descripción:
- fopen(): Abre el archivo "archivo.txt" en modo de lectura ("r").
- feof(): Comprueba si se ha alcanzado el final del archivo.
- fgets(): Lee una línea del archivo y la imprime.
- fclose(): Cierra el archivo después de leer.

¿Cómo se utiliza el método Create/Write en el manejo de archivos con PHP?

Código PHP:

<?php
$file = fopen("archivo.txt", "w") or die("No se puede abrir el archivo!");
$text = "Hola, este es un archivo de texto creado con PHP.";
fwrite($file, $text);
fclose($file);
echo "Archivo creado y escrito exitosamente.";
?>

Descripción:
- fopen(): Abre el archivo "archivo.txt" en modo de escritura ("w"). Si el archivo no existe, lo crea.
- fwrite(): Escribe la cadena de texto en el archivo.
- fclose(): Cierra el archivo después de escribir.
- echo: Imprime un mensaje indicando que el archivo se ha creado y escrito exitosamente.

Finamente, concluye cuales serian las ventajas de integrar PHP en una página web.

- Generación de contenido dinámico: PHP permite crear páginas web dinámicas que pueden cambiar en respuesta a la entrada del usuario o a otras condiciones.
- Interacción con bases de datos: PHP puede interactuar con bases de datos como MySQL para almacenar y recuperar datos de manera eficiente.
- Manejo de formularios: PHP puede procesar datos enviados a través de formularios HTML, lo que es útil para autenticación de usuarios, encuestas, etc.
- Compatibilidad con HTML: PHP se puede incrustar directamente en el HTML, lo que facilita la integración y el desarrollo web.
- Amplia disponibilidad y soporte: PHP es ampliamente utilizado y tiene una gran comunidad de soporte, así como abundantes recursos y bibliotecas disponibles.