SlideShare una empresa de Scribd logo
1 de 6
Variables
Las variables son el elemento más básico e importante de un lenguaje de
programación. Antes que nada, hay que conocer qué tipos de variables hay y como
funcionan. Realmente, son muy similares en casi todos los lenguajes existentes.
Dichas variables sirven para almacenar valores.
Vamos a conocer las variables más utilizadas. En javascript tenemos la ventaja de que
no hace falta indicarle qué tipo de variable estamos creando. Es decir, no hace falta
indicar que la variable tenga que ser un número entero o una cadena de caracteres;
simplemente se inicia con el valor que queramos directamente.
Para crear variables utilizaremos el comando "var" <nombre_variable>.
Pongamos ejemplos para entenderlo.
var nombre = 'Pepe';
Así se declaran y asignan valores a las variables. En este caso, hemos asignado el
nombre de "Pepe" que es una cadena de caracteres. Pero como javascript no
distingue de tipos (esto es muy bueno), podemos asignar valores numéricos,
decimales, booleanos (true o false), etc...
Creando variables de distinto tipo...
Hemos creado 4 variables, y si os fijáis cada una con un tipo de valor diferente.
Si abrimos este ejemplo con el navegador, veremos que no ocurre nada. Porque las
variables están creadas y asignadas, pero el sistema las tiene guardada en memoria
sin más. Para saber qué valor contiene cada variable es necesario mostrarlas por
pantalla, y lo vamos a aprender en la siguiente lección.
Mostrar variables
Ya hemos visto la creación de variables en javascript, y como podemos asignarle
valores a esas variables. Pero claro, si no mostramos ese contenido y no sabemos
acceder a él, los valores no nos servirían de nada. Ahora aprenderemos a mostrar el
contenido de esas variables por pantalla.
Siguiendo con las variables del ejemplo anterior, vamos a mostrarlas a través de la
función write.
Se muestra el valor de cada variable. El "<br>" en HTML significa salto de línea, por
eso lo ponemos así, para que se muestre de forma más visual, un valor por línea.
Ahora, si abrimos este ejemplo en el navegador, obtendremos el siguiente resultado:
Podéis trastear un poco con las variables, y modificar sus valores para ir
comprendiendo su funcionamiento.
Datos por teclado
Hasta el momento el valor de las variables lo hemos introducido nosotros a mano, pero
en ocasiones necesitamos que sea el propio usuario el que introduzca los valores de
ciertas variables.
Para ello utilizaremos la función prompt.
Vamos a crear 2 variables, "nombre" y "altura" y hagamos que el usuario sea el que
introduzca los valores. Se realiza de la siguiente forma:
Creamos las variables como ya sabemos:
Ahora, tenemos que hacer que el usuario les de valor a esas variables, con sus datos,
utilizamos la función de la siguiente forma:
Esta función funciona de la siguiente forma:
prompt ('<Texto que se muestra al usuario>', '<valor por defecto>') => El valor por
defecto se refiere al que aparece en la caja de texto donde escribe el usuario, por eso
lo dejamos vacío ' '.
Y escribiendo la variable "nombre" = , lo que hacemos es asignar el valor que escribe
el usuario a esa variable.
Ya solo nos queda mostrar por pantalla los datos de las variables:
Lo mostramos por pantalla con document.write como hemos aprendido anteriormente.
Estructuras condicionales simples
La sentencia IF no es más que una sentencia condicional, o sea, que si se cumple "x"
condición, el programa hace una cosa, y si no se cumple, el programa hace otra.
Las sentencias IF se construyen de la siguiente forma:
if (condición)
{
instrucciones...
}
Dichas instrucciones solo se ejecutarán si se cumple la condición del IF.
Lo vamos a entender mejor con el siguiente ejemplo :
Pedimos al usuario que introduzca nombre y edad. Y comparamos con el IF, que si su
edad es mayor o igual que 18, es mayor de edad.
En el ejemplo que he puesto es edad >= 18. Bien, estos operados que he utilizado
para la condición, son operadores de comparación. Los operadores de comparación
son los siguientes:
Operador Uso Devuelve verdadero si
> op1 > op2 op1 es mayor que op2
>= op1 >= op2 op1 es mayor o igual que op2
< op1 < op2 op1 es menor que op2
<= op1 <= op2 op1 es menor o igual que op2
== op1 == op2 op1 y op2 son iguales
!= op1 != op2 op1 y op2 son distintos
Esos son los distintos operadores que se pueden utilizar para comparar.
Este programa solo muestra algo por pantalla si se cumple la condición, en caso de
que el usuario no sea mayor de edad, no ocurriría nada. Esto se puede completar de
alguna forma, y lo veremos en la siguiente lección. Las condiciones compuestas.
Fijaos que a la hora de mostrar por pantalla que el usuario es mayor de edad, hemos
utilizado el operador "+", que sirve para concatenar cadenas de caracteres.
Estructuras condicionales compuestas
Ahora vamos a hacer que, pase lo que pase, el programa muestre algo por pantalla.
En el caso anterior, si no se cumplía la condición, no se mostraba nada.
¿Como hacemos esto?
Añadiendo al IF la cláusula ELSE. . De esta forma:
Ahora, si el usuario introduce una edad menor a 18, el programa ejecuta las
instrucciones que haya dentro del ELSE { ... }.
Ejercicio nº 1
A lo largo del curso, voy a ir introduciendo ejercicios, para que vayáis poniendo en
práctica todo lo aprendido anteriormente. Porque por más teoria y práctica que se
explique, cuando realmente se aprende a programar es programando, no hay otra
opción más fiable que esa.
A continuación, os propongo el enunciado del ejercicio:
Escribe un programa con 2 variables, las cuales deben introducir el usuario su valor.
Una vez introducidos los valores, pueden ocurrir tres cosas:
- Que el número 1 sea mayor que el número 2.
- Que el número 2 sea mayor que el número 1.
- Que los números sean iguales.
El program debe mostrar por pantalla cual de las 3 opciones se ha cumplido.
Así tiene que quedar el ejercicio:
Solución ejercicio nº 1
¿Has sido capaz de crear el programa por ti mismo? ¡Muy bien! Aquí tenemos la
solución...
Este programa lo vamos a dividir en dos secciones; primero la creación de variables y
como pedir al usuario que introduzca los valores, y luego las comprobaciones.
Creamos las variables y pedimos al usuario que introduzca los números:
Ahora, dependiendo de qué valores haya introducido, ocurrirá una cosa u otra. Como
decía el enunciado del ejercicio, pueden ocurrir 3 cosas, es decir, que tendremos que
hacer 3 sentencias IF.
A continuación vemos como queda:
Puedes investigar la forma de como hacerlo con IF...ELSE...IF. En cualquier caso, el
programa funciona tal y como nos indicaba el enunciado del ejercicio. He puesto la
solución más sencilla, pero hay más formas de hacerlo.
Bien, ya has hecho tu primer ejercicio en Javascript sin ayuda.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Codigo matlab Secante
Codigo matlab SecanteCodigo matlab Secante
Codigo matlab Secante
 
