|
| 1 | +# Hello, world! |
| 2 | + |
| 3 | +The tutorial that you're reading is about core JavaScript, which is platform-independent. Further on, you will learn Node.JS and other platforms that use it. |
| 4 | + |
| 5 | +But, we need a working environment to run our scripts, and, just because this book is online, the browser is a good choice. We'll keep the amount of browser-specific commands (like `alert`) to a minimum, so that you don't spend time on them if you plan to concentrate on another environment like Node.JS. On the other hand, browser details are explained in detail in the [next part](/ui) of the tutorial. |
| 6 | + |
| 7 | +So first, let's see how to attach a script to a webpage. For server-side environments, you can just execute it with a command like `"node my.js"` for Node.JS. |
| 8 | + |
| 9 | + |
| 10 | +[cut] |
| 11 | + |
| 12 | +## The "script" tag |
| 13 | + |
| 14 | +JavaScript programs can be inserted in any part of an HTML document with the help of the `<script>` tag. |
| 15 | + |
| 16 | +For instance: |
| 17 | + |
| 18 | +```html run height=100 |
| 19 | +<!DOCTYPE HTML> |
| 20 | +<html> |
| 21 | + |
| 22 | +<body> |
| 23 | + |
| 24 | + <p>Before the script...</p> |
| 25 | + |
| 26 | +*!* |
| 27 | + <script> |
| 28 | + alert( 'Hello, world!' ); |
| 29 | + </script> |
| 30 | +*/!* |
| 31 | + |
| 32 | + <p>...After the script.</p> |
| 33 | + |
| 34 | +</body> |
| 35 | + |
| 36 | +</html> |
| 37 | +``` |
| 38 | + |
| 39 | +```online |
| 40 | +You can run the example by clicking on the "Play" button in its right-top corner. |
| 41 | +``` |
| 42 | + |
| 43 | +The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag. |
| 44 | + |
| 45 | + |
| 46 | +## The modern markup |
| 47 | + |
| 48 | +The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in old code: |
| 49 | + |
| 50 | + The `type` attribute: <code><script <u>type</u>=...></code> |
| 51 | + |
| 52 | + : The old standard HTML4 required a script to have a type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default. No attribute is required. |
| 53 | + |
| 54 | + The `language` attribute: <code><script <u>language</u>=...></code> |
| 55 | + : This attribute was meant to show the language of the script. As of now, this attribute makes no sense, the language is JavaScript by default. No need to use it. |
| 56 | + |
| 57 | +Comments before and after scripts. |
| 58 | +: In really ancient books and guides, one may find comments inside `<script>`, like this: |
| 59 | + |
| 60 | + ```html no-beautify |
| 61 | + <script type="text/javascript"><!-- |
| 62 | + ... |
| 63 | + //--></script> |
| 64 | + ``` |
| 65 | + |
| 66 | + These comments were supposed to hide the code from an old browser that didn't know about a `<script>` tag. But all browsers born in the past 15+ years don't have any issues. We mention it here, because such comments serve as a sign. If you see that somewhere -- that code is probably really old and not worth looking into. |
| 67 | + |
| 68 | + |
| 69 | +## External scripts |
| 70 | + |
| 71 | +If we have a lot of JavaScript code, we can put it into a separate file. |
| 72 | + |
| 73 | +The script file is attached to HTML with the `src` attribute: |
| 74 | + |
| 75 | +```html |
| 76 | +<script src="/path/to/script.js"></script> |
| 77 | +``` |
| 78 | + |
| 79 | +Here `/path/to/script.js` is an absolute path to the file with the script (from the site root). |
| 80 | + |
| 81 | +It is also possible to provide a path relative to the current page. For instance, `src="script.js"` would mean a file `"script.js"` in the current folder. |
| 82 | + |
| 83 | +We can give a full URL as well, for instance: |
| 84 | + |
| 85 | +```html |
| 86 | +<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script> |
| 87 | +``` |
| 88 | + |
| 89 | +To attach several scripts, use multiple tags: |
| 90 | + |
| 91 | +```html |
| 92 | +<script src="/js/script1.js"></script> |
| 93 | +<script src="/js/script2.js"></script> |
| 94 | +… |
| 95 | +``` |
| 96 | + |
| 97 | +```smart |
| 98 | +As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. |
| 99 | +
|
| 100 | +The benefit of a separate file is that the browser will download it and then store in its [cache](https://en.wikipedia.org/wiki/Web_cache). |
| 101 | +
|
| 102 | +After this, other pages that want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once. |
| 103 | +
|
| 104 | +That saves traffic and makes pages faster. |
| 105 | +``` |
| 106 | + |
| 107 | +````warn header="If `src` is set, the script content is ignored." |
| 108 | +A single `<script>` tag can't have both the `src` attribute and the code inside. |
| 109 | + |
| 110 | +This won't work: |
| 111 | + |
| 112 | +```html |
| 113 | +<script *!*src*/!*="file.js"> |
| 114 | + alert(1); // the content is ignored, because src is set |
| 115 | +</script> |
| 116 | +``` |
| 117 | + |
| 118 | +We must choose: either it's an external `<script src="…">` or a regular `<script>` with code. |
| 119 | + |
| 120 | +The example above can be split into two scripts to work: |
| 121 | + |
| 122 | +```html |
| 123 | +<script src="file.js"></script> |
| 124 | +<script> |
| 125 | + alert(1); |
| 126 | +</script> |
| 127 | +``` |
| 128 | +```` |
| 129 | +
|
| 130 | +## Summary |
| 131 | +
|
| 132 | +- We can use a `<script>` tag to add JavaScript code to the page. |
| 133 | +- The `type` and `language` attributes are not required. |
| 134 | +- A script in an external file can be inserted with `<script src="path/to/script.js"></script>`. |
| 135 | +
|
| 136 | +
|
| 137 | +There is much more to learn about browser scripts and their interaction with the web-page. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves from it. We'll be using a browser as a way to run JavaScript, which is very convenient for online reading, but yet one of many. |
0 commit comments