javascript-Hello World

最新推荐文章于 2023-07-23 19:40:55 发布

ninjacode

最新推荐文章于 2023-07-23 19:40:55 发布

阅读量239

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u012137648/article/details/106307360

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

javascript-Hello World

本篇介绍javascript的入门用法，有一定基础的可以不用看了，

注意，役下内容仅介绍javascript在浏览器环境的使用，不包括NodeJS。

怎样使用javascript?

直接在body后通过script标签引入，类似这样

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>

<body>
    <div>
        <p>some text</p>
    </div>
    <script>
        alert('Hello World');
    </script>
</body>

</html>

外部引入

javascript代码写在html里面显得很臃肿，实际项目中一般都是通过外部引入的。

html5: 不用说了，现在大家都是这么用的

    <script scr="main.js"></script>

html4：记得以前上大学还没出h5标准，当时还这样写过。不想看的可以略过这里，毕竟现在h5是主流

像这样：

    <script type="text/javascript" src="main.js"></script>

这样：

    <script language="javascript" src="main.js"></script>

总之当时不是很统一，所以标准真的很重要，能省不少烦心事。

知道这些以后，上面的例子可以这样写：

main.js

alert('Hello World');

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>

<body>
    <div>
        <p>some text</p>
    </div>
    <script src="main.js"></script>
</body>

</html>

效果是一样的。

script标签应该放在哪？

我相信很多初学者都会有这个疑问，似乎放在哪好像都不会报错，这里涉及到浏览器引擎是如何渲染页面的问题，具体详细的内容以后会讲到，毕竟本篇只是讲怎样在浏览器中引入一段javascript代码。你现在需要知道的是，浏览器在遇到script标签后会阻塞DOM加载，直到将script的加载的脚步内容执行完毕，可以看看以下例子。因此最好将script标签放在body标签的最后面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>

<body>
    <div>
        <p>some text</p>
    </div>
    <script>
        let p_count = document.querySelectorAll('p');
        alert(p_count.length); //1
    </script>
    <div>
        <p>some text after script</p>
    </div>
    <script>
        p_count = document.querySelectorAll('p');
        alert(p_count.length); //2
    </script>
</body>

</html>

单引号还是双引号？

在包裹一个字符串时到底该用单引号还是双引号，因为这两者都可以正常使用，所以如果你是初学者，且有一定的选择恐惧。那么，我建议你用单引号，不要以后写代码的时候一会用双引号一会用单引号，这样很不好。

单引号有很多好处，比如,当你想定义这样的字符串:

const inputs = '<input type="text">';

如果你用双引号，你就得这么写，通过反斜杠转义，可以看到这样增加了阅读的难度，及代码量

const inputs = "<input type=\"text\">";

当然如果你习惯用双引号，那也行，只是不要单引号双引号混着用。

感兴趣的，可以看看javascript格式规约 javascript格式规约

总结

javascript可以在嵌入在html内部直接使用（不推荐），也可以通过引入外部文件使用
为了性能考虑，script标签最好放在body标签的最后面
建议用单引号来包裹字符串

写作时间：2020-05-23

ninjacode

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript-Hello World

javascript-Hello World本篇介绍javascript的入门用法，有一定基础的可以不用看了，注意，役下内容仅介绍javascript在浏览器环境的使用，不包括NodeJS。怎样使用javascript?直接在body后通过script标签引入，类似这样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie
复制链接

扫一扫