Skip to content

Commit 88bd988

Browse files
iliakaniliakan
committed
work
1 parent 6522852 commit 88bd988

File tree

92 files changed

+4044
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+4044
-0
lines changed

‎1-js/2-first-steps/01-hello-world/1-hello-alert/solution.md‎

Whitespace-only changes.

‎1-js/2-first-steps/01-hello-world/1-hello-alert/solution.view/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<body>
5+
6+
<script>
7+
alert( "I'm JavaScript!" );
8+
</script>
9+
10+
</body>
11+
12+
</html>

‎1-js/2-first-steps/01-hello-world/1-hello-alert/task.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
importance: 5
2+
3+
---
4+
5+
# Show an alert
6+
7+
Create a page that shows a message "I'm JavaScript!".
8+
9+
Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works.
10+
11+
[demo src="solution"]
12+

‎1-js/2-first-steps/01-hello-world/article.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Hello, world!
2+
3+
In this chapter we'll create a simple script and see it working.
4+
5+
[cut]
6+
7+
## The "script" tag
8+
9+
```smart header="What if I want to move faster?"
10+
In the case if the reader has developed with JavaScript already or has a lot of experience in another language, he can skip detailed explanatins and jump to <info:javascript-specials>. There he can find an essense of important features.
11+
12+
If you have enough time and want to learn things in details then read on :)
13+
```
14+
15+
JavaScript programs can be inserted in any place of HTML with the help of the `<script>` tag.
16+
17+
For instance:
18+
19+
```html run height=100
20+
<!DOCTYPE HTML>
21+
<html>
22+
23+
<body>
24+
25+
<p>Before the script...</p>
26+
27+
*!*
28+
<script>
29+
alert( 'Hello, world!' );
30+
</script>
31+
*/!*
32+
33+
<p>...After the script.</p>
34+
35+
</body>
36+
37+
</html>
38+
```
39+
40+
```online
41+
You can run the example clicking on a "Play" button in it's right-top corner.
42+
```
43+
44+
The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag.
45+
46+
Please note the execution sequence:
47+
48+
1. Browser starts to parse the document and display the page.
49+
2. When the browser meets `<script>`, it switches to the JavaScript execution mode. In this mode it executes the script.
50+
3. The `alert` command shows a message and pauses the execution.
51+
4. Note that at this moment a part of the page before the script is shown already.
52+
5. When the script is finished, it gets back to the HTML-mode, and *only then* it shows the rest of the document.
53+
54+
![Rendering order](hello-world-render.png)
55+
56+
A visitor won't see the content after the script until it is executed. In other words, a `<script>` tag blocks rendering.
57+
58+
## The modern markup
59+
60+
The `<script>` tag has a few attributes that are rarely used nowadays, but we can find them in the old code:
61+
62+
The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
63+
64+
: The old standard HTML4 required a script to have the type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default, no attribute is required.
65+
66+
The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code>
67+
: 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.
68+
69+
Comments before and after scripts.
70+
: In really ancient books and guides, one may find comments inside `<script>`, like this:
71+
72+
```html no-beautify
73+
<script type="text/javascript"><!--
74+
...
75+
//--></script>
76+
```
77+
78+
These comments were supposed to hide the code from an old browser that did't understand a `<script>` tag. But for all browsers born in the past 15+ years that's not an issue. I only mention it here, because it serves as a pointer. If you see that in a code somewhere -- it's probably really old and probably not worth looking into.
79+
80+
## Summary
81+
82+
- We can use a `<script>` tag to add JavaScript code to the page.
83+
- The `type` and `language` attributes are not required.
84+
- A `<script>` tag blocks page rendering. Later we'll see how to evade that where needed.
85+

‎1-js/2-first-steps/01-hello-world/hello-world-render.png‎

43.1 KB
Loading

‎1-js/2-first-steps/01-hello-world/hello-world-render@2x.png‎

82.6 KB
Loading

‎1-js/2-first-steps/02-external-script/1-hello-alert-ext/alert.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
alert("I'm JavaScript!");

‎1-js/2-first-steps/02-external-script/1-hello-alert-ext/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<body>
5+
6+
<script src="alert.js"></script>
7+
8+
</body>
9+
10+
</html>

‎1-js/2-first-steps/02-external-script/1-hello-alert-ext/solution.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
The HTML code:
2+
3+
[html src="index.html"]
4+
5+
For the file `alert.js` in the same folder:
6+
7+
[js src="alert.js"]
8+

‎1-js/2-first-steps/02-external-script/1-hello-alert-ext/task.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
importance: 5
2+
3+
---
4+
5+
# Show an alert with an external script
6+
7+
Take the solution of the previous task <info:task/hello-alert>. Modify it by extracting the script content into an external file `alert.js`, residing in the same folder.
8+
9+
Open the page, ensures that the alert works.

0 commit comments

Comments
 (0)