Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales

Transcripción

1 Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales

2 Qué es JavaScript? Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseñado específicamente para el desarrollo de aplicaciones cliente-servidor dentro del ámbito de Internet.

3 Qué es JavaScript? Los programas JavaScript van incrustados en los documentos HTML, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos...

4 Qué es JavaScript? JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. Los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.

5 Incluir JavaScript Dentro de tags SCRIPT <script> // Código JavaScript </script> Link a un archivo externo <script src="archivo.js"></script> En elementos HTML, utilizando eventos JavaScript

6 Eventos JavaScript Los eventos hacen posible que el usuario interactúe con el programa. Cada elemento HTML tiene una lista de eventos que se le pueden asignar. El mismo evento puede ser asignado a varios elementos HTML.

7 Algunos eventos JavaScript onchange se modificó un elemento HTML onclick el usuario hizo click en un elemento HTML onmouseover / onmouseout el usuario mueve el mouse sobre / fuera de un elemento HTML

8 Algunos eventos JavaScript onkeydown el usuario presiona una tecla onload el navegador terminó de cargar la página

9 Sintaxis de JavaScript No se tienen en cuenta espacios y saltos de línea Se distinguen mayúsculas y minúsculas No se define el tipo de variables No es necesario terminar sentencias con ; (pero sí es conveniente hacerlo) Se pueden incluir comentarios

10 Comentarios en JavaScript De una línea // comentario De varias líneas /* comentario comentario comentario comentario comentario comentario comentario comentario comentario comentario */

11 Objetos del navegador Son los objetos que están disponibles en JavaScript para controlar cualquier elemento presente en la página web. Cuando se carga una página, el navegador crea una jerarquía de objetos en memoria que sirven para controlar los distintos elementos de dicha página.

12 HTML DOM (Document Object Model)

13 HTLM DOM Define: Los elementos HTML como objetos Las propiedades de todos los elementos HTML Los métodos para acceder a todos los elementos Los eventos para todos los elementos En resumen: el DOM es la forma de obtener, cambiar, agregar o borrar elementos HTML

14 Objetos del navegador Todos los objetos comienzan en un objeto que se llama window. Además de ofrecer control, el objeto window da acceso a otros objetos como el documento (la página web). Para acceder a cualquier otro objeto de la jerarquía deberíamos empezar por el objeto window. JavaScript entiende que la jerarquía empieza en window aunque no se escriba.

15 Objeto document Con el objeto document se controla la página web y todos los elementos que contiene. El objeto document es la página actual que se está visualizando en ese momento.

16 Hola mundo! <script> alert("hola mundo!"); </script>

17 Sentencias JavaScript window.alert("mensaje"); alert("mensaje"); Método del objeto window. Muestra un mensaje al usuario. Ofrece la opción de aceptar.

18 Sentencias JavaScript document.write("mensaje"); Método del objeto document. Escribe texto en el documento.

19 Sentencias JavaScript window.prompt("mensaje", "valor"); prompt("mensaje", "valor por defecto"); Método del objeto window. Ofrece al usuario un campo para ingresar datos. Ofrece las opciones de aceptar o cancelar. Devuelve datos del tipo string.

20 Otro hola mundo! <script> document.getelementbyid("hola").inner HTML = "Hola mundo!"; </script>

21 Ejemplo con un evento <p onclick="this.innerhtml='texto cambiado!'">este es un párrafo</p>

22 Otros ejemplos <p onclick="this.style.color='#f00'"> Este es un párrafo</p> <p onclick=" this.style.backgroundcolor='#f00'"> Este es un párrafo</p>

23 Programación estructurada Estructuras Secuenciales

24 Algoritmo Método para resolver un problema mediante una serie de pasos precisos, definidos y finitos: preciso, tiene que indicar el orden de realización en cada paso definido, si el algoritmo se prueba dos veces, se debe obtener el mismo resultado finito, el algoritmo tiene que tener un número determinado de pasos

25 Algoritmo Los algoritmos pueden escribirse en: Lenguaje natural Lenguaje algorítmico Lenguaje informático o de programación

26 Algoritmos y programas Un programa normalmente implementa (traduce a un lenguaje de programación concreto) un algoritmo. Lenguaje de programación: conjunto de símbolos y reglas Instrucciones Datos Operadores

27 Identificadores Espacio de memoria donde se almacena un dato, con un nombre y un tipo específico. Pueden ser Constantes Variables

28 Constantes El dato que contiene una constante es el mismo desde el inicio del programa hasta que termina y no puede ser cambiado. PI = 3,1416

29 Variables El dato que contiene una variable puede variar por otro todas las veces necesarias, en cualquier parte del programa. Mantiene su tipo. En una variable sólo se actualiza el valor, no se guardan los valores previos.

30 Variables Variables de trabajo Resultado de una operación Contadores Controla el número de veces que sucede un ciclo Acumuladores Acumula una serie de valores que se van leyendo o calculando (generalmente suma)

31 Constantes y variables en JavaScript No existe la definición de constantes, se definen como variables. Si una variable no cambia su valor ni su tipo durante todo el programa se puede considerar que es una constante. En JavaScript las variables pueden cambiar su tipo.

32 Variables en JavaScript Los nombres de las variables deben empezar con una letra o con un _ (guión bajo). Los caracteres siguientes pueden ser números, letras minúsculas o mayúsculas. No se pueden utilizar caracteres especiales como espacios o signos.

33 Variables en JavaScript No se pueden utilizar nombres reservados, como por ej.: return o for Pueden ser globales, son accesibles en toda la página web. Pueden ser locales, son accesibles sólo en el ámbito en el que fueron declaradas (por ejemplo: una función).

