Vamos a realizar a continuación el ejercicio de sumar con JavaScript.
Están listos.
Vamos
el objetivo del ejercicio es crear un proyecto en JavaScript para realizar una suma y al finalizar deberemos
observar lo siguiente según se muestra
como primer paso vamos a crear un proyecto.
Este proyecto se llama suma JavaScript lo depositamos en la ruta mostrada y damos clic en Finalizar.
También vamos a crear un nuevo archivo JavaScript.
Ese archivo se llama funciones y lo depositamos a nivel raíz de nuestro proyecto y damos clic en Finalizar
ahora vamos a modificar nuestro archivo índex punto HTML.
Vamos a agregar lo siguiente El Doctrine abrimos la etiqueta HTML.
Agregamos el Get y el meta de echarse un F8 y agregamos un título ejercicio JavaScript 3 y asociamos
el archivo de funciones punto JS Es decir el archivo de tipo JavaScript.
Y con eso cerramos nuestro cabecero.
Ahora agregamos el body y el título ejercicio JavaScript 3 y lo que vamos a hacer es agregar lo siguiente
vamos a agregar un botón de HTML pero a este botón en su método un click vamos a asociar el método sumar
este método sumar lo vamos a definir en el archivo funciones punto JS.
Así que cuando el usuario da clic en el botón de sumar se va a mandar a llamar el método sumar que definamos
dentro de ese archivo funciones punto JS Con eso cerramos el body y la etiqueta HTML vamos a modificar
a continuación otro archivo funciones punto JS definimos nuestro método sumar.
Por lo tanto utilizamos la palabra reservada función.
Definimos el método sumar no reciben ningún argumento ya abrimos el cuerpo de este método por medio
de una llave.
Agregamos el siguiente comentario envolvemos todo el código en un bloque y cache para procesar la excepción
en caso de que haya ocurrido alguna.
Así que ya scrip podemos procesar también excepciones de la siguiente manera podemos abrir un bloque
Trui y cache así que abrimos nuestro bloque Trui pedimos un valor.
Este primer valor va a ser el valor que vamos a utilizar para el operando.
Posteriormente vamos a pedir otro valor para otro operando que va a ser el operándose y posteriormente
vamos a hacer la suma del operando más el operando de para solicitar el valor de nuestro operando a
lo que vamos a hacer es utilizar la función de prom.
Recordemos que esto nos va abrir una ventana una alerta pero nosotros vamos a poder proporcionar un
valor así que en este caso le solicitamos al usuario que proporcione el valor de A y una vez que el
usuario proporcione el valor entonces los vamos a asignar a la variable.
En dado caso de que el usuario no proporcione un valor entonces estamos proporcionando un valor por
default por lo tanto esta función de prom tiene dos argumentos el primer argumento es el texto que se
va a mostrar al usuario el valor a pero si el usuario no proporciona un valor.
Entonces después de la Coma nosotros proporcionamos un valor por default.
En este caso una cadena vacía y posteriormente vamos a validar el valor asignado a este argumento y
en dado caso de que el valor sea una cadena vacía entonces vamos a solicitar al usuario que proporcione
nuevamente un valor ya que si no proporciona al usuario un valor no se puede realizar la operación.
Así que como siguiente paso vamos a validar el parámetro a y si utilizamos el operador de signo de admiración
y lo ponemos a la variable A. En este caso lo que se está revisando es si la cadena a está vacía o nula.
Esta es una forma rápida en que podemos revisar con JavaScript si el valor de la cadena es nulo así
que agregamos el siguiente If y para poder considerar este argumento como un argumento válido vamos
a preguntar lo siguiente y vamos a validar si nuestra variable a tiene un valor correcto para realizar
la suma.
Así que en caso de que esta variable no tenga un valor correcto vamos a realizar lo siguiente Vamos
a hacer la validación.
Si la variable A tiene un valor igual a nulo o es una cadena vacía o en este caso también esta variable
no es un número entonces arrojamos una excepción y para arrojar una excepción con JavaScript vamos a
utilizar la palabra reservada drow posteriormente la palabra reservada NIU y arrojamos un error indicando
al usuario valor inválido de A y proporcionamos el valor inválido.
Esta función de JavaScript significa is no da nombre es decir no es un número.
Por lo tanto con este IHF validamos que esta variable no se anula ni contenga una cadena vacía o también
revisamos que esto no sea un número.
Así en cualquiera de estos casos si es nulo o si es cadena vacía o no es un número.
Entonces arrojamos la excepción valor inválido de la variable A y con eso cerramos nuestro IHF con el
cual validamos el parámetro a.
Ahora vamos a pedir el valor del operándose vamos a hacer lo mismo vamos a utilizar la función de prom
y solicitamos el valor de lo que escriba el usuario lo asignamos a la variable.
En caso de que no escriba ninguna información entonces le asignamos el valor de cadena vacía y validamos
también el parámetro.
Y como hemos comentado si utilizamos el valor del operador de admiración y lo ponemos a una variable
revisa si la cadena está vacía o nula así que regamos lo siguiente Si el valor de la variable es vacío
o nulo o esta variable no es un número entonces arrojamos un error e indicamos valor inválido debe y
con esto terminamos la validación de nuestros parámetros continuando con la codificación agregamos lo
siguiente si no hay problema entonces hacemos la suma.
Necesitamos convertir a tipos enteros por lo tanto vamos a utilizar la función par int que convierte
a un entero si no es entero no va a realizar la suma sino que va a concatenar los valores por lo tanto
vamos a hacer lo siguiente Vamos a utilizar la función pars INT para convertir la variable a un entero
y lo sumamos con el valor del operándose pero también lo convertimos a un entero y una vez que hemos
convertido los valores de estas variables entonces lo asignamos a una tercera variable.
En este caso la variable C y mandamos una alerta la suma es e imprimimos el valor de la variable C en
dado caso de que tengamos algún error en esta conversión entonces despachamos en la excepción y mandamos
a imprimir la excepción mandamos una alerta.
El error es y utilizamos la variable e recordemos que en JavaScript no es necesario declarar una variable
en este caso cualquier excepción que ocurra en automático esta variable va a recibir el mensaje de error
por lo tanto por medio de esta variable simplemente mandamos a imprimir su mensaje por medio del operador
punto y el atributo de mesas y así es que podremos capturar una excepción en dado caso de que ocurra
alguna con JavaScript.
Así que este procesamiento es muy similar al lenguaje Java sin embargo aunque tiene varias similitudes
Javascript con Java poco a poco nos iremos familiarizando con el uso del lenguaje de JavaScript ya que
aunque con JavaScript podemos manejar también objetos no es tal cual un lenguaje orientado a objetos
con todas las características como el lenguaje de programación Java hace que JavaScript es un lenguaje
de tipo scripting el cual es más limitado pero podemos observar que si tenemos varias características
para poder procesar este tipo de elementos y cerramos también nuestro bloque Cazzo y con esto terminamos
también nuestra función de sumar con JavaScript.
Recuerden que cualquier problema pueden dar clic en los nombres de los archivos.
Sin embargo se les solicita codificar línea a línea.
Este ejercicio de suma ya va scrip para que vaya quedando claro cada uno de estos elementos
como siguiente paso ejecutamos nuestro proyecto y si damos clic en el botón de sumar podemos proporcionar
un primer parámetro el valor a y damos clic en Aceptar.
Posteriormente nos solicita el valor de proporcionamos un valor y damos clic en Aceptar.
Y finalmente nos despliega el resultado de la suma la suma es 8 en este caso ya que proporcionamos los
valores de 3 y 5 para cada uno de los operandos y damos clic en Aceptar.
Como conclusión con este ejercicio hemos puesto en práctica varias funciones más con JavaScript y HTML.
En este ejemplo utilizamos la función Pro-Am de JavaScript para capturar los datos del usuario.
Sin embargo en ejercicios posteriores utilizaremos cajas de texto de HTML para capturar la información
y asimismo desplegar el resultado en la página HTML.
Con esto concluimos el ejercicio de suma con JavaScript.