Bienvenido al primer tutorial que tendremos en nuestra Web schoolofJavaScript.com. In this tutorial, you are going to learn how to write your first line of code using JS.
Aunque quizás no lo parezca JavaScript, es un lenguaje sumamente poderoso. Se puede utilizar en cualquier browser of the world. Además de eso, se puede usar para escribir código del lado del server usando node.js.
When we use JavaScript within the browser, we can change the appearance of the page and even its behavior. In this tutorial, we will only focus on learning the language itself, and therefore we will only use one function to print the results called "Console.log".
Knowing the label
Vamos a empezar por lo mas importante. Seguramente te habrás preguntado anteriormente «¿Cómo voy a poder mostrar mis resultados en pantalla?» o «¿Cómo es posible enlazar mi código HTML con mi código JS?». Bueno, ya vas a saberlo.
Programs written in JavaScript can be inserted anywhere in an HTML document with the help of the famous tag .
Here below I show you an example of it:
<!DOCTYPE HTML> <html> <body> <p>Antes del Script</p> <script> alert( '¡Hola, Mundo!' ); </script> <p>...Después del Script.</p> </body> </html>
This code will show you a small pop-up alert (which we will talk about later in more detail) with the text «Hello, World !.
In order for you to see the results of this code in your browser, you must make a text document with an HTML extension and save this code in it, and then run it so you can see how it works.
The label contains JavaScript code that runs automatically when the browser encounters the tag.
Modern label marking
The label tiene algunos atributos que son raramente usados hoy en día, pero podemos encontrarlos en código antiguo:
The attribute type: <script type=…>
The old HTML4 standard required a script to have a type. Usually it was type = »text / javascript». The modern HTML standard assumes this type by default. No attributes are required.
The language attribute: Script Language =…>
This attribute was meant to display the language of the script. For now, this attribute is nonsense, the language is JavaScript by default. There is no need to use it.
Comentarios antes y después de los scripts.
In really old books and guides, one can find commentary within , como este:
<script type="text/javascript"><!-- ...//--> </script>
Estos comentarios se suponía que ocultaban el código de un navegador antiguo que no sabía de una etiqueta <script>. Pero todos los browsers nacidos en los últimos 15 años no tienen ningún problema. Lo mencionamos aquí, porque tales comentarios sirven como señal. Si ves eso en alguna parte – ese código es probablemente muy antiguo y no vale la pena investigarlo.
External scripts
If we have a lot of JavaScript code, we can put it in a separate file.
The script file is attached to HTML with the src attribute:
<script src="carpeta/script.js"></script>
Here folder / script.js is an absolute path to the file with the script (from the site root).
It is also possible to provide a relative path to the current page. For example, src = »script.js» would mean a file «script.js» in the current folder.
También podemos dar una Url completa, por ejemplo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
To attach multiple scripts, use multiple tags:
...
Note:
As a general rule, only the simplest scripts are put into HTML. The most complex ones reside in separate files.
La ventaja de un archivo separado es que el navegador lo descarga y lo almacena en su cache.
After this, other pages that want the same script will take it from the cache instead of downloading it. Therefore, the file is downloaded only once.
Esto ahorra traffic y hace que las páginas sean más rápidas.
If src is set, the content of the script is ignored.
Single label no puede tener tanto el atributo src como el código dentro.
This will not work:
<script src="archivo.js"> alert(1); // el contenido es ignorado, porque src está configurado </script>
We must choose: or is it a externo o un regular con código.
The above example can be divided into two scripts to make it work:
<script src="archivo.js"></script> <script> alert(1); </script>
General considerations
- We can use a tag para añadir código JavaScript a la página.
- The type and language attributes are not required.
- You can insert a script into an external file with .
There is much more to learn about browser scripts and their interaction with the web page. But let's keep in mind that this part of the tutorial is dedicated to the JavaScript language, so we shouldn't be distracted from it. We will use a browser as a way to run JavaScript, which is very convenient for online reading, but it is one of many.
Training
Create a page that displays the message "I am a JavaScript code."
You can do it in a litter box, or on your hard drive, it doesn't matter, just make sure it works.
Solution:
<!DOCTYPE html> <html> <body> <script> alert( "Soy un código JavaScript" ); </script> </body> </html>
Second exercise:
Take the solution code from the previous task from Show an alert. Modifícalo extrayendo el contents del script en un archivo externo llamado alert.js, which resides in the same folder as the HTML file.
Open the page and make sure the alert is working properly.
Solution:
HTML code:
<!DOCTYPE html> <html> <body> <script src="alerta.js"></script> </body> </html>
Document with extension .js
alert ("I am a JavaScript code");
