Javascript几乎是目前最流行的语言,它是前端开发的不二选择。前端流行的React、Vue等框架以及以微信小程序为代表的小程序开发,均使用javascript。在后端的node中,使用的语言也是javascript。如果您愿意,完全可以以一种javascript语言完成全栈开发。
javascript除了可以增加网页的互动性外,还可以进行网页端游戏的开发,实时网络程序开发以及其他强大的功能。现在几乎所有大公司都支持。
运行的环境可以在浏览器和node中。
ECMAScirpt是javascript的规范。1997年发布了第一版,目前主流的版本是2015-2016年发布的ES6版本,ES6是相对于ES5的一个重大改变。
不借助工具使用Javascript
打开谷歌浏览器,右键–>检查,再选择“控制台”,就可以键入代码了:
console.log(“hello world!”);
# 注意以分号结尾
2+2 #表达式
alert(“warning”)
设置开发环境
有很多开发工具的选择,如sublime Text ,Atom等,我们选择Visual Studio Code(VSCode)。
官网下载:
另外再下载node.js并安装。
新建一个文件夹,命名为js_basics,然后将该文件夹拖到vscode中。
再在js_basics文件夹下新建文件index.html
输入感叹号 !,再按 TAB键,自动生成html模板,保存。如下。
再安装vscode扩展“live server”,这是一个轻量级的web服务器。
然后右键点击index.html,选择”Open with Live Server”,会打开浏览器:
http://127.0.0.1:5500/index.html
浏览器运行javascript
我们修改下前面的index.html。
…
<body>
<h1>Hello World</h1>
</body>
<script>
// This is my first javascript code!
console.log(“Hello World!”)
</script>
…
如果在html文件中写脚本,一般建议将<script>放在<body>下面,原因是:
- 因为浏览器从上至下执行,如果脚本在上面先执行,可能造成页面显示空白。
- javascript代码中可能会用到页面元素,放在后面比较安全。
我们用浏览器打开这个网页,再右键–检查–控制台,
能看到输出 “Hello World”
关注点的分离:
我们需要分离javascript和html,因为javascript关注的是行为,而html关注的是内容。
新建一个文件 index.js,然后将index.html中的javascript代码剪切到这个文件,再在index.html里修改<script>节:
<script src=”index.js”></script>
Node运行javascript
先确认node.js已安装好。
再进到之前创建的文件夹js_basics
执行:
node index.js
就能看到输入了Hello World,说明node正常了运行javascript。
注意,现在javascript代码是程序。而node是javascript的运行环境,这个环境包含了谷歌的V8 javascript引擎。
小结
本文介绍了Javascript及其规范版本,搭建了开发环境,演示如何在浏览器下和Node下运行javascript。下一节将开始介绍javascript基本语法。