¿Qué es JavaScript y cómo funciona? Con algo de código

yo me convertí lenguaje de programación JavaScript Un componente esencial de Desarrollo web moderno. Este poderoso lenguaje se ha convertido en una herramienta esencial para cualquier Desarrollador web.

contener JavaScript Tiene características especiales que lo hacen diferente de los lenguajes de programación tradicionales. Repasaremos qué es, cómo funciona y qué puedes hacer con este bocado. Empecemos.

¿Qué es JavaScript y cómo funciona? Con algo de código - Aprendizaje

¿Qué es JavaScript?

JavaScript Es un lenguaje de programación para la web. donde es un lenguaje interpretado (un lenguaje de programación interpretado es un lenguaje de programación en el que los programas escritos no se traducen al lenguaje máquina del procesador, sino que deben interpretarse mediante un programa llamado Explicador para ejecutar los programas escritos en él), lo que significa que no necesita un compilador para compilar su código como C o C++. El código JavaScript se ejecuta directamente en un navegador web.

JavaScript se utiliza para crear páginas web interactivas y para proporcionar aplicaciones web, incluidos juegos; Es utilizado por la mayoría de los sitios web y es compatible con casi todos los navegadores sin necesidad de complementos de terceros.

La última versión del lenguaje es ECMAScript 2018 lanzada en junio de 2018.

JavaScript funciona con HTML y CSS para crear aplicaciones web o páginas web. JavaScript es compatible con la mayoría de los navegadores web modernos como Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. La mayoría de los navegadores móviles para Android y iPhone ahora también admiten JavaScript.

JavaScript controla los elementos dinámicos de las páginas web. Funciona en navegadores web y, más recientemente, también en servidores web. Las API también son compatibles con JavaScript, lo que le brinda más funcionalidad.

Comprender todas las formas en que funciona JavaScript es un poco más fácil cuando comprende cómo funciona la programación web, así que aprendamos más.

Crear bloques de aplicaciones web

Hay tres componentes que le permiten crear sitios web y aplicaciones: lenguaje de marcado de hipertexto (HTML), hojas de estilo en cascada (CSS) y JavaScript. Cada uno tiene un rol en la creación de una aplicación web.

  1. HTML Es un lenguaje destinado a crear la estructura de una página web. Todos los párrafos, secciones, imágenes, encabezados y texto están escritos en HTML. El contenido aparece en el sitio en el orden en que está escrito en HTML.
  2. control CO en estilo, apariencia y aspectos adicionales del diseño. CSS se utiliza para crear un diseño de sitio web a partir de colores, fuentes, columnas, bordes, etc. Este lenguaje lleva el sitio de elementos de texto sin formato a diseños coloridos.
  3. El tercer elemento es JavaScript. Tanto HTML como CSS crean la estructura, pero no hace nada desde ahí. JavaScript crea una actividad dinámica en su aplicación. Los scripts de JavaScript son los que controlan qué funciones cuando se hace clic en los botones, cómo autenticar formularios de contraseña y cómo controlar los argumentos.

Las tres partes funcionan en armonía entre sí para crear aplicaciones completas. Sería bueno saber más sobre HTML y CSS Si no eres Completamente satisfecho contigo mismo.

¿Cómo funciona JavaScript?

Antes de escribir en JavaScript, es importante saber cómo funciona este lenguaje de programación bajo el capó. Hay dos partes importantes que debe saber: cómo funciona el navegador web y el modelo de objeto del documento (DOM).

¿Qué es JavaScript y cómo funciona? Con algo de código - Aprendizaje

El navegador web carga la página web, analiza el HTML y crea lo que se conoce como Modelo de objetos de documento (DOM) a partir de los contenidos. El DOM muestra una representación en vivo de la página web en su código JavaScript.

El navegador tendrá entonces todo lo relacionado con el HTML, como imágenes y archivos CSS. La información de CSS proviene de un analizador de CSS.

El DOM reúne HTML y CSS para crear primero la página web. Luego, el iniciador de JavaScript de los navegadores carga los archivos JavaScript y los códigos incrustados, pero no ejecuta el código de inmediato. Espera a que HTML y CSS terminen de cargarse.

Una vez que haga esto, los códigos JavaScript se ejecutarán en el orden en que fueron escritos. Esto da como resultado que el código JavaScript actualice el DOM y lo procese el navegador.

El orden aquí es importante. Si JavaScript no espera los archivos HTML y CSS, no podrá cambiar los elementos DOM.

¿Qué puedo hacer con javascript?

