Introducción

En el desarrollo web moderno, los frameworks de trabajo del lado del cliente se han convertido en una pieza clave para la creación de páginas web dinámicas y plataformas de comercio electrónico eficientes. Estos frameworks permiten construir interfaces interactivas, rápidas y escalables que mejoran significativamente la experiencia del usuario.

Gracias a estas herramientas, hoy es posible desarrollar tiendas en línea, catálogos de productos y aplicaciones web completas que funcionan directamente en el navegador, reduciendo tiempos de carga y facilitando el mantenimiento del proyecto.

En este artículo conocerás qué son los frameworks del lado del cliente, por qué son tan importantes en el comercio electrónico y cuáles son los más utilizados en la actualidad.

¿Qué es un framework del lado del cliente?

Un framework del lado del cliente es un conjunto de herramientas y librerías que se ejecutan en el navegador del usuario. Su función principal es gestionar la interfaz gráfica, la interacción con el usuario y la comunicación con servidores mediante APIs.

Frameworks como React, Angular y Vue.js permiten crear interfaces basadas en componentes, reutilizables y altamente mantenibles.

Importancia en la creación de comercio electrónico

En proyectos de e-commerce, estos frameworks permiten:

• Interfaces rápidas y responsivas
• Actualización dinámica del carrito de compras
• Integración con pasarelas de pago
• Consumo de APIs para inventarios y usuarios
• Mejor experiencia de usuario (UX)

Plataformas y servicios como Shopify o integraciones con Stripe suelen complementarse con frameworks del lado del cliente para personalizar la experiencia de compra.

Ventajas de usar frameworks del lado del cliente

• Mayor productividad en el desarrollo
• Reutilización de componentes
• Mejor rendimiento en aplicaciones web
• Escalabilidad para proyectos grandes
• Compatibilidad multiplataforma

Objetivo de aprendizaje

Al finalizar este tema, el estudiante será capaz de identificar y comprender el uso de frameworks del lado del cliente, analizando su aplicación en la creación de páginas web y proyectos de comercio electrónico.

Actividades de aprendizaje

La entrada Frameworks del lado del cliente para crear páginas web y comercio electrónico se publicó primero en Frexus.

Node.js, representa la esencia del desarrollo backend moderno: rápido, eficiente y profundamente conectado con el sistema operativo. Su modelo basado en eventos y el uso de promesas hacen posible construir aplicaciones escalables sin recurrir a frameworks complejos. Comprender ¿cómo Node.js gestiona los eventos y las promesas? no solo mejora tu desempeño técnico, sino que te enseña a pensar como un desarrollador que domina el flujo natural del código.

Este post te brindará una visión clara de cómo Node.js, se apoya en promesas y en un modelo de ejecución basado en eventos, para transformar tareas que antes eran bloqueantes en procesos fluidos, eficientes y controlados.

Objetivo de Aprendizaje

Al finalizar este tema, el estudiante será capaz de:
Comprender el funcionamiento de Node.js nativo, aplicar el uso de promesas y explicar el modelo de ejecución basado en eventos dentro del entorno de desarrollo de aplicaciones backend.

Actividades de Aprendizaje

Te invitamos a reforzar tu aprendizaje con las siguientes experiencias:

1. Lectura del caso de estudio:
   “Entre el eco del código y la voz del terminal” — una historia que muestra el poder de volver al código esencial. Después de leer el caso de estudio da respuesta las siguientes cuestiones:
   • ¿Qué tan consciente eres del funcionamiento interno de las herramientas que usas a diario en desarrollo?
   • ¿En qué momento la comodidad tecnológica puede volverse una forma de dependencia?
   • ¿Por qué es importante entender los fundamentos de un lenguaje antes de sus frameworks?
   • ¿Qué enseñanza personal deja trabajar con Node.js “puro” sin apoyarse en librerías externas?
   • ¿De qué manera el uso de readline refleja el concepto de “escuchar” al usuario dentro del desarrollo de software?
   • ¿Cómo podrías aplicar este enfoque de simplicidad y control en tus próximos proyectos?
