|
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