Introduccion php
Introduccion phpIntroduccion php
Introduccion php
 
Manual aplicacion movil
Manual aplicacion movilManual aplicacion movil
Manual aplicacion movil
 
Trabajo escrito grupal de pseint
Trabajo escrito grupal de pseint Trabajo escrito grupal de pseint
Trabajo escrito grupal de pseint
 
Trabajo escrito grupal de pseint
Trabajo escrito grupal de pseint Trabajo escrito grupal de pseint
Trabajo escrito grupal de pseint
 
Trabajo escrito grupal de pseint
Trabajo escrito grupal de pseint Trabajo escrito grupal de pseint
Trabajo escrito grupal de pseint
 
Programacion
ProgramacionProgramacion
Programacion
 
Informe escrito de pseint
Informe escrito de pseintInforme escrito de pseint
Informe escrito de pseint
 
Estructuras de seleccion anidadas
Estructuras de seleccion anidadasEstructuras de seleccion anidadas
Estructuras de seleccion anidadas
 
Resumen Conceptos Javascriptya.com.ar
Resumen Conceptos Javascriptya.com.arResumen Conceptos Javascriptya.com.ar
Resumen Conceptos Javascriptya.com.ar
 
Pseudocodigo
PseudocodigoPseudocodigo
Pseudocodigo
 
