How to add JavaScript code to your pages, as well as property <script> tag

Hello, world!

This part of the tutorial is about the JavaScript language itself.

But we need a working environment to run our script, as this tutorial is online, the browser is a good choice. We will use as little as possible browser-specific commands (for example alert), so if you plan to focus on another environment (such as Node.js), you do not have to spend more time to care about these specific instructions of. We will focus on the browser's JavaScript in the next section of this tutorial.

First, let's look at how to add a script to the page. For server-side environment (such as Node.js), you only need to use, such as "node my.js"the command line to execute it.

"Script" tag

JavaScript programs can be <script>inserted anywhere HTML document with the help of the label.

such as:

```html run height=100
<!DOCTYPE HTML>

Before the script tag ...

After ... script tag

```

<script>Label wrapped JavaScript code when the browser encounters <script>the tag, the code will run automatically.

Modern tags

<script> There are some labels are now rarely used property, but we can find them in old code:

type Attributes:<script type=...>

  • In the old HTML4 standards required <script>label has a type attribute. Usually type="text/javascript". This property declarations are no longer needed. Moreover, modern HTML standards - HTML5 has completely changed the actual meaning of this property. Now, the attribute may be used to JavaScript module. But that was a high point of the topic, we will explore the JavaScript module in other sections of this tutorial.

language Attributes:<script language=...>

  • This property is used to display the language script. The property now has no meaning, because the default language is JavaScript. No longer need to use it.

Before and after the script comments:

  • In very old books and guides, you might <script>find inside comment tags, like this:

    html no-beautify <script type="text/javascript"><!-- ... //--></script>

    Modern JavaScript has been no such use. These comments are not supported for <script>the label old browser hidden JavaScript code. Since the release of the last 15 years, browsers have no such problems, so this comment can help you identify some of the old-fashioned code.

External Screenplay

If you have lots of JavaScript code, we can put it in a separate file.

Script files can be srcadded to the HTML file attributes.

<script src="/path/to/script.js"></script>

Here /path/to/script.jsis the beginning of the script file from the site root absolute path. Of course, it can provide relative to the current page. For example, a src =“script.js”representation of the current folder “script.js”file.

We can also provide a full URL address, for example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

To attach multiple scripts, use multiple tags:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

Please note:

In general, only the most simple script was embedded into HTML. More complex scripts stored in a separate file.

The advantage of using a separate file browser will download it and save it to your browser's cache in.

After that, the other pages you want the same script will be retrieved from the cache instead of downloading it. So actually file downloads only once.

This can save traffic, and makes the page (load) faster.

Reminder: If you set srcthe attribute, scripttag content will be ignored.

A single <script>label can not have simultaneously srcthe properties and internal wrapping code.

This will not work:

<script src="file.js">
  alert(1); // 此内容会被忽略,因为设定了 src
</script>

We must choose either to use external <script src="…">, or use the normal package code <script>.

To make the example above work, we can split it into two <script>labels.

<script src="file.js"></script>
<script>
  alert(1);
</script>

to sum up

  • We can use a <script>tag to add to the page in the JavaScript code.
  • typeAnd languageattributes are not required.
  • External scripts can be <script src="path/to/script.js"></script>inserted in the way.

About the relationship between the browser and their scripts and web pages, and much to learn. But remember, this part of the tutorial is mainly for the JavaScript language itself, so we should not be distract yourself browser-specific implementations. We will use the browser as a way to run JavaScript, this approach is very easy to read us online, but this is just a variety of ways.

Job title

1. Display a prompt

The degree of importance: ⭐️⭐️⭐️⭐️⭐️

Create a page, and then displays a message "I'm JavaScript!".

In the sandbox or do it on your hard drive does not matter, just make sure it runs up.

You can look at the presentation of the results of the new window .

In the micro-channel public number "Technical Talk" backstage reply to 1-2-1get answers to this question.

2. Use an external script to display a prompt

The degree of importance: ⭐️⭐️⭐️⭐️⭐️

Open the answer Question 1. The answer script to extract the contents to an external alert.jsfile, placed in the same folder.

Open the page, make sure it works.

You can look at the presentation of the results of the new window .

In the micro-channel public number "Technical Talk" backstage reply to 1-2-1get answers to this question.


Modern JavaScript Tutorial: Modern open-source JavaScript from entry to advanced high-quality tutorials. React official documentation recommends, side by side with the MDN JavaScript tutorial .

Online Free Read: https://zh.javascript.info/


Fanger Wei code scan, micro-channel public concern No. "Technical Talk" subscription more exciting content.

Guess you like

Origin www.cnblogs.com/leviding/p/11514789.html