掌握Javascript(一)

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)。

官网下载:

https://code.visualstudio.com

另外再下载node.js并安装。

https://nodejs.org/zh-cn/

新建一个文件夹,命名为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>下面,原因是:

  1. 因为浏览器从上至下执行,如果脚本在上面先执行,可能造成页面显示空白。
  2. 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基本语法。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注