|
| 1 | +--- |
| 2 | +chapter: javascript-101 |
| 3 | +section: 1 |
| 4 | +title: Running Code |
| 5 | +attribution: jQuery Fundamentals |
| 6 | +github: jquery |
| 7 | +--- |
| 8 | + |
| 9 | +### External |
| 10 | + |
| 11 | +The first and recommended option is to write our code in an external file (with a ".js" extension), which can then be included on our web page using a HTML script tag and pointing the "src" attribute to our file's location. Having our JavaScript in it's own file will reduce code duplication if we wish to reuse it on other pages and will allow the browser to cache the file on the remote client's computer, decreasing our page load time. |
| 12 | + |
| 13 | +<javascript caption="Saved in example.js."> |
| 14 | +alert('Hello World!'); |
| 15 | +</javascript> |
| 16 | + |
| 17 | +<javascript caption="Code is then included via the script tag src attribute."> |
| 18 | + <script type="text/javascript" src="/path/to/example.js"></script> |
| 19 | +</javascript> |
| 20 | + |
| 21 | +### Inline |
| 22 | + |
| 23 | +The second option is to inline the code directly on the web page. This is also achieved using HTML script tags but instead of pointing the "src" attribute to a file, we place the code between the tags. While there are use cases for this option, the majority of the time it is best to keep our code in an external file as described above. |
| 24 | + |
| 25 | +<javascript caption="Embed code directly on a web page using script tags."> |
| 26 | +<script type="text/javascript"> |
| 27 | + alert('Hello World!'); |
| 28 | +</script> |
| 29 | +</javascript> |
| 30 | + |
| 31 | +### Attributes |
| 32 | + |
| 33 | +The last and strongly discouraged option, is to utilize the event handler attributes of HTML attributes. |
| 34 | + |
| 35 | +<javascript caption="Inline code directly on HTML elements being clicked."> |
| 36 | +<a href="javascript:alert('Hello World!');">Click Me!</a> |
| 37 | +<button onClick="alert('Good Bye World');">Click Me Too!</a> |
| 38 | +</javascript> |
| 39 | + |
| 40 | +### Placement |
| 41 | + |
| 42 | +Placement of the previous two options is important and can vary depending on the situation. If we are including some JavaScript which does not access the elements on the page, we can safely place the script before the closing HTML head tag. However, if the code will interact with the elements on the page, we have to make sure those elements exists at the time of our script's execution. A common pitfall can be seen in the following example where we attempt to find the element with an ID of "hello-world", the problem here is our script will be executed prior to the element being defined within the document. |
| 43 | + |
| 44 | +<javascript caption="Attempting to access an element too early will have unexpected results."> |
| 45 | +<!DOCTYPE html> |
| 46 | +<html> |
| 47 | +<head> |
| 48 | +<script type="text/javascript"> |
| 49 | + var title = document.getElementById('hello-world'); |
| 50 | + console.log(title); |
| 51 | +</script> |
| 52 | +</head> |
| 53 | +<body> |
| 54 | +<h1 id="hello-world">Hello World</h1> |
| 55 | +</body> |
| 56 | +</html> |
| 57 | +</javascript> |
| 58 | + |
| 59 | +It is a common pattern to just move our scripts to the bottom of the page, prior to the closing HTML body tag. This will guarentee the defination of any element we may need when our script is executed. |
| 60 | + |
| 61 | +<javascript caption="Moving our script to the bottom of the page will make sure the element exists."> |
| 62 | +<!DOCTYPE html> |
| 63 | +<html> |
| 64 | +<head> |
| 65 | +</head> |
| 66 | +<body> |
| 67 | +<h1 id="hello-world">Hello World</h1> |
| 68 | +<script type="text/javascript"> |
| 69 | + var title = document.getElementById('hello-world'); |
| 70 | + console.log(title); |
| 71 | +</script> |
| 72 | +</body> |
| 73 | +</html> |
| 74 | +</javascript> |
| 75 | + |
| 76 | + |
| 77 | + |
| 78 | + |
| 79 | + |
| 80 | + |
| 81 | + |
0 commit comments