者 | Mateusz Iwaniuk

译者 | 明明如月，责编 | 夕颜

出品 | CSDN（ID：CSDNnews）

文章配套代码: https://github.com/iwaniukooo11/email-sender

现在，即使是创建最基本的网站，程序员也必须使用现代的功能和技术。甚至像为你的朋友创建简单的投资组合这样的基本项目也可能涉及到一些问题，比如从联系人表单接收数据。有很多方法可以读取这些数据。你可以将表单与数据库连接起来，然后从数据库中读取传入的消息来实现功能，但这样做会给不懂技术的客户造成困难。

你为什么不通过发送电子邮件传输信息？

不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为需要使用某种后端语言。

实际上，你不必使用任何如 php 或 python 这种后端语言，你甚至不需要用到 node.js！你需要的就是一个简单的EmailJS 库。

本文将介绍下面两个重要功能:

• 配置 emailjs 帐户

• 使用 JS 发送电子邮件

请注意，在我的项目中，我使用了 gulp 和 webpack，我在 src 文件夹存放源码，dist 存放最终发布版本的代码。

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

步骤1-用 HTML 创建表单

首先需要创建一个 HTML 表单。你不必放置像 required 或 max 这种验证属性，因为稍后，preventDefault 函数将在你的提交事件上运行，它会让这些属性的处理失效。

表单中最重要的是为每个输入放置 name 属性，后面会用到。

我的非常简单的表单是这样的:

src/html/index.html

 <form class="form"> <input name='name' type="text" placeholder="Your name..." class="form__input" /> <input name='topic' type="text" placeholder="Topic..." class="form__input" /> <textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea>

 <input type="submit" value="send" class="form__input form__input--button"> </form>

步骤2-注册成为 email 用户

要配置你的电子邮件，你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。

登入后，系统会询问你的电子邮件服务，它位于个人电子邮件服务区（personal email service）。在我的例子中，我选择了 gmail。

然后，你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如，如果你关联了 xyz@gmail.com 账户，你后续发送的邮件都将从这个邮箱发出。所以不要担心“ Send email on your behalf” 这个授权信息—这正是你需要的！

连接完 gmail 账户后，点击添加服务（add service）按钮。

步骤3-创建邮件模板

如果你已经成功连接了你的 gmail 账户，你现在应该在信息中心中。现在需要创建电子邮件模板了。

切换到电子邮件模板卡，并单击创建一个新的模板（create a new template）。界面非常友好，所以创建模板不会有任何问题。

你可以选择模板的名称和 ID。我称之为“我的神奇模板（my_amazing_template）”。

接下来，你必须指定邮件的内容。

模板的变量值来自 input 中的 `name` 属性。你已将变量插入`{{{}}}`符号中。

不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自己的公司邮箱。

这是我的简单模板，它使用来自 HTML 表单里的 3 个变量。我还指定了接收电子邮件的主题。

步骤4-保存 API 密钥

这部分没什么特别的。Emailjs 共享授权 API 密钥，将在发送电子邮件时使用。当然，放这些钥匙最好的地方是`.env` 配置。但是因为我使用的是简单的静态文件，我不想使用服务器配置，所以我将它们保存在 apikeys 文件中，然后再将它们导入。

你的 USER_ID 位于 Account > API Keys 菜单下。

TEMPLATE_ID 位于模板的标题下面。

这是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果需要将源码发布到 GITHUB，不要忘记将 APIKEYS 文件添加到 .GITIGNORE文件中

步骤5-发送电子邮件

现在是该项目最后也是最重要的部分的了。现在我们必须使用 javascript 发送电子邮件。

首先，你必须下载 emailjs 包。

npm i emails-com

然后，转到 js 文件，导入库和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import apiKeys from './apikeys'

现在是编写发送电子邮件功能的时候了

src/js/main.js

const sendEmail = e => { e.preventDefault

 emailjs .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID) .then( result => { console.log(result.text) }, error => { console.log(error.text) } )}

