# 如何透過 OpenAI 提升你 JavaScript 學習能力！ ## 洧杰老師近況 1. * 12/18：[JS 直播班專題成果發表會](https://zoom.us/webinar/register/WN_mFC96NTNRFqRaE15bfwtvg) 1. * 12/19~12/30：休息、看牙齒 1. * 1~2 月：Vue 專題班 1. * 4~6 月：Node 專題班 1. * 5~6 月：2000 人程式體驗營 1. * 7~8 月：切版直播班 1. * 10~12 月：JS 直播班班 ## 用一句話來解釋 AI * 工程師價值在「整合」，讓 AI 來解決單點問題，你來整合 * AI 紅利 1~3 年，盡情吃 AI 紅利，拉開跟其他人的差距 * 教你如何成為「AI 溝通師」 ## 官網介紹 * [官網](https://openai.com/api/) ## AI 介紹 * [模型介紹](https://beta.openai.com/docs/models) ## 介面介紹 1. [免費差異](https://chat.openai.com/chat) a. 無法連網 3. 付費差異 a. 插入模式 c. 自動補全模式 ## 幫助你學習的方法 ### 給你更多你聽得懂得範例 ``` // 請介紹什麼是 promise // 可以給我一些範例嗎？ // 可以給我跟跑步有關的範例嗎？ // 你可以給我一些 promise 三個題目嗎？設計成單選題，我想答答看 // 上面答案是多少？ ``` ### 幫你解釋程式碼邏輯 ``` // Function 1 const fullNames = []; for (var i = 0; i < 50; i++) { fullNames.push(names[Math.floor(Math.random() * names.length)] + " " + lastNames[Math.floor(Math.random() * lastNames.length)]); } // 解釋上面的程式碼在做什麼？ ``` ### 幫你轉換程式碼 * [範例程式碼連結](https://codepen.io/hexschool/pen/OJEKzWd?editors=1010) ``` 可以幫我將這裡的程式碼改成 Vue 3 版本嗎？ ``` ### 幫你改成其他陣列方法 ``` let data = [1, 2, 3, 4, 5]; let sum = 0; data.forEach(function(value){ sum += value; }); console.log(sum); // 15 我想學用 map 的寫法改寫 ``` ### 幫你除錯(edit) * [範例程式碼連結](https://codepen.io/hexschool/pen/OJEKzWd?editors=1010)，刪除功能怪怪的，幫我除錯 ### 許願功能！ 1. 做一個 bootstrap 5 版型 ``` 請你幫我做一個是腳踏車電商網站，必須使用 bootstrap 5 來排版 第一個區塊是表頭，會有一個 logo 第二個區塊是一列三欄的排版，每欄裡面有標題跟段落，主要描述腳踏車店的三大優點 第三個區塊是表尾，主要講解授權的部分 ``` 2. 寫一個 Vue3 範例，提供的[程式碼](https://codepen.io/hexschool/pen/LYrwdrb?editors=1000) ``` 請用 vue3 cdn 版本，寫一個代辦事項，可以做到新增刪除修改 點擊編輯按鈕時，會使用 cdn sweetalert2 的彈跳視窗來進行編輯 ``` 3. 幫我加上一個[編輯](https://codepen.io/hexschool/pen/GRGVxzx?editors=1010)功能，[範例用程式碼](https://codepen.io/hexschool/pen/GRGVxzx?editors=1010)，[AI 給的程式碼](https://codepen.io/hexschool/pen/MWXNGwY) 4. 加入 [sweetalert2 cdn 套件](https://codepen.io/hexschool/pen/jOKgxVN)後，請他幫你寫編輯功能、[AI 給的程式碼](https://codepen.io/hexschool/pen/MWXNGbK)：`請用 SweetAlert2 套件，點擊編輯代辦按鈕時，彈跳視窗進行編輯 ` ### 重構程式碼 請幫我將以下程式碼改成 es6 版本，例如改成 let、const 與箭頭函式 ```javascript var a = 1; var b = 2; a+=1; var c = [1,2,3] var d =0; c.forEach(function(item){ d+=item }) ``` ### Vera：希望 AI 幫你補程式碼，並用指定函式 `請設計函式 checkEmail，讓她判斷是否為 Email 格式` ``` cons myEmail = "gonsakon@gmail.com"; function checkEmail(email){ } checkEmail(myEmail) ``` ### 圈圈：要求不同解法 * [資料出處](https://github.com/hexschool/2021-ui-frontend-job/blob/master/frontend_data.json) * 請設計函式 checkSexTotal，幫我判斷 data 裡面男女性各有幾人 ```javascript const data = [ { "job": "前端工程師", "gender": "男性", "age": "21~25 歲", "education": "高中畢業", "major": "非資訊、設計、語言科系相關(歷史、會計、國貿)", "first_job": { "tenure": "1 個月以下", "leave": "想要轉職成前端工程師", "position": "視覺設計 (UI、平面)", "skill": "後端語言 (Node.js、Python、PHP、JAVA、Ruby), AWS, GCP 等雲服務知識", "render": "不確定這是什麼" }, "works": { "window": "非技術主管", "market": "4" }, "company": { "industry": "接案公司", "score": "10", "work": "實體辦公室", "area": "台灣 - 高屏", "scale": "21~49 人", "people": "1 人", "job_tenure": "1 年以下", "salary": "36~50 萬", "salary_score": "10", "industry_message": "" } }, { "job": "前端工程師", "gender": "女性", "age": "26~30 歲", "education": "大專院校畢業", "major": "非資訊、設計、語言科系相關(歷史、會計、國貿)", "first_job": { "tenure": "3 個月左右", "leave": "目前還在原公司，尚未離開", "position": "無", "skill": "任務指派工具（Trello, Asana...）", "render": "不確定這是什麼" }, "works": { "window": "老闆, PM 企劃部門", "market": "8" }, "company": { "industry": "接案公司", "score": "5", "work": "實體辦公室", "area": "台灣 - 北北基", "scale": "6~10 人", "people": "2 人", "job_tenure": "1 年以下", "salary": "36~50 萬", "salary_score": "6", "industry_message": "" } } ] ``` ## 幫你寫專題作品文案！ 1. **想品牌名稱**：我媽在賣玫瑰精油，幫我想五個品牌名稱，要跟大海意境有關聯 2. **想品牌的一句話**：請幫我寫一個 slogan，必須是一個句子，我要七個範例 3. **表頭表尾設計**：請設計一個精油網站常會用到的 footer 表尾文案設計 4. **想產品優勢**：我選第三個，這個精油幫我寫七大優勢療效，請寫七大療效標題，然後要各個要寫對應段落來介紹 5. **服務預約流程**：我選擇第三個，我想設計一個讓客戶可以跟我預約時間，可以來找我上課，瞭解精油該怎麼使用，請幫我設計一個五大步驟，讓客戶可以透過這五大步驟來進行線上預約流程。 6. **寫好友推薦**：幫我寫好評推薦，並模擬一些人名各撰寫 20~30 字的推薦文 7. **常見QA**：請幫我寫5個使用精油的常見QA 8. **聯絡我們**：請設計一個聯絡我們常會用到的表單資訊欄位，並用 js 物件來表示 ## 看網路上的 GitHub Code 1. [GitHub](https://github.com/gonsakon) ## 計費方式 1. [計費方式](https://openai.com/api/pricing/)