Вы находитесь на странице: 1из 31

UNIVERSIDAD POPULAR DEL CESAR

Introduccin
JAVASCRIPT

Programacin bajo Web


Docente Danier Fresley Vanegas Becerra

Incluir JavaScript en documentos


JavaScript en el mismo documento
JavaScript en un archivo externo
JavaScript en los elementos

JavaScript en el mismo documento


El cdigo JavaScript se encierra entre etiquetas
<script>.

JavaScript en un archivo externo


Se crean los archivos JavaScript necesarios y cada
documento puede barios archivos.
Archivo cdigo.js
alert(Hola mundo);

Archivo index.html

JavaScript en los elementos


Muchas veces es el menos utilizado, consiste en incluir
cdigo JavaScript como valor de un atributo del
elemento.

Etiqueta noscript
<noscript></noscript>
Visualiza un mensaje en el navegador cuando este no
permite la ejecucin de JavaScript.

Sintaxis
No se tienen en cuenta las nuevas lneas y espacios en
blanco.
Distingue entre maysculas y minsculas
Dbilmente tipado (no se declaran los tipos de datos).
No es necesario terminar cada sentencia con punto y
coma (;). Pero es recomendable.
Se pueden incluir comentarios.

Limitaciones
Los script no pueden comunicarse con recursos con recursos que no
pertenezcan al mismo dominio desde el que se descargo el script.
Solo pueden cerrar ventas abiertas por el mismo script.
Los script no pueden acceder a los archivos y carpetas del
ordenador o preferencia del navegador.
Los navegadores informan si un script demora demasiado tiempo en
su ejecucin.
Existen alternativas para poder saltar algunas limitaciones.
Consisten en firmar digitalmente el script y solicitar al usuario el
permiso para realizar las acciones.

Iniciando a programar
Variables: elemento que se utiliza para almacenar y
hacer referencia a un valor.
Se crean a partir de la variable var

El nombre de una variable de conoce como identificador


Solo puede estar formado por $ _ letras y nmero.

Tipo de dato
El tipo de dato de la variable depende del valor que
almacena.
Numrico:
var iva = 16 // valor de tipo entero
var total = 567.32
// variable de tipo decimal

Cadena de texto
var mensaje = Mensaje
var producto = Porttil

Booleano

Arrays
Un array es una coleccin de variables, que pueden ser
todas del mismo tipo o cada una de un tipo diferente.

Ejercicio
Crear un array llamadomesesy que almacene el nombre de los doce
meses del ao. Mostrar por pantalla los doce nombres utilizando la
funcinalert().

Operadores
Asignacin
= var numero = 23;
Incremento y decremento de numero ++ -Sufijo

Prefijo

Operadores lgicos
Negacin
AND
OR
Matemticos
Relacionales

Negacin smbolo !
Se utiliza para obtener el valor contrario al valor de la
variable
variable

!
variable

true

false

false

true

AND smbolo &&


Se obtiene su resultado combinando dos valores
booleanos
variable1 &&
variable1

variable2

true

true

true

true

false

false

false

true

false

false

false

false

variable2

OR smbolo ||
variable1

variable2

variable1 ||
variable2

true

true

true

true

false

true

false

true

true

false

false

false

Matemticos
Adicin +
Sustraccin
Multiplicacin *
Divisin /
Modulo %
Combinados con el operador de asignacin =

+=
-=
*=
/=
%=

Operadores relacionales
>
<
>=
<=
==
!=
Ejercicio
A partir del siguiente array que se proporciona:var valores = [true, 5, false, "hola", "adios", 2];
1.Determinar cual de los dos elementos de texto es mayor
2.Utilizando exclusivamente los dos valores booleanos del array, determinar los operadores necesarios para obtener
un resultadotruey otro resultadofalse
3.Determinar el resultado de las cinco operaciones matemticas realizadas con los dos elementos numricos

Estructura de control de flujo


Son instrucciones que apoyan la toma de decisiones en
la ejecucin del programa dejando de ser una secuencia
lnea.
If
Ifelse
for
for in

Estructura if
If(condicin){

Si la condicin es true se ejecutan las


instrucciones que se encuentran
dentro de {}

}
var estado = true;
if(estado) {
alert(Hola mundo);
}
var estado = true;
if(estado == true) {
alert(Hola mundo);
}

