When you need a new line within the console, rather than pressing
Enter, which will execute the code, press
Shift Enter for a new
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
To activate Firefox’s Web Console in Windows and Linux, press
Control Shift K.
On Mac, press
⌥ ⌘ K (
alt cmd K).
Activating the console in Safari is a bit more involved than in other browsers.
- First, you need to enable the
Developmenu in the
- To do that, enter Safari’s settings by pressing
- going to the
Advanced tab, and checking the
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.
If you’d prefer to skip the console and work inside an HTML document, you could go about it in one of two ways:
- you could write the code directly in the HTML document,
In the HTML File
HTML provides a
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
hello.js and then link to it using the
src attribute like so:
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
Therefore, references to DOM
elements will result in an error since the HTML inside the
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