sendForm 函数有4个参数:

你的电子邮件的 ID，在这里:

TEMPLATE_ID 来自 apikey 文件,

事件对象来自你的表单提交

USER_ID 来自 apikey 文件,

最后，查找表单并添加提交事件监听器：

src/js/main.js

const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，由于 `preventDefault` 函数，属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。

以上就是全部内容，接下来让我们测试一下。

填写页面上的表单并发送。

我收到电子邮件，内容正是根据我们的模板和表单数据渲染出来的。

通过上图可以看出，所有的变量的值都填充到了正确的位置上。

总结

通过本文的介绍你会发现用 JS 发送邮件并非难事。

使用 emailjs，你可以简单的方式发送电子邮件。

我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件，相信本文对你有帮助。

这篇文章的配套代码在这里: https://github.com/iwaniukooo11/email-sender

原文链接：

https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

本文为CSDN翻译文章，转载请注明出处。

☞我们想研发一个机器学习框架，6 个月后失败了
☞生产型机器学习已经没那么困难了？
☞视频 | 你不知道的"开源"60年秘史
☞GitHub标星10,000+，Apache项目ShardingSphere的开源之路
☞阿里技术专家告诉你，如何画出优秀的架构图？
☞加拿大API平台如何做到30%为中国明星项目？创业老兵这样说……

者 | Ruqayyah Sara

译者 | 弯月，责编 | 伍杏玲

出品 | CSDN（ID：CSDNnews）

我是一名全栈开发。前几天我一直在研究算法和数据结构，因为对于程序员而言，最重要能力的就是解决问题，所有任何程序员都应该拥有强大的解决问题的基础能力。

两天前我开始学习Python，开始对这门语言有了更多的理解。我开始将其与JavaScript进行比较，因为JavaScript是我日常工作中使用的语言。

JavaScript和Python是两门非常重要的语言。尽管包括我在内的许多人都知道Python或JavaScript，但我们并不清楚两种语言之间的重要区别。

我注意到这两门年语言有许多语义上的区别，相信理解这些区别对我和对其他人都有很大帮助。在本文中，我会比较我在两门语言中遇到的一些基础概念。所以，如果你熟悉JavaScript或Python，想了解二者的差异，那么你就来对地方了！

注释

JavaScript

使用双斜线（//）作为单行注释，/* */ 作为多行注释。

Python

使用 # 作为单行注释，使用三引号""" """ 作为多行注释。

代码块

JavaScript

JavaScript中的每个代码块都必须放在花括号（{}）中，每条语句必须使用分号 ; 结束。

var a = 2;
if(a>0){
console.log("Positive");
}
else{
console.log("Negative");
}

Python

Python中的代码块使用缩进表示。它不使用花括号或圆括号，而是使用空白。每条语句都需要换行。

a = 2
if a>0:
print("Positive")
else:
print("negative")
print("does not belong to else block")

数据类型

我无法在本文中完整地讨论JavaScript和Python之间的数据类型差异，这里我们只讨论主要的差异。

基本数据类型

• 上面的表格展示了JavaScript和Python的基本数据类型。JavaScript中的Number类型表示Int和float值，由编译器在运行时确定。而JavaScript（ES10）中的BigInt用于存储大整数，而Python使用Int表示所有尺寸的整数。

• JS使用关键字表示空值，Python使用None。

• Python没有undefined和symbol的概念，这些是JavaScript特有的。

• Python有一种特殊的数据类型——complex，用于表示复数 x + yj，其中x是实部，y是虚部。

a=3+4j
print(a.real) #3
print(a.imag) #4

非基本数据类型

• 上图展示了复杂的（或者叫做非基本）数据类型。Python中的列表能存储任何数据类型，与JavaScript一样。

• 但是Python中的数组可以使用库（如NumPy，array）来定义。Python中的数组只能包含统一数据类型。Python中的列表和数组有很大区别。数组上可以执行多种数学操作，而列表不能。

