學習過程紀錄:開發按按鈕後可以把文字複製到剪貼簿的功能

更新於 2023/06/27閱讀時間約 1 分鐘

緣起

在alpha camp的學習終於來到第二學期的最後,在寫期末考作業時需要將產生的新網址,透過按按鈕就能直接複製,而沒有做過這個功能的我當然是毫無頭緒......。

過程

沒頭緒時,當然是在google上開始搜尋,「how to copy by press button?」,沒錯,通常我就是這麼直接的輸入自己的困惑,然後就找到相關網頁(https://www.geeksforgeeks.org/how-to-create-copy-to-clipboard-button/),裡面有提供語法給我,也就是「navigator.clipboard.writeText( <text> )」,但是根據之前開發的經驗,我知道不能直接在使用node.js開發時,於javascript內用document.querySelecotor去選取要複製的文字,所以下一個問題是「要如何在node.js上開發時,選取想複製的文字並放入navigator.clipboard.writeText( <text>)的text內執行?」

解決

後來看到上述網頁在下面有範例可參考,於是看到可以直接在寫HTML時用<script>標籤,將想執行的程式碼寫入,此時就能用document.querySelecotor去成功選取想複製的文字,最後就成功做出此功能,也學到了<script>的用法!
avatar-img
0會員
4內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
林采婷的沙龍 的其他內容
學習成果 了解了javascript內array和object的結構,以及簡單的語法,接著學到了如何自己撰寫函式;而在HTML和CSS的部分,習得position的分類和使用方式,以及bootstrap;此外,學會用javascript操弄DOM以動態修改網頁內容,並設置監聽器達成想要有的特定功能
學習成果 了解了javascript內array和object的結構,以及簡單的語法,接著學到了如何自己撰寫函式;而在HTML和CSS的部分,習得position的分類和使用方式,以及bootstrap;此外,學會用javascript操弄DOM以動態修改網頁內容,並設置監聽器達成想要有的特定功能
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
🍀🍀🍀fumi老師:❤️❤️❤️ 💕學習📑所有的事物,在技術上的練習都是非常重要的一段時期。 😇這段時間對於自我的想法、感覺、情緒、過往的習慣,需要一一的藉由覺察而改變的歷程,都是珍貴的生命禮物。 😇這位同學🧑‍🎓歷經生命課題的種種,感動的是他滿懷勇氣的尋覓能解決的方法,不讓舊事重
Thumbnail
我很相信「內容有價」,每個人的經歷與過去都是值得分享與學習的,就算不以營利為目的,這些知識都該被傳承,而當內容產出轉換成金錢與收入時,則能幫助創作者持續成長。
Thumbnail
我在輔導學生升高中職的經驗中,有很多學生選校的理由是「家人建議」,或是「不知道未來要幹嘛」,甚至是「離家比較近」。也許很多學生無法明確知道自己未來想幹嘛,但一定知道自己「適不適合」和「喜不喜歡」念那些學科課程。因為經過國中三年的洗禮,有些學生真的無法勉強,就要認真的去思考技職走向的學校。
Thumbnail
🍀🍀🍀fumi老師:❤️❤️❤️ 這一次的課程,因為來上課同學的特質做了一些的課程調整,這就是精緻班的好處呢!🥰🥰🥰 人體脈輪的精微轉軸,是一個專門的課程,我會隨著每梯次同學的程度而淺或深,這應該就是我教學的樂趣吧?! 我本身就是一個喜歡創新的人,不喜歡一成不變,但是基礎是一定不變的道理
Thumbnail
剛好整整花了21天,是我練習五行派八字六柱(流年)批錯最少的時間,也是老師教我最後流月的試驗,一樣都是21天,我教會電腦如何自己六柱五行生剋,我教給電腦的也如同老師教我的步驟一模一樣,那不超過一張A4的公式,沒有幾條規則,看似簡單,程式的複雜度,超乎想像。
Thumbnail
✨✨✨學員在給予個案的靈氣療癒報告裡,有一段文字的敘述:✨✨✨ 🍀🍀🍀大自然的生生不息是想表達一種循環不是盡頭,而植物的嫩綠色也是重生的代表喔! 🍀🍀🍀所有的阻礙都不是結局而是一個起點與過程,在感受到阻礙時可以憶起這些畫面,讓自然的生命力陪伴你走過這些片刻。 🥰🥰🥰這一段話讓我印象
Thumbnail
學習過程是不段的累積經驗值!!! 如果當一名【靈氣療癒師】卻無法體驗到真正的【療癒】感覺,又怎麼能說服自己幫助別人與療癒的這件事情呢? 靈氣療癒師結合自己獨特的天賦而發展不同類型的療癒模式,技術不是固定的而是針對每位來到你面前尋求的協助者給予對他最大益處的療癒! ⇒隔日會追蹤胸口卡卡沈悶的部分
Thumbnail
# 13《學得更好》(下):學習過程中你不可不知要做、不能做的小細節。要如何增進學習成效,理論是知道了,但具體該要怎麼做呢?這篇將會祭出實際的做法供大家參考。
讀書不是一本書讀完再看另一本,因為閱讀是一種訓練
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
🍀🍀🍀fumi老師:❤️❤️❤️ 💕學習📑所有的事物,在技術上的練習都是非常重要的一段時期。 😇這段時間對於自我的想法、感覺、情緒、過往的習慣,需要一一的藉由覺察而改變的歷程,都是珍貴的生命禮物。 😇這位同學🧑‍🎓歷經生命課題的種種,感動的是他滿懷勇氣的尋覓能解決的方法,不讓舊事重
Thumbnail
我很相信「內容有價」,每個人的經歷與過去都是值得分享與學習的,就算不以營利為目的,這些知識都該被傳承,而當內容產出轉換成金錢與收入時,則能幫助創作者持續成長。
Thumbnail
我在輔導學生升高中職的經驗中,有很多學生選校的理由是「家人建議」,或是「不知道未來要幹嘛」,甚至是「離家比較近」。也許很多學生無法明確知道自己未來想幹嘛,但一定知道自己「適不適合」和「喜不喜歡」念那些學科課程。因為經過國中三年的洗禮,有些學生真的無法勉強,就要認真的去思考技職走向的學校。
Thumbnail
🍀🍀🍀fumi老師:❤️❤️❤️ 這一次的課程,因為來上課同學的特質做了一些的課程調整,這就是精緻班的好處呢!🥰🥰🥰 人體脈輪的精微轉軸,是一個專門的課程,我會隨著每梯次同學的程度而淺或深,這應該就是我教學的樂趣吧?! 我本身就是一個喜歡創新的人,不喜歡一成不變,但是基礎是一定不變的道理
Thumbnail
剛好整整花了21天,是我練習五行派八字六柱(流年)批錯最少的時間,也是老師教我最後流月的試驗,一樣都是21天,我教會電腦如何自己六柱五行生剋,我教給電腦的也如同老師教我的步驟一模一樣,那不超過一張A4的公式,沒有幾條規則,看似簡單,程式的複雜度,超乎想像。
Thumbnail
✨✨✨學員在給予個案的靈氣療癒報告裡,有一段文字的敘述:✨✨✨ 🍀🍀🍀大自然的生生不息是想表達一種循環不是盡頭,而植物的嫩綠色也是重生的代表喔! 🍀🍀🍀所有的阻礙都不是結局而是一個起點與過程,在感受到阻礙時可以憶起這些畫面,讓自然的生命力陪伴你走過這些片刻。 🥰🥰🥰這一段話讓我印象
Thumbnail
學習過程是不段的累積經驗值!!! 如果當一名【靈氣療癒師】卻無法體驗到真正的【療癒】感覺,又怎麼能說服自己幫助別人與療癒的這件事情呢? 靈氣療癒師結合自己獨特的天賦而發展不同類型的療癒模式,技術不是固定的而是針對每位來到你面前尋求的協助者給予對他最大益處的療癒! ⇒隔日會追蹤胸口卡卡沈悶的部分
Thumbnail
# 13《學得更好》(下):學習過程中你不可不知要做、不能做的小細節。要如何增進學習成效,理論是知道了,但具體該要怎麼做呢?這篇將會祭出實際的做法供大家參考。
讀書不是一本書讀完再看另一本,因為閱讀是一種訓練