web前端开发教程，最全JavaScript入门讲解

是否已经初步掌握了html和css，但完全不知道从何入手JavaScript？

如果是，那么这篇文章一定会对你有所帮助，这里总结了5条建议，帮助JavaScript初学者总结学习方法，提高学习效率。

1. 多看视频少看书

对初学者而言，看书的效率是很低的，书上的内容大多会展示核心代码，而视频为了演示效果，会展示全部代码。初学者自学需要的是全部代码，只看核心代码必定会留下踩不完的坑。所以，初学者一定要多看视频少看书。

2. 写代码的时间要多于看书和看视频的时间

学习JavaScript，一定要以写为主，而不是以看为主。学习时间的一半以上要留给写代码，剩下的时间用来看书和看视频。几乎所有初学者都有这个问题，就是拿一本书（或视频）看3个小时但是一行代码都没写。这样的结果就是，3个小时最多只利用了1个小时。太浪费时间了。正确的学习方法是：看到一行代码就写一行代码，就算理解，抄也得抄下来，然后再去慢慢理解。

3. 不可盲目追新技术

react，vue，angular,和你没关系
node，express，koa，和你没关系
grunt，gulp，webpack，和你没关系

JavaScript这几年变化很快，但是对于初学者来说要摒弃浮躁的气氛，静下心来打好基础。记住：自己是初学者，玩的东西就是：JavaScript和jQuery，工具就用一个编辑器和一个浏览器，这些就够了，别的不要碰.

4. jQuery还没过时

有些朋友会说jQuery已经淘汰了，jQuery确实注定要被淘汰，但是现在还差得远呢。

首先，jquery对于初学者非常友好，甚至不会js都可以学jQuery。并且目前市面上的网站和应用，仍然是jQuery居多，所以如果你是自学，jQuery是必学的。

5. 学习的顺序

熟悉基本概念：变量，数据类型，函数，运算符，表达式，对象（自定义对象，内置对象）。

这些基本概念一定要熟悉，熟悉到什么程度，看见一个概念，立刻就能写出示例代码，就够了。

2.熟悉DOM：树状结构，节点分类，添加节点，删除节点，修改属性，绑定事件。

3.熟悉jQuery：选择器、操作属性和样式、绑定事件、节点操作、动画方法。

4.用jQuery实现网页上看到的页面效果，比如轮播图，菜单的各种效果，返回顶部等。

5.试着用原生的js实现jQuery的常用方法。比如addClass，removeClass,index这些。

上面5条如果没能做到，就不要想着闭包，原型继承，ES6新特性这些东西了。

JavaScript 简介

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript：写入 HTML 输出

实例

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

JavaScript：对事件作出反应

实例

<button type="button" onclick="alert('Welcome!')">点击这里</button>

alert() 函数在 JavaScript 中虽然并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

实例

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

你会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。

DOM(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准。

JavaScript：改变 HTML 图像

本例会动态地改变 HTML <image>的来源 (src)：

The Light bulb

点击灯泡就可以打开或关闭这盏灯

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

实例

x=document.getElementById("demo")  //找到元素
x.style.color="#ff0000";           //改变样式

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

实例

if isNaN(x) {alert("Not Numeric")};

JavaScript学习教程

JavaScript学习教程推荐小伙伴们看动力节点老杜讲解的web前端全套教程，这个教程是将多年的编程经验灌输其中，典型的实践派，既适合初学者入门，也适合进阶（学习底层）。

主要讲解了前端开发中的核心技术JavaScript，俗称JS，视频中讲解了JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点，该视频可以开启你的WEB前端之路。

http://www.bjpowernode.com/?toutiaoweb.chai

学习目录

JavaScript教程
JavaScript语言特点
JavaScript组成
JavaScript中BOM和DOM之间的关系及主流浏览器
JavaScript开发工具
JavaScript基础语法
HTML嵌入JavaScript
JavaScript注释
JavaScript标识符
JavaScript保留关键字
JavaScript内置类型
JavaScript变量
JavaScript函数
JavaScript数据类型
JavaScript的typeof运算符
JavaScript创建对象
JavaScript Void
JavaScript中 null、NaN和undefined的区别
JavaScript流程控制语句
JavaScript事件和事件句柄
JavaScript常用事件及事件句柄
JavaScript注册事件的方式
JavaScript HTML DOM对象
JavaScript HTML DOM 对象
JavaScript BOM编程
JavaScript window对象
JavaScript history对象与location对象
JavaScript JSON

者 | 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%为中国明星项目？创业老兵这样说……

添加抽屉组件


import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { Plus } from '@element-plus/icons-vue'
//控制抽屉是否显示
const visibleDrawer=ref(false)
//添加表单数据模型
const articleModel=ref({
    title: '',
    categoryId: '',
    coverImg: '',
    content: '',
    state: ''
})

2抽屉

<!-- 抽屉 -->
<el-drawer v-model="visibleDrawer" title="添加文章" direction="rtl" size="50%">
    <!-- 添加文章表单 -->
    <el-form :model="articleModel" label-width="100px">
        <el-form-item label="文章标题">
            <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="文章分类">
            <el-select placeholder="请选择" v-model="articleModel.categoryId">
                <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="文章封面">

            <!-- 
                auto-upload:设置是否自动上传
                action:设置服务器接口路径
                name:设置上传的文件字段名
                headers:设置上传的请求头
                on-success:设置上传成功的回调函数
             -->
           
            <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
            action="/api/upload"
            name="file"
            :headers="{'Authorization':tokenStore.token}"
            :on-success="uploadSuccess"
            >
                <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="文章内容">
            <div class="editor">
                <quill-editor theme="snow" v-model:content="articleModel.content" contentType="html">
                </quill-editor>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="addArticle('已发布')">发布</el-button>
            <el-button type="info" @click="addArticle('草稿')">草稿</el-button>
        </el-form-item>
    </el-form>
</el-drawer>

3显示抽屉

<template #header>
    <div class="header">
        <span>文章管理</span>
        <div class="extra">
            <el-button type="primary" @click="visibleDrawer=true">添加文章</el-button>
        </div>
    </div>
</template>

4.安装富文本编辑器

npm install @vueup/vue-quill@latest --save

导入组件样式

import { QuillEditor } from '@vueup/vue-quill'

import '@vueup/vue-quill/dist/vue-quill.snow.css'

页面调用

<el-form-item label="文章内容">
    <div class="editor">
        <quill-editor theme="snow" v-model:content="articleModel.content" contentType="html">
        </quill-editor>
    </div>
</el-form-item>

样式

.editor {

width: 100%;

:deep(.ql-editor) {

min-height: 200px;

}

5.文章封面上传

//导入token
import { useTokenStore } from '@/stores/token.js';
const tokenStore=useTokenStore();

//上传成功的回调函数
const uploadSuccess=(result)=>{
    articleModel.value.coverImg=result.data;
    console.log(result.data);
}

<el-form-item label="文章封面">

    <!-- 
        auto-upload:设置是否自动上传
        action:设置服务器接口路径
        name:设置上传的文件字段名
        headers:设置上传的请求头
        on-success:设置上传成功的回调函数
     -->
   
    <el-upload class="avatar-uploader" :auto-upload="true" :show-file-list="false"
    action="/api/upload"
    name="file"
    :headers="{'Authorization':tokenStore.token}"
    :on-success="uploadSuccess"
    >
        <img v-if="articleModel.coverImg" :src="articleModel.coverImg" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>
</el-form-item>

6.添加事件

<el-form-item>
    <el-button type="primary" @click="addArticle('已发布')">发布</el-button>
    <el-button type="info" @click="addArticle('草稿')">草稿</el-button>
</el-form-item>

//添加文章
import {ElMessage} from 'element-plus'
const addArticle=async (clickState)=>{
    //把发布状态赋值给数据模型
    articleModel.value.state=clickState;

    //调用接口
    let result=await articleAddService(articleModel.value);

    ElMessage.success(result.msg? result.msg:'添加成功');

    //让抽屉消失
    visibleDrawer.value=false;

    //刷新当前列表
    articleList()
}

7.article.js添加函数

在线咨询

上一篇：前端开发之用以处理表单的jQuery控件之表单验证
下一篇：JavaScript常见的三种排序算法，手把手解释代

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

web前端开发教程，最全JavaScript入门讲解

是否已经初步掌握了html和css，但完全不知道从何入手JavaScript？

1. 多看视频少看书

2. 写代码的时间要多于看书和看视频的时间

3. 不可盲目追新技术

4. jQuery还没过时

5. 学习的顺序

JavaScript 简介

JavaScript：对事件作出反应

JavaScript：改变 HTML 内容

JavaScript：改变 HTML 图像

JavaScript：改变 HTML 样式

JavaScript：验证输入

JavaScript学习教程

学习目录

步骤5-发送电子邮件

总结

您的项目需求