• JavaScript中的对象类似于Python中的字典。两者都包含键值对。但对象是JavaScript中的基本组成部分，而字典在Python中只不过是个数据容器。

• Python中的元组是一个不可修改的列表。用元组表示的列表无法被重新定义。而JavaScript没有这个概念。

• 因此，Python拥有内置的哈希表（字典），而JavaScript没有内置的哈希表、方法或库。

变量定义

JavaScript

在JavaScript中定义变量需要使用三种主要的关键字：var，let和const。定义方法决定了变量的使用方式（以及作用域）。

Python

Python中定义变量不需要使用关键字，只需要给变量名直接赋值即可：

a = 3
print (a) # 3

If-Else

JavaScript

JavaScript中的条件语句是 if、else if、else还有switch。

Python

Python中的条件语句是if、elif和else。

elif是else-if的缩写。Python没有switch语句。相反，可以用字典来代替。

三元运算符

JavaScript

JavaScript的三元运算符（?:）是一个条件运算符，语法为(condition)?(expresssionIfTrue):(expressionIfFalse)：

var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

Python

Python中的三元运算符的语法是 (expressionIfTrue) if (condition) else (expressionIfFalse)

a, b = 10, 20
min = a if a < b else b
print(min)

全等运算符

JavaScript

全等运算符（===）也叫“严格相等运算符”，会比较两个运算数并检查其相等性，而不会进行类型转换，也就是说，它会检查运算数的数据类型。返回值为布尔。JavaScript只有一个全等运算符。

var a=3,b="3";
console.log(a==b); // true
console.log(a===b); // false

Python

Python有两个全等运算符：is 和 is not。

is 运算符会测试两个运算数是否为同一个对象，is not为is的反面。

x = 5
if (type(x) is int):
print ("true") # true
if ( type(x) is not int):
print ("true")

成员运算符

JavaScript

成员运算符检查对象中的特定属性。JavaScript只有一个成员运算符：in。

const user= {name: 'Sara', age: 19, sex: "female"};
console.log('name' in car);
// output: true

Python

成员运算符用于验证某个值是否为成员。Python有两个成员运算符：in和not in。

x = 24
y = 20
list = [10, 20, 30, 40, 50 ]
if ( x not in list ):
print ("not present") # Output:True

循环

JavaScript

JavaScript有三种循环：

• 入口控制循环：for和while（在执行循环语句之前测试条件）

• 出口控制循环：do-while（执行循环语句之后测试条件）

// for loop
var c = ["red", "green", "blue", "purple"];
for (var i = 0; i<4; i++){
console.log(c[i]);
}
// prints array// while
var c = ["red", "green", "blue", "purple"];
while(i<4){
console.log(c[i]);
i++;
} // prints array

Python

Python有两种循环：for和while。Python没有内置的do-while循环。

Python的while循环与JavaScript的for循环类似。例如下面的例子：

c = ["red", "green", "blue", "purple"]
i = 0
while i<4:
print(c[i])
i += 1 # i++ is invalid

Python不支持++和--运算符。我们需要使用x+=1和x-=1。

for循环用来遍历序列（列表、数组和元组）。它使用in操作符和range函数进行迭代。可以用range生成一系列数字，该函数接受三个参数：start，stop和step。

• start：开始的位置（可选）。默认为0。

• stop：结束的位置（必须指定）。

• step：指定序列中两个数字之间的间隔（可选）。

x = range(5)
for n in x:
print(n) # 1,2,3,4x = range(3,9)
for n in x:
print(n) # 3,4,5,6,7,8x = range(2,20,2)
for n in x:
print(n) # 2,4,6,8,10,12,14,16,18

以上就是我注意到的最基本的JavaScript和Python之间的语义区别。

原文链接：https://medium.com/better-programming/semantic-differences-between-javascript-and-python-ed21b1f3ce50

本文为 CSDN 翻译，转载请注明来源出处。