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-發送電子郵件

總結

您的項目需求