34 Declaración de variables Consiste en definir e informar al sistema que se va a utilizar una variable. En JavaScript no es obligatoria la declaración de variables, en muchos otros lenguajes sí. Siempre es aconsejable declarar las variables.

35 Declaración de variables Declarar una variable var numero; Declarar una variable y asignarle un valor var numero = 15; Declarar varias variables var numero1, numero2;

36 Datos Dato Pequeña parte de información que por si sola no dice nada, pero que en conjunto forma información. Información Conjunto de datos estructurados o procesados.

37 Tipos de datos en JavaScript Numéricos Lógicos (o booleanos) Cadena de caracteres (string) Nulos Indefinidos No numéricos Objetos

38 Datos numéricos Una variable del tipo numérico puede almacenar tanto números enteros como reales. Se puede trabajar con números en base 10 (sistema decimal), en base 8 (sistema octal) o en base 16 (sistema hexadecimal).

39 Datos lógicos o booleanos Una variable del tipo booleano puede almacenar un verdadero o un falso (true o false). Ejemplo: var mivariable = true; var mivariable = false;

40 Cadena de caracteres Una variable del tipo string puede almacenar un texto de cualquier cantidad de caracteres. Puede estar compuesto de números, letras y cualquier otro tipo de caracteres y signos. Los textos se escriben entre comillas, dobles o simples.

41 Cadena de caracteres Ejemplos: var mivariable = "Hoy es lunes!"; var mivariable = "123"; Todo lo que se coloca entre comillas es tratado como una cadena de caracteres. Si guardamos números en una variable de texto, no podremos realizar operaciones aritméticas con ese dato.

42 Cadena de caracteres Si se quiere incluir: Se debe escribir: Una nueva línea \n Un tabulador \t Una comilla simple \' Una comilla doble \" Una barra inclinada \\

43 Datos nulos Son datos vacíos, se producen cuando se ha definido una variable como null para borrarla. Ejemplo: var mivariable = null;

44 Datos indefinidos Son variables que aún no han sido asignadas con el operador de asignación.

45 Datos No numéricos Se producen cuando no podemos realizar una operación determinada porque los datos no son compatibles, su valor es NaN (not a number).

46 Objetos Son conjuntos de variables y funciones definidos previamente por el lenguaje (objetos predefinidos) o por el usuario. Los veremos más adelante...

47 Operadores en JavaScript Operadores de asignación Operadores aritméticos Operadores relacionales o de comparación Operadores lógicos Operadores de cadena

48 Operadores de asignación Asignación = Asigna el valor del operando de la derecha a la variable de la izquierda += -= *= /= Suma el valor del operando de la derecha a la variable de la izquierda Resta el valor del operando de la derecha a la variable de la izquierda

49 Operadores Aritméticos Suma + Suma dos números Resta - Resta dos números Multiplicación * Multiplica dos números División / Divide dos números Módulo % Devuelve el resto de dividir dos números Incremento ++ Suma 1 al contenido de una variable Decremento -- Resta 1 al contenido de una variable

50 Operadores Relacionales Igual a == devuelve true si los operandos son iguales Estrictamente igual a == = realiza la comparación sólo si son del mismo tipo No igual a!= devuelve true si los operandos no son iguales Estrictamente no igual a!== realiza la comparación sólo si son del mismo tipo Mayor que > devuelve true si el valor de la izquierda es mayor que el de la derecha Mayor o igual que >= devuelve true si el valor de la izquierda es mayor o igual que el de la derecha Menor que < devuelve true si el valor de la izquierda es menor que el de la derecha Menor o igual que <= devuelve true si el valor de la izquierda es menor o igual que el de la derecha

51 Operadores Lógicos Y (AND) && Devuelve true si ambos operandos son true O (OR) Devuelve true si uno de los operandos es true No (NOT)! Devuelve true si la negación del operando es true

52 Operadores de cadena Los valores de cadena se pueden comparar usando los operadores relacionales. También se pueden concatenar cadenas usando el operador + Ejemplo: mivariable = "Hola " + "todos.";

53 Ejercicios

54 Estructuras secuenciales La estructura secuencial es aquella en la que una acción (instrucción) sigue a otra en secuencia.

55 Ejercicio 01 Hacer un programa que pida un número al usuario, le sume 3 y escriba el resultado en la página.

56 Ejercicio 02 Hacer un programa que pida un número al usuario, le sume 3 y escriba el resultado en la página. Agregar un evento que le sume 3 al resultado obtenido anteriormente.

57 Ejercicio 03 Hacer un programa que pida un número al usuario, le sume 3 y escriba el resultado en la página. Agregar un evento que le sume 3 al resultado obtenido anteriormente. Modificar el evento para que cada vez que se ejecute siga sumando 3 al resultado.

58 Ejercicio 04 Hacer un programa que pida dos números al usuario, escriba el resultado de la suma de ambos en la página.

59 Ejercicio 05 Hacer un programa que calcule cuánto paga un cliente de una panadería que compra pan. El kilo de pan cuesta $34,5. Escribir el resultado en la página.

60 Ejercicio 06 Hacer un programa que pida al usuario los valores en cm de base y altura de un rectángulo, calcule la superficie y el perímetro y escriba los resultados en la página.

61 Ejercicio 07 Hacer un programa que pida al usuario su nombre y dos colores. Escribir en la página un mensaje que incluya el nombre del usuario utilizando un color para el texto y otro para el fondo.

62 Ejercicio 08 Hacer un programa que pida al usuario su nombre y dos colores. Escribir en la página un mensaje que incluya el nombre del usuario utilizando un color para el texto y otro para el fondo. Agregar un evento que intercambie los colores.

63 Ejercicio 09 Hacer un programa que pida al usuario un número de dos dígitos y calcule la suma de esos dos dígitos. Escribir el resultado en la página.

64 Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales