You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: page/javascript-101/running-code.md
+19-17Lines changed: 19 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@ attribution:
11
11
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.
12
12
13
13
```
14
-
<!-- Code is written in a .js file, then included via the script tag src attribute. -->
14
+
<!-- Code is written in a .js file, included via the script tag src attribute. -->
15
15
<script src="/path/to/example.js"></script>
16
16
```
17
17
### Inline
@@ -21,7 +21,7 @@ The second option is to inline the code directly on the web page. This is also a
21
21
```
22
22
<!-- Embed code directly on a web page using script tags. -->
23
23
<script>
24
-
alert( "Hello World!" );
24
+
alert( "Hello World!" );
25
25
</script>
26
26
```
27
27
@@ -31,45 +31,47 @@ The last option is to use the event handler attributes of HTML elements. This me
31
31
32
32
```
33
33
<!-- Inline code directly on HTML elements being clicked. -->
<button onClick="alert('Good Bye World');">Click Me Too!</a>
36
36
```
37
37
38
38
### Placement
39
39
40
-
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.
40
+
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.
41
41
42
42
```
43
-
<!-- Attempting to access an element too early will have unexpected results. -->
44
43
<!doctype html>
45
44
<html>
46
45
<head>
47
46
<script>
47
+
// Attempting to access an element too early will have unexpected results.
48
48
var title = document.getElementById( "hello-world" );
49
49
console.log( title );
50
50
</script>
51
51
</head>
52
52
<body>
53
-
<h1 id="hello-world">Hello World</h1>
53
+
54
+
<h1 id="hello-world">Hello World</h1>
55
+
54
56
</body>
55
57
</html>
56
58
```
57
59
58
-
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.
60
+
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:
59
61
60
62
```
61
-
<!-- Moving the script to the bottom of the page will -->
62
-
<!-- make sure the element exists. -->
63
63
<!doctype html>
64
64
<html>
65
-
<head>
66
-
</head>
65
+
<head></head>
67
66
<body>
68
-
<h1 id="hello-world">Hello World</h1>
69
-
<script>
70
-
var title = document.getElementById( "hello-world" );
71
-
console.log( title );
72
-
</script>
67
+
68
+
<h1 id="hello-world">Hello World</h1>
69
+
<script>
70
+
// Moving the script to the bottom of the page will make sure the element exists.
71
+
var title = document.getElementById( "hello-world" );
0 commit comments