2. Escucha el pódcast:
   Historias que te retan — un episodio donde reflexionamos sobre cómo escuchar al código puede cambiar la forma en que programamos.
3. Actividad práctica:
   Desarrolla un pequeño programa CLI en Node.js que pida datos (un número) del usuario usando readline y calcule si es par o impar un resultado.
   Luego Reflexiona cómo las promesas podrían mejorar su fluidez y manejo asincrónico.
4. Actividades de reforzamiento:
   • Sopa de letras: repasa los conceptos clave del tema.
   • Crucigrama: pon a prueba tu comprensión del modelo de eventos y las promesas.

Entender Node.js desde su base nativa te devuelve el control sobre lo que escribes.
Cada promesa resuelta, cada evento manejado y cada línea de código en la terminal es una oportunidad de aprendizaje.
El dominio no está en usar más herramientas, sino en conocer a fondo las que ya tienes.

La entrada Node.js las Promesas, los Eventos y el Poder del Código Asíncrono se publicó primero en Frexus.

Node.js se ha convertido en una de las tecnologías más utilizadas en el desarrollo web moderno. Gracias a su capacidad de ejecutar JavaScript en el lado del servidor, ofrece una alternativa ligera, rápida y escalable para crear aplicaciones web y servicios backend.

En este post te presentamos una breve introducción a Node.js, sus características principales, ventajas y desventajas, acompañada de actividades de aprendizaje que reforzarán tu comprensión.

Objetivo de aprendizaje

Al finalizar esta lectura, el estudiante será capaz de:

• Identificar las principales características de Node.js.
• Reconocer sus ventajas y desventajas en proyectos de desarrollo.
• Aplicar sus conocimientos en actividades prácticas y de reforzamiento.

Características de Node.js

• Permite ejecutar JavaScript en el servidor.
• Basado en el motor V8 de Google Chrome.
• Arquitectura orientada a eventos.
• Entrada/salida asíncrona y no bloqueante.
• Gran ecosistema de módulos con npm.

Ventajas de Node.js

• Alto rendimiento gracias a su modelo no bloqueante.
• Escalabilidad para aplicaciones en tiempo real.
• Amplia comunidad y soporte.
• Reutilización del lenguaje JavaScript tanto en frontend como en backend.

Desventajas de Node.js

• No es la mejor opción para aplicaciones que requieren gran poder de cómputo (ej. cálculos intensivos).
• La asincronía puede dificultar la curva de aprendizaje.
• Ecosistema muy dinámico, con librerías que pueden quedar obsoletas rápidamente.

actividades de aprendizaje

Ahora que conoces lo esencial de Node.js, te invitamos a:

1. Leer el recurso: node.js después de leerlo responde las siguientes preguntas:
   • ¿Cuál es la principal ventaja de Node.js respecto al manejo de conexiones simultáneas?
   • ¿Qué es NPM y por qué es importante para los desarrolladores que usan Node.js?
   • ¿Cómo influye la arquitectura de Node.js en la creación de aplicaciones ligeras?
   • ¿Cuáles son las principales empresas que utilizan Node.js en sus sistemas?
   • ¿Qué desafíos presenta el uso de callbacks en Node.js?
   • ¿Por qué Node.js es ideal para aplicaciones en tiempo real?
2. Para realizar la actividad práctica, debes de leer primero los siguientes recursos:
   • Tipos de datos en node.js
   • Operadores en node.js
   • Variables en node.js
   • Constantes en node.js
   • Solicitar datos en node.js
3. Completar las actividades de reforzamiento: una sopa de letras y un crucigrama diseñados con los conceptos clave de este tema.

Estas actividades fortalecerán tu comprensión y te ayudarán a interiorizar mejor los conceptos.

La entrada Introducción a Node.js se publicó primero en Frexus.

