Scribd
Cargar
12 vistas

Java Script

Sistemas Informáticos

Cargado por

Eliana Mamani Colque
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
12 vistas

Java Script

Sistemas Informáticos

Cargado por

Eliana Mamani Colque
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 35

JavaScript

Ing. Fernando Germán Arellano Ponce


CONCEPTO

Java script es un lenguaje de programación, desarrollado para la creación de


aplicaciones en un entorno WEB, es un lenguaje interpretado, no utiliza un
compilador.
HISTORIA

En 1995, Brendan Eich trabajaba en Netscape Communications Corporation, la


compañía que publicó el famoso Netscape Navigator, entonces principal
competidor de Internet Explorer.
Brendan desarrolló Live Script un lenguaje de script que se basa en el lenguaje
Java, y que estaba destinado a ser instalado en los servidores desarrollados
por Netscape. Netscape inició el desarrollo de una versión del cliente
LiveScript, que pasó a llamarse JavaScript, en homenaje al lenguaje Java
creado por Sun Microsystems.
CARACTERÍSTICAS

- JavaScript se utiliza principalmente en páginas web.


- Al igual que HTML, JavaScript es ejecutado por el navegador del usuario: se llama un de
cliente, en comparación con el lado del servidor cuando el código es ejecutado por el
servidor.
- Javascript está normalizado por ECMA International como el nombre ECMAScript
Language Reference.
- Hay otros lenguajes derivadas del ECMAScript como ActionScript, EX4 o JScript.NET.
- JavaScript es un lenguaje de programación interpretado, es decir, que necesita un
intérprete para ser ejecutado.
Hola Mundo...

JavaScript es un lenguaje utilizado principalmente con el lenguaje HTML, en


este capítulo se aprende cómo integrar este lenguaje en tus páginas web,
descubrir su sintaxis básica y mostrar un mensaje en la pantalla del usuario.

Para que JS, se pueda ejecutar, es necesario un intérprete, este se encuentra en


los navegadores como firefox, Chromme u otros, cuanto más actualizado esté
el navegador, mayor será la certeza de tener la última versión del lenguaje.
Escribir código
Para insertar código de Js en html es necesario utilizar la etiqueta script y dentro de esta las instrucciones correspondientes al lenguaje.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Hola Mundo..!</title>
</head>
<body>
<script>
alert('Hola Mundo!');
</script>
</body>
</html>
Sintaxis del lenguaje

Las instrucciones del lenguaje son similares a otros tan populares como java o, c.

Cada sentencia termina en punto y coma. En realidad, el punto y coma no es


necesario si la instrucción siguiente está en la línea posterior como en nuestro
ejemplo. Sin embargo, si escriben varias instrucciones en una sola línea, como en el
siguiente ejemplo, el punto y coma es obligatorio.

sentencia_1; sentencia_2

sentencia_3
Compresión de scripts

Algunas secuencias de comandos están disponibles en un formato


comprimido, es decir, todo el código se escribe como secuencia, no hay
retornos de línea. Esto reduce considerablemente el tamaño de una secuencia
de comandos y sirve para asegurar que la página se carga más rápidamente.
Existen programas para "comprimir" el código Javascript. Pero si has olvidado
un solo punto y coma el código comprimido no va a funcionar porque las
instrucciones no están debidamente separadas. También es una de las las
razones por las que siempre se pone el punto y coma al final de la instrucción.
Espacios

Javascript no es sensible a los espacios. Esto significa que puedes alinear las instrucciones que
quieras, siempre que no interfiera con la secuencia de comandos. Por ejemplo, esto es correcto:

Código JavaScript

instruccion_1;

instruccion_1_1;

instruccion_1_2;

instruccion_2; instruccion_3;
Sangría y presentación

La sangría en la programación informática, es una manera de estructurar el código para hacerlo más legible. Las
instrucciones son priorizadas en varios niveles y espacios de usos o lengüetas para desplazar a la derecha y
crear una jerarquía. Un ejemplo de código sangrado:

