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