web前端開發(fā)教程，最全JavaScript入門講解

是否已經(jīng)初步掌握了html和css，但完全不知道從何入手JavaScript？

如果是，那么這篇文章一定會對你有所幫助，這里總結(jié)了5條建議，幫助JavaScript初學(xué)者總結(jié)學(xué)習(xí)方法，提高學(xué)習(xí)效率。

1. 多看視頻少看書

對初學(xué)者而言，看書的效率是很低的，書上的內(nèi)容大多會展示核心代碼，而視頻為了演示效果，會展示全部代碼。初學(xué)者自學(xué)需要的是全部代碼，只看核心代碼必定會留下踩不完的坑。所以，初學(xué)者一定要多看視頻少看書。

2. 寫代碼的時間要多于看書和看視頻的時間

學(xué)習(xí)JavaScript，一定要以寫為主，而不是以看為主。學(xué)習(xí)時間的一半以上要留給寫代碼，剩下的時間用來看書和看視頻。幾乎所有初學(xué)者都有這個問題，就是拿一本書（或視頻）看3個小時但是一行代碼都沒寫。這樣的結(jié)果就是，3個小時最多只利用了1個小時。太浪費時間了。正確的學(xué)習(xí)方法是：看到一行代碼就寫一行代碼，就算理解，抄也得抄下來，然后再去慢慢理解。

3. 不可盲目追新技術(shù)

react，vue，angular,和你沒關(guān)系
node，express，koa，和你沒關(guān)系
grunt，gulp，webpack，和你沒關(guān)系

JavaScript這幾年變化很快，但是對于初學(xué)者來說要摒棄浮躁的氣氛，靜下心來打好基礎(chǔ)。記?。鹤约菏浅鯇W(xué)者，玩的東西就是：JavaScript和jQuery，工具就用一個編輯器和一個瀏覽器，這些就夠了，別的不要碰.

4. jQuery還沒過時

有些朋友會說jQuery已經(jīng)淘汰了，jQuery確實注定要被淘汰，但是現(xiàn)在還差得遠(yuǎn)呢。

首先，jquery對于初學(xué)者非常友好，甚至不會js都可以學(xué)jQuery。并且目前市面上的網(wǎng)站和應(yīng)用，仍然是jQuery居多，所以如果你是自學(xué)，jQuery是必學(xué)的。

5. 學(xué)習(xí)的順序

熟悉基本概念：變量，數(shù)據(jù)類型，函數(shù)，運算符，表達(dá)式，對象（自定義對象，內(nèi)置對象）。

這些基本概念一定要熟悉，熟悉到什么程度，看見一個概念，立刻就能寫出示例代碼，就夠了。

2.熟悉DOM：樹狀結(jié)構(gòu)，節(jié)點分類，添加節(jié)點，刪除節(jié)點，修改屬性，綁定事件。

3.熟悉jQuery：選擇器、操作屬性和樣式、綁定事件、節(jié)點操作、動畫方法。

4.用jQuery實現(xiàn)網(wǎng)頁上看到的頁面效果，比如輪播圖，菜單的各種效果，返回頂部等。

5.試著用原生的js實現(xiàn)jQuery的常用方法。比如addClass，removeClass,index這些。

上面5條如果沒能做到，就不要想著閉包，原型繼承，ES6新特性這些東西了。

JavaScript 簡介

JavaScript 是世界上最流行的編程語言。

這門語言可用于 HTML 和 web，更可廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機(jī)等設(shè)備。

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。
JavaScript 是可插入 HTML 頁面的編程代碼。
JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。
JavaScript 很容易學(xué)習(xí)。
JavaScript：寫入 HTML 輸出

實例

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

JavaScript：對事件作出反應(yīng)

實例

<button type="button" onclick="alert('Welcome!')">點擊這里</button>

alert() 函數(shù)在 JavaScript 中雖然并不常用，但它對于代碼測試非常方便。

onclick 事件只是您即將在本教程中學(xué)到的眾多事件之一。

JavaScript：改變 HTML 內(nèi)容

使用 JavaScript 來處理 HTML 內(nèi)容是非常強(qiáng)大的功能。