Código: JavaScript
function interruptor(elemID) {
var elem = document.getElementById(elemID);
if (elem.style.display == 'block') {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
}
Comentarios

Los comentarios son anotaciones realizadas por el desarrollador para explicar el


funcionamiento de un script, una instrucción o incluso un grupo de instrucciones. Los
comentarios no interfieren con la ejecución de un script.
Hay dos tipos de comentarios: los de fin de línea y los multilínea.
Comentarios de fin de línea. Se utilizan para comentar una instrucción. Comienza con dos
barras de división:
Código: JavaScript
sentencia_1 / / Esta es mi primera instrucción
sentencia_2;
/ / La tercera declaración es la siguiente:
sentencia_3;
Comentarios multilínea

Comentarios multilínea. Este tipo permite saltos de línea. Un comentario multilínea comienza
con / * y termina con * /:
Código: JavaScript
/ * Este script consta de tres pasos:
- Instrucción uno está haciendo algo
- Instrucción dos para otra cosa
- Instrucción tres que pone fin a la secuencia de comandos
*/
sentencia_1;
sentencia_2;
sentencia_3 / / Fin del script
Tipos de Datos y Variables

Como todo lenguaje de programación, JavaScript soporta tanto datos de texto


como numéricos, los cuales se almacenan en variables.
Variables
Para declarar una variable, se utiliza la palabra clave var delante del nombre de
variable.
var contador;
contador= 12;
Variables

Los nombres de las variables pueden empezar por minúsculas, mayúsculas,


subrayado e incluso con $ , pero no pueden empezar con números. Además el
nombrado es sensible al uso de las mayúsculas y minúsculas, por lo que no es lo
mismo contador que Contador .

El tipo de datos asociado a la variable se asigna de manera automática. Si al declarar


la variable no le asignamos ningún valor, JavaScript le asigna el tipo undefined .
Posteriormente podemos cambiar su tipo en cualquier momento asignándole un
nuevo valor.
Otra característica de JavaScript es que podemos asignar valores a variables que no hemos
declarado:
var a = 3;
b = 5;
c = a + b; // 8
Al hacer esto, la variable pasa a tener un alcance global, y aunque sea posible, es mejor evitar
su uso.
Texto

JavaScript almacena las cadenas mediante UTF-16. Podemos crear cadenas tanto con comillas dobles como
simples. Podemos incluir comillas dobles dentro de una cadena creada con comillas simples, así como comillas
simples dentro de una cadena creada con comillas dobles.

"" // cadena vacía


'probando'
"3.14"
nombre="miFormulario"'
"comemos salteñitas en La Casona”. Para concatenar cadenas se utiliza el operador + . Otra propiedad muy
utilizada es length para averiguar el tamaño de una cadena.
var msj = "Hola " + "Mundo";
var tam = msj.length;
JavaScript soporta una serie de operaciones para tratar las cadenas, como charAt(indice) (0-index),
substring(inicio [,fin]) , indexOf(cadena) / lastIndexOf(cadena) , trim() , replace()
Entrada por teclado

Para ingresar datos usando el teclado, se usa el comando prompt su sintaxis:.

variable=prompt(mensaje);

Ejemplo: Leer el nombre del usuario

nombre=prompt(“Escribe tu Nombre: “);


Mostrar datos en pantalla

Para mostrar los datos de las variables en pantalla se utiliza el comando


document.write, con la siguiente sintaxis:

document.write(contenido)

Dónde: contenido puede ser una variable o una cadena de texto.

Ejemplo : Mostrar el nombre del ejemplo anterior

document.write(nombre);
EJERCICIOS

Leer un número entero por teclado, si el número es impar sumar al número: 5 y


mostrar el resultado, de lo contrario sumar 2 y mostrar

Ejemplo

Leer un numero 7

Verificar si es impar si es asi sumar +5 =12

si noes asi 7+2 = 9


Ejercicio 2

Leer un número y mostrar su factorial.

3! = 1*2*3 (n-1)!*n
Ejercicio 3

Indicar si un número ingresado por teclado es primo


Ejercicio 3

dada la siguiente relación:


p = 3 × 2n-1 - 1,
q = 3 × 2n - 1,
r = 9 × 22n-1 - 1,

donde n > 1 es entero y p, q, y r son números primos, entonces 2npq y 2nr son un par de números amigos.

Hallar ese par.


Ejercicio

Utilizando cinco dados, encontrar la relación y el resultado:

=6

=6

=4
El DOM

Java scrip como lenguaje que interactúa con los navegadores de internet
utilizan el BOM.

BOM (Browser Object Model) define una serie de objetos que nos permiten
interactuar con el navegador: window, navigator, location.
Objeto window

El objeto window es el objeto raíz (global) del navegador.


Mediante el objeto window podemos:

- Abrir una nueva ventana del navegador mediante window.open()

En los navegadores actuales, si intentamos abrir más de una ventana mediante window.open el propio
navegador bloqueará su apertura, tal como sucede con las ventanas emergentes de publicidad.

Tras abrir una ventana mediante window.open() el método devolverá un nuevo objeto window , el cual
será el objeto global para el script que corre sobre dicha ventana, conteniendo todas las propiedades
comunes a los objetos como el constructor Object o el objeto Math . Pero si intentamos mirar sus
propiedades, la mayoría de los navegadores no lo permitirán, ya que funciona a modo de sandbox.
Este modo de trabajo implica que el navegador sólo nos mostrará la información
relativa al mismo dominio, y si abrimos una página de un dominio diferente al nuestro
no tendremos control sobre las propiedades privadas del objeto window . Este caso lo
estudiaremos en la siguiente unidad y aprenderemos cómo solucionarlo.
- Cerrar una ventana mediante window.close()
Ejemplo:
alert(“Hola”);
confirm(“Si o No”);
var resp=prompt(“Nombre”);
Navigator

Mediante el objeto navigator podemos acceder a propiedades de información del navegador, tales
como su nombre y versión. Para ello, podemos acceder a las propiedades navigator.appName o
navigator.appVersion .

Ejemplo:

console.log(navigator,languaje);

console.log(navigator,appName);

console.log(navigator,appVersión);
Document

Cada objeto window contiene la propiedad document , el cual contiene un objeto que
representa el documento mostrado. Este objeto, a su vez, contiene la propiedad
location que nos permite obtener información sobre la URL con las propiedades:
• href : cadena que representa la URL completa
• protocol : protocolo de la URL
• host : nombre del host
• pathname : trayectoria del recurso
• search : parte que contiene los parámetros, incluido el símbolo ?
Suponiendo que accedemos a la URL http://localhost:63342/Pruebas/bom/
location.html?alfa=beta&gama=delta :
Ejemplo

<html>
<head><title>La hora</title></head>
<body>
<p>Son las
<script type="text/javascript">
var time = new Date();
document.write(time.getHours() + ":" + time.getMinutes());
</script>
</p>
</body>
</html>
Interactuando con los elementos del DOM

El objeto document nos da acceso al DOM (Modelo de objetos de documento)


de una página web, y a partir de él, acceder a los elementos que forman la
página mediante una estructura jerárquica.

Al objeto que hace de raíz del árbol, el nodo html , se puede acceder mediante
la propiedad document.documentElement . Sin embargo, la mayoría de
ocasiones necesitaremos acceder al elemento body más que a la raíz, con lo
que usaremos document.body .
Cada elemento exceptuando el elemento <html> forma parte de otro elemento, que se le

conoce como padre (parent). Un elemento a su vez puede contener elementos hijos (child) y/

o hermanos (sibling). Supongamos el siguiente fragmento de código HTML:

<p><strong>Hola</strong> cómo estas ?</p>

Cada porción de este fragmento se convierte en un nodo DOM con punteros a otros nodos

que apuntan sus nodos relativos (padres, hijos, hermanos, …).


Obtener valores

Para recuperar o leer los valores de una página web, debemos recorrer los objetos del DOM o identificarlos
através de sus id que se deben asignar en cada etiqueta (objeto)

Ejemplo:

<p id=”saludo”> Hola Mundo </p>

<script>
var text= document.getElementById('saludo');
console.log(text.innerHTML);
alert(text.innerHTML);
</script>
Ejercicio 1

Realizar un programa con JS , HTML y CSS, para genera un formulario con tres
campos: Nombre, Correo, y una casilla de verificación, al presionar el botón
“Enviar”, debe validarse si los datos son correctos, de no ser asi emitir un
mensaje indicando el error.
Ejercicio 2

Mostrar en pantalla dentro de una fila (tercera) la serie de fibonacci, en la


primera fila escribir su nombre y en la segunda el nombre del programa.
Ejercicio 3

También podría gustarte