unlinun

@un

Joined on Apr 26, 2023

  • 01 - Style your form web component 從 MDN 的描述中可以看到,web component 的誕生,是爲了解決代碼複用、組件自定義、複用管理等問題。 瀏覽器支援度: safari 僅支援部分 你真的了解 web component 嗎? CSS > accent-color MDN - 關於 accent-color
     Like  Bookmark
  • Component 是一個個 UI 元件的小碎塊,而 Module 是集中這些小碎塊的收集者。 在Angular - 組件與插值與屬性綁定已經有簡單的介紹過組件的組成,在這篇文章會更深入的了解 Component 與 Module。 Component Component 是負責定義與控制畫面(View)的重要元件。 白話來說組件是由 html + css + logic 組成的,但更深入一點來說,他是由 template + metadata + class 組成的。 那麼 metadata 是什麼? 這就需要先介紹什麼是 Decorators 了! @Component Decorators 什麼是裝飾器(Decorators)?其實裝飾器一開始是 Typescript 為了 Angular 先行加入的功能,JS 則是直到 ES7 才加入的新功能。
     Like  Bookmark
  • Directive directive (指令),是 DOM 元素上的一個 mark(標記),像是屬性、元素名稱或是 style,它用來告訴 template 將指定的行為附加到該 DOM 元素上(像是事件監聽),替元素增加新的方法或是功能。 Directive 的類型 directive 一共可以分為三種類型: Components(組件) — 組件是最常見的 directive, Angular 的應用程式就是由一群 component 所組成的。 Structural directives(結構型指令) — 藉由加入及移除 DOM 元素來改變 DOM layout Attribute directives(屬性型指令) — 改變元素、元件的外觀或行為
     Like  Bookmark
  • 在自學 JS 的過程中,除了基本的語法以外,還會被許多的專有名詞搞得一頭霧水,學習初期非常常見到的兩個名詞作用域以及hoisting。 什麼是 scope ? 我們在之前的 JavaScript 宣告變數與運算子這篇文章有提到 Lexical environment(詞彙環境) 與 execution context(執行環境),可以先複習一下再往下學習! Lexical environment(詞彙環境) - 你把這段程式碼寫在哪? scope 可以說是變數的取用範圍(作用域),意思是變數可以被使用,以及被看到的有效範圍,而詞彙環境就是決定了這個範圍。 在 JS 中可以大致分為以下三種作用域:
     Like  Bookmark
  • ngFor與ngIf 是屬於結構型指令的一種。 結構型指令是透過新增和刪除 DOM 元素來更改 DOM 佈局的指令,使用簡寫語法時,Angular 在一個元素上只允許有一個結構型指令。 而 ngFor 以及ngIf很特別的是,他是可以直接撰寫在 html 當中的,這實在是很酷的一件事! ngFor ngFor,類似於原生 JS 的 for 循環,主要用於遍歷某個集合,並且將其值渲染到 Template 上。 首先在閱讀 Angular 文檔時,你會看見寫法是 *ngFor,前方有加了一個星號,而這個星號其實是一個語法糖,在 Angular 看見這個符號後,會自動將其轉換為 <ng-template>。
     Like  Bookmark
  • 在前面的文章中有介紹了內嵌綁定與屬性綁定,在這篇文章將要介紹事件綁定與雙向綁定 事件綁定與雙向綁定 事件綁定 - Event Binding 不管在原生 JS 或是其他框架系統,事件綁定都是非常重要且必須好好學習的一個章節。不管是滑鼠點擊事件、畫面滾動事件,或是在送出表單的 submit 事件,這都是影響著整體網頁運作以及後續網頁運作的重要功成。 "Use () to bind from view to source" - Angular 官方 在 Angular 中,進行事件綁定時,我們會需要使用到 (事件)="eventHandler()",像是點擊事件就會寫成 (click) = "handleClick()"
     Like  Bookmark
  • 函式 (Function) 函式,在 JS 當中也是屬於物件的一種(記住:除了基本型別以外,其他都是物件),而函式也是構成 JS 的基本要素之一。 函式其實是一個讓程式可以隨時調用的參數,將一堆程式碼包起來,通常使用在需要經常被重複執行的工作上,以避免在程式碼中重複的撰寫相同語句。 函式基本宣告 函式宣告方式 : function 函式名稱 (參數){ // 函式要執行的工作放在這裡;
     Like  Bookmark
  • 在進入開始撰寫 Angular 邏輯前,首要先了解一下,Angular 中的組件,以及內嵌綁定與屬性綁定。 Angular 的文件命名與組件 文件命名方式 使用 ng new 指令,在 terminal 中 new 出一個 angular 的檔案夾後,我們會在 src 的 app 資料夾中看見一個名為 app.component.ts的文件,在 Angular 中,文件的命名方式是以 feature.type.**,feature表示特性,type表示類型。 舉例來說: 導覽列組件的主要組件架構是 navbar.component.ts 組件相關的 html 可以寫成navbar.component.html 如果是 module 就會寫成 navbar.module.ts
     Like  Bookmark
  • 身為前端三大框架之一的 Angular, 想必大家都不陌生,不管是在自學的過程,或是求職的過程,一定都會看到他的蹤影。 不過在現在的前端開發社群中,普遍認為 Angular 的學習曲線偏高(不止一次聽到這句話了),且資源也相較 React 或是 Vue 少,所以我在學習前端開發的初期,也是先以 React 作為我的敲門磚。 至於為什麼會開始學習 Angular?(大大們都是為了求生存...) 什麼是 Angular? 首先,要注意 AngularJS 與 Angular 是不同的東西! 兩者都是由google開發的。 AngularJS 是以 Javascript作為基本程式語言來撰寫,Angular 是以TypeScript作為基本程式語言來撰寫,Angular2 以後的版本,都統稱 Angular。 我們目前正在學習的是 Angular。 簡介與特色
     Like  Bookmark
  • 物件 (Object) 想像生活中的事物都是由物件所組成,像是一個包包是由許多元素組成,物件中可以存放陣列、數值、字串、布林值或是函數等等的資料類型。 在 Javascript 中,物件是非常重要的概念,每個物件都有他的 property (屬性)以及 method (方法),物件是一個 name/value 的組合,一個 name 只能有一個 value,但是一個 value 可能是很多的 name/value。 相較於之前提到的 JS 的六個純值,使用"傳值"的方式,而物件,是使用"傳址"的方式。 簡單來說就是給這個物件一個收納櫃的號碼牌,管理員再根據號碼去找到對應的收納櫃,打開收納櫃後,才會看見裡面真正的物品。 宣告物件以及讀取物件中的值 宣告物件的方式,需要有大括號與 name(名稱) : value(值)
     Like  Bookmark
  • JavaScript 到底是什麼? JS 是一種可以在瀏覽器上執行的程式語言。它通過動態更新內容、驗證表單數據、控制多媒體、等等的網頁資源,將靜態 HTML 網頁變成互動式網頁。 身為前端三劍客之一的 JavaScript,其實就是擔任了魔法師的角色,施展魔法,讓不會動的東西動起來! 這聽起來真的很酷吧?但是,這也是前端的魔王關卡,在這個關卡,有許多人因為看見條件判斷、迴圈,就在這裡放棄了。 所以我也在此告訴自己,寫程式是一件很好玩的事情,別因為這樣就感到害怕了。 Let's go! 兩大核心要點 Lexical environment - 詞彙環境
     Like  Bookmark
  • 程式初學心得 寫程式是什麼? 過去看見有人使用 Command line,都覺得這根本是天書一般的存在,沒想過自己也開始接觸這項工程師技能。 可能我從來也沒有想過會有這一天,竟然異想天開的要從一名文組設計仔轉職為前端工程師。會記錄下這些,是希望可以在學習的這條路上,有更多前進的動力,並且在未來可以回顧學習的歷程。 Command line 在學習的過程使用的是 Mac 系統,過去其實也曾經因為一些技術上的問題而打開過“終端機”,在這次才知道原來終端機就是GUI出現前與電腦溝通的工具。 在這週我學會了幾項常用的基本技巧,在當下真的覺得自己宛如工程師,用電腦的語言在與電腦溝通著。
     Like  Bookmark
  • 從 Scratch 學寫程式 Scratch 是一個可視化的學習編程網頁,由劍橋所開發,他是用直覺式的操作介面,讓人們可以輕鬆的學習寫程式的邏輯架構。 我也利用這個網頁撰寫了一個陽春的"與貓玩小遊戲 Cat-day",這個網頁也讓我在練習的過程中,同時學習到一些程式的邏輯,希望可以運用在之後的程式撰寫上。 從生活中觀察各個事件 先從大方向開始著手,確認目標後,將目標細分為多個小任務(每一個單一目標都可以再細分成一連串的步驟)。 建立程式碼的步驟 定義目標 設計程式碼 - 可以使用流程圖或是心智圖來輔助
     Like  Bookmark