presentacion javascript

29
Programación orientada a Objetos en JAVASCRIPT Electiva I Programación WEB

Upload: william-sanchez

Post on 15-Apr-2017

51 views

Category:

Engineering


1 download

TRANSCRIPT

Page 1: Presentacion javascript

Programación orientada a Objetos en JAVASCRIPTElectiva IProgramación WEB

Page 2: Presentacion javascript

Que es JAVASCRIPT?• Crear páginas web dinámicas: incorpora efectos

como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.

• 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. BRENDAN EICH de Netscape 1996

Page 3: Presentacion javascript

POO(Programaciòn orientada a objetos)•Símbolos que conceptualizan una idea•Ej: tasa, celular…•Nuestra mente es una biblioteca de

símbolos•JavaScript también posee la biblioteca de

símbolos y entiende nuestra idea

Page 4: Presentacion javascript

CONCEPTOS BASICOS• CLASE: Modelo a seguir, la idea. class Perro(){…}• OBJETO: Representación fisicaFirulais = new Perro();• MÈTODOS:Acciones

Firulais.ladrar(); Firulais.comer(“Concentrado”);• ATRIBUTOS: Caracteristicas

Firulais.raza=“labrador”;Firulais.edad = 2;Firulais.entrenado = true;

Page 5: Presentacion javascript

FUNCIONES•Los Métodos fuera de los objetos se

llaman Funciones, los parámetros son opcionales , puede llevar o no, se separan por comas.

• Ej:function ladrar(){…}function comer(comida){…}

Page 6: Presentacion javascript

VARIABLES• STRINGS : ( “cadenas”)• NUMBERS : (Enteros-Reales)• BOOLEANS: (True – False)

TECNICA CAMEL CASE (técnica del camellos)• Una instrucción de una sola palabra en minúscula. Ej:

write().• Solo las clases rompen lo anterior Ej . Date().• Instrucción de 2 o mas palabras , apartir de la segunda

la primera letra va en Mayúscula. Ej: getElementById()

Page 7: Presentacion javascript

OBJETOS PRINCIPALES EN JS•WINDOW: Encargado de todas las

propiedades de la ventana.

DOCUMENT: Documento HTML , por medio de este JS accede a HTML y CSS

▫NAVIGATOR: Brinda la información de características del usuario (hora del navegador , sistema operativo, versión del navegador, cookies, local storage, geolocalización)

Page 8: Presentacion javascript

DOM(Document Object Model)•El DOM es la estructura de objetos que

genera el navegador cuando se carga un documento y se puede alterar mediante Javascript para cambiar dinámicamente los contenidos y aspecto de la página.

http://librosweb.es/libro/javascript/capitulo_5.html

Page 9: Presentacion javascript
Page 10: Presentacion javascript

Fundamentos1.html

Page 11: Presentacion javascript

Objeto,Clases,Metodos,Atributos

OBJETO:PERRO

CLASE: LABRADOR

METODOS: CORRER, LADRAR, SALTAR

ATRIBUTOS: CAFÉ,GRANDE,PELAJE CORTO

Puedo reutilizar una clase, por lo tanto se puede convertir en una funcion

Page 12: Presentacion javascript

Definir funciones

Page 13: Presentacion javascript

alerta

Si comento iniciar (); no hace nada el programa

Page 14: Presentacion javascript

Atributos para función Perro

Page 15: Presentacion javascript

Métodos

Page 16: Presentacion javascript

Variables de la función iniciar

Page 17: Presentacion javascript
Page 18: Presentacion javascript

PROTOTIPOS-CONSOLA

TODOS LOS OBJETOS Y ATRIBUTOS

Page 19: Presentacion javascript

consola

Page 20: Presentacion javascript
Page 21: Presentacion javascript

ESCRIBIR EN EL DOCUMENTO

Sexo : operador ternario

Page 22: Presentacion javascript

OPERADOR TERNARIOCondicional If- Else

Aparte de comparar el valor , comparar tipo de dato utilizar ===.

Page 23: Presentacion javascript

• Cambiar true por 1

• Como S solo puede ser falso o verdadero

console.log(typeof s, typeof n,typeof e);

Tipo de dato booleano, carácter, numérico

Page 24: Presentacion javascript

Métodos•Objeto.metodo ();

Realiza las alertas de los otros métodos.

Page 25: Presentacion javascript

firulais.comer("salchichas");Elimino concentrado de la variable

Page 26: Presentacion javascript

Ahora o.comida=cBorrar o.comida

Page 27: Presentacion javascript

Reproducir audio

Page 28: Presentacion javascript

Mover imagen Crear variable imagen global, quitar la palabra var o la definimos debajo de var o