Electiva II
JavaScript basico
Ing. Ricardo Tillero
¿Qué es? JavaScript
“JavaScript es un lenguaje de programación
de alto nivel y orientado a objetos
utilizado para agregar interactividad y
dinamismo a las páginas web.”
Características JavaScript
• Es un lenguaje de programación ligero, interpretado, de
scripting (secuencias de comandos), multiplataforma, y
que se ejecuta principalmente en las páginas web el
navegador del usuario (front-end), y en entornos de
servidor (back-end) bajo [Link].
• Es basado en prototipos, multiparadigma, de un solo hilo,
dinámico, orientada a objetos y débilmente tipado.
• El estándar para JavaScript es ECMAScript (ECMA-262).
Funcionalidades JavaScript
• Interactividad con el usuario: Permite que las páginas
respondan a las acciones del usuario, como hacer clic en
botones, rellenar formularios o mostrar notificaciones, sin
recargar la página.
• Contenido dinámico: JavaScript puede modificar el contenido
de una página web, como mostrar o esconder elementos,
actualizar información o crear nuevas secciones sin necesidad
de un rediseño completo del sitio.
• Animaciones y efectos visuales: Se usa para crear animaciones
complejas, transiciones suaves y gráficos interactivos,
mejorando la experiencia visual de los usuarios.
Funcionalidades JavaScript
• Validación de formularios: Permite verificar que los campos de
los formularios estén completos y sean correctos antes de ser
enviados, mejorando la experiencia de usuario y la gestión de
datos.
• Comunicación Asincrónica: Con AJAX (Asynchronous JavaScript
and XML), JavaScript puede enviar y recibir datos del servidor
sin interrumpir la interacción del usuario con la página.
• Desarrollo de aplicaciones web (front-end): Con la ayuda de
frameworks como React, Angular y Vue, se pueden crear
aplicaciones web complejas y robustas.
Funcionalidades JavaScript
• Desarrollo back-end: Con [Link], JavaScript puede
ejecutarse en el servidor para construir aplicaciones y
servicios del lado del servidor, interactuar con bases de datos
y más.
• Aplicaciones multiplataforma: Puede usarse para desarrollar
aplicaciones que funcionen tanto en navegadores web como
en dispositivos móviles y de escritorio, como aplicaciones
híbridas.
• Juegos y visualización de datos: Herramientas como Canvas y
WebGL permiten a JavaScript crear desde juegos en línea
hasta visualizaciones de datos avanzadas.
Especificaciones del lenguaje JavaScript
• Distingue mayúsculas/minúsculas en los identificadores.
• Comentarios como en Java y C (// y /* ... */).
• Débilmente tipeado, ósea no se declaran los tipos de datos de
variables o constantes.
• Ignora espacio en blanco para formateo, por ejemplo en:
tabulaciones, nuevas líneas, etc.
• No es obligatorio terminar con punto y coma (;).
• Operadores: igual que C y Java.
Esquema de una instrucción JavaScript
Instrucción:
[Link] ('Texto’);
Donde:
• document: es el objeto.
• . es el operador punto o miembro (permite acceder a los
miembros del objeto document).
• write es un método del objeto document.
• ('Texto‘) es el parámetro del método write del objeto document.
• ; es el fin de la instrucción, es opcional.
¿Cómo se utiliza ? JavaScript
JavaScript se puede utilizar de varias formas en el desarrollo web,
dependiendo de las necesidades del proyecto
1. JavaScript incrustado
La forma más básica de utilizar JavaScript en una página web es
mediante el uso de código JavaScript incrustado directamente en
el archivo HTML. Esto se logra mediante el uso de etiquetas de
script <script></script> dentro del documento HTML.
2. Archivos JavaScript externos
Para proyectos más grandes y complejos, es común utilizar
archivos JavaScript externos. Estos archivos se almacenan en
archivos separados con extensión .js y se enlazan al archivo HTML
utilizando la etiqueta <script> con el atributo src.
¿Cómo se utiliza ? JavaScript
1. JavaScript incrustado
[Link] (Opción 1) [Link] (Opción 2)
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<script> </head>
[Link] = function() { <body>
const alerta = [Link]('alerta'); <p id="alerta">Haz Click acá...</p>
[Link] = function () { <script>
alert('Hola Clase !!!'); const alerta = [Link]('alerta');
} [Link] = function () {
} alert('Hola Clase !!!');
</script> }
</head> </script>
<body> </body>
<p id="alerta">Haz Click acá...</p> </html>
</body>
</html>
¿Cómo se utiliza ? JavaScript
2. Archivos JavaScript externos
[Link] [Link]
<!DOCTYPE html> [Link] = function() {
<html lang="en"> const alerta = [Link]('alerta');
<head> [Link] = function () {
<meta charset="UTF-8"> alert('Hola Clase !!!');
<meta name="viewport" content="width=device-width, initial-scale=1.0"> }
<title>Document</title> }
<script src="/[Link]"></script>
</head>
<body>
<p id="alerta">Haz Click acá...</p>
</body>
</html>
Variables JavaScript
Cómo declararlas:
• let: Declara una variable cuyo valor puede ser modificado o reasignado. Tiene
alcance de bloque, lo que significa que está disponible solo dentro del bloque de
código donde fue declarada.
let edad = 30;
edad = 31; // Se puede reasignar el valor
• const: Declara una constante con nombre, de solo lectura y con alcance de
bloque. Su valor no puede ser modificado ni reasignado después de su
inicialización.
const PI = 3.14159;
// PI = 3.14; // Esto daría un error porque es una constante
Variables JavaScript
Cómo declararlas:
• var: Declara una variable de alcance de función o global. Las variables declaradas con var
pueden ser reasignadas y declaradas sin valor inicial. Se considera más antiguo y se prefiere let
y const en el código moderno.
var edad = 30;
edad = 31; // Se puede reasignar el valor
[Link]
Variables JavaScript
Reglas para los nombres de variables y constantes:
• Deben comenzar con una letra, un guión bajo (_) o un signo de dólar ($).
• Los caracteres siguientes pueden ser dígitos (0-9).
• JavaScript distingue entre mayúsculas y minúsculas, por lo que miVariable y
mivariable son dos variables diferentes.
• No se puede usar palabras reservadas del lenguaje (como let, const, function,
return) como nombres de variables.
• Se recomienda usar un nombre descriptivo del contenido.
• Se recomienda usar el camelCase para denominarlas, ejemplo, sueldoBase.
Tipos de datos JavaScript
• JavaScript tiene 8 tipos de datos.
Tipo de datos Descripción
Cadena Un texto de caracteres entre comillas.
Número Un número que representa un valor matemático.
Bigint Un número que representa un entero grande.
Booleano Un tipo de datos que representa verdadero o falso.
Objeto Una colección de pares clave-valor de datos.
Undefined (Indefinido) Una variable primitiva sin valor asignado.
Nulo Un valor primitivo que representa la ausencia de objeto.
Símbolo Un identificador único y primitivo.
Tipos de datos JavaScript
Tipo de datos Ejemplos
Cadena let color = "Yellow";
Número let length = 16;
Bigint let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345);
Booleano let x = true;
let y = false;
Objeto const person = {firstName:"John", lastName:"Doe"}; / /Object
const cars = ["Saab", "Volvo", "BMW"]; // Array object
const date = new Date("2022-03-25"); // Date object
Undefined (Indefinido) let x;
Nulo let x = null;
Símbolo const x = Symbol();
Seguir con la siguiente Web
[Link]