fbpx
Javascript網頁前端

JQuery是什麼?基本觀念介紹！

這篇文章適合誰jQuery 是一套 JavaScript 的 Library，因此，你需要有一些 JavaScript 的基礎，至少寫過一些 JavaScript 才比較容易上手，並且看得懂後續的教學。jQuery是什麼jQuery是一個新形態的JavaScript程式庫，主要是用在DOM 文件的操作，此外jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。jQuery可以幫助工程師更快的使用以javascript建立的模組，簡單來說，就是把javascript包裝成更白話、更迅速的寫法，此外，jQuery另外一個特色則是豐富的套件，五分鐘內就可以搞定燈箱、網頁進場效果。 (more…)
學程式助教
November 27, 2019
Javascript網頁前端

JavaScript入門系列： DOM Event 事件、處理與辦法 基礎介紹！

前言在上一篇文章中有跟大家介紹過何謂DOM/BOM，那麼這篇文章會為大家介紹DOM事件的一些基礎知識。何謂DOM事件當使用者在瀏覽網頁時，會觸發很多事件，像是點擊滑鼠、鍵盤、或是在網路上下載圖片等等行為都可以稱為是一種事件，而JavaScript使用DOM Event去定義這些事件的型態，並且處理這些事件。 (more…)
學程式助教
November 27, 2019
HTMLJavascript初學程式網頁前端

Bulma是什麼？奠基於CSS框架的Bulma基本入門！

這篇文章適合誰 當提到CSS的框架的時候，大家一定會想到目前最火紅的框架：Bootstrap，但是這篇文章要帶大家來認識的是Bulma這個更為輕量、簡單的框架。而這篇文章適合對於網頁開發有興趣，並且對於CSS有一些基礎的開發者，希望可以幫助到大家。 什麼是Bulma? Bulma是一個基於 Flexbox 的現代化的 CSS 框架，設計的初衷就是移動式裝置優先(手機、平板)，可以輕鬆用來實現各種簡單或者複製的內容佈局，瀏覽器支持：Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。 (more…)
學程式助教
November 27, 2019
Laravel 學習筆記

Laravel Valet 安裝教學

valet 是專屬於 MacOS 的 Laravel 開發環境。你不需要安裝 Vagrant、Apache、Nginx，也不需要修改/ect/hosts文件，就能夠使用本機終端機來公開並共享你的網站。而且valet 只需要7M RAM，當你電腦容量比較小時，可以選擇valet。 Laravel Valet 設定 MacOS 在啟動伺服器時會在背景執行 Nginx。然後通過 DnsMasq，Valet 會將本地端的專案全都指向到*.test 網域上。例如你的專案叫做side-project，那麼你可以在瀏覽器上輸入side-project.test就可以找到你的專案。 Valet 和 Homestead ： 而Laravel 還提供了另外一個 Laravel 本地開發環境 —…
學程式助教
November 26, 2019
專案思維小白學程式工程思維程式新手

Messenger Chatbot開發規範

此文章的內容是有關Messenger Bot開發設定及規範，而本篇文章的專案是使用Botman＋Laravel去製作Messenger Bot，如果想要了解製作流程的話，可以去參考另一篇文章Laravel + Botman 製作Messenger聊天機器人。這篇文章適合想嘗試製作Messenger Bot的朋友，本篇文章主要分為兩個重點： 建立Facebook Page(粉絲專頁) 建立Facebook App(應用程式) (more…)
學程式助教
November 26, 2019
AlgorithmJavascript初學程式小白學程式程式新手

OO是什麼？物件導向基礎概念

何謂物件導向 傳統的程式設計主張將程式看作一系列函式的集合，或者直接就是一系列對電腦下達的指令，物件導向可以被看成在程式中包含各種獨立而又互相呼叫的物件的思想，這與傳統的思想剛好相反，物件導向程式設計中的每一個物件都應該能夠接受資料、處理資料並將資料傳達給其它物件，因此它們都可以被看作一個小型的「機器」，即物件。目前已經被證實的是，物件導向程式設計推廣了程式的靈活性和可維護性，並且在大型專案設計中廣為應用。 (more…)
學程式助教
November 26, 2019
Javascript網頁前端

