Document Details

EnergeticExponential

Uploaded by EnergeticExponential

Centro de Enseñanza Gregorio Fernández

Tags

javascript programming web development programming fundamentals web page interactivity

Summary

This document provides an introduction to Javascript programming, discussing its use in creating interactive web pages and explaining the different types of operators and expressions in Javascript and their applications.

Full Transcript

INICIACIÓN A LA PROGRAMACIÓN CON JAVA SCRIPT - ¿QUÉ ES JAVASCRIPT? Javascript es un lenguaje de programación que se utiliza principalmente para crear páginas Web capaces de interactuar con el usuario. Las páginas Web se consideran estáticas cuando se limitan a mostrar un contenido est...

INICIACIÓN A LA PROGRAMACIÓN CON JAVA SCRIPT - ¿QUÉ ES JAVASCRIPT? Javascript es un lenguaje de programación que se utiliza principalmente para crear páginas Web capaces de interactuar con el usuario. Las páginas Web se consideran estáticas cuando se limitan a mostrar un contenido establecido por su creador sin proporcionar más opciones al usuario que elegir entre los enlaces disponibles para seguir navegando. Cuando un creador incorpora JavaScript a su página, proporciona al usuario cierta capacidad de interactuación con la página Web, es decir, cierto dinamismo y por lo tanto se incrementan las prestaciones de la misma al añadir procesos en respuesta a las acciones del usuario. Es importante señalar que estos procesos se ejecutan en la máquina del cliente (en el navegador) y por tanto no implican intercambio de datos con el servidor. Con Javascript se accede al mundo de las páginas Web dinámicas. Desde el punto de vista técnico Javascript es un lenguaje interpretado, eso significa que las instrucciones son analizadas en secuencia por el intérprete de Javascript del navegador Web, de manera que su ejecución es inmediata a la interpretación. Esto permite que, una vez escrito un programa en Javascript con un editor de texto plano y embebido el código en un fichero HTML, el navegador es capaz de interpretarlo y ejecutarlo sin necesidad de procesos intermedios. Es importante destacar que Javascript y Java son dos lenguajes distintos ya que la semejanza de los nombres a veces puede llevar a confusión. - EDITAR JAVASCRIPT La edición de código escrito en lenguaje JavaScript no requiere de ninguna herramienta especial, siendo suficiente un editor de texto plano (sin formato). El código JavaScript debe integrarse en una página Web que será la que establezca el contexto de ejecución del código. Dicha página puede ser abierta con un navegador Web y como consecuencia de ello se ejecutará el programa JavaScript en base al propio flujo de control de la página Web. Esto significa que si el código JavaScript se asocia a la pulsación de un botón, dicho código se interpretará y ejecutará cuando el usuario pulse el botón. Esto implica que, como la interpretación y la ejecución son simultáneas, los errores en el código (salvo aquellos que imposibiliten la interpretación del código HTML) serán detectados en el momento de la ejecución. Esto complica en parte la depuración de los programas. Ejercicio 1: Insertar código JS en una página html y observar el resultado: Párrafo1 de html document.write(“Párrafo escrito desde JavaScript”); Párrafo2 de html OPERADORES = es el operador de asignación, con él se asigna un valor a una variable. También hay operadores de comparación, aritméticos y lógicos. Ejercicio 2: Escribir y ejecutar los siguientes comandos con operadores de asignación y comparación en la consola de cualquier navegador. A continuación, escribir los comandos de la derecha con operadores aritméticos: Ejercicio 3: Escribir y ejecutar los siguientes comandos con operadores aritméticos y lógicos en la terminal de cualquier navegador: Ejercicio 4: Un array es una colección de elementos. Una cadena de texto, en ciertos aspectos, funciona como un array. Escribir y ejecutar las siguientes instrucciones: EXPRESIONES REGULARES EXP DESCRIPCIÓN EJEMPLO \d Un dígito del 0 al 9 0a9 \w Un carácter alfanumérico (letras, números o _) A a Z, 0 a 9 y _ \s Un carácter en blanco Espacio, tab, enter… \D No es un dígito Todo menos 0 a 9 \S No es un carácter en blanco Todo excepto espacio, tab, enter…. Cualquier carácter, excepto el salto de línea Todo | Una de las expresiones que tiene a los lados A | B | C -> A, B ó C Escapa caracteres especiales, como el punto\. o la misma \ \. ->. \\ [aeiou] Cualquier carácter incluido en el interior, o en el rango [aeiou] -> a, e, i, o ó u [^aeiou] Cualquier carácter NO incluido en el interior, o en el rango [^b-y] -> a, z, mayúsc, dígitos, … {n} Se repite n veces [aeiou]{3} -> tres vocales: aaa, eou [a-z]{2,} -> dos o más minúsc: ex, {n,} Se repite al menos n veces, n o más veces ptz, {n, m} Se repite entre n y m veces (ambos incluídos \d{2} -> dos dígitos: 00, 15, 56, … ? Opcional, equivalente a {0,1}.? -> nada o un carácter * 0 o más veces, equivalente a {0,} \w* -> 0 o más caracteres + 1 o más veces, equivalente a {1,} [0-9]+ -> al menos un dígito o más ^ Inicio de la cadena (asumido en algunos lenguajes) $ Final de la cadena (asumido en algunos lenguajes) (a[lc]a){1,2}(fin) -> alafin, () Agrupan expresiones acaacafin,… Ejercicio 5: Escribir y ejecutar las siguientes instrucciones con expresiones regulares: Ejercicio 6: Intentar hacer la expresión regular de los siguientes elementos, y comprobarlo por consola: Matrícula de coche 4444 ABC e-mail [email protected] Número de teléfono 666 666 666 Web Española o gallega http ó https://www.xxxx.es ó.gal Edad adulta entre 18 y 100 (incluídos) TYPEOF Tipos de datos Ejercicio 7: Escribir y ejecutar las siguientes instrucciones en la consola o terminal de cualquier navegador: ESTRUCTURAS BÁSICAS DE PROGRAMACIÓN: Cualquier programa informático, desde una suma básica, hasta un juego online, se puede realizar con estas 3 estructuras básicas: ESTRUCTURAS DE SECUENCIA Lo más común en un programa informático es ir ejecutando comandos secuencialmente: primero hacer esto, luego esto otro… y así sucesivamente. Ejercicio 8 Crear en el head de cualquier web un alert, que diga: “Bienvenidos a mi página”. Luego insertar un prompt que pregunte el nombre y luego otro alert que diga: “Hasta la próxima, el_nombre”. alert(“Bienvenidos a mi página”); nome = prompt(“Por favor, escribe aquí tu nombre”); alert(“Hasta la próxima, ” + nome); ESTRUCTURAS DE SELECCIÓN IF EN JAVA SCRIPT: if selecciona entre dos o más caminos de ejecución en función de que se cumpla o no una condición lógica. Por ejemplo, Ejercicio 9 Abrir una página en blanco y crear un script en el head en el que un prompt te pida un número que tiene que coincidir con otro guardado previamente: valor = 5 adivina = prompt(“Adivina el número para entrar en mi web”); if (valor == adivina){ alert(“Pa dentro”); }else{ alert("Se siente, vuelve a recargar la página") } Ejercicio 10 elseif permite realizar una comprobación adicional en caso de que la anterior haya fallado. if (valor == adivina){ alert("Pa dentro"); } else if(valor > adivina){ alert("más"); }else if(valor < adivina){ alert("menos"); } Hay un operador ternario que evalúa la expresión if en una sola línea. condición ? expresión_si_verdadero : expresión_si_falso; Por ejemplo, en el ejercicio 9, se pondría lo siguiente: valor == adivina? alert("Pa dentro"):alert("Se siente"); Ejercicio 11 Hacer con el operador ternario un prompt que pida la edad, y según si se es mayor o menor de 50 años, salte un alert que ponga: “viejo” o “joven”. SWITCH EN JAVA SCRIPT switch permite realizar varias comprobaciones encadadas de forma similar al punto anterior, nota = prompt(“¿Cuál es tu nota?”); switch(nota){ case '1': case '2': case '3': case '4': alert("suspenso");break; case '5': alert("justito");break; case '6': alert("bien");break; case '7': case '8': alert("notable");break; case '9': case '10': alert("sobre");break; default: alert("no válida");break;} ESTRUCTURAS DE ITERACIÓN (BUCLES) ¿QUE ES UN BUCLE? Un bucle permite repetir acción/es o funciones un número determinado de veces, o en función de una condición. Por ejemplo, es la manera de arreglar el problema que había en los ejercicios 9 y 10 de if habría que preguntar pedir el número las veces que sean necesarias hasta que se acierte. LOS BUCLES WHILE En un bucle while, la condición se encuentra antes de comenzar el bucle. while(condición){ Instrucciones } De esta forma, si la condición no se cumple al principio, ya no entramos en el bucle. Por ejemplo, en el caso de adivinar el número: valor=7; adivina=prompt('Introduce un número'); while (valor != adivina){ adivina=prompt('vuelve a intentarlo'); } alert('Entra'); Ejercicio 12 Crear el mismo bucle anterior, con una peculiaridad: dar la pista “más” o “menos” en alerts según el número introducido por el usuario. LOS BUCLES DO-WHILE Esta estructura de control permite repetir acciones hasta que se cumpla una condición. En estos bucles, se ejecutan las instrucciones (al menos una vez), luego se comprueba la condición, y si no se cumple, se repiten en bucle hasta que se cumpla. La diferencia con el bucle while es que el do-while siempre se ejecuta, al menos una vez. do{ instrucciones } while(condición) En el ejemplo de adivinar el número, éste sería el bucle más eficiente. valor = 3; do{ adivina=prompt(‘Adivina el número’); }while(adivina !=valor); alert(‘Entra’); Ejercicio 13 Añade código al anterior, para que cada vez que nos pide el número, nos de una pista de si es mayor o menor. LOS BUCLES FOR Itera en un rango de números hasta cumplir una determinada condición. Este bucle se utiliza cuando se pueden saber o iterar las veces que queremos ejecutarlo. for (condición_inicial; condición_final; paso) Por ejemplo, podemos crear una lista con x elementos, o una tabla con x filas y columnas, … Ejercicio 14 document.write("Lista desordenada hecha con Java Script"); document.write(""); for(i=1; i

Use Quizgecko on...
Browser
Browser