Si estás comenzando en el mundo del desarrollo móvil, React Native con Expo es una de las mejores formas de dar tus primeros pasos. Gracias a su facilidad de uso y a la rapidez para crear aplicaciones, podrás aprender los fundamentos sin complicaciones.

En este post encontrarás 12 ejercicios básicos con React Native y Expo que te llevarán desde mostrar un simple texto en pantalla hasta construir una calculadora funcional. La ruta está pensada para principiantes y cada actividad incluye código listo para probar en tu proyecto.

Al terminar este recorrido tendrás una base sólida para desarrollar aplicaciones móviles multiplataforma y continuar con proyectos más avanzados.

Ejercicio 1. Hola Mundo

• Objetivo: Mostrar un texto en pantalla.
• Tarea: Crear un proyecto con npx create-expo-app y mostrar Hello World!.
• Concepto: Text, View.

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Hello World!</Text>
    </View>
  );
}

Ejercicio 2. Estilos

• Objetivo: Personalizar vistas y textos.
• Tarea: Cambiar color de fondo, tamaño de letra y alinear texto.
• Concepto: StyleSheet.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Texto con estilos</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex:1, justifyContent:'center', alignItems:'center', backgroundColor:'#e0f7fa' },
  text: { fontSize:24, fontWeight:'bold', color:'#00796b' }
});

Ejercicio 3. Botón Interactivo

• Objetivo: Manejo de eventos.
• Tarea: Crear un botón que cambie el texto al hacer clic.
• Concepto: Button, useState.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function App() {
  const [mensaje, setMensaje] = useState("Texto inicial");

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>{mensaje}</Text>
      <Button title="Cambiar Texto" onPress={() => setMensaje("¡Texto cambiado!")} />
    </View>
  );
}

Ejercicio 4. Contador Simple

• Objetivo: Estados dinámicos.
• Tarea: Dos botones y que actualicen un contador.
• Concepto: useState.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function App() {
  const [contador, setContador] = useState(0);

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text style={{ fontSize:30 }}>{contador}</Text>
      <Button title="➕" onPress={() => setContador(contador+1)} />
      <Button title="➖" onPress={() => setContador(contador-1)} />
    </View>
  );
}

Ejercicio 5. Input de Texto (Saludo)

• Objetivo: Capturar texto.
• Tarea: Escribir el nombre en un TextInput y mostrar Hola [nombre].
• Concepto: TextInput, binding.

import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';

export default function App() {
  const [nombre, setNombre] = useState("");

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <TextInput 
        placeholder="Escribe tu nombre" 
        style={{ borderWidth:1, padding:8, marginBottom:10, width:200 }}
        onChangeText={setNombre}
      />
      <Text>Hola {nombre}</Text>
    </View>
  );
}

Ejercicio 6. Lista de Elementos

• Objetivo: Renderizar arrays.
• Tarea: Mostrar frutas/tareas en una lista.
• Concepto: FlatList.

import React from 'react';
import { View, Text, FlatList } from 'react-native';

export default function App() {
  const frutas = ["Manzana", "Plátano", "Naranja", "Uvas"];

  return (
    <View style={{ flex:1, padding:20 }}>
      <FlatList 
        data={frutas}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text style={{ fontSize:20, margin:5 }}>{item}</Text>}
      />
    </View>
  );
}

Ejercicio 7. Navegación

• Objetivo: Moverse entre pantallas.
• Tarea: Pantallas: Inicio y Perfil.
• Concepto: React Navigation.
• Requiere: npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Pantalla Inicio</Text>
      <Button title="Ir a Perfil" onPress={() => navigation.navigate('Perfil')} />
    </View>
  );
}

