Bienvenid@s

Al Curso de Diseño y Programación Web de Bextlán

Slides

jonmircha.github.io/slides-poo-js

Un especial agradecimiento a

TOD@S USTEDES QUE HAN DEPOSITADO SU CONFIANZA EN ESTE CURSO

=D

por @jonmircha fundador de @bextlan

Jonathan MirCha

Ing. en Sistemas
Mtro. en Comunicación con Medios Virtuales

Creativo de la Web - Docente Digital - Frontend

Maratonista

Programación Orientada a Objetos

en JavaScript

Un momento,

Antes entendamos algunas cosas sobre...

Qué es PROGRAMAR

La gente cree que programar es dificil, algunas razones:

  • MALOS Profesores
  • Programadores que se sienten DIOSES
  • PERSONAS que NO les gusta ANALIZAR

LA PROGRAMACIÓN:

  • Es intuitivo e inherente a los humanos
  • Las cosas intuitivas se van a la memoria muscular, donde no se necesita pensar, se ejecuta en automático, como respirar
  • Desde que te levantas estás programando
  • Debería enseñarse desde la primaria
  • PROGRAMAR es el FLUJO de ALGO que se PROCESA, se TRANSFORMA y TERMINA de OTRO MODO
  • Debemos PENSAR como HUMANOS y NO como MÁQUINAS
  • Debemos entender el FLUJO de lo que se quiere hacer, para EJECUTAR los PROCESOS que controlarán dicho FLUJO
  • NUNCA traten de ejecutar PROCESOS, sin antes tener un FLUJO que controlar

PROGRAMAR es FLUJO y NO PROCESOS

Ahora sí...

JavaScript

JavaScript es el lenguaje de programación frontend de la web.


Es el más popular en Internet, y trabaja en todos los principales navegadores, como Internet Explorer, Firefox, Chrome, Opera, Safari y móviles.

Se utiliza en miles de millones de sitios web para agregar funcionalidad, validar formularios, comunicarse con el servidor, entre otras cosas.


Y algo más...


HTML5 APESTA a JavaScript


\
}=D
/

Es un lenguaje interpretado, es decir, no necesita compilar para ejecutarse.


Se define como orientado a objetos, basado en prototipos, no tipado y dinámico.


Todo el mundo puede usarlo sin necesidad de adquirir una licencia

Java y JavaScript NO son lo mismo


ActionScript y JavaScript son PRIMOS


JavaScript es una implementación del lenguaje estándar ECMAScript


ECMA-262 es el estándar oficial de JavaScript.

JavaScript fue inventado por Brendan Eich de Netscape en 13 DÍAS


Apareció con Navigator 2.0, y desde entonces (1996) en todos los navegadores.

Ahora un poco de...

Programación
Orientada a Objetos

La POO trata de plasmar o representar

la realidad del mundo físico (lo concreto)

y llevarlo al mundo digital (lo abstracto)

Platón primer programador POO

Decía que vivimos en el mundo de las ideas, y los objetos son representaciones físicas de esa idea.

4 Conceptos básicos de POO

  1. Clase
  2. Objeto
  3. Métodos
  4. Atributos
Kenai
  1. Class Perro(){ ... }
  2. kEnAi = new Perro();
  3. kEnAi.ladrar(); kEnAi.comer("croqueta");
  4. kEnAi.raza = "zorrito firefox"; kEnAi.edad=2; kEnAi.entrenado=true;
  1. Clase: Módelo a seguir
    La idea
    Class Perro(){...}

  2. Objeto: Representación del módelo
    La representación física de la idea
    kenai = new Perro();

Los objetos tienen 2 facultades

  • Métodos: Hacen cosas, Realiazan acciones
    objeto.metodo()
    correr, caminar, mover la cola, ladrar (verbos/acciones)

    kenai.comer("croqueta"); kenai.ladrar();


  • Los Métodos fuera de los objetos se llaman funciones, los parámetros son opcionales puede llevar o no, y se separan por comas. ej:

    function ladrar(){...}
    function comer(comida){...}
  • Atributos: Tiene características o propiedades
    objeto.atributo=valor

    kenai.raza="Criollo"; kenai.sexo = "Macho"; kenai.edad=2; kenai.tamanio = "Mediana"; kenai.adiestrado=true; kenai.esterilizado = true;


  • Los Atributos fuera de los objetos se llaman variables. ej:

    var raza = "Firefox";

3 tipos básicos de variables


En cualquier lenguaje


  1. Strings ("Cadenas")
  2. Numbers (enteros-reales)
  3. Booleans (true-false)

JavaScript trabaja con Camel Case

(Técnica del Camello)


  1. Cuando una instrucción tenga una sola palabra, va en minúsculas p.e. write().


  2. Sólo las clases rompen esta regla, siempre va en mayúscula la letra inicial p.e. Date()


  3. Cuando una instrucción tenga 2 o más palabras, apartir de la segunada la primer letra va en mayúscula p.e. getElementById()

POO en JavaScript


Los 3 objetos padres en JS

  1. Window
  2. Document
  3. Navigator


Document Object Model (DOM)

Muchas Gracias

j@bextlan.com

#bextlanweb