Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Copy of Javascript

No description
by

Juan Pablo Rojas Reyes

on 28 June 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Copy of Javascript

JAVASCRIPT
CL TRAINER : ANTHONY ANDRE ARIAS CABALLERO
JAVASCRIPT
LENGUAJE DE PROGRAMACION INTERPRETADO UTILIZADO PARA CREAR PAGINAS WEB DINAMICAS

JAVASCRIPT ES UN LENGUAJE DE PROGRAMACION EJECUTADO EN EL BROWSER
BRENDAN EICH
UN POCO DE HISTORIA
1995
Netscape 2.0
LiveScript
Netscape 3.0
Javascript 1.1
+
Sun Mycrosystems
MICROSOFT INCLUYE EL JSCRIPT EN IE
ECMASCRIPT
COMO INCLUIR JAVASCRIPT EN UN DOCUMENTO
<script type="text/javascript"></script>
Primer Script
JAVASCRIPT EN UN DOCUMENTO EXTERNO
Sentencia
Palabras Reservadas
SCRIPT
Palabras en ingles reservadas para poder crear sentencias
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.
PALABRAS RESERVADAS
SINTAXIS
Son las reglas para escribir el codigo fuente
No se tienen en cuenta los espacios en blanco y las nuevas líneas
Se distinguen las mayúsculas y minúsculas
No se define el tipo de las variables
No es necesario terminar cada sentencia con el carácter de punto y coma (;)
POSIBILIDADES Y LIMITACIONES
Javascript solo puede comunicarse con recursos
en el mismo dominio desde el que fue descargado el script
Además, los scripts no pueden acceder a los archivos del ordenador del usuario (ni en modo lectura ni en modo escritura) y tampoco pueden leer o modificar las preferencias del navegador.
COMENTARIOS
/* */
//
Multiples lineas
En linea
ALERT
alert("Javascript")
texto que se mostrara
en el cuadro de dialogo
VARIABLES
var numero_1 = 3;

var numero_2 = 1;

var resultado = numero_1 + numero_2;
Almacena o
hace referencia
a otro valor
TIPOS DE VARIABLES
Cadenas de texto
var mensaje = "Bienvenido a nuestro sitio web";
var nombreProducto = 'Producto ABC';
var letraSeleccionada = 'c';
Numericas
var iva = 16; // variable tipo entero
var total = 234.65; // variable tipo decimal
El texto debe de estar almacenado en una variable
Considera los saltos de linea
ACTIVIDAD
ARREGLOS
Creacion de un arreglo
Acceso a los elementos de un arreglo
ACTIVIDAD
Crear un array llamado meses y que almacene el nombre de los doce meses del año. Mostrar por pantalla los doce nombres utilizando la función alert().
Boolean
var clienteRegistrado = false;
var ivaIncluido = true;
INCREMENTO Y DECREMENTO
var numero = 5;
++numero;
alert(numero);
Aumenta en 1
Mostramos el numero
var numero = 5;
--numero;
alert(numero);
Decrementa en 1
Mostramos el numero
OPERADORES MATEMATICOS
var numero1 = 10;
var numero2 = 5;

resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1; // resultado = 13
resultado = numero2 – 4; // resultado = 1
resultado = numero1 * numero 2; // resultado = 50
Modulo
var numero1 = 10;
var numero2 = 5;
resultado = numero1 % numero2; // resultado = 0
ESTRUCTURAS DE CONTROL DE FLUJO
son instrucciones del tipo "si se cumple esta condición, hazlo; si no se cumple, haz esto otro"
IF
if(condicion) {
...
}
var mostrarMensaje = true;