function PerfilScreen() {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Pantalla Perfil</Text>
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Inicio" component={HomeScreen} />
        <Stack.Screen name="Perfil" component={PerfilScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Ejercicio 8. Uso de Íconos

• Objetivo: Mejorar UI.
• Tarea: Colocar íconos en botones o listas.
• Concepto: @expo/vector-icons.

import React from 'react';
import { View, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

export default function App() {
  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <Text>Icono de React Native:</Text>
      <Ionicons name="logo-react" size={64} color="blue" />
    </View>
  );
}

Ejercicio 10. Consumir API

• Objetivo: Traer datos externos.
• Tarea: Mostrar títulos desde https://jsonplaceholder.typicode.com/posts.
• Concepto: useEffect, fetch.

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';

export default function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(res => res.json())
      .then(data => setPosts(data.slice(0,10))); // solo 10
  }, []);

  return (
    <View style={{ flex:1, padding:20 }}>
      <FlatList 
        data={posts}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => <Text style={{ margin:5 }}>{item.title}</Text>}
      />
    </View>
  );
}

Ejercicio 11. Ejercicio Extra: Suma de Dos Números

• Objetivo: Practicar inputs + lógica básica.
• Tarea: Dos TextInput donde se ingresen números y un botón que muestre la suma.
• Concepto: Manejo de TextInput con valores numéricos, conversión parseInt.

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default function App() {
  const [num1, setNum1] = useState("");
  const [num2, setNum2] = useState("");
  const [resultado, setResultado] = useState(null);

  const sumar = () => {
    setResultado(parseInt(num1) + parseInt(num2));
  };

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <TextInput placeholder="Número 1" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNum1}/>
      <TextInput placeholder="Número 2" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNum2}/>
      <Button title="Sumar" onPress={sumar} />
      {resultado !== null && <Text style={{ marginTop:10 }}>Resultado: {resultado}</Text>}
    </View>
  );
}

Ejercicio 12. Número Par o Impar

• Objetivo: Uso de condicionales.
• Tarea: Ingresar un número en TextInput y mostrar si es par o impar.
• Concepto: Operador módulo %, condicionales.

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default function App() {
  const [numero, setNumero] = useState("");
  const [resultado, setResultado] = useState("");

  const verificar = () => {
    const n = parseInt(numero);
    if (isNaN(n)) {
      setResultado("Ingresa un número válido");
    } else {
      setResultado(n % 2 === 0 ? "Es par" : "Es impar");
    }
  };

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <TextInput placeholder="Escribe un número" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNumero}/>
      <Button title="Verificar" onPress={verificar} />
      <Text style={{ marginTop:10 }}>{resultado}</Text>
    </View>
  );
}

Ejercicio 13. Calculadora Básica

• Objetivo: Combinar inputs + operaciones.
• Tarea: Dos TextInput y botones para sumar, restar, multiplicar y dividir. Mostrar el resultado.
• Concepto: Manejo de múltiples eventos y estados.

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default function App() {
  const [num1, setNum1] = useState("");
  const [num2, setNum2] = useState("");
  const [resultado, setResultado] = useState(null);

  const calcular = (op) => {
    const n1 = parseFloat(num1);
    const n2 = parseFloat(num2);
    if (isNaN(n1) || isNaN(n2)) {
      setResultado("Error: Ingresa números válidos");
      return;
    }
    if (op === "sumar") setResultado(n1 + n2);
    if (op === "restar") setResultado(n1 - n2);
    if (op === "multiplicar") setResultado(n1 * n2);
    if (op === "dividir") setResultado(n2 !== 0 ? n1 / n2 : "No se puede dividir entre 0");
  };

  return (
    <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}>
      <TextInput placeholder="Número 1" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNum1}/>
      <TextInput placeholder="Número 2" keyboardType="numeric" style={{ borderWidth:1, padding:8, margin:5, width:200 }} onChangeText={setNum2}/>
      
      <View style={{ flexDirection:'row', marginTop:10 }}>
        <Button title="➕" onPress={() => calcular("sumar")} />
        <Button title="➖" onPress={() => calcular("restar")} />
        <Button title="✖" onPress={() => calcular("multiplicar")} />
        <Button title="➗" onPress={() => calcular("dividir")} />
      </View>

      {resultado !== null && <Text style={{ marginTop:10 }}>Resultado: {resultado}</Text>}
    </View>
  );
}

