Cosas super básicas que debes aprender. Primero comencemos con los comentarios como en otros lenguajes de programación deben empezar con el símbolo “//” sólo si se ocupa una línea en el caso de ocupar varias se usa /*Comentario*/
Las líneas de código se terminan con “;” JavaScript es Case-Sensitive, sensible a mayúsculas y minúsculas, con esto me refiero a que la declaración “Mí” no es igual a “mi” Las llaves {( Y )} sirven o permiten agrupar código
¿Que es una variable según wikipedia?
En programación, una variable está formada por un espacio enorme en el sistema de almacenaje y un nombre que está asociado a ese espacio. Ese espacio contiene resto de información conocida o desconocida, es decir un valor.
¿Que es una variable según yo?
En pocas palabras una variable tiene un determinado nombre que permite almacenar valores de datos en caso de que queramos declarar una variable en JavaScript debemos usar la palabra clave “var”
Cadenas de texto:
Se utilizan para almacenar letras, caracteres de texto. Para asignar el valor a la variable, se cierra entre comillas simples o dobles, “Cadena de texto”,’variable’ o “Cadena de texto o una ‘variable’ de código” Una variable que no tenga contenido, se le considera que es un valor null. El valor null es cuando representa un valor nulo o vacío siendo uno de los valores primitivos de JavaScript
Valores numéricos: 1, -100, 1.6, 2.0E2
valores booleanos: true o false
document.write: Esto imprime el texto especificando en la página, por ejemplo, para imprimir un texto literalmente se escribe con comillas simples y con paréntesis document.write('Hola Mundo!'); Esto imprimirá en la página un mensaje diciendo “Hola mundo!”
También es utilizado para imprimir variables, ejemplo:
1
2
var valor1 = "Hola mundo";
document.write(valor1);
Recuerda no ponerlo asi: document.write(‘valor1’) , porque se imprimirá también el nombre de la variable.
También podemos combinar cadenas de textos y variables con el signo + (Aquí si aplicaremos las comillas simples)
1
2
3
var valor1 = "Standby";
var valor2 = "Gray hat";
document.write ('<p>valor1: ' + valor1 + '<br>valor2: ' + valor2 + '</p>');
Nos mostrará los nombres de las variables, al igual que los valores
1
2
valor1: Standby
valor2: Gray hat
Código completo:
1
2
3
4
5
6
7
8
9
<html>
<body>
<script>
var valor1 = "Standby";
var valor2 = "Gray hat";
document.write('<p>valor1: ' + valor1 + '<br>valor2: ' + valor2 + '</p>'); /*Usamos el signo + para combinar las variables y las comillas simples para imprimir*/
</script>
</body>
</html>
Variables locales y globales
Este tipo de variables luego las veremos, pero es necesario tenerlas presentes ahora o al menos sus terminos para hacerlo mas breve una variable local es la que solamente se puede acceder desde una funcion o instruccion de bloque, por ejemplo, si declaro una variable dentro del body en una funcion no podremos acceder a esta variable si queremos usarla en otra función o en otro funcionamiento de nuestro script en JavaScript, por ejemplo!
1
2
3
4
5
6
7
8
function example() {
var variable_global=2;
console.log(variable_global)
}
function variable_global(){
console.log(variable_global=2)
}
Si tratamos de usar la primera función nnos dara en la consola 2, pero si usamos la función variable_global nos dara error porque no puede acceder a una variable que fue declara en otra función, para solucionar esto podemos usar globalThis.variable_global = 2 y ya podremos usarla en cualquier otra función, tambien puede usar window ya que todas las variables globales que se declaran por var son propiedad de window
¿Qué es un operador?
Operador de asignación “ = “: Es para asignar valores como en los ejemplos que hemos visto arriba al igual que el + que es para agregar.
También podemos usar estos dos operadores para la aritmética, pero antes debemos conocer sus símbolos.
Operador Símbolo
- suma + suma dos números
- resta - resta dos números
- multiplicación * multiplica dos números
- división / resultado de la división de dos números
- modulo % residuo de la división
- incremento. ++ incrementa en 1. Es lo mismo que decir: variable + 1.
- decremento – decrementa en 1. Es lo mismo que decir: variable - 1.
Uso de operadores
1
2
3
4
5
6
7
8
9
10
var x = 4;
var y = 5;
var r = x + y; /* r sería 9 ya que X es igual a 4 y, Y es igual a 5 sumando los daría 9 y así con los demás. */
r++; // r sería 10.
y--; // y sería 4.
r = y * x; // r sería 20.
r = x / y; // r sería 1.
r = x % y; // r sería 0.**
Ejemplo de operadores:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Variables</title>
</head>
<body>
<h1>Ejemplo de variables</h1>
<script type="text/javascript">
var a = 3;
var b = 4;
document.write(a + b);
</script>
</body>
</html>
También si vas a usar números enteros se pone los números normales, por ejemplo, 10, 1 y así. Los decimales se ponen 100.000 con un “.” (punto) y no una “,” (coma)
Operadores lógicos
&& - AND(Y lógico)|| - OR(O lógico)! - NOT(NO lógico)
Operadores de comparación
==Operador para saber si es Igual!=Distinto>=Mayor o igual<=Menor o igual>Mayor<Menor
Operadores de asignación
+=Suma y asignación-=Resta y asignación*=Multiplicación y asignación/=División y asignación%=Resto y asignación
Mensajes:
Los mensajes ya los vimos en la anterior clase ya lo habías hecho que nos salte una ventana igual a está
Esto sirve para mostrarle información que sea por ejemplo, importante o que resuelva una duda. Esto solo deja la posibilidad de aceptarle y está sería la sintaxis para que se acuerden de lo que estoy hablando;
1
alert("Hola mundo");
¿Que son los mensajes? ¿Solo existe el mensaje alert?
No, no solo existe el mensaje alert. Los mensajes se tratan de ventanas que se lanzan a los usuarios desde el código. Todos los mensajes se obtienen a través del objeto Windows, que veremos más adelante.
Prompt
La función prompt en este caso abre una ventana al igual que alert, pero está pide entrar datos al usuario, siendo también un método del objeto Windows.
Sintaxis
1
prompt("Texto_descriptivo","Texto_por_defecto")
Ejemplo de usó de prompt
1
respuesta=prompt("¿Cómo te llamas","standby");
El descriptivo es que se mostrará en pantalla pidiendo información el defecto es opcional si el usuario no quiere escribí hay o rellenarlo
Usemos un ejemplo con la mayoría de cosas que hemos visto hoy.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de variables y prompt</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var nombre;
var edad;
nombre=prompt('Ingrese su nombre:','');
edad=prompt('Ingrese su edad:','');
document.write('¿Como estás?');
document.write(nombre);
document.write(' aque puedo adivinar tu edad, tienes');
document.write(edad);
document.write()' años');
</script>
</body>
</html>
Cómo vieron utilicé la función con variables primero le pusimos la variable nombre=prompt('texto_a_mostrar', 'texto_por_defecto') y utilizando document.write como en los otros ejemplos. La función que puse en el código de <meta charset="UTF-8"> nos sirve para que el navegador reconozca la codificación de carácteres utilizada o se vería así:
Ventana
En la función de prompt hay dos opciones como vemos una de cancelar y otra aceptar si el usuario le da en todas cancelar saldrá como respuesta; null.
Confirmar
Es como los otros, pero en este es para confirmar teniendo dos botones Aceptar y cancelar
1
confirm("texto_del_mensaje");