Procesadores de Lenguajes. Itinerario de Computación. ETSII. ULL

home

Setting up the JavaScript Environment

06 Jan 2014

Console

When you need a new line within the console, rather than pressing Enter, which will execute the code, press Shift Enter for a new line.

Chrome

To activate Chrome’s Developer Tools in Windows and Linux, press Control Shift J. On Mac, press ⌥ ⌘ J (alt cmd J). This will open the console tab in the Developer Tools’ panel

Firefox

To activate Firefox’s Web Console in Windows and Linux, press Control Shift K. On Mac, press ⌥ ⌘ K (alt cmd K).

Safari

Activating the console in Safari is a bit more involved than in other browsers.

Once you have done that, simply press ⌥ ⌘ C (alt cmd C) to bring up the console,

You'll find this post in your _posts directory - edit this post and re-build (or run with the -w switch) to see your changes! To add new posts, simply add a file in the _posts directory that follows the convention: YYYY-MM-DD-name-of-post.ext.

Using JavaScript in HTML Files

If you’d prefer to skip the console and work inside an HTML document, you could go about it in one of two ways:

  1. you could write the code directly in the HTML document,
  2. or write it in a separate JavaScript file and load it up from the HTML file.

In the HTML File

HTML provides a <script> tag, inside of which you can write executable JavaScript code.

Here’s an example of a very simple HTML document with one line of JavaScript that pops up an alert dialog with the message, ¡Hola mundo!:

 1       <!DOCTYPE HTML>
 2       <html lang="en">
 3       <head>
 4         <meta charset="UTF-8">
 5         <title>Code inside an HTML document</title>
 6         <script type="text/javascript">¡Hola mundo!</script>
 7       </head>
 8       <body>
 9       </body>
10       </html>

In a Separate File

You can also place the code in a separate file and link to it.

We could place our alert statement inside a file we name hello.js and then link to it using the <script> tag’s src attribute like so:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Code in a separated file</title>
    <script type="text/javascript" src="hello.js"></script>
  </head>
  <body>
  </body>
</html>

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects representing the elements in a HTML, XHTML or XML document.

When you include a <script> tag in the document’s head, the code within it will execute right away, although the DOM is yet to be built. Therefore, references to DOM elements will result in an error since the HTML inside the <body> isn’t there yet.

You can wrap your code in the document’s onload function, which the browser executes once it’s done constructing the DOM. Alternatively, you could include your script tags at the very end of the document’s body, immediately before the closing </body> tag.

comments powered by Disqus