Què és JavaScript i com funciona?

Què és JavaScript i com funciona?

JavaScript s’ha convertit en un element bàsic del desenvolupament web modern. Aquest potent llenguatge s’ha convertit en una eina essencial que qualsevol desenvolupador web pugui entendre.





JavaScript té funcions especials que el diferencien dels llenguatges de programació tradicionals. Explorarem què és, com funciona i què podeu fer amb això. Desglossem-ho.



Què és JavaScript?

JavaScript és un llenguatge de seqüències d’ordres per al web. És un llenguatge interpretat, el que significa que no necessita un compilador per traduir el seu codi com C o C ++. El codi JavaScript s’executa directament en un navegador web.





L’última versió de l’idioma és ECMAScript 2018, que es va publicar el juny de 2018.

JavaScript funciona amb HTML i CSS per crear aplicacions web o pàgines web. JavaScript és compatible amb la majoria de navegadors web moderns com Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. La majoria de navegadors mòbils per a Android i iPhone també admeten JavaScript.



JavaScript controla els elements dinàmics de les pàgines web. Funciona en navegadors web i, més recentment, també en servidors web. Les interfícies de programació d'aplicacions (API) també són compatibles amb JavaScript, cosa que us proporciona més funcionalitat.

Comprendre totes les maneres en què funciona JavaScript és una mica més fàcil quan enteneu com funciona la programació web, així que aprenem més.



Blocs de construcció d'aplicacions web

Hi ha tres components que creen llocs web i aplicacions: Llenguatge de marcatge d’hipertext (HTML), Fulls d’estil en cascada (CSS) i JavaScript. Cadascun té un paper en la creació d’una aplicació web.

  • HTML és un llenguatge de marques que crea l'esquelet de la pàgina web. Tots els paràgrafs, seccions, imatges, encapçalaments i text estan escrits en HTML. El contingut apareix al lloc web en l’ordre en què s’escriuen en HTML.
  • CSS controla l'estil i els aspectes addicionals del disseny. CSS s’utilitza per crear el disseny del lloc web creant els colors, tipus de lletra, columnes, vores, etc. Porta el lloc web des d’elements de text pla fins a dissenys de colors.
  • El tercer element és JavaScript. HTML i CSS creen l'estructura, però no fan res a partir d'aquí. JavaScript crea activitat dinàmica a la vostra aplicació. L’escriptura en JavaScript és el que controla les funcions quan es fa clic als botons, com s’autentifiquen els formularis de contrasenya i com es controla el contingut multimèdia.

Les tres parts funcionen en harmonia entre si per crear aplicacions a gran escala. Seria una bona idea aprendre més sobre HTML i CSS si no us esteu del tot còmode.



Com puc trobar tots els comptes del lloc web associats a la meva adreça de correu electrònic?

Com funciona JavaScript?

Abans d’escriure JavaScript és important saber com funciona sota el capó. Hi ha dues peces importants a conèixer: com funciona el navegador web i el Model d’objectes de documents (DOM).

El navegador web carrega una pàgina web, analitza l'HTML i crea el contingut conegut com a Model d'objectes de document (DOM). El DOM presenta una visualització en directe de la pàgina web al vostre codi JavaScript.

A continuació, el navegador agafarà tot el que estigui relacionat amb l'HTML, com ara imatges i fitxers CSS. La informació CSS ​​prové de l’analitzador CSS.

El DOM configura HTML i CSS per crear primer la pàgina web. Aleshores, el motor JavaScript del navegador carrega fitxers JavaScript i codi en línia, però no executa el codi immediatament. S'espera que l'HTML i CSS s'acabi de carregar.

Un cop fet això, el JavaScript s’executa en l’ordre en què s’escriu el codi. Això fa que el DOM s’actualitzi mitjançant el codi JavaScript i el navegador el renderitzi.

L’ordre aquí és important. Si el JavaScript no esperava que acabessin l'HTML i el CSS, no seria capaç de canviar els elements DOM.

Què puc fer amb JavaScript?

JavaScript és un llenguatge de programació complet que pot fer la majoria de coses que pot fer un llenguatge normal com Python. Això inclou:

rastrejadors de fitness amb monitors de ritme cardíac
  • Declaració de variables.
  • Emmagatzematge i recuperació de valors.
  • Definició i invocació de funcions, inclosa funcions de fletxa .
  • Definició d'objectes i classes JavaScript.
  • Càrrega i ús de mòduls externs.
  • Escriptura de gestors d'esdeveniments que responen als esdeveniments de clic.
  • S’escriu el codi del servidor.
  • I molt més.

