{"id":4023,"date":"2023-10-10T13:44:22","date_gmt":"2023-10-10T11:44:22","guid":{"rendered":"https:\/\/www.hostingtg.com\/blog\/?p=4023"},"modified":"2026-02-12T12:14:08","modified_gmt":"2026-02-12T11:14:08","slug":"contar-caracteres","status":"publish","type":"post","link":"https:\/\/www.hostingtg.com\/blog\/contar-caracteres\/","title":{"rendered":"Contar caracteres &#8211; Programaci\u00f3n"},"content":{"rendered":"\n<p>En este art\u00edculo sobre contactar caracteres, exploraremos c\u00f3mo hemos creado una herramienta simple pero efectiva para contar caracteres utilizando HTML y JavaScript, y daremos un vistazo a c\u00f3mo estas tecnolog\u00edas trabajan juntas para crear una interactividad en la web.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Herramienta online para contar caracteres<\/h2>\n\n\n\n<script>\nfunction contarCaracteres() {\n    var cantidad = document.getElementById(\"texto\").value.length;\n    document.getElementById(\"contador\").value = cantidad;\n}\n<\/script>\n\n<textarea id=\"texto\" oninput=\"contarCaracteres()\" placeholder=\"Escribe algo...\"><\/textarea>\n<input type=\"text\" id=\"contador\" readonly>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3digo utilizado para crear el contador para contar caracteres<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"es\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n&lt;title&gt;Contador de Caracteres&lt;\/title&gt;\n&lt;script&gt;\nfunction contarCaracteres() {\n    var cantidad = document.getElementById(\"texto\").value.length;\n    document.getElementById(\"contador\").value = cantidad;\n}\n&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;textarea id=\"texto\" oninput=\"contarCaracteres()\" placeholder=\"Escribe algo...\"&gt;&lt;\/textarea&gt;\n&lt;input type=\"text\" id=\"contador\" readonly&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Explicaci\u00f3n del C\u00f3digo:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML:<\/strong>\n<ul class=\"wp-block-list\">\n<li><code>&lt;textarea id=\"texto\" oninput=\"contarCaracteres()\" placeholder=\"Escribe algo...\"&gt;&lt;\/textarea&gt;<\/code>: Este es el cuadro de di\u00e1logo donde los usuarios escribir\u00e1n el texto. Cuando el usuario escribe algo (<code>oninput<\/code>), se llama a la funci\u00f3n <code>contarCaracteres()<\/code>.<\/li>\n\n\n\n<li><code>&lt;input type=\"text\" id=\"contador\" readonly&gt;<\/code>: Este es el cuadro donde se mostrar\u00e1 el n\u00famero de caracteres. Est\u00e1 marcado como <code>readonly<\/code> para que los usuarios no puedan modificar el n\u00famero manualmente.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>JavaScript:<\/strong>\n<ul class=\"wp-block-list\">\n<li>La funci\u00f3n <code>contarCaracteres()<\/code> obtiene la longitud del texto introducido en el cuadro de di\u00e1logo (<code>textarea<\/code>) y actualiza el valor del cuadro (<code>input<\/code>) que muestra el conteo.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Mediante el c\u00f3digo anterior se ha implementado esta herramienta online para contar caracteres<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo Implementarlo en WordPress:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>A\u00f1adir el HTML:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Ve a la p\u00e1gina o entrada donde deseas a\u00f1adir el contador.<\/li>\n\n\n\n<li>Usa el editor de bloques y a\u00f1ade un bloque \u00abHTML personalizado\u00bb.<\/li>\n\n\n\n<li>Pega el c\u00f3digo HTML proporcionado en el bloque.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>A\u00f1adir el JavaScript:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Puedes a\u00f1adir el c\u00f3digo JavaScript directamente dentro de la etiqueta <code>&lt;script&gt;<\/code> en el mismo bloque \u00abHTML personalizado\u00bb en WordPress.<\/li>\n\n\n\n<li>Otra opci\u00f3n es a\u00f1adir el JavaScript en un archivo <code>.js<\/code> y enlazarlo en tu tema de WordPress.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Introducci\u00f3n a HTML y JavaScript<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">HTML: La Estructura de la Web<\/h3>\n\n\n\n\n\n<p><strong>HTML (Hypertext Markup Language)<\/strong> es el lenguaje de marcado est\u00e1ndar para documentos dise\u00f1ados para ser mostrados en un navegador web. Puede ser asistido por tecnolog\u00edas como Cascading Style Sheets (CSS) y scripting languages como JavaScript.<\/p>\n\n\n\n<p>HTML proporciona la estructura b\u00e1sica de las p\u00e1ginas web, que es mejorada y modificada por otras tecnolog\u00edas. Los elementos HTML son los bloques de construcci\u00f3n de las p\u00e1ginas HTML. Estos elementos est\u00e1n representados por etiquetas, como <code>&lt;head&gt;<\/code>, <code>&lt;body&gt;<\/code>, <code>&lt;textarea&gt;<\/code>, etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript: Dando Vida a la Web<\/h3>\n\n\n\n<p><strong>JavaScript<\/strong> es un <a href=\"https:\/\/www.hostingtg.com\/blog\/mejores-sitios-para-aprender-a-programar-gratis\/\" data-type=\"link\" data-id=\"https:\/\/www.hostingtg.com\/blog\/mejores-sitios-para-aprender-a-programar-gratis\/\">lenguaje de programaci\u00f3n<\/a> que permite la interactividad en la web. Se ejecuta en el cliente, lo que significa en el navegador del usuario, permitiendo que las p\u00e1ginas web respondan a las acciones del usuario, actualicen din\u00e1micamente y generalmente se comporten de una manera m\u00e1s r\u00e1pida y fluida.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creando una Herramienta de Conteo de Caracteres<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 1: Dise\u00f1ando la Interfaz con HTML<\/h3>\n\n\n\n<p>Utilizamos <a href=\"https:\/\/www.hostingtg.com\/blog\/que-es-html\/\" data-type=\"link\" data-id=\"https:\/\/www.hostingtg.com\/blog\/que-es-html\/\">HTML<\/a> para crear la interfaz de usuario, que incluye un \u00e1rea de texto para la entrada del usuario y un cuadro de entrada para mostrar el conteo de caracteres. Aqu\u00ed est\u00e1 el c\u00f3digo HTML b\u00e1sico:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;textarea id=\"texto\" oninput=\"contarCaracteres()\" placeholder=\"Escribe algo...\"&gt;&lt;\/textarea&gt;\n&lt;input type=\"text\" id=\"contador\" readonly&gt;\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;textarea&gt;<\/code>: Es el \u00e1rea donde los usuarios escriben el texto. Tiene un <code>id<\/code> de \u00abtexto\u00bb para que pueda ser referenciado por JavaScript.<\/li>\n\n\n\n<li><code>oninput=\"contarCaracteres()\"<\/code>: Este atributo llama a la funci\u00f3n JavaScript cada vez que el usuario escribe algo en el \u00e1rea de texto.<\/li>\n\n\n\n<li><code>&lt;input type=\"text\" id=\"contador\" readonly&gt;<\/code>: Este cuadro muestra el n\u00famero de caracteres. El atributo <code>readonly<\/code> asegura que el usuario no pueda modificar el n\u00famero manualmente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 2: Implementando la L\u00f3gica con JavaScript<\/h3>\n\n\n\n<p><a href=\"https:\/\/es.wikipedia.org\/wiki\/JavaScript\" data-type=\"link\" data-id=\"https:\/\/es.wikipedia.org\/wiki\/JavaScript\" target=\"_blank\" rel=\"noopener\">JavaScript <\/a>se utiliza para contar los caracteres del texto introducido y actualizar el cuadro de conteo en tiempo real. Aqu\u00ed est\u00e1 el c\u00f3digo JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function contarCaracteres() {\n    var cantidad = document.getElementById(\"texto\").value.length;\n    document.getElementById(\"contador\").value = cantidad;\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>document.getElementById(\"texto\").value<\/code>: Obtiene el valor del elemento con el <code>id<\/code> \u00abtexto\u00bb, que es el texto introducido por el usuario.<\/li>\n\n\n\n<li><code>.length<\/code>: Esta propiedad de JavaScript cuenta el n\u00famero de caracteres del texto obtenido.<\/li>\n\n\n\n<li><code>document.getElementById(\"contador\").value = cantidad<\/code>: Establece el valor del elemento con el <code>id<\/code> \u00abcontador\u00bb (el cuadro de conteo) al n\u00famero de caracteres.<\/li>\n<\/ul>\n\n\n\n<p><strong>Conclusi\u00f3n<\/strong><\/p>\n\n\n\n<p>La combinaci\u00f3n de HTML y JavaScript nos permite crear una herramienta interactiva y \u00fatil con relativa facilidad. HTML proporciona la estructura y los elementos visuales, mientras que JavaScript a\u00f1ade la funcionalidad, permitiendo que la p\u00e1gina web responda a las acciones del usuario. Este ejemplo sencillo de una herramienta de conteo de caracteres ilustra c\u00f3mo estas dos tecnolog\u00edas trabajan juntas para crear una experiencia de usuario m\u00e1s din\u00e1mica e interactiva en la web.<\/p>\n\n\n\n<p>Esperamos que este art\u00edculo te haya proporcionado una visi\u00f3n clara y pr\u00e1ctica de c\u00f3mo HTML y JavaScript pueden ser utilizados para crear herramientas interactivas y mejorar la experiencia del usuario en tu sitio web. \u00a1Feliz codificaci\u00f3n!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo sobre contactar caracteres, exploraremos c\u00f3mo hemos creado una herramienta simple pero efectiva para contar caracteres utilizando HTML y JavaScript, y daremos un vistazo a c\u00f3mo estas tecnolog\u00edas trabajan juntas para crear una interactividad en la web.<\/p>\n","protected":false},"author":1,"featured_media":7802,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_aifi_custom_prompt":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[],"class_list":["post-4023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia"],"_links":{"self":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/4023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/comments?post=4023"}],"version-history":[{"count":8,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/4023\/revisions"}],"predecessor-version":[{"id":9056,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/4023\/revisions\/9056"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/media\/7802"}],"wp:attachment":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/media?parent=4023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/categories?post=4023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/tags?post=4023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}