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.
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.
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.
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.
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.
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.
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';
}
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.
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');
});
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';
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;
};
Las funciones se llaman utilizando su nombre seguido de paréntesis:
saludar('Juan');
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');
}
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);
});
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 (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.
PHP se utiliza principalmente para:
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.
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.
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/
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.
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');
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.
Las variables en PHP se declaran utilizando el símbolo $
seguido del nombre de la
variable:
$variable = 'valor';
Las funciones en PHP se declaran utilizando la palabra clave function
:
function nombreFuncion($parametro) {
// Código de la función
}
Las funciones se llaman utilizando su nombre seguido de paréntesis:
nombreFuncion($valor);
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;
}
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';
}
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.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ó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ó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.
- 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.