La entrada Ejercicios básico con React Native – Expo se publicó primero en Frexus.

¿Sabías que un sitio web bonito no siempre garantiza una buena experiencia de usuario? La diferencia entre una página que solo se ve bien y una que realmente funciona está en su dinamismo. En este post, conocerás una historia real de superación tecnológica, aprenderás a manipular el DOM con JavaScript y a presentar información de forma asíncrona. Además, podrás reforzar tus conocimientos con actividades interactivas: una práctica guiada, una sopa de letras y un crucigrama.

1. Lee o escucha el caso de estudio

Conoce la historia de Daniela, una emprendedora que vivió en carne propia los retos de tener un sitio web estático en el momento más importante de su negocio. Su transformación digital comenzó con conceptos como manipulación del DOM, eventos dinámicos y uso de Fetch API.

Pulsa aquí para leer el caso completo
Escuchar el episodio en formato podcast:

Preguntas para reflexionar después de leer o escuchar el caso de estudio:

1. ¿Qué importancia tiene la manipulación del DOM para la experiencia del usuario?
2. ¿En qué momentos específicos de una tienda en línea puede fallar la falta de presentación asíncrona?
3. ¿Cómo puede un diseño visualmente atractivo volverse contraproducente si no es funcional?
4. ¿Qué aprendizajes técnicos y emocionales te deja la historia de Daniela?
5. ¿Qué herramientas usarías tú para crear elementos dinámicos en una web real?
6. ¿Qué hubieras hecho diferente si fueras Daniela al enfrentar la caída del sitio?

2. Realiza la actividad práctica paso a paso

¿Listo para pasar de la teoría a la acción? Te guiamos en la construcción de una tienda web dinámica desde cero. Cargarás productos desde un archivo externo, agregarás interactividad con JavaScript y mejorarás la experiencia del usuario con elementos visuales que reaccionan en tiempo real. Ideal para estudiantes de desarrollo web o autodidactas.

Pulsa aquí para acceder a un ejemplo base en el desarrollo de la actividad

Pulsa aquí para acceder a la actividad

Preguntas para reflexionar después de realizar la actividad

• ¿Qué fue lo más retador de hacer dinámica una web?
• ¿Qué aprendiste sobre la importancia del DOM en la experiencia del usuario?
• ¿Cómo te gustaría escalar esta tienda en un proyecto más grande?

3. Refuerza lo aprendido con una sopa de letras y un crucigrama

Aprender también puede ser divertido. Hemos creado dos actividades interactivas para ayudarte a fijar los conceptos clave:

Sopa de Letras: Encuentra los conceptos esenciales

• Pulsa aquí para acceder a la sopa de letras

Crucigrama: Resuelve pistas relacionadas con desarrollo dinámico

• Pulsa aquí para acceder al crucigrama

La entrada Interacción dinámica con DOM y JavaScript se publicó primero en Frexus.

1. En un foro de animación de javascript se ha colocado el siguiente desafío, que consiste en: Animar el movimiento de un objeto, se debería de crea un objeto en una página HTML y utilizar JavaScript para moverlo hacia la izquierda, derecha, arriba o abajo. Crea lo propio para resolver este desafío.
2. En un hackaton dedicado a la animación con javascript se ha publicado un reto, en el que se debe de animar el cambio de tamaño de un objeto, para ello se ha sugerido utilizar JavaScript para animar el cambio de tamaño de un objeto en una página HTML, puede ser aumentando o disminuyendo su tamaño. Crea lo propio para solventar este reto.
3. Un creador de animaciones se ha topado con una dificultad, la cual consiste en animar el cambio de color de un objeto, ha leído que puede utilizar JavaScript para animar el cambio de color de un objeto en una página HTML, puede que el cambiando sea gradualmente su color de fondo o el color del texto. Crea los archivos pertinentes para ayudar al creador de animaciones.
4. Fabrixo, ha entrado al mundo de animaciones web y se le ha encomendado una tarea que consiste en, animar la opacidad de un objeto, le han recomendado utilizar JavaScript para animar la opacidad de un objeto en una página HTML, ya sea haciendo que se vuelva más transparente o más opaco. Crea los archivos adecuados para ayudar a Frabixo.
5. Perry, ha sido contratado por una diseñadora web y le ha encargado crear una animación de desvanecimiento. Le sugirieron utilizar JavaScript para crear una animación en la que un objeto desaparece gradualmente de la pantalla. Crea los archivos que sean necesario para ayudar a Perry.
6. Mike, ha empezado a hacer su Servicio Social en una empresa que se dedica a la creación de sitios web, tiene la encomienda de crear una animación de rebote, se ha recomendado que utilice JavaScript para crear la animación en la que un objeto rebota de un lado a otro de la pantalla, como una pelota que rebota en una pared. Crea los ficheros necesarios para ayudar a Mike.