Ejercicio
Completar las condiciones de los if del siguiente
script para que los mensajes de los alert() se
muestren siempre de forma correcta:
var numero1 = 5;
var numero2 = 8;
if(...) {
alert("numero1 no es mayor que numero2");
}
if(...) {
alert("numero2 es positivo");
}
if(...) {
alert("numero1 es negativo o distinto de cero");
}
if(...) {
alert("Incrementar en 1 unidad el valor de
numero1 no lo hace mayor o igual que numero2");
}

El clculo de la letra del Documento Nacional de Identidad


(DNI) es un proceso matemtico sencillo que se basa en
obtener el resto de la divisin entera del nmero de DNI y
el nmero 23. A partir del resto de la divisin, se obtiene la
letra seleccionndola dentro de un array de letras.

Estructura if...else

El array de letras es:


var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B',
'N', 'J', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];
Por tanto si el resto de la divisin es 0, la letra del DNI es
la T y si el resto es 3 la letra es la A. Con estos datos,
elaborar un pequeo script que:
Almacene en una variable el nmero de DNI indicado por
el usuario y en otra variable la letra del DNI que se ha
indicado. (Pista: si se quiere pedir directamente al usuario
que indique su nmero y su letra, se puede utilizar la
funcin prompt())
En primer lugar (y en una sola instruccin) se debe
comprobar si el nmero es menor que 0 o mayor que
99999999. Si ese es el caso, se muestra un mensaje al
usuario indicando que el nmero proporcionado no es
vlido y el programa no muestra ms mensajes.
Si el nmero es vlido, se calcula la letra que le
corresponde segn el mtodo explicado anteriormente.
Una vez calculada la letra, se debe comparar con la letra
indicada por el usuario. Si no coinciden, se muestra un

Estructura for [ I ]
Esta estructura permite realizar bucles, repetir una o ms
instrucciones cierta cantidad de veces, segn sea
necesario.

Inicializacin: valores de las variables que controlan la


repeticin.
Condicin: esta parte determina si continua o detiene la
repeticin.
Actualizacin: incremento del valor de la variable que

Estructura for [ II ]

Ejercicio.
El factorial de un nmero enterones una operacin matemtica que
consiste en multiplicar todos los factoresn x (n-1) x (n-2) x ...
x 1. As, el factorial de5(escrito como5!) es igual a:5! = 5 x 4 x
3 x 2 x 1 = 120
Utilizando la estructurafor, crear un script que calcule el factorial
de un nmero entero.

Estructura forin
Es una estructura derivada de for implica el uso de
objetos.

Funciones y propiedades bsicas de


JavaScript
Funciones para cadenas de texto:

length: calcula la cantidad de caracteres de una cade.


+ concat(), para concadenar cadenas de texto.
toUpperCase(), transforma los caracteres a mayscula.
toLoweCase(), transforma los caracteres a minscula.
charAt(posicion), obtiene el carcter en la posicin inidicada.
indexOf(carcter), dentro de una cadena de texto calcula la posicin en la
que se encuentra en carcter indicado; buscando desde la izquierda.
lastIndexOf(carcter), retorna la ultima posicin del carcter indicado.
subString(inicio, fin), extrae una porcin de cadena de texto desde la
posicin inicial hasta la final, esta ultima es opcional.
Split(separador), convierte un cadena de texto en un array de texto.

Funciones y propiedades bsicas de


JavaScript
Ejemplos

Funciones para Arrays


Length, retorna el numero de elementos del arreglo.
concat(), concadena arrays.
join(separador), une los elementos para formar una cadena de
texto. Lo contratio de la funcin split().
pop(), elimina el ltimo elemento del array y lo devuelve,
modificando el array.
push(), aade un elemento al final del array.
shift(), elimina el primer elemento del array y lo devuelve.
unshift(), aade un elemento al principio del array.
reverse(), modifica el array con los elementos en orden inverso.

Funciones
para
arrays

Funciones para nmeros


NaN (Not a Number), valor numrico no definido 0/0.
isNaN(), verifica si es un
nmero no definido.
infinity | -infinity,
hace referencia
a un valor numrico infinito.
toFixed(digitos), retorna el
nmero con tantos dgitos
como los indicados.

Bibliografa
http://librosweb.es/, 2014. Instroduccin a JavaScript.

Вам также может понравиться