使用Vue的時候如何共用Sass變數?

我們在開發網站的時候常常會需要說將Sass的環境變數，或是function與mixin給抽取出來，達到共用，不要重複造輪子! 但是你會發現我在使用Vue開發的時候，雖然組件化方便我們管理每個組件的Sass，但是多了個不方便的就是如果要使用變數，或是function與mixin的時候要怎麼辦? 如果是聰明的你一定會想到這樣! 但是問題來了，如果今天你有100個 component 你就要引入100次，然後如果你忘記引入一個你就要慢慢找........(WTF 所以那有沒有方法可以全域共用了? 答案是 "有的" !!! 其實很簡單，我們只要對webpack的設定做一點小小修改就可以達到了 { test: /\.(sass|scss)$/, use: }, 看到了嗎~就是在loader裡面去做設定，這樣他就會幫你把那個_mixin.scss變成全域的使用，你就不用在component裡面在載入_mixin.scss了! 是不是很方便XD (more…)
學程式助教
November 26, 2019
Javascript

如何在Vue裡面使用Element-ui並修改CSS樣式呢？

大家好！我是Mike，今天要來說說大部分使用 Vue 開發公司內部後台系統的時候，通常大部分都會需要使用 Vue 的 Ui framework 來開發，雖然大部分的Ui framework 都有自己的 CSS 風格，我們不用再去寫 CSS，但是難免會有需要自己修改 UI 的 CSS的時候，但是每套 Ui framework 的修改方式又不太一樣，在這邊我將介紹這套 Element-ui 是如何在Vue裡面去做 CSS 修改。 首先我們先掛載 Element-ui 在這邊我們把所有的 element-ui 給掛載到全域，還有它的…
學程式助教
November 26, 2019
Javascript

WebView 與 JavaScript 的互相交互

開發javaScript與webview的經驗分享。 我們在開發APP的時候很常第一時間想到Android 或是 ios 透過原生的方式進行開發，只是原生開發效能雖然好，但是在更新或是上版往往有許多問題需要解決，所以很常會透過webview的方式嵌入web來呈現頁面，也就是透過網頁的方式來開發APP的頁面。 那再來問題就是要怎麼 call 原生Android 或 ios 的方法，其實不管是Android 或 ios都是把他們寫好的方法給丟到 webview 裡 global 的物件內，然後再去執行，畢竟 webview 就是瀏覽器，舉例來說如果Android有一個 getUserToken的方法，我們要 call 它只要像這樣 window.android();orwindow.android.getUserToken(); 那在 ios…
學程式助教
November 26, 2019
HTMLJavascript初學程式程式新手網頁前端

Webpack教學 (三)：永不停止的Watch

當我們已經學會用webpack做初步的編譯跟打包後，你會想說，難道每次我次改檔案就要在執行 npm run build 重新編譯（不知道的可以看這），這樣在開發上面不會很麻煩嗎？ 其實如果用webpack編譯 js 檔案的話，有個執行的命令叫watch，可以幫助我們監控我們的js，只要今天js檔案有變動就會直接自動幫我們執行編譯，我們可以來看看。 我們要在package.json 中加上 watch 指令，首先我們要新增一個npm script “watch”: “webpack --watch” https://gist.github.com/MikeCheng1208/b8a608bf733023746a4256b8f9439c0c#file-package-json 這樣接下來我們除了 build 以外也多了一個watch的指令，接下來就執行 > npm run watch 你會發現webpack雖然編譯了，但是執行緒卻沒有中斷，因為webpack現在是watch的狀態，只要你修改一下你的 js 檔案webpack就會自動重新編譯。…
學程式助教
November 26, 2019