Estos ejercicios permite acercar al lector a la animación básica con javascript.

La entrada Ejercicios básicos de animación con JavaScript se publicó primero en Frexus.

1. En la industria del calzado la empresa shoop S.A. de C.V. ha generado el requerimiento de desarrollo de software para la validación de un campo vacío en un formulario. Crea un script que permita solventar esté requerimiento.
2. La empresa Dori S.A de C.V, se ha topado que su formulario de cambiar contraseña no cuenta los caracteres mínimos que debe de tener. Crea un script que permita validar este campo la longitud mínima para el campo de contraseña es de ocho caractres.
3. En una empresa de desarrollo, el encargado de QA ha detectado que el formulario de contacto no esta validando el campo email, cuente con un formato adecuado. Cree un formulario que permita solventar está detección del área de QA.
4. En un foro de programadores se ha colocado un problema a resolver, el cuál requiere validar el usuario es mayor de edad, a partir del dato que introduce. Cree un script que permita hacer esta validación.
5. En un hackatoon se ha publicado un desafío, que consiste en validar que al menos una opción de los checkbox esté seleccionada. Crea un script que permita resolver esté desafío.
6. El programador jr. de la empresa Acostas S.A. de C.V. tiene la encomienda de validar que dos campos de contraseña sean exactamente iguales. Crea un script que permita resolver esta encomienda.

Estos ejercicios son problemáticas que suelen presentarse en un día a día de la validación de programación. Se espera que les permita familiarizarse.

La entrada Ejercicios básicos de formularios con Java Script se publicó primero en Frexus.

1. La empresa de diseño design S.A. de C.V requieren una expresión regular que le permita validar si un correo electrónico dado es valido o no. Crea un script donde se reciba el e-mail y muestre como resultado si es valido o no.
2. En un foro de programación ha surgido la duda de como se debería de validar si un conjunto de caracteres es un número de teléfono, teniendo presente que no se incluye el número de área y se tiene una longitud de 10 caracteres. Crea un script que tenga como dato de entrada una cadena de de caracteres de una longitud de 10 y muestre como resultado si es número de teléfono valido.
3. Un programador a publicado un desafío, que consiste en encontrar el número de veces que se encuentra una palabra en una frase, se tiene la siguiente oración de ejemplo: ‘Este es un ejemplo de texto con ejemplo de palabra repetida‘ la palabra a buscar es “ejemplo“. Crea un script que permita resolver este desafío.
4. En un hackaton se ha publicado un reto, el cual consiste en buscar un conjunto de caracteres dentro de una oración y reemplazarlo por otro patrón. La frase de ejemplo es: “Lorem ipsum dolor sit amet, consectetur adipiscing elit“, la palabra que se debe de buscar es: “/ipsum/” y por la que se debe de reemplazar es: “dolor“. Crea un script que permita resolver este reto.
5. La empresa developer S.A. de C.V. requiere que se pueda validar si una contraseña dada contiene un letra mayúscula, tiene un número y una letra minúscula. Crea un script donde se utilice una expresión regular para solventar este requerimiento.
6. La empresa extaction S.A. de C.V. requiere que se peda extraer de un una cadena de caracteres los números que contengan. Crea un script donde se pueda resolver este requisitos, mediante el uso de expresiones regulares.