實例

x=document.getElementById("demo")  //查找元素
x.innerHTML="Hello JavaScript";    //改變內(nèi)容

你會經(jīng)常看到 document.getElementByID("some id")。這個方法是 HTML DOM 中定義的。

DOM(文檔對象模型)是用于訪問 HTML 元素的正式 W3C 標(biāo)準(zhǔn)。

JavaScript：改變 HTML 圖像

本例會動態(tài)地改變 HTML <image>的來源 (src)：

The Light bulb

點擊燈泡就可以打開或關(guān)閉這盞燈

JavaScript 能夠改變?nèi)我?HTML 元素的大多數(shù)屬性，而不僅僅是圖片。

JavaScript：改變 HTML 樣式

改變 HTML 元素的樣式，屬于改變 HTML 屬性的變種。

實例

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

JavaScript：驗證輸入

JavaScript 常用于驗證用戶的輸入。

實例

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

JavaScript學(xué)習(xí)教程

JavaScript學(xué)習(xí)教程推薦小伙伴們看動力節(jié)點老杜講解的web前端全套教程，這個教程是將多年的編程經(jīng)驗灌輸其中，典型的實踐派，既適合初學(xué)者入門，也適合進(jìn)階（學(xué)習(xí)底層）。

主要講解了前端開發(fā)中的核心技術(shù)JavaScript，俗稱JS，視頻中講解了JavaScript核心語法、JavaScript內(nèi)置支持類、JavaScript調(diào)試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點，該視頻可以開啟你的WEB前端之路。

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

學(xué)習(xí)目錄

JavaScript教程
JavaScript語言特點
JavaScript組成
JavaScript中BOM和DOM之間的關(guān)系及主流瀏覽器
JavaScript開發(fā)工具
JavaScript基礎(chǔ)語法
HTML嵌入JavaScript
JavaScript注釋
JavaScript標(biāo)識符
JavaScript保留關(guān)鍵字
JavaScript內(nèi)置類型
JavaScript變量
JavaScript函數(shù)
JavaScript數(shù)據(jù)類型
JavaScript的typeof運算符
JavaScript創(chuàng)建對象
JavaScript Void
JavaScript中 null、NaN和undefined的區(qū)別
JavaScript流程控制語句
JavaScript事件和事件句柄
JavaScript常用事件及事件句柄
JavaScript注冊事件的方式
JavaScript HTML DOM對象
JavaScript HTML DOM 對象
JavaScript BOM編程
JavaScript window對象
JavaScript history對象與location對象
JavaScript JSON

者 | Mateusz Iwaniuk

譯者 | 明明如月，責(zé)編 | 夕顏

出品 | CSDN（ID：CSDNnews）

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

現(xiàn)在，即使是創(chuàng)建最基本的網(wǎng)站，程序員也必須使用現(xiàn)代的功能和技術(shù)。甚至像為你的朋友創(chuàng)建簡單的投資組合這樣的基本項目也可能涉及到一些問題，比如從聯(lián)系人表單接收數(shù)據(jù)。有很多方法可以讀取這些數(shù)據(jù)。你可以將表單與數(shù)據(jù)庫連接起來，然后從數(shù)據(jù)庫中讀取傳入的消息來實現(xiàn)功能，但這樣做會給不懂技術(shù)的客戶造成困難。

你為什么不通過發(fā)送電子郵件傳輸信息？

不使用數(shù)據(jù)庫就能接收到傳入的消息，絕對是最佳選擇，也是最方便用戶的選擇。但問題來了—如何實現(xiàn)呢？你可能認(rèn)為需要使用某種后端語言。

實際上，你不必使用任何如 php 或 python 這種后端語言，你甚至不需要用到 node.js！你需要的就是一個簡單的EmailJS 庫。

本文將介紹下面兩個重要功能:

配置 emailjs 帳戶
使用 JS 發(fā)送電子郵件

請注意，在我的項目中，我使用了 gulp 和 webpack，我在 src 文件夾存放源碼，dist 存放最終發(fā)布版本的代碼。