Advertència: Com que JavaScript és un llenguatge tan potent, també és possible escriure programari maliciós, virus i pirates informàtics del navegador per provocar-los als usuaris. Aquests inclouen des de robar cookies de navegador, contrasenyes, targetes de crèdit fins a la descàrrega de virus al vostre ordinador.

Utilitzant JavaScript

Vegem alguns conceptes bàsics de JavaScript amb exemples de codi.

Declaració de variables

JavaScript s’escriu dinàmicament, cosa que significa que no haureu de declarar el tipus de variables al vostre codi.

let num = 5;
let myString = 'Hello';
var interestRate = 0.25;

Operadors

Addició

12 + 5
>> 17

Resta

20 - 8
>> 12

Multiplicació

5 * 2
>> 10

Divisió

50 / 2
>> 25

Mòdul

45 % 4
>> 1

Matrius

let myArray = [1,2,4,5];
let stringArray = ['hello','world'];

Funcions

JavaScript pot escriure funcions, aquí teniu una funció senzilla que afegeix números.

function addNumbers(num1,num2){
return num1 + num2;
}
>> addNumbers(10,5);
>> 15

Bucles

JavaScript pot realitzar bucles per a la iteració, com bucles per a bucles i mentre que bucles.

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!

Comentaris

// Writing a comment
/*Writing a multi-line comment
You can use as many lines as you like
to break up text and make comments more readable
*/

En una pàgina web

La forma més habitual de carregar JavaScript en una pàgina web és utilitzar el fitxer guió Etiqueta HTML. En funció de les vostres necessitats, podeu utilitzar un dels mètodes següents.

  • Carregueu un fitxer JavaScript extern a una pàgina web de la manera següent:
  • Podeu especificar l'URL complet si el javascript prové d'un domini diferent de la pàgina web de la següent manera:
  • JavaScript es pot incrustar directament a l’HTML. Aquí hi ha un
    alert('Page is loaded');

A part d'aquests mètodes, hi ha maneres de carregar el codi JavaScript sota demanda. De fet, hi ha marcs dedicats a carregar i executar mòduls JavaScript amb les dependències adequades resoltes en temps d'execució.

Aquests són temes més avançats, ara mateix esteu aprenent els conceptes bàsics.

Exemples de fragments de codi JavaScript

Aquí teniu alguns exemples senzills de codi JavaScript per il·lustrar com s’utilitza a les pàgines web. Aquests són exemples de codi que funcionen amb el DOM.

  • El següent selecciona tots atrevit elements del document i estableix el color del primer a vermell. var elems = document.getElementsByTagName('b');
    elems[0].style.color = 'red';
  • Voleu canviar la imatge en un fitxer img etiqueta? A continuació s'associa un gestor d'esdeveniments per a feu clic esdeveniment d'un botó.
    Change Image
  • Actualitzeu el contingut de text d'un paràgraf ( pàg ) element? Estableix el fitxer HTML interior propietat de l'element tal com es mostra:

    Hello World


    Click me

Aquests exemples de codi només ofereixen una visió del que podeu fer amb JavaScript a la vostra pàgina web. Hi ha molts tutorials que us poden ensenyar a codificar per començar. Podeu provar-ho en qualsevol pàgina web, fins i tot en aquesta. Obriu la consola i proveu un codi JavaScript.

Ara ja sabeu què fa JavaScript

Amb sort, aquesta introducció us ha aportat algunes idees sobre JavaScript i us emociona amb la programació web. Podeu resumir-ho tot a el nostre útil full de trucs JavaScript . Hi ha molt més per aprendre sobre JavaScript. Un cop us sentiu més còmode, per què no intenteu aprendre a utilitzar el model d’objectes de documents? També us pot interessar aprendre sobre TypeScript.

Compartir Compartir Tweet Correu electrònic Com netejar el vostre PC amb Windows mitjançant el símbol del sistema

Si el vostre PC amb Windows es queda sense espai d’emmagatzematge, netegeu la brossa amb aquestes ràpides utilitats de símbol del sistema.

com canviar la imatge de perfil de Netflix
Llegiu a continuació Temes relacionats
  • Tecnologia explicada
  • Programació
  • Desenvolupament web
  • JavaScript
  • Scripting
Sobre l'autor Anthony Grant(40 articles publicats)

Anthony Grant és un escriptor independent que cobreix programació i programari. És un especialista en informàtica dedicat a la programació, Excel, programari i tecnologia.

Més de Anthony Grant

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us