思维之海

——在云端，寻找我的星匙。

JavaScript学习指南

In Views: Valine:

JavaScript是web开发人员必须学习的3门语言之一：

  • HTML定义了网页的内容，CSS描述了网页的布局，JavaScript则负责定义网页的行为。

三大前端框架：React、Vue、Angular。



References

网络工具综合学习网站：Runoob。

JavaScript 教程-Runood

JavaScript教程-廖雪峰

JS游戏开发教程

虚幻4

JavaScript教程 - MDN

我的第一段 JavaScript

来玩一个小游戏吧~。

QAQ

源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p id="demo2">
来玩一个小游戏吧~。<br>
</p>
<script>
var count = 1;
var color = 2333;
function myFunction2()
{
	x=document.getElementById("demo2");  // 找到元素
    x.innerHTML= x.innerHTML + "<strong><font color=" +color.toString() + ">QAQ:"+ count.toString() + "</font></strong> ";    // 改变内容
    count = count + 1;
    color = color + 23333;
}
</script>

基础工具

JSON格式 .json

JSON 语法，使用JSON，json文件格式详解

JSON在线解析及格式化验证 - JSON.cn

JSON（JavaScript Object Notation）是一个数据交换协议规范。它的设计简约，从而在Web开发中得到大量的应用。JSON文件后缀为.json。不同的语言中存在不同的对JSON文件的解析器，如JavaScript中的eval()函数。

什么是数据交换语言?

在不同的系统不同的语言间交换数据时，我们一般倾向于使用无关于平台及语言的数据交换语言。此类语言主要包括XML，JSON，YAML，Protobuf等，常用于接口调用，配置文件，数据存储等场景。

元素

JSON允许以下基本元素 / 值（value）：

  • 字符串（string）
  • 数值（number）
  • 布尔值（true、false）
  • 空值（null）

以及嵌套元素：

  • 对象（object）
  • 数组（array）

一个JSON文件就是一个元素（具有任意的复杂度）。

在JavaScript中可以直接创建JSON格式的变量。

1
2
3
4
5
var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];

可以像这样访问 JavaScript 对象数组中的第一项：

1
employees[0].lastName;

返回的内容是：

1
Gates

可以像这样修改数据：

1
employees[0].lastName = "Jobs";

对象 {}

一个JSON对象就是一个字典，即，“键-值对”（key: value）。

1
2
3
4
{
    "firstName":"John",
    "lastName":"Doe"
}

数组 []

JSON 数组在方括号中书写。

1
2
3
4
5
6
7
{
    "employees": [
        { "firstName":"John" , "lastName":"Doe" },
        { "firstName":"Anna" , "lastName":"Smith" },
        { "firstName":"Peter" , "lastName":"Jones" }
    ]
}

NPM 前端套件管理器

npm 是干什么的？（非教程）

NPM 使用介绍

NPM是什么？了解Node Package Manager套件管理机制

NPM（Node Package Manager），前端套件管理工具。除此之外还有类似的Yarn。

Node.js：一种javascript的运行环境，能够使得javascript脱离浏览器运行。它是一种提供给后端服务器的技术。

Node.js是用来做什么的？ - Gavin的回答 - 知乎

Node.js - 廖雪峰

Package.json

package.json文件— JavaScript 标准参考教程（alpha）

  • name - 包名。
  • version - 包的版本号。
  • description - 包的描述。
  • homepage - 包的官网 url 。
  • author - 包的作者姓名。
  • contributors - 包的其他贡献者姓名。
  • scripts - 指定了运行脚本命令的npm命令行缩写。比如start指定了运行npm run start时，所要执行的命令。
  • dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
  • repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
  • main - main 字段指定了程序的主入口文件，require(‘moduleName’) 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
  • keywords - 关键字

npm init

NPM通过初始化项目来填写基本信息，并创建Package.json文件。

npm install

npm 模块安装机制简介

npm install 检查当前位置下的package.json，并根据该文件计算缺少的套件，自动更新相关的依赖。并且生成node_modules文件夹用于保存下载的依赖包。

安装指定模块：

1
npm install <Module Name>

安装并记录到Package.json：

1
2
npm install express --save	 # 将该模块写入dependencies属性
npm install express --save-dev # 将该模块写入devDependencies属性

全局安装：

1
npm install express -g   # 全局安装

卸载：

1
npm uninstall <Module Name>

查看依赖树：

1
npm ls

版本检查：

1
npm -v

升级：

1
sudo npm install npm -g

npm run <scripts>

运行Package.json中”scripts”属性所设置的脚本。比如：

1
npm run start