我將分 5 個步驟向你展示如何從頭開始構(gòu)建電子郵件發(fā)送器。

步驟1-用 HTML 創(chuàng)建表單

首先需要創(chuàng)建一個 HTML 表單。你不必放置像 required 或 max 這種驗證屬性，因為稍后，preventDefault 函數(shù)將在你的提交事件上運行，它會讓這些屬性的處理失效。

表單中最重要的是為每個輸入放置 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 用戶

要配置你的電子郵件，你必須注冊電子郵件服務(wù)。別擔(dān)心—使用這個網(wǎng)站非常方便和省時。

登入后，系統(tǒng)會詢問你的電子郵件服務(wù)，它位于個人電子郵件服務(wù)區(qū)（personal email service）。在我的例子中，我選擇了 gmail。

然后，你需要連接你的 gmail 帳戶。這將用來發(fā)送電子郵件給你客戶。例如，如果你關(guān)聯(lián)了 xyz@gmail.com 賬戶，你后續(xù)發(fā)送的郵件都將從這個郵箱發(fā)出。所以不要擔(dān)心“ Send email on your behalf” 這個授權(quán)信息—這正是你需要的！

連接完 gmail 賬戶后，點擊添加服務(wù)（add service）按鈕。

步驟3-創(chuàng)建郵件模板

如果你已經(jīng)成功連接了你的 gmail 賬戶，你現(xiàn)在應(yīng)該在信息中心中?，F(xiàn)在需要創(chuàng)建電子郵件模板了。

切換到電子郵件模板卡，并單擊創(chuàng)建一個新的模板（create a new template）。界面非常友好，所以創(chuàng)建模板不會有任何問題。

你可以選擇模板的名稱和 ID。我稱之為“我的神奇模板（my_amazing_template）”。

接下來，你必須指定郵件的內(nèi)容。

模板的變量值來自 input 中的 `name` 屬性。你已將變量插入`{{{}}}`符號中。

不要忘記在“收件人”部分 (右側(cè)) 添加電子郵件地址。你的電子郵件將被發(fā)送到該電子郵件地址上。截圖中的收件人郵箱是我自己的公司郵箱。

這是我的簡單模板，它使用來自 HTML 表單里的 3 個變量。我還指定了接收電子郵件的主題。

步驟4-保存 API 密鑰

這部分沒什么特別的。Emailjs 共享授權(quán) API 密鑰，將在發(fā)送電子郵件時使用。當(dāng)然，放這些鑰匙最好的地方是`.env` 配置。但是因為我使用的是簡單的靜態(tài)文件，我不想使用服務(wù)器配置，所以我將它們保存在 apikeys 文件中，然后再將它們導(dǎo)入。

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

TEMPLATE_ID 位于模板的標(biāo)題下面。

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

src/js/apikeys.js

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

如果需要將源碼發(fā)布到 GITHUB，不要忘記將 APIKEYS 文件添加到 .GITIGNORE文件中

步驟5-發(fā)送電子郵件

現(xiàn)在是該項目最后也是最重要的部分的了?，F(xiàn)在我們必須使用 javascript 發(fā)送電子郵件。

首先，你必須下載 emailjs 包。

npm i emails-com

然后，轉(zhuǎn)到 js 文件，導(dǎo)入庫和 apikeys。

src/js/main.js

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

現(xiàn)在是編寫發(fā)送電子郵件功能的時候了

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 函數(shù)有4個參數(shù):

你的電子郵件的 ID，在這里:

TEMPLATE_ID 來自 apikey 文件,

事件對象來自你的表單提交

USER_ID 來自 apikey 文件,

最后，查找表單并添加提交事件監(jiān)聽器：

src/js/main.js

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

正如我前面提到的，由于 `preventDefault` 函數(shù)，屬性驗證將無法工作。你必須使用 JS 自己進(jìn)行驗證和清除輸入。

以上就是全部內(nèi)容，接下來讓我們測試一下。

填寫頁面上的表單并發(fā)送。

我收到電子郵件，內(nèi)容正是根據(jù)我們的模板和表單數(shù)據(jù)渲染出來的。

通過上圖可以看出，所有的變量的值都填充到了正確的位置上。