Entrada
EntradaEntrada
Entrada
 
Primeros ejercicios en action script
Primeros ejercicios en action scriptPrimeros ejercicios en action script
Primeros ejercicios en action script
 
Variables Visual
Variables VisualVariables Visual
Variables Visual
 
Estructura de programación
Estructura de programaciónEstructura de programación
Estructura de programación
 
Sandra 11 compu
Sandra 11 compuSandra 11 compu
Sandra 11 compu
 
Sandra 11 compu
Sandra 11 compuSandra 11 compu
Sandra 11 compu
 
PDF 13
PDF 13PDF 13
PDF 13
 

Destacado

Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Railsropiku
 
Human Resources Overview Nguyen Trong Quy
Human Resources Overview   Nguyen Trong QuyHuman Resources Overview   Nguyen Trong Quy
Human Resources Overview Nguyen Trong QuyNguyen Trong Quy
 
Logotipo Biblio
Logotipo BiblioLogotipo Biblio
Logotipo Bibliopacoayal
 

Destacado (6)

Git
GitGit
Git
 
Ruby on Rails
Ruby on RailsRuby on Rails
Ruby on Rails
 
Human Resources Overview Nguyen Trong Quy
Human Resources Overview   Nguyen Trong QuyHuman Resources Overview   Nguyen Trong Quy
Human Resources Overview Nguyen Trong Quy
 
Seguir Viagem1
Seguir Viagem1Seguir Viagem1
Seguir Viagem1
 
|
||
|
 
Logotipo Biblio
Logotipo BiblioLogotipo Biblio
Logotipo Biblio
 

Similar a Variables

Primer programa en 1
Primer programa en 1Primer programa en 1
Primer programa en 1fehrhuichapa
 
Introducción a la programación en java
Introducción a la programación en javaIntroducción a la programación en java
Introducción a la programación en javaIvan Alvarado
 
Sentencias selectivas y repetitivas
Sentencias selectivas y repetitivasSentencias selectivas y repetitivas
Sentencias selectivas y repetitivasyoly1parra1
 
Viviana codigos
Viviana codigosViviana codigos
Viviana codigosvftyfv
 
Viviana codigos
Viviana codigosViviana codigos
Viviana codigosJhon Erazo
 
Introducción a JavaScript 2
Introducción a JavaScript 2Introducción a JavaScript 2
Introducción a JavaScript 2Lorenzo Alejo
 
Guia de como usar qbasic
Guia de como usar qbasicGuia de como usar qbasic
Guia de como usar qbasicJaime Campos
 
Programaciòn Estructurada
Programaciòn EstructuradaProgramaciòn Estructurada
Programaciòn EstructuradaFernanda-Guzman
 
Curso php - capitulo 2
Curso php - capitulo 2Curso php - capitulo 2
Curso php - capitulo 2yanburbano
 
Aa javaaa intro
Aa javaaa introAa javaaa intro
Aa javaaa introMickeT
 
Ejemplo 1 -_calculo_simple (1)
Ejemplo 1 -_calculo_simple (1)Ejemplo 1 -_calculo_simple (1)
Ejemplo 1 -_calculo_simple (1)monikitatesorito
 
Software para cálculos matemáticos
Software para cálculos matemáticosSoftware para cálculos matemáticos
Software para cálculos matemáticosdaniimoyano
 

Similar a Variables (20)

Primer programa en 1
Primer programa en 1Primer programa en 1
Primer programa en 1
 
Introducción a la programación en java
Introducción a la programación en javaIntroducción a la programación en java
Introducción a la programación en java
 
Lucelly php
Lucelly phpLucelly php
Lucelly php
 
Sentencias selectivas y repetitivas
Sentencias selectivas y repetitivasSentencias selectivas y repetitivas
Sentencias selectivas y repetitivas
 
Viviana codigos
Viviana codigosViviana codigos
Viviana codigos
 
Viviana codigos
Viviana codigosViviana codigos
Viviana codigos
 
Viviana codigos
Viviana codigosViviana codigos
Viviana codigos
 
