思维之海

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

JavaScript学习指南

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

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

三大前端框架ReactVueAngular




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 语法使用JSONjson文件格式详解

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套件管理机制

NPMNode 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