總結(jié)

通過本文的介紹你會發(fā)現(xiàn)用 JS 發(fā)送郵件并非難事。

使用 emailjs，你可以簡單的方式發(fā)送電子郵件。

我相信你未來的用戶會很高興收到來自他們網(wǎng)頁上表單填寫數(shù)據(jù)的t郵件，相信本文對你有幫助。

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

原文鏈接：

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

本文為CSDN翻譯文章，轉(zhuǎn)載請注明出處。

?我們想研發(fā)一個機(jī)器學(xué)習(xí)框架，6 個月后失敗了
?生產(chǎn)型機(jī)器學(xué)習(xí)已經(jīng)沒那么困難了？
?視頻 | 你不知道的"開源"60年秘史
?GitHub標(biāo)星10,000+，Apache項目ShardingSphere的開源之路
?阿里技術(shù)專家告訴你，如何畫出優(yōu)秀的架構(gòu)圖？
?加拿大API平臺如何做到30%為中國明星項目？創(chuàng)業(yè)老兵這樣說……

添加抽屜組件


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)
//添加表單數(shù)據(jù)模型
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="文章標(biāo)題">
            <el-input v-model="articleModel.title" placeholder="請輸入標(biāo)題"></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:設(shè)置是否自動上傳
                action:設(shè)置服務(wù)器接口路徑
                name:設(shè)置上傳的文件字段名
                headers:設(shè)置上傳的請求頭
                on-success:設(shè)置上傳成功的回調(diào)函數(shù)
             -->
           
            <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="文章內(nèi)容">
            <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('已發(fā)布')">發(fā)布</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

導(dǎo)入組件樣式

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

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

頁面調(diào)用

<el-form-item label="文章內(nèi)容">
    <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.文章封面上傳

//導(dǎo)入token
import { useTokenStore } from '@/stores/token.js';
const tokenStore=useTokenStore();

//上傳成功的回調(diào)函數(shù)
const uploadSuccess=(result)=>{
    articleModel.value.coverImg=result.data;
    console.log(result.data);
}

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

    <!-- 
        auto-upload:設(shè)置是否自動上傳
        action:設(shè)置服務(wù)器接口路徑
        name:設(shè)置上傳的文件字段名
        headers:設(shè)置上傳的請求頭
        on-success:設(shè)置上傳成功的回調(diào)函數(shù)
     -->
   
    <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('已發(fā)布')">發(fā)布</el-button>
    <el-button type="info" @click="addArticle('草稿')">草稿</el-button>
</el-form-item>

//添加文章
import {ElMessage} from 'element-plus'
const addArticle=async (clickState)=>{
    //把發(fā)布狀態(tài)賦值給數(shù)據(jù)模型
    articleModel.value.state=clickState;

    //調(diào)用接口
    let result=await articleAddService(articleModel.value);

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

    //讓抽屜消失
    visibleDrawer.value=false;

    //刷新當(dāng)前列表
    articleList()
}

7.article.js添加函數(shù)

在線咨詢

上一篇：前端開發(fā)之用以處理表單的jQuery控件之表單驗證
下一篇：JavaScript常見的三種排序算法，手把手解釋代

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

web前端開發(fā)教程，最全JavaScript入門講解

是否已經(jīng)初步掌握了html和css，但完全不知道從何入手JavaScript？

1. 多看視頻少看書

2. 寫代碼的時間要多于看書和看視頻的時間

3. 不可盲目追新技術(shù)

4. jQuery還沒過時

5. 學(xué)習(xí)的順序

JavaScript 簡介

JavaScript：對事件作出反應(yīng)

JavaScript：改變 HTML 內(nèi)容

JavaScript：改變 HTML 圖像

JavaScript：改變 HTML 樣式

JavaScript：驗證輸入

JavaScript學(xué)習(xí)教程

學(xué)習(xí)目錄

步驟5-發(fā)送電子郵件

總結(jié)

您的項目需求

web前端開發(fā)教程，最全JavaScript入門講解

是否已經(jīng)初步掌握了html和css，但完全不知道從何入手JavaScript？