Introducción a JavaScript 2
Introducción a JavaScript 2Introducción a JavaScript 2
Introducción a JavaScript 2
 
Guia de como usar qbasic
Guia de como usar qbasicGuia de como usar qbasic
Guia de como usar qbasic
 
Programaciòn Estructurada
Programaciòn EstructuradaProgramaciòn Estructurada
Programaciòn Estructurada
 
Camila codigos
Camila codigosCamila codigos
Camila codigos
 
Curso php - capitulo 2
Curso php - capitulo 2Curso php - capitulo 2
Curso php - capitulo 2
 
Seminario cecytem
Seminario cecytemSeminario cecytem
Seminario cecytem
 
Fundamentos De Programacion
Fundamentos De ProgramacionFundamentos De Programacion
Fundamentos De Programacion
 
SEMINARIO
SEMINARIOSEMINARIO
SEMINARIO
 
Aa javaaa intro
Aa javaaa introAa javaaa intro
Aa javaaa intro
 
Manual lpp
Manual   lppManual   lpp
Manual lpp
 
Manual lpp
Manual lppManual lpp
Manual lpp
 
Ejemplo 1 -_calculo_simple (1)
Ejemplo 1 -_calculo_simple (1)Ejemplo 1 -_calculo_simple (1)
Ejemplo 1 -_calculo_simple (1)
 
Software para cálculos matemáticos
Software para cálculos matemáticosSoftware para cálculos matemáticos
Software para cálculos matemáticos
 

