Javascript

JavaScript
¿Qué es?
• JavaScript fue creado con el propósito de generar contenido dinámico
incrustado en las páginas web, cualquiera que fuera su naturaleza.
• Se trata de un lenguaje interpretado por los navegadores, por lo que
se puede probar en cualquier navegador, sin necesidad de realizar
compilación.
• A pesar del nombre que tiene, no tiene ninguna relación con el
lenguaje de programación JAVA.
• JavaScript es una marca registrada de Oracle (por la compra de Sun
Microsystems, su original propietaria).
• OJO con las implicaciones legales de usar su marca
(https://softwareengineering.stackexchange.com/questions/135905/l
egal-ramifications-of-use-of-the-javascript-trademark)
2 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

20
Algo de Historia
• Se comienza por hablar de la década de los 90 donde las conexiones a
Internet oscilaban los 28.8 Kbps donde se empezaba a explorar la
inclusión de elementos de recolección de información complejos
basados en formularios.
• Ello provocó la necesidad de contar con un elemento de programación
que permitiera llevar a cabo tareas de validación sobre estos datos
pero de lado del usuario, porque la espera a la respuesta del servidor
era demasiado lenta.
• Brendan Eich, quizo formular una solución en Netscape Navigator
adaptando otras tecnologías y puso nombre a su obra como LiveScript.
• Posteriormente Netscape, en alianza con Sun Microsystems pulió y
posteriormente lanzó el lenguaje aunque con un nombre mas a la
moda para la época, JavaScript.

20
Algo de Historia
• Desde los inicios, este lenguaje fue muy bien aceptado y Netscape 3
Ya incluía la versión 1.1 y Microsoft por su parte usó Jscript, una
copia del mismo lenguaje pero con nombre diferente por términos
legales.
• Para estandarizar el uso de este lenguaje Netscape envió la
especificación del lenguaje al ECMA (European Computer
Manufacturers Association). Fue esta institución la que formuló el
primer estándar para ECMA Script denominado ECMA-262, que es el
verdadero nombre de este lenguaje y por estos aspectos legales es
mejor usar este nombre y JavaScript es simplemente la adaptación
del estándar por Netscape.
• La ISO también, mediante el estándar ISO/IEC-16262 también realizó
su adaptación de ECMA-262.

20
Influencia de Tecnologías
(https://thescienceofcode.azurewebsites.net/Articles/Show/5c17d16b8c3f2b5034add
5aa)