JavaScript es un lenguaje de programación completo que puede hacer la mayoría de las cosas que puede hacer un lenguaje regular como Python. Éstos incluyen:

  • Establecer variables.
  • Almacenar y recuperar valores.
  • Definir y llamar funciones.
  • Defina objetos de JavaScript y sus clases.
  • Descargar y utilizar módulos externos.
  • Escribir controladores de eventos que respondan a eventos de clic.
  • Escribir código de servidor.
  • Y mucho más.

Advertencia: Dado que JavaScript es un lenguaje poderoso, también es posible escribir malware, virus e intrusiones del navegador para dañar a los usuarios. Estos van desde el robo de cookies, contraseñas y tarjetas de crédito del navegador hasta la descarga de virus en su computadora.

usar javascript

Echemos un vistazo a algunos conceptos básicos de JavaScript con ejemplos de código.

establecer variables

JavaScript se escribe dinámicamente, lo que significa que no tiene que establecer el tipo de variables en el código.

let num = 5;

let myString = "Hello";

var interestRate = 0.25;

Operaciones matemáticas

agregar

12 + 5

>> 17

la propuesta

20 - 8

>> 12

multiplicación

5 * 2

>> 10

división

50/2

>> 25

coeficiente de resto

45 ٪ 4

>> 1

matrices

let myArray = [1,2,4,5];

let stringArray = ["hello","world"];

Funciones

يمكن لجافا سكريبت كتابة الدوال ، وإليك دالة بسيطة تضيف أرقامًا.

function addNumbers(num1,num2){

return num1 + num2;

}

>> addNumbers(10,5);

>> 15

Repetición

JavaScript puede repetir iteradores, a través de for y while .

for(let i = 0; i < 3; i++){

console.log("echo!");

}

>> echo!

>> echo!

>> echo!

let i = 0;

while(i < 3) {

console.log("echo!");

i++;

}

>> echo!

>> echo!

>> echo!

التعليقات

// escribir un comentario

/* Escribe un comentario de varias líneas

Puedes usar tantas líneas como quieras

Para dividir el texto y hacer que los comentarios sean más legibles

* /

en la pagina web

La forma más común de cargar JavaScript en una página web es usar una etiqueta HTML. De acuerdo con sus requisitos, puede utilizar uno de los siguientes métodos.

Cargue un archivo JavaScript externo en una página web de la siguiente manera:

<script type="text/javascript" src="/path/to/javascript"></script>

Puede especificar la URL completa si el archivo javascript es de un dominio diferente al de la página web de la siguiente manera:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

JavaScript se puede incrustar directamente en HTML. Aquí cómo:

<script type="text/javascript">

alert("Page is loaded");

</script>

Aparte de estos métodos, hay formas de cargar código JavaScript a pedido. De hecho, existen marcos dedicados a cargar y ejecutar módulos de JavaScript con las dependencias correspondientes resueltas en tiempo de ejecución.

Estos son temas más avanzados y ahora estás aprendiendo lo básico.

Fragmento de código javascript de muestra

Aquí hay algunos ejemplos de código JavaScript simples para mostrarle cómo usarlo en páginas web. Estos son ejemplos de código que funciona con el DOM.

A continuación se muestra la selección de todos los elementos oscuros del documento y la configuración del primer color en rojo.

var elems = document.getElementsByTagName('b');

elems[0].style.color = 'red';

¿Quieres cambiar la imagen en la etiqueta img? Las siguientes instrucciones vinculan el controlador de eventos al evento de clic de botón.

<img id="myImg" src="prev-image.png">

<button onclick="document.getElementById('myImg').src='new-image.png'">Change Image</button>

Actualizar el contenido de texto de un elemento de párrafo (P)? Establezca la propiedad innerHTML del elemento como se muestra:

<p id="first-para">Hello World</p>

<button onclick="document.getElementById('first-para').innerHTML = "Welcome to JavaScript!"'>Click me</button>

Estos ejemplos de código brindan solo un vistazo de lo que puede hacer con JavaScript en su página web. Hay muchos tutoriales que pueden enseñarle cómo codificar para comenzar. Puedes probarlo en cualquier página web, ¡incluso en esta! Abre tu consola y prueba algún código JavaScript.

Ahora ya sabes lo que hace JavaScript

Esperamos que esta introducción haya aportado algunas ideas a JavaScript y lo haya entusiasmado con la programación web. Hay muchos recursos para aprender más sobre JavaScript. Una vez que te sientas más cómodo, ¿por qué no intentarlo? Para aprender a usar el DOM?

Ir al botón superior