if(mostrarMensaje == true) {
alert("Paso la validacion");
}
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");
}
ACTIVIDAD
"si se cumple esta condición, hazlo; si no se cumple, haz esto otro"
if(condicion) {
...
}
else {
...
}
COMPARACION DE CADENAS
COMPARACION DE CADENAS
ACTIVIDAD
ESTRUCTURA FOR
permite realizar Repeticiones (también llamadas bucles)
DEFINICION FORMAL
EJEMPLO
ESTRUCTURA FOR IN
FUNCIONES BASICAS JAVASCRIPT
Javascript nos proporciona muchas fuciones para poder trabajar con nuestras variables
var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10
var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
length
concat()
toLowerCase()
var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
charAt(posicion)
var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2); // letra = l
indexOf(caracter)
var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b'); // posicion = -1
lastIndexOf(caracter)
var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
posicion = mensaje.lastIndexOf('b'); // posicion = -1
substring(inicio, final)
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"
porcion = mensaje.substring(5); // porcion = "Mundo"
porcion = mensaje.substring(7); // porcion = "ndo"
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4); // porcion = "a"
split(separador)
var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
length()
var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5
concat()
var array1 = [1, 2, 3];
array2 = array1.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]
array3 = array1.concat([4, 5, 6]); // array3 = [1, 2, 3, 4, 5, 6]
join(separador)
var array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" "); // mensaje = "hola mundo"
pop()
var array = [1, 2, 3];
var ultimo = array.pop();
push()
var array = [1, 2, 3];
array.push(4);
// ahora array = [1, 2, 3, 4]
shift()
var array = [1, 2, 3];
var primero = array.shift();
unshift()
var array = [1, 2, 3];
array.unshift(0);
// ahora array = [0, 1, 2, 3]
unshift()
var array = [1, 2, 3];
array.reverse();
// ahora array = [3, 2, 1]
isNaN()
var numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2)) {
alert("La división no está definida para los números indicados");
}
else {
alert("La división es igual a => " + numero1/numero2);
}
toFixed(digitos)
var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564
FUNCIONES
Una función es un conjunto de instrucciones que se agrupan para realizar una tarea concreta y que se pueden reutilizar fácilmente.
function realizartarea(numero1, numero2){
var total = numero1 + numero2;
alert(total)
}
ESTRUCTURA DE REPETICION WHILE
var resultado = 0;
var numero = 100;
var i = 0;

while(i <= numero) {
resultado += i;
i++;
}

alert(resultado);
var resultado = 1;
var numero = 5;

do {
resultado *= numero; // resultado = resultado * numero
numero--;
} while(numero > 0);

alert(resultado);
DO WHILE
DOM (DOCUMENT OBJECT MODEL)
Estandarizado por la W3C
Es una API que permite acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML
DOM
Los objetos DOM se comportan de manera diferente en los browsers
Microsoft ha añadido su propia extensión al DOM
Mozilla Firefox y Google Chrome ya se posicionaron en el mercado
DOM
IE tiene que ajustarse al estandar?
ARBOL DOM
NODO
ACCESO A LOS NODOS
Una vez construido el arbol de nodos podemos hacer uso de las funciones DOM para acceder a ellos
CODIGO JAVASCRIPT
document.getElementById("txtnombres");
funcion para encontrar un nodo por ID
<html>
<head></head>
<body>
<input type='text' id="txtnombres" />
</body>
</html>
HTML
ARBOL DOM
documento
head
body
input
FUNCIONES
getElementsByTagName()
document.getElementsByTagName("input")
var arreglodenodos =
1
2
3
4
=
=
=
=
<input />
<input />
<input />
<input />
getElementById()
document.getElementsByTagName("input")
var elemento =
getElementsByName()
document.getElementsByName("estadocivil")
var arreglodenodos =
1
2
=
=
<input type="radio" name="estadocivil" value="soltero"/>
<input type="radio" name="estadocivil" value="casado" />
CREACION DE NODOS
para crear un nodo
para crear un nodo de texto
ELIMINACION DE NODOS
ACCESO A LOS ATRIBUTOS
EVENTOS
GRACIAS
aaac@cassiopeiaconsultores.com
aac_andre160@hotmail.com
Full transcript