Skip to content

Various small fixes on the JavaScript 101 Running Code page. #346

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 8 commits into from
Closed

Various small fixes on the JavaScript 101 Running Code page. #346

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0c057d2
Shorten HTML comment to avoid scrollbars.
Apr 15, 2013
30b2e2b
Don't indent inside <script>
Apr 15, 2013
bca5e87
Space inside parentheses.
Apr 15, 2013
77e1e55
"hello-world" -> `hello-world
Apr 15, 2013
f54956c
Move comment to JavaScript block.
Apr 15, 2013
96e7781
No indentation inside <body>
Apr 15, 2013
e8cb4f5
End on colon.
Apr 15, 2013
3ac2996
Move comment to JavaScript block, and no indentation inside <body>
Apr 15, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions page/javascript-101/running-code.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ attribution:
The first and recommended option is to write code in an external file (with a `.js` extension), which can then be included on our web page using an HTML `<script>` tag and pointing the `src` attribute to the file's location. Having JavaScript in a separate file will reduce code duplication if you want to reuse it on other pages. It will also allow the browser to cache the file on the remote client's computer, decreasing page load time.

```
<!-- Code is written in a .js file, then included via the script tag src attribute. -->
<!-- Code is written in a .js file, included via the script tag src attribute. -->
<script src="/path/to/example.js"></script>
```
### Inline
Expand All @@ -21,7 +21,7 @@ The second option is to inline the code directly on the web page. This is also a
```
<!-- Embed code directly on a web page using script tags. -->
<script>
alert( "Hello World!" );
alert( "Hello World!" );
</script>
```

Expand All @@ -31,45 +31,47 @@ The last option is to use the event handler attributes of HTML elements. This me

```
<!-- Inline code directly on HTML elements being clicked. -->
<a href="javascript:alert('Hello World');">Click Me!</a>
<button onClick="alert('Good Bye World');">Click Me Too!</a>
<a href="javascript:alert( 'Hello World' );">Click Me!</a>
<button onClick="alert( 'Good Bye World' );">Click Me Too!</a>
```

### Placement

Placement of the previous two options is important and can vary depending on the situation. If you are including JavaScript that doesn't access the elements on the page, you can safely place the script before the closing HTML `<head>` tag. However, if the code will interact with the elements on the page, you have to make sure those elements exist at the time the script is executed. This common pitfall can be seen in the example below. The script for finding the element with the ID "hello-world" will be executed before the element is defined in the document.
Placement of the previous two options is important and can vary depending on the situation. If you are including JavaScript that doesn't access the elements on the page, you can safely place the script before the closing HTML `<head>` tag. However, if the code will interact with the elements on the page, you have to make sure those elements exist at the time the script is executed. This common pitfall can be seen in the example below. The script for finding the element with the ID `hello-world` will be executed before the element is defined in the document.

```
<!-- Attempting to access an element too early will have unexpected results. -->
<!doctype html>
<html>
<head>
<script>
// Attempting to access an element too early will have unexpected results.
var title = document.getElementById( "hello-world" );
console.log( title );
</script>
</head>
<body>
<h1 id="hello-world">Hello World</h1>

<h1 id="hello-world">Hello World</h1>

</body>
</html>
```

It is a common pattern to move scripts to the bottom of the page, prior to the closing HTML `<body>` tag. This will guarantee that elements are defined when the script is executed.
It is a common pattern to move scripts to the bottom of the page, prior to the closing HTML `<body>` tag. This will guarantee that elements are defined when the script is executed:

```
<!-- Moving the script to the bottom of the page will -->
<!-- make sure the element exists. -->
<!doctype html>
<html>
<head>
</head>
<head></head>
<body>
<h1 id="hello-world">Hello World</h1>
<script>
var title = document.getElementById( "hello-world" );
console.log( title );
</script>

<h1 id="hello-world">Hello World</h1>
<script>
// Moving the script to the bottom of the page will make sure the element exists.
var title = document.getElementById( "hello-world" );
console.log( title );
</script>

</body>
</html>
```