## Farallon

是一款免费的WordPress主题，单栏，为个人博客设计。响应式设计，SEO友好极简风格，十分适合图片较多的摄影博客或生活记录类博客使用。

主题使用古法制作，不依赖三方框架。主题对部分插件做了适配，强烈建议使用作者本人全家桶。主题Chrome Lighthouse跑分几乎满分，移动端稍差也只是因为图片过大。

特点：

- 响应式设置
- 暗黑模式
- 极速
- SEO 友好
- 多个自定义页面
- 不依赖三方框架
- 友好的主题设置
- 高度自定义分类属性

## 下载地址

演示地址：[https://farallon.wpista.com/](https://farallon.wpista.com/)

项目地址：[https://github.com/bigfa/hera](https://github.com/bigfa/hera)

使用文档：[https://docs.wpista.com/guide/](https://docs.wpista.com/guide/)


Farallon 免费WordPress主题，适合图片较多摄影博客或生活记录类博客

## 表达式
表达式说明article选取所有article元素的所有子节点/article选取根元素articlearticle/a选取所有属于article子元素的a元素//div选取所有div子元素article//div选取所有属于article元素的后代div元素//@class选取所有名为class的属性
## 谓语
表达式说明/article/div[1]选取属于article子元素的第一个div元素/article/div[last()]选取属于article子元素的最后一个div元素/article/div[last()-1]选取属于article子元素的倒数第二个div元素//div[@lang]选取所有拥有lang属性的div元素//div[@lang='eng']选取所有lang属性为eng的div元素


XPath基础语法

## Make Graph

免费制作图表网站，支持多种图表（还在持续扩充中）支持多种颜色主题和定制，可以导出PNG和SVG。使用这款图表制作工具，可将您的数据转换为令人惊叹的可视化效果。没有下载，没有注册，，隐私优先，在几秒钟内生成美丽的图表。

8+专业图表类型：条形图、折线图、饼图、散点图、雷达图、漏斗图、热图、词云、地图。

强大功能：

- 闪电般：通过直观的界面，在几秒钟内创建专业图表
- 主题好看：从多个专业设计的主题中进行选择，以匹配您的品牌
- 随处导出：下载PNG或SVG格式的图表，以便在演示文稿和文档中使用
- 8+图表类型：从基本的条形图到高级的雷达和漏斗可视化
- 无需注册：立即开始创建，无需任何注册或帐户设置
- 隐私第一：数据将保留在浏览器中，不存储或访问您的信息

在数据驱动决策的时代，图表可视化已成为信息传递的核心工具。无论是学术研究、商业分析，还是日常报告，一款高效且易用的图表生成工具至关重要。今天介绍的Make Graph，将助你轻松驾驭数据之美，赶快用起来吧。

## 网站地址

官网：[https://makegraph.app/](https://makegraph.app/)


Make Graph 免费功能强大的在线图表制作工具

[上回书](__GHOST_URL__/js-101-history/)说到，JavaScript从一个十天速成的“临时工”，一路逆袭成了宇宙级顶流。今天，咱们终于要动手写代码了！别紧张，写代码这事，就跟学做菜一样——先得把锅碗瓢盆准备好，再点火倒油，最后才能炒出一盘色香味俱全的“Hello World”。

---

## 1. 浏览器控制台：程序员的“忏悔室”兼“游乐场”

首先，咱们得找个地方写 JavaScript。你可能会想：是不是得下载个啥软件？像学Python要装Python，学Java要装JDK？其实完全不用！**浏览器就是最好的运行环境**——因为浏览器内置了JavaScript引擎（比如Chrome的V8），它像个24小时待命的“隐形式解释器”，随时准备执行你的代码。而浏览器的“开发者工具”里，藏着一个叫**控制台（Console）** 的神奇面板，这就是你的JS游乐场。

**怎么打开它？**

- Chrome/Edge：按`F12`或`Ctrl+Shift+I`，然后点击顶部的“Console”标签。
- Firefox：同样`F12`或`Ctrl+Shift+I`。
- Safari：需要先在设置里开启“开发菜单”，然后`Cmd+Option+C`。

打开之后，你会看到一个空白的命令行界面，光标在`>`后面一闪一闪，仿佛在说：“来呀，快输入点啥！”这就是你的JavaScript游乐场——你可以在这里输入任意JS代码，按回车立即执行，结果会直接显示出来。

**为什么叫“忏悔室”？**
因为程序员经常在这里调试错误，对着满屏红彤彤的报错信息，一边念叨“我错了，我改了”，一边找bug。控制台就是那个静静听你忏悔、然后告诉你哪里错了的神父。

**试试手：**
在控制台里输入`1 + 2`回车，你会看到输出`3`。再试试`'Hello' + ' ' + 'World'`，输出`'Hello World'`。是不是很有成就感？你已经会写JavaScript了！（虽然只是表达式）

---

## 2. 编辑器推荐：VSCode真香现场

控制台适合写一两行代码试试手，但真要写一个完整的网页脚本，还是得用专业的代码编辑器。市面上编辑器很多，但我要给你安利的是**Visual Studio Code**（简称VSCode）——免费、开源、插件丰富、颜值高，堪称编辑器界的“瑞士军刀”。

**为什么是VSCode？**

- **智能提示**：你打字的时候，它会像猜你喜欢一样弹出补全建议，少敲好多字母。
- **插件市场**：想要啥功能直接搜，比如代码高亮、自动格式化、括号变色……连主题都能换，程序员也要讲究界面美观的好吗！
- **集成终端**：不用切换窗口就能运行命令，省心。
- **调试神器**：可以直接在编辑器里打断点、看变量值，找bug就像玩推理游戏。

当然，如果你喜欢硬核，也可以用**Sublime Text**、**Atom**、**WebStorm**（付费但强大）甚至记事本——不过用记事本写代码的，要么是大神，要么是自虐狂。

**安装提示**：去官网code.visualstudio.com下载安装，一路下一步就行。装完后建议装个中文插件（搜索“Chinese”），毕竟母语看着舒服。

---

## 3. 第一个程序：Hello World及其亲戚们

好了，环境备齐，现在开始编程界的“开光仪式”——写一个程序，让电脑对你说“Hello World”。

### 3.1 最正统的Hello World

在控制台里输入：

    console.log('Hello World');
    

回车，你会看到控制台输出`Hello World`。恭喜你，你的JavaScript生涯正式开始了！

`console.log`是JavaScript里最常用的“喊话”工具，它的作用是把括号里的内容打印到控制台。你可以打印数字、字符串、变量、甚至整个对象。比如：

    console.log('我的年龄是：', 18);
    console.log('一个对象：', { name: '张三', age: 20 });
    

在真实开发中，`console.log`主要用于调试——在你怀疑某个变量值不对的时候，打印出来看看。它就像侦探的放大镜，帮你找出代码里的“凶手”。

### 3.2 爱弹窗的alert

如果说`console.log`是悄悄在后台打印，那`alert`就是直接跳到用户脸上，强行刷存在感。试试在控制台输入：

    alert('你被JavaScript绑架了！');
    

浏览器会立刻弹出一个对话框，上面显示你写的文字，还有一个“确定”按钮。用户必须点击“确定”才能继续操作。这玩意儿早期常被用来做“欢迎提示”，现在更多用于教学演示或者紧急通知——毕竟强行弹窗太霸道，用多了会被用户嫌弃。

### 3.3 能输入信息的prompt

`prompt`比`alert`更进一步，它不仅能显示消息，还能让用户输入文字。比如：

    prompt('你叫什么名字？');
    

会弹出一个带输入框的对话框，用户输入后点击确定，输入的内容会作为返回值（不过你现在还没学变量，暂时感受一下）。这个函数有点像登记表，等着用户填信息。

### 3.4 需要确认的confirm

`confirm`则是让用户做选择——显示一段话，附带“确定”和“取消”两个按钮。比如：

    confirm('你确定要删除这条记录吗？');
    

点击确定返回`true`，取消返回`false`。它常用于需要用户确认的场景，比如删除前二次确认。

### 3.5 页面直接输出的document.write

还有一个老古董：`document.write`。它可以把内容直接写到网页里。比如在控制台输入：

    document.write('<h1>Hello World</h1>');
    

你会在当前页面看到一个大标题。注意，如果这个脚本是在页面加载后执行的，它会覆盖掉整个页面内容（因为`document.write`的行为比较粗暴）。所以现在基本不用它了，但偶尔在古董代码里见到，知道是干啥的就行。

---

## 4. 把这些亲戚放一起做个对比
函数作用特点使用频率`console.log`在控制台打印信息悄悄后台打印，不影响用户界面，调试神器⭐⭐⭐⭐⭐`alert`弹出提示框强行中断用户操作，必须点确定，适合紧急通知⭐⭐`prompt`弹出输入框获取用户输入，返回值是字符串⭐⭐`confirm`弹出确认框让用户选择确定或取消，返回布尔值⭐⭐`document.write`直接写入页面简单粗暴，但容易覆盖页面，现在基本弃用⭐
注意：除了`console.log`，其他几个都是浏览器提供的Web API，不是JavaScript语言本身的特性。但在浏览器环境里，它们就是可以随便用的“亲戚”。

---

## 5. 动手小练习：和电脑聊个天

现在轮到你了。打开浏览器控制台，依次执行以下代码，看看会发生什么：

1. `console.log('你好，我是电脑，你是谁？');`
2. `let name = prompt('请输入你的名字：');`（先不管`let`是啥，照着输就行）
3. `console.log('你好，' + name + '！很高兴认识你。');`
4. `confirm('我们做朋友好吗？');`
5. 如果点击了确定，就在控制台打印`true`，否则打印`false`

做完这些，你已经和电脑完成了一次简单的对话！是不是有点小成就感？

---

## 6. 小结与下集预告

今天咱们学会了：

- 打开浏览器控制台这个“游乐场”。
- 安装VSCode这个强大编辑器。
- 写了第一个程序`console.log('Hello World')`。
- 认识了它的亲戚们：`alert`、`prompt`、`confirm`、`document.write`。

从下一课开始，我们就要正式进入JavaScript的语法世界了——变量、数据类型、运算符……这些听起来有点枯燥，但我会尽量讲得像相声一样有趣。记得按时来上课，别迟到哦！

---

**课后作业**：

1. 尝试在VSCode里新建一个HTML文件，在里面用`<script>`标签写一段JavaScript，然后在浏览器中打开，看看效果。（提示：`<script>console.log('我在HTML里！');</script>`）
2. 如果`alert`和`prompt`同时出现，谁先弹出来？为什么？（答案在下节课揭晓）

[下节课](__GHOST_URL__/js-103-variables-datatypes/)见！记得带好你的键盘和好奇心。


第二课：工欲善其事，必先利其器——开发环境准备与Hello World

## eTempMail

eTempMail是一个临时电子邮件服务，分为EDU临时教育邮箱和常规临时邮件服务，它允许用户创建一个临时的电子邮件地址，用于注册网站、应用程序和服务，而不需透露用户的真实电子邮件地址。

这可以帮助用户保护他们的隐私，并避免在注册时收到垃圾邮件和其他不必要的信息。

EDU临时邮件服务允许使用教育邮件地址注册到平台，这些平台提供机会和折扣以支持在大学学习的学生，有需要的同学可以试试。

## 网站地址

eTempMail：[https://etempmail.com/zh](https://etempmail.com/zh)

## 其他临时邮箱

- Gmail临时邮箱生成器：[https://22.do/](https://22.do/)
- Vmail：[https://vmail.dev/](https://vmail.dev/)
- Smail：[https://smail.pw/](https://smail.pw/)
- 临时邮箱：[https://temp.now/](https://temp.now/)
- Temp Mail：[https://tempmail.ing/zh-CN/](https://tempmail.ing/zh-CN/)
- TempMail：[https://tempmail100.com/zh-cn/](https://tempmail100.com/zh-cn/)
- Temp Mail：[https://minmail.app/cn](https://minmail.app/cn)
- Temp Mail Pro：[https://tempmailpro.org/zh](https://tempmailpro.org/zh)


eTempMail-免费临时教育邮箱

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。