Variables

  • 1. Variables Las variables son el elemento más básico e importante de un lenguaje de programación. Antes que nada, hay que conocer qué tipos de variables hay y como funcionan. Realmente, son muy similares en casi todos los lenguajes existentes. Dichas variables sirven para almacenar valores. Vamos a conocer las variables más utilizadas. En javascript tenemos la ventaja de que no hace falta indicarle qué tipo de variable estamos creando. Es decir, no hace falta indicar que la variable tenga que ser un número entero o una cadena de caracteres; simplemente se inicia con el valor que queramos directamente. Para crear variables utilizaremos el comando "var" <nombre_variable>. Pongamos ejemplos para entenderlo. var nombre = 'Pepe'; Así se declaran y asignan valores a las variables. En este caso, hemos asignado el nombre de "Pepe" que es una cadena de caracteres. Pero como javascript no distingue de tipos (esto es muy bueno), podemos asignar valores numéricos, decimales, booleanos (true o false), etc... Creando variables de distinto tipo... Hemos creado 4 variables, y si os fijáis cada una con un tipo de valor diferente. Si abrimos este ejemplo con el navegador, veremos que no ocurre nada. Porque las variables están creadas y asignadas, pero el sistema las tiene guardada en memoria sin más. Para saber qué valor contiene cada variable es necesario mostrarlas por pantalla, y lo vamos a aprender en la siguiente lección. Mostrar variables Ya hemos visto la creación de variables en javascript, y como podemos asignarle valores a esas variables. Pero claro, si no mostramos ese contenido y no sabemos acceder a él, los valores no nos servirían de nada. Ahora aprenderemos a mostrar el contenido de esas variables por pantalla. Siguiendo con las variables del ejemplo anterior, vamos a mostrarlas a través de la función write.
  • 2. Se muestra el valor de cada variable. El "<br>" en HTML significa salto de línea, por eso lo ponemos así, para que se muestre de forma más visual, un valor por línea. Ahora, si abrimos este ejemplo en el navegador, obtendremos el siguiente resultado: Podéis trastear un poco con las variables, y modificar sus valores para ir comprendiendo su funcionamiento. Datos por teclado Hasta el momento el valor de las variables lo hemos introducido nosotros a mano, pero en ocasiones necesitamos que sea el propio usuario el que introduzca los valores de ciertas variables. Para ello utilizaremos la función prompt. Vamos a crear 2 variables, "nombre" y "altura" y hagamos que el usuario sea el que introduzca los valores. Se realiza de la siguiente forma: Creamos las variables como ya sabemos: Ahora, tenemos que hacer que el usuario les de valor a esas variables, con sus datos, utilizamos la función de la siguiente forma: Esta función funciona de la siguiente forma: prompt ('<Texto que se muestra al usuario>', '<valor por defecto>') => El valor por defecto se refiere al que aparece en la caja de texto donde escribe el usuario, por eso lo dejamos vacío ' '. Y escribiendo la variable "nombre" = , lo que hacemos es asignar el valor que escribe el usuario a esa variable. Ya solo nos queda mostrar por pantalla los datos de las variables: Lo mostramos por pantalla con document.write como hemos aprendido anteriormente.
  • 3. Estructuras condicionales simples La sentencia IF no es más que una sentencia condicional, o sea, que si se cumple "x" condición, el programa hace una cosa, y si no se cumple, el programa hace otra. Las sentencias IF se construyen de la siguiente forma: if (condición) { instrucciones... } Dichas instrucciones solo se ejecutarán si se cumple la condición del IF. Lo vamos a entender mejor con el siguiente ejemplo : Pedimos al usuario que introduzca nombre y edad. Y comparamos con el IF, que si su edad es mayor o igual que 18, es mayor de edad. En el ejemplo que he puesto es edad >= 18. Bien, estos operados que he utilizado para la condición, son operadores de comparación. Los operadores de comparación son los siguientes: Operador Uso Devuelve verdadero si > op1 > op2 op1 es mayor que op2 >= op1 >= op2 op1 es mayor o igual que op2
  • 4. < op1 < op2 op1 es menor que op2 <= op1 <= op2 op1 es menor o igual que op2 == op1 == op2 op1 y op2 son iguales != op1 != op2 op1 y op2 son distintos Esos son los distintos operadores que se pueden utilizar para comparar. Este programa solo muestra algo por pantalla si se cumple la condición, en caso de que el usuario no sea mayor de edad, no ocurriría nada. Esto se puede completar de alguna forma, y lo veremos en la siguiente lección. Las condiciones compuestas. Fijaos que a la hora de mostrar por pantalla que el usuario es mayor de edad, hemos utilizado el operador "+", que sirve para concatenar cadenas de caracteres. Estructuras condicionales compuestas Ahora vamos a hacer que, pase lo que pase, el programa muestre algo por pantalla. En el caso anterior, si no se cumplía la condición, no se mostraba nada. ¿Como hacemos esto? Añadiendo al IF la cláusula ELSE. . De esta forma:
  • 5. Ahora, si el usuario introduce una edad menor a 18, el programa ejecuta las instrucciones que haya dentro del ELSE { ... }. Ejercicio nº 1 A lo largo del curso, voy a ir introduciendo ejercicios, para que vayáis poniendo en práctica todo lo aprendido anteriormente. Porque por más teoria y práctica que se explique, cuando realmente se aprende a programar es programando, no hay otra opción más fiable que esa. A continuación, os propongo el enunciado del ejercicio: Escribe un programa con 2 variables, las cuales deben introducir el usuario su valor. Una vez introducidos los valores, pueden ocurrir tres cosas: - Que el número 1 sea mayor que el número 2. - Que el número 2 sea mayor que el número 1. - Que los números sean iguales. El program debe mostrar por pantalla cual de las 3 opciones se ha cumplido. Así tiene que quedar el ejercicio: Solución ejercicio nº 1 ¿Has sido capaz de crear el programa por ti mismo? ¡Muy bien! Aquí tenemos la solución... Este programa lo vamos a dividir en dos secciones; primero la creación de variables y como pedir al usuario que introduzca los valores, y luego las comprobaciones. Creamos las variables y pedimos al usuario que introduzca los números:
  • 6. Ahora, dependiendo de qué valores haya introducido, ocurrirá una cosa u otra. Como decía el enunciado del ejercicio, pueden ocurrir 3 cosas, es decir, que tendremos que hacer 3 sentencias IF. A continuación vemos como queda: Puedes investigar la forma de como hacerlo con IF...ELSE...IF. En cualquier caso, el programa funciona tal y como nos indicaba el enunciado del ejercicio. He puesto la solución más sencilla, pero hay más formas de hacerlo. Bien, ya has hecho tu primer ejercicio en Javascript sin ayuda.