20
Definición de Estándar
(https://developer.mozilla.org/en-US/docs/Web/JavaScript)
• La entidad ECMA se ha preocupado por mantener el estándar

actualizado y periódicamente se ha formulado nuevas
adaptaciones.
• Por el año 2012 todos los navegadores modernos soportaban
la versión ECMAScript 5.1. Para el año 2015, se publicó la
versión 6, siendo conocida como ECMAScript 2015 también
conocido como ES6, desde este momento las nuevas
definiciones han sido publicadas anualmente.
• La actual definición que esta en etapa de borrador se puede
consultar mediante el siguiente enlace. ECMAScript 2020.

20
¿Cómo Incluir Programación en HTML?
• Una de las formas (no recomendada) es dentro del mismo
contenido HTML.
• <!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

20
• En un archivo externo (como debe ser) incrustado en la
página.
• <!DOCTYPE html">
<head>
<title>Ejemplo de código JavaScript en otro documento</title>
<script type="text/javascript" src="/js/codigo.js"></script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
alert("Un mensaje de prueba");

20
• Como propiedad de los elementos HTML (no se recomienda).
•
<!DOCTYPE html ">
<head>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un párrafo de texto.</p>
</body>
</html>

20
Consideraciones del Lenguaje
• Se considera un Script al conjunto de líneas de código escritas
bajo la sintaxis del lenguaje, independiente de su extensión,
que se espera sea interpretado por el navegador.
• Una sentencia es una línea de código de un Script.
• Las palabras clave que se usan en este lenguaje y que con
tomadas como tal por los navegadores son:

break, case, catch, continue, default,
delete, do, else, finally, for, function,
if, in, instanceof, new, return, switch,
this, throw, try, typeof, var, void,
while, with.

20
Consideraciones del Lenguaje
(https://www.arkaitzgarro.com/jquery/capitulo-2.html)

20
Consideraciones de Sintaxis
• No se tienen en cuenta los espacios en blanco finales y en
caso de ser necesario se puede entender como salto de línea
como nueva instrucción.
• Se tiene en cuenta la diferencia entre mayúsculas y
minúsculas (case sensitive).
• No se definen tipos de variables, los tipos solo se diferencian
entre objetos (colecciones o estructuras) y valores.
• No es un lenguaje orientado a objetos, a pesar que parte de
su filosofía se fundamenta en este paradigma.
• Inclusión de comentarios ya sea con // o con bloques /* */.

20
Limitaciones
• A pesar de funcionar de manera local en el navegador, no es posible
llevar a cabo acciones que involucren al sistema de archivos del
huésped del navegador, por cuestiones de seguridad.
• Su límite de funcionamiento visual esta encasillada por el navegador,
aunque los detalles técnicos depende de las definiciones propias de
cada uno de ellos.
• Tampoco se puede leer configuraciones propias del navegador.
• En caso de que un script se tarde demasiado en ser ejecutado o que su
ejecución tome demasiado tiempo, el navegador informará al usuario
de esta situación para detener su ejecución.
• La no ejecución de los Script no impide que la página se muestre
aunque podrían haber elementos que se muestren incorrectamente o
no se muestren.

20
Elementos Particulares
Funciones
• eval() Permite ejecutar código a partir de una cadena de
caracteres, aunque debe respetar la sintaxis. (No recomendado)
eval("alert(‘Mensaje de prueba ….’)");
• parseInt() Conversión de cadena a número, opcional incluyendo
la base. Por defecto base 10, y retorna NaN si no se puede
convertir.
parseInt(“af4”,16)
• escape() Retorna el código ascii correspondiente del carácter
especial ingresado en HTML.
•
Escape(“ ”) = %2C
•

20
DOM (Document Object Model)
• Es uno de los elementos que mas ha impulsado el

desarrollo de contenido dinámico en la web.
• Esta técnica fue diseñada para manipular el contenido
de archivos XML y por extensión permitió hacer este
mismo trabajo con los elementos HTML.
• Hoy día es implementado en diversos lenguajes y lo
único que cambia es la forma en la que es aplicado.
• Definición del estándar DOM formulada por la W3C
https://www.w3.org/TR/WD-DOM/
• Última versión https://www.w3.org/TR/dom41/
20
¿Qué permite DOM?
<!DOCTYPE html ">
<head>
<style type=”stylesheet” src=”css/styles.css”>
</head>
<body>
<h1 id=”titulo”)>Titulo de Pagina</h1>
<section>
<p><strong>Negrita</strong></p><p><code></code></p><p><sup></sup><sub></sub></p>
<p><span></span><span></span><span></span><span></span><span></span><span></span></p>
</section>
<footer>
<a><strong>Negrita</strong></a><a><strong>Negrita</strong></a>
</footer>
</body>
</html>

20
¿Qué permite DOM?

20
Tipos de Elementos
• La especificación de DOM define 12 tipos de

elementos, aunque normalmente se usan 5.

Document: Nodo raíz, desde el que se desprenden
todos los demás.

Element: Representa cada una de las etiquetas
contenidas en el documento.

Attr: Corresponde a una propiedad de una etiqueta y
corresponde a un par atributo=valor.

Text: Es el texto que esta envuelto por una etiqueta.

Comment: Accede a los comentarios en la página.
20
Modo de Acceso a los Nodos
• Tener en cuenta el punto de partida si es necesario.

• Por nombre de etiqueta (getElementsByTagName).
Obtiene todos los elementos que tengan la etiqueta
indicada desde el punto de partida y retorna un arreglo.
• Por atributo nombre (getElementsByName). Obtiene
todos los elementos que tengan el mismo atributo
nombre teniendo en cuenta el punto de partida.
• Por atributo id (getElementById). Obtiene el elemento
que tenga el id correspondiente, se espera que sea un
solo, si hay mas de uno no retorna nada.

20
Creación de Nodos
• Para la creación de nuevos

nodos, es necesario seguir
un orden. // Crear nodo de tipo Element
1) Creación de elemento. var parrafo = document.createElement("p");
// Crear nodo de tipo Text
2) Creación de nodo Text del var contenido = document.createTextNode("Hola
Mundo!");
contenido. // Añadir el nodo Text como hijo del nodo Element
3) Añadir el elemento Text parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
como hijo al elemento document.body.appendChild(parrafo);
recién creado.
4) Añadir como nodo Hijo el
elemento a la página.
20
Eliminar Nodos
• Simplemente se debe usar la función removeChild

teniendo en cuenta el punto de partida, ya que se
supone que debe haber una referencia del elemento
para eliminarlo.
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
<p id="provisional">...</p>

20
Acceso a Atributos
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
<a id="enlace" href="http://www...com">Enlace</a>
var imagen = document.getElementById("imagen");

alert(imagen.style.margin);
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
var parrafo = document.getElementById("parrafo");

alert(parrafo.style.fontWeight); // muestra "bold"
<p id="parrafo" style="font-weight: bold;">...</p>
var parrafo = document.getElementById("parrafo");

alert(parrafo.class); // muestra "undefined"
alert(parrafo.className); // muestra "normal"
<p id="parrafo" class="normal">...</p>

20
Eventos
• Los scripts no solo trabajan a base de condicionales e

instrucciones cíclicas, es necesario ofrecer interacción con
el usuario, allí es donde entran los eventos.
• Estos elementos esperan a que el usuario haga algo, con
lo que como respuesta a dicha acción se ejecuta un grupo
de instrucciones.
• De esta forma es posible captar información de parte del
usuario y así realizar un procesamiento adicional o
aprovechar la interacción con otras herramientas.
• Estos eventos normalmente van asociados a una función.

20
Eventos
• La posibilidad de usar eventos depende directamente

del tipo de etiqueta, quiere decir que no todos los
eventos son aplicables a todos los tipos de etiquetas.

20
Eventos

20

Javascript

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Javascript

Cargado por

Copyright:

Formatos disponibles

JavaScript

2 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

3 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

4 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

5 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

• La entidad ECMA se ha preocupado por mantener el estándar

6 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

7 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

8 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

9 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

10 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

11 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

12 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

13 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

14 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

• Es uno de los elementos que mas ha impulsado el

16 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

17 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

• La especificación de DOM define 12 tipos de

• Tener en cuenta el punto de partida si es necesario.

19 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

• Para la creación de nuevos

• Simplemente se debe usar la función removeChild

21 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

var imagen = document.getElementById("imagen");

var parrafo = document.getElementById("parrafo");

var parrafo = document.getElementById("parrafo");

22 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

• Los scripts no solo trabajan a base de condicionales e

23 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

• La posibilidad de usar eventos depende directamente

24 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

25 09/13/20 Propiedad intelectual de la UNIVERSIDAD PILOTO DE COLOMBIA® - Año 2017

También podría gustarte