TITULACION II –

PROGRAMACIÓN WEB
Docente: Lsi. Verónica Freires Avilés
Licenciada en Sistemas de Información
Magister en Sistemas de Información Gerencial
 ¿Qué es JavaScript?
JavaScript es un lenguaje de programación que se utiliza principalmente para crear
páginas web dinámicas.
Una página web dinámica es aquella que incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con
mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es
necesario compilar los programas para ejecutarlos. En otras palabras, los programas
escritos con JavaScript se pueden probar directamente en cualquier navegador sin
necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de
programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun
Microsystems.
✓ JavaScript y Java son completamente diferentes idiomas, tanto en
su concepto y diseño.
✓ JavaScript fue inventado por Brendan Eich en 1995, y se convirtió
en un estándar ECMA en 1997.
✓ ECMA-262 es el nombre oficial. ECMAScript 6 (publicado en junio
de 2015) es la última versión de JavaScript.
 Diferencias entre JavaScript y Java
El lenguaje de programación JavaScript, desarrollador por Netscape, Inc., no forma
parte de la plataforma Java.
JavaScript no crea applets ni aplicaciones independientes. En su forma más
habitual, JavaScript está en documentos HTML y puede proporcionar niveles de
interactividad en las páginas web que no se pueden conseguir con HTML simple.

✓ Diferencias clave entre Java y JavaScriptJava es un lenguaje de

programación OOP, mientras que Java Script es un lenguaje de scripts OOP.
✓ Java crea aplicaciones que se ejecutan en una máquina o explorador virtual,
mientras que el código JavaScript sólo se ejecuta en un explorador.
✓ El código Java necesita compilación, mientras que el código JavaScript está en
todo el texto.
✓ Necesitan diferentes plugins.
El primer ejemplo será el
famoso "Hola Mundo", es decir
un programa que muestre en el
documento HTML el mensaje
"Hola Mundo".

El programa en JavaScript debe ir encerrado entre la marca script e

inicializada la propiedad type con la cadena text/javascript:
Para imprimir caracteres sobre la página debemos llamar al comando 'write'
del objeto document. La información a imprimirse debe ir entre comillas y
encerrada entre paréntesis. Todo lo que indicamos entre comillas aparecerá tal
cual dentro de la página HTML.

Es decir, si pedimos al navegador que ejecute esta página mostrará el texto

'Hola Mundo'.

Cada vez que escribimos una instrucción finalizamos con el carácter punto y
coma.

ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE A

MAYUSCULAS Y MINUSCULAS. NO ES LO MISMO ESCRIBIR:
document.write que DOCUMENT.WRITE (la primera forma es la correcta, la
segunda forma provoca un error de sintaxis).

Nos acostumbraremos a prestar atención cada vez que escribamos en

minúsculas o mayúsculas para no cometer errores sintácticos. Ya veremos que
los nombres de funciones llevan letras en mayúsculas.
 LAS PALABRAS RESERVADAS

abstract arguments await boolean

break byte case catch
char class const continue
debugger default delete do
double else enum eval
export extends false final
finally float for function

goto if implements import

in instanceof int interface

let long native new
null package private protected
public return short static

super switch synchronized this

throw throws transient true
try typeof var void
volatile while with yield

Las palabras reservadas del lenguaje son identificadores

reservados, es decir, tienen algún significado en el propio
lenguaje y no las puedes utilizar para dar nombre a
identificadores corrientes, por ejemplo en variables
 Formularios HTML
Se utiliza un formulario HTML para recopilar la entrada del
usuario. La entrada del usuario se envía con mayor frecuencia a
un servidor para su procesamiento.

Elementos de formulario HTML

El elemento HTML <form>puede contener uno o más de
los siguientes elementos de formulario:
•<input>
•<label>
•<select>
•<textarea>
•<button>
•<fieldset>
•<legend>
•<datalist>
•<output>
•<option>
•<optgroup>
 <label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
<labelvalue="JavaScript">
for="javascript">JavaScript</label>
</form>
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
 Salida JavaScript
Posibilidades de visualización de JavaScript
JavaScript puede "mostrar" datos de diferentes maneras:
•Escribir en un elemento HTML, usando innerHTML.
•Escribir en la salida HTML usando document.write().
•Escribir en un cuadro de alerta, usando window.alert().
•Escribiendo en la consola del navegador, usando console.log().

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

<script>
document.write(5 + 6);
</script>

<script> <script>
window.alert(5 + 6); console.log(5 + 6);
</script> </script>
 Como Agregar JavaScript
La etiqueta <script>
En HTML, el código JavaScript se inserta entre las
etiquetas <script> y </script>.

Puede colocar cualquier número de secuencias de comandos en un

documento HTML.
Los scripts se pueden colocar en el <body>, o en la <head>sección
de una página HTML, o en ambos.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First
JavaScript";
</script>
</body>
</html>
 En este ejemplo, se coloca un JavaScript en la <head> sección de
una página HTML. La función se invoca (llama) cuando se hace clic
en un botón:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body><h2>Demo JavaScript in Head</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
En este ejemplo, se coloca un JavaScript en la <body> sección de
una página HTML. La función se invoca (llama) cuando se hace
clic en un botón:

<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>

</body>
</html>
 JavaScript externo

Los scripts también se pueden colocar en archivos externos:

Los scripts externos son prácticos cuando se usa el mismo

código en muchas páginas web diferentes.