Se espera que este conjuntos de ejercicios los familiarice con el uso de expresiones regulares y sus diferentes aplicaciones que pueda darse.

La entrada Ejercicios de expresiones regulares en java script se publicó primero en Frexus.

1. En una empresa de análisis de datos se requiere la creación de un objeto que lleve el nombre de persona, donde tenga las propiedades: nombre, edad y correo electrónico. Mostrando en el navegador el objeto completo. Crea un script que permita resolver está cuestión.
2. Un diseñador se ha topado con el problema de que requiere crear una cadena de caracteres donde se encuentre el nombre y apellidos de un usuario, para posteriormente pueda mostrarla en el navegador. Realiza un script que permita llevar acabo la solución de este problema.
3. El programador de un sistema para el control de una veterinaria, no sabe como crear un objeto que se lleve el nombre de mascota y tenga las propiedades: nombre, edad y tipo de animal. Se requiere que sea mostrado en el navegador. Crea un script que permita resolver esto.
4. Un programador jr en su aprendizaje del lenguaje js, quiere crear una cadena de caracteres que tenga la palabras hola y mundo, donde sean concatenadas y separadas por un espacio en blanco , se muestre en el navegador. Cree un script que permita solucionar este problema.
5. El programador de una biblioteca requiere crear un objeto llamado libro donde tenga las propiedades título, autor y fecha de publicación, y desea mostrarlo en el navegador. Para poder ayudarle, crea un script que permita hacerlo.
6. La empresa programas S.A. de C.V. requiere una variable que tenta el nombre date y contenga el valor de la fecha actual, para después sea mostrada en el navegador. Crea un script que pueda solventar la necesidad.

Estos pequeños ejercicios permiten acercar al lector (si los resuelve) al manejo de los conceptos de objetos, cadena de caracteres y fechas.

La entrada Ejercicios para el manejo de objetos, fechas y cadenas en javascript se publicó primero en Frexus.

1. En una empresa de desarrollo de software se cuenta con un pequeño detalle el cual consiste en que se deba de hacer uso de la estructura de areglo en java script y contener los números del 1 al 10 y se deberán de mostrar. Cree un script en el lenguaje js que permita solucionar este detalle.
2. Un diseñador de sitios web cuenta con un arreglo en java script que tiene el nombre de colores con los siguientes valores: rojo, azul, verde, amarillo y naranja. Crea un script en js que permita se visualice en el navegador el tercer elemento del arreglo.
3. Un programador jr cuenta con un arreglo al que a asignado el nombre de números, que tiene los siguientes valores: 1, 2, 3, 4 y 5, debe de crear un nuevo arreglo donde contenga los números del arreglo números multiplicados por dos y mostrar el nuevo arreglo en el navegador. Crea un script que permita solventar está necesidad.
4. Un diseñador web, al crearle un sitio web a frutería verduras siempre, ha colocado en un arreglo con el nombre frutas, los valores manzana, pera, banana, naranja y kiwi; debe de mostrar la cantidad de elementos que tiene el arreglo en el navegador. Crea un script que permita realizar esa muestra en el navegador.
5. Un alumno de programación ha creado un arreglo con el nombre números, el cual contiene los siguientes valores: 5, 10, 15, 20 y 25, pero quiere crear un arreglo que contenga solo los números pares que lleve el nombre de pares y sean mostrado en el navegador. Crea un script que permita realizar una solución.
6. En una clase de programación se ha declarado un arreglo con lleva el identificador nombre, donde se tiene los valores: Ana, Juan, María, Pedro y Luis. Y se necesita ordenarlo alfabéticamente y mostrarlo en el navegador. Crea un script que lo resuelva.

Esperando que estos pequeños ejercicios te permitan acercarte al lenguaje de programación java script.

La entrada Ejercicios básicos para el manejo de arreglos con java script se publicó primero en Frexus.