ETIQUETA NOSCRIPT
Esta etiqueta es usada siempre para usuarios que tengan JavaScript bloqueado o desactivado. También es posible que el mismo navegador no dispongan de soporte completo de JS, estas razones de porque desactivan JS es simple; creen que están más seguro sin usarlo.
Entonces aquí viene el problema y es que, si nuestra web está diseñada con muchas funciones de JavaScript, o que nuestra página requiera JS para su correcto funcionamiento.
¿Que hacemos si nuestro usuario no dispone o tiene desactivado JavaScript?
Podemos usar la etiqueta noscript para darle un mensaje o avisarle al usuario que para usar nuestra web debe tener JavaScript para disfrutar 100% la página. También podemos optar que actualice la versión de su navegador por una actual o mejor para usar el soporte JS.
- Ejemplo de noscript ```html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Si desactivamos JavaScript nos saldra el mensaje que hicimos dentro de las etiquetas noscript.
### Estructuras condicionales y niveles de log
---
If que en español es "si" condicional, es para cuando si una función si se cumple entonces se hará o se ejecutará lo que este dentro de lo que hayamos puesto en if.
**Sintaxis**
```js
if(condición){
//Código que se ejecuta si es la condición es cierta.
}
Ejemplo
1
2
3
if (edad >= 13){
document.write("Es admitido a la comunidad")
}
Ahora usemos else que es lo contrario que dirá si la conducción es falsa.
Sintaxis
1
2
3
4
5
if (edad >= 13){
document.write("Es admitido a la comunidad")
} else {
document.write("No es admitido por menor de edad a la comunidad")
}
También podemos usar else if o varias condiciones a la vez.
Sintaxix
1
2
3
4
5
6
7
if (edad >= 13){
document.write("ilegal pre adolescente")
}else if (edad >= 18){
document.write("Legal")
} else {
document.write("niño/a ilegal")
}
Sino se cumple ninguno de estas condiciones a lo último se ejecutará else.
Bucle while.
Esto permitirá repetir sentencias hasta que se cumpla la condición especificada.
Sintaxis
1
2
3
while (condicion){
//codigo
}
Ejemplo.
1
2
3
4
5
6
7
console.log('Empezamos con el bucle');
var número = 0;
while (numero <= 10) {
console.log('Este es un numero: ' + numero);
numero++;
}
console.log('Se termina el blucle');
Primero comencemos con console.log ¿Qué es? esto sirve para mostrar un mensaje o imprimir un texto por consola, y creo que lo demás se puede entender, pero en el caso que no sea así, la variable número dará cada vuelta (numero++) hasta que llegue a 10 incrementándose de 1 a 1, y si quitamos número++ se creara un bucle infinito.
Bucle for
Es similar a while que permite ejecutar una serie de sentencias hasta que la condición que se especificó se considere como false o se cumpla. Es similar al de Java o C
Estructura
1
2
3
for(Valor_de_inicio_; condicion; Valor_final) {
Aquí se ejecutará la sentencia mientras que la condición se cumpla.
}
Ejemplo
1
2
3
for(x=1;x<11;x++) {
console.log(x,'');
}
El valor_de_inicio que sería x=1 se usa normalmente como variable contador y el valor_final que sería x++ se usa para incrementar o actualizar la variable contador x=1 la condición que sería x<11 esta expresión si reconoce como verdadera se ejecuta la sentencias, pero no es obligaría sino opcional ya que se si omite se reconoce como verdadera.
Break
Break abandona inmediatamente el bucle para comenzar otro o abandona el bucle en el que está inmerso.
Estructura:
1
2
3
4
5
while (true) {
if (condicion) {
break;
}
}
Sintaxis.
1
2
break;
break label;
La última qué es break label; label es etiqueta y break puede ser usado con cualquier sentencia etiquetada.
continue.
Es casi igual que break solo que no termina por completo la ejecución del bucle, por ejemplo; en while salta de regreso a la condición y for salta a la expresión actualizada. Continúe también puede usar etiquetas al igual que break, pero en este caso suele usarse con bucles etiquetados de sentencias.
1
2
3
4
5
6
7
8
9
x = 0;
n = 0;
while (x < 5) {
x++;
if (x == 3){
continue;
n += x;
}
}
switch
Switch se usa para tener mayor control sobre las condiciones.
1
2
3
4
5
6
7
8
9
10
11
sintaxis
switch(expresion) {
case y:
instrucciones
break;
case x:
instrucciones
break;
default:
instrucciones
}
El intérprete verifica cada case poniendo un posible valor de la expresión. Y en los paréntesis se pone una expresión a evaluar. Si nada coincide se pone default, una condición predeterminada. También se usa la instrucción break como vemos en la sintaxis ya que al ejecutar un case se cuumple la expresión siguiendo de otros cases
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var x = 1
swich(x) {
case 1:
console.log("uno");
break;
case 20:
console.log("veinte");
break;
case 6:
console.log("seis");
break;
default:
console.log("No existe esta opción");
break;
}
Tipos de logs.
Esto sirve para dar un mensaje informativo en vuestras consolas
1
console.info("soy un info");
Imprime un texto en la consola
1
console.log("soy un log");
Imprime un aviso o warn en consola
1
console.warn("soy un aviso");
Mostrara un mensaje de error
1
console.error("soy un error");
Cada nivel es importante, pero tampoco no abuses de ellos. Recomiendo tener siempre console.error para cuando pase algún error se pueda saltar a la vista de los demás
Ahora veamos cómo podríamos poner colores guais en la consola con CSS de salida entre otras cosas:
Utilizaremos console.log(Se puede sin los niveles de log)
1
console.log("%c[texto]", "");
Seria algo asi:
1
console.log("%cGray hat", "color: red");
Si queremos tachar el texto similar amino
1
console.log("%cGray hat","text-decoration:line-through; color: red");
Con text-decoration:line-through podemos tachar las letras y ponerle un color si queremos. Si queremos ponerle un fondo detras de las letras usamos background:
1
console.log("%cGray hat","background: red; color: blue");
Los colores también pueden ser elegidos sin poner nombres en ingles por ejemplo #FF0000
- Red - #FF0000
- Maroon - #80000
- Yellow - #FFFF00
Agrupaciones
La consola nos permite también hacer agrupaciones de bloques de código con console.grup
Sintaxis
1
console.group(label)
Ejemplo
1
2
3
console.log("Gray hat");
console.grup();
console.log("Nivel 20 en amino");
Si queremos finalizar el grupo pones console.groupEnd() y si queremos ocultar el grupo usamos console.groupCollapsed()
El soporte que tiene en los navegadores (Sino nombro uno es porque no necesita una cierta version para su funcionamiento)
- Safari: 4.0
- Firefox: 4.0
- Internet explorer: 11.
Ejemplo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
console.group("Niveles en amino");
for(var i=0;i<5;i++) {
console.log("Nivel de amino %i",i);
}
console.groupEnd();
console.groupCollapsed("Niveles del 1 al 20");
for(var i=0;i<20;i++) {
console.log("Nivel %i",i);
}
console.groupEnd();
console.clear();
Comandos adicionales
1
console.clear
Conosole clear todo de la consola; mensajes, mensajes de error, scripts, incluyendo los scripts que aparecen en la consola.
1
console.debug
Es muy parecido a console.log. Debug fue adicionada para mejorar la compatibilidad de las webs utilizaban debug()
Nota: Es mejor si usa siempre el .log. También él .log, .debug se pueden usar patrones de sustitución de cadenas:
- % s para un valor de cadena
- % d o % i para un valor entero
- % f para un número de punto flotante
- % o para un hipervínculo de objeto
Ejemplo
1
2
3
4
var name = 'Gray hat';
console.log('Esta comunidad se llama %s.', name);
var name = 'Gray hat';
console.debug('Esta comunidad se llama %s.', name)
-
console.dir: Imprime un elemento en un árbol navegable similar al JSON
-
console.table: Este argumento obligatoriamente; recibe un objeto o array, que es el data, que muestra en forma de tabla dentro de la consola. También tiene un parámetro cual contiene las propiedades que quieres incluir (Es un array de strings)
Ejemplo, del array de strings;
1
console.table(["Standby", "Gray Hat", "Staff"]);
Si en vez de usar console.table usamos console.log ¿Qué pasa?
1
2
3
4
5
6
7
var comunidades = [
{ Nombre: "Psicología", Amino: "PA" },
{ Nombre: "Anime", Amino: "AA" },
{ Nombre: "Gray", Amino: "GH" }
];
console.log(comunidades);
Como vemos la vista que tenemos del árbol no es una lectura muy sencilla ya que tenemos que desplegar manualmente cada objeto, aunque a veces es bueno para la depuración. Bueno ya sabemos la diferencia de table y log al usarse, pero por comodidad me gusta más table, además, de que los datos que se imprime podemos moverlos y ordenar los datos como queramos. También table funciona con objetos.
console.count se loguea en la consola la cantidad de veces que sea llamado count() También recibe solamente un string como paramento, que es el argumento label (Etiqueta), pero es opcional, ya que si se pone una etiqueta muestra un registro de veces que se ha usado count() con la misma etiqueta. En el caso que la etiqueta no se haya puesto hará la misma función, pero registrando el número de veces que es llamado en una línea.
1
2
3
4
5
6
7
8
9
10
11
12
var name = "";
function greet() {
console.count(name);
return "hi " + name;
}
name = "Vavalele";
greet();
name = "Standby";
greet();
greet();
console.count("Standby");
¿Que pasaría si le quitas la etiqueta?
-
profile, profileEnd El argumento profile() hace un perfil CPU en JS con una etiqueta (Opcional) y lo terminamos, o completamos el código llamando profileEnd() deteniendo cada perfil generado
-
time, timeEnd Es algo similar a group y groupEnd, ya que recibe una etiqueta como paramentro. Cuando se llama console.time(label) empieza a correr un tiempo hasta que se detenga la etiqueta, y el tiempo que transcurrió es mostrada en la consola. Es muy exacta la precisión que en el tiempo que alcanza son de submilisegundos.
1
2
3
4
var i, output = "";
console.time("Tiempo");
for (i = 1; i <= 1e6; i++)
console.timeEnd("Tiempo");
Hasta aquí se termina el blog de JavaScript, perdón la demora de subir el curso, pero tuve mucho que hacer estos días y no tuve tiempo ni para mí, en fin… Espero que les haya gustado mucho hare lo posible de traerles el próximo blog temprano [^^]