Los archivos JavaScript tienen la extensión de archivo .js .

Para usar una secuencia de comandos externa, coloque el
nombre del archivo de secuencia de comandos en
el srcatributo (src) de una <script> etiqueta:

<script src="myScript.js"></script>
 Variables JavaScript
En un lenguaje de programación, las variables se utilizan
para almacenar valores de datos.
JavaScript usa las palabras claves, 4 formas de declarar una variable
de JavaScript:
•Usando var var x = 5; let x = 5;
•Usando let var y = 6; let y = 6;
•Usando const var z = x + y; let z = x + y;
•usando nada

x = 5;
y = 6;
z = x + y;

¿Cuándo usar JavaScript var?

Declare siempre las variables de JavaScript con var, let o const.
La varpalabra clave se usa en todo el código JavaScript desde 1995
hasta 2015.
Las palabras clave let y const se agregaron a JavaScript en 2015.
Si desea que su código se ejecute en navegadores más antiguos,
debe usar var.
 Tipos de datos de JavaScript
JavaScript tiene 8 tipos de datos
1. Cadena
2. Número
3. Bigint
4. Booleano
5. Indefinido
5. Nulo
7. Símbolo
8. Objeto

En programación, los tipos de datos son un concepto importante. Para

poder operar sobre variables, es importante saber algo sobre el tipo.
Sin tipos de datos, una computadora no puede resolver esto de manera
segura:

let x = 16 + "Volvo";
Los tipos de datos de JavaScript son dinámicos. JavaScript tiene tipos
dinámicos. Esto significa que la misma variable se puede utilizar para
contener diferentes tipos de datos:

let x; // Now x is undefined

x = 5; // Now x is a Number
x = "John"; // Now x is a String
 Funciones JavaScript
Una función de JavaScript es un bloque de código diseñado para realizar
una tarea en particular.
Una función de JavaScript se ejecuta cuando "algo" la invoca (lo llama).

function myFunction(p1, p2) {

return p1 * p2;
}

Sintaxis de funciones de JavaScript

Una función de JavaScript se define con la function palabra clave,
seguida de un nombre , seguido de paréntesis () .
Los nombres de funciones pueden contener letras, dígitos, subrayados
y signos de dólar (las mismas reglas que las variables).
Los paréntesis pueden incluir nombres de parámetros separados por
comas:

( parámetro1, parámetro2, ... )

El código a ejecutar, por la función, se coloca entre corchetes: {}
 Los parámetros de la función se enumeran entre paréntesis () en la
definición de la función.
Los argumentos de la función son los valores recibidos por la
función cuando se invoca.
Dentro de la función, los argumentos (los parámetros) se comportan
como variables locales.
El código dentro de la función se ejecutará cuando
"algo" invoque (llame) a la función:
Cuando ocurre un evento (cuando un usuario hace clic en
un botón)
• Cuando se invoca (llama) desde código JavaScript
• Automáticamente (auto invocado)

Cuando JavaScript llega a una return declaración, la función dejará de

ejecutarse.
 Conversión de datos
En JavaScript, se puede convertir datos de un tipo a otro utilizando las funciones de
conversión de tipos incorporadas. Algunas de las funciones más comunes son:
1.String(): convierte un valor a una cadena de texto
2.Number(): convierte un valor a un número
3.Boolean(): convierte un valor a un valor booleano
4.parseInt(): convierte una cadena de texto a un entero
5.parseFloat(): convierte una cadena de texto a un número de punto flotante

let x = 42;
let y = "3.14";

let z = String(x); // z es "42"

let w = Number(y); // w es 3.14
let u = Boolean(x); // u es true
let v = parseInt(y); // v es 3
let t = parseFloat(y); // t es 3.14

Es importante tener en cuenta que algunas de estas funciones pueden fallar si se les
proporciona un valor que no puede ser convertido de manera adecuada. Por ejemplo,
Number("foo") devolverá NaN (Not a Number) ya que la cadena "foo" no puede ser
convertida a un número.
parseInt("10"); // 10
parseInt("10.8"); // 10
parseInt("10 22"); // 10
parseInt(" 14 "); // 14
parseInt("20 dias"); // 20
parseInt("Hace 20 dias"); // NaN
parseInt("44aa33bb"); // 44
parseInt("3.14"); // 3
parseInt("314e-2"); // 314
parseInt(""); // NaN -> ¡¡el string vacio
se convierte a NaN!!
parseInt(null); // NaN
 Librerías JavaScript
¿Qué son las librerías JavaScript?
En general, las librerías JavaScript son un código reutilizable que a menudo tiene un
caso de uso principal. Las librerías proporcionan muchas funcionalidades
estándar para que los desarrolladores no tengan que preocuparse por muchas
funciones. Así,
pueden usar estas para crear páginas web fácilmente utilizando componentes de la
interfaz de usuario, utilidades de lenguaje, funciones matemáticas y más. Una librería
consta de varias funciones, objetos y métodos, según el idioma. Además, las puedes
incluir en un proyecto sin depender de una estructura en particular. Es decir, eres
libre de usar una, dos o tantas librerías JavaScript como necesites.

•jQuery
•Moment.js
•anime.js
•Ramda https://profile.es/blog/librerias-
•D3.js javascript/#%C2%BFQue_son_las_libreria
•Chart.js s_JavaScript
•MathJS
•Hammer.js
•React
•Redux
•Glimmer.js
•Codemirror