C50108
  • 2019/0801/轉職成功路途開始
  • 自學心得與此網站使用方式
  • 行事曆&課程大綱
  • 2019/0224/自我檢視
  • 雜記
    • 2019/0103/雜記
    • 2019/0410/作品集建構
    • 2019/0429/職訓局書單
    • 2019/0317/自我檢視
    • 2019/0316/陪玄松去高車討論&環境圖流程圖大神們line討論
    • 2019/0305/Gitbook使用方法
  • 2018/10XX/轉職心路歷程
  • 職訓局里程碑
    • 201901
      • 2019/0103/行動商務系統設計與開發,職訓局報到
      • 2019/0104/正式開課日&行動商務課程簡介
      • 2019/0108/資料庫理論/Access&WEB開發簡介
      • 2019/0109/資料庫資料型態屬性&HTMLtag
      • 2019/0110/計概基礎概念
      • 2019/0111/HTML表格table&form表單_post/get&iframe
      • 2019/0114/計&網概概念&網路層概念
      • 2019/0115/資料庫Access運算值&CSS簡介&在職班補充
      • 2019/0116/Access比較/邏輯運算&CSS_在職班補充+選擇器+Box model
      • 2019/0117/資訊系統架構&網路層
      • 2019/0118/資料庫正規化
      • 2019/0121/計概IT分工&資料庫正規化
      • 2019/0122/網路層&CSS父子容器切版
      • 2019/0123/Access資料庫關聯&CSS position&偵錯
      • 2019/0124/C#宣告、指定運算子
      • 2019/0125/VM虛擬機_基礎介紹
      • 2019/0128/VM虛擬機架設_虛擬網卡設定&伺服器權限設置
      • 2019/0129/Wireshark查詢網路層&資料庫物件導向
      • 2019/0130/ERmod雞爪圖&C#if、for時間複雜度
      • 2019/0131/C#流程控制&變數型別
    • 201902
      • 2019/0201/系統分析與設計_資料庫ERmod&c#Homework
      • 2019/0211/ASP.NET_Webforms&物件命名空間
      • 2019/0212/定址&網路遮罩
      • 2019/0213/SQLSeverM.S.介紹&AspWebforms表單控制項
      • 2019/0214/網概乙太網路&網路安全
      • 2019/0215/Pre Javascript 基礎 & 在職班補充
      • 2019/0218/TSQL基本指令&ASP.net左右置換表格/驗證傳值
      • 2019/0219/Javascript終極密碼&musicplay&asp.net驗證器
      • 2019/0220/SS基本語法&網概line機器人
      • 2019/0221/前端Javascript musicplay、內聚力耦合率
      • 2019/0222/前端Javascript musicplay、內聚力耦合率&伺服器權限
      • 2019/0223/SqlServerHomework&第一次專案報告
      • 2019/0225/SS合併查詢&ASP.NET驗證器
      • 2019/0226/伺服器ntfs安全性權限/共用權限
      • 2019/0227/Javascript_music_play_end&ASP.net串聯SQL(datasource就是拿來串SQLServer的)
    • 201903
      • 2019/0304/SS集合運算/子查詢/exists&asp.net GridView 事件 OnRowDataBound
      • 2019/0305/SS查詢式end&ASP.NET_Gridview_自訂樣式分頁
      • 2019/0306/Javascript musicplay_really_end
      • 2019/0307/前端HTML5鑲嵌字型&伺服器網域概念
      • 2019/0308/Android Studio_基礎概念&開發環境建置
      • 2019/0311/胡中興 工業4.0講習
      • 2019/0312/安卓系統_開發基礎介紹
      • 2019/0313/安卓工作室_基礎/布局內元件
      • 2019/0314/Asp.net鏈結資料庫-查詢
      • 2019/0315/SQS DML&第二次專案報告
      • 2019/0318/SQL DDL & 伺服器 自學基礎
      • 2019/0319/Android Studio_布局內元件&佈局規劃元件
      • 2019/0320/SQL檢視表&tsql基礎&Asp.net_Gridview
      • 2019/0321/TSQL&TDM&ASP.NET_Datalist
      • 2019/0322/DOM&JQ基礎&系統分析設計PPT&在職班補充
      • 2019/0325/TMD&Asp.net上傳圖片/產生QRCode
      • 2019/0326/SQLServer_預存程序+函數&Asp.net_Webforms半自動鏈結資料庫與自動化更新
      • 2019/0327/安卓工作室_佈局規劃元件
      • 2019/0328/jQuery選擇器應用&Ajax導讀+應用&asp.net串sserver_註冊帳號功能
      • 2019/0329/ADDS伺服器架設&第三次專題報告
    • 201904
      • 2019/0401/SQL觸發程序&Asp.net自動寄信&認證信
      • 2019/0402/前端作業四-jQ應用轉換樣式&ASP.NET_FormView控制項-會員資料維護實例
      • 2019/0403/JQ事件動畫&股市&Usecase
      • 2019/0408/安卓工作室_元件/布局基本end
      • 2019/0409/安卓工作室-物件導向事件驅動實作+Homework1&2
      • 2019/0410/上午小組討論-作品集自習&Visual studio webform+MVC範本
      • 2019/0411/安卓工作室-UI觸發委派函式與控制物件
      • 2019/0412/JQ動畫實做(寶可夢遊戲開場)&第四次專題報告
      • 2019/0415/前端JQ-Ajax+JSON&後端ADO建置、主板頁面概念控制項、Bootstrap演示
      • 2019/0416/安卓工作室UI控件案例結束、IDE Eclipse_Java物件導向基礎
      • 2019/0417/伺服器網域ADDNS&416LINE討論
      • 2019/0418/SQL指標、索引&Use cace
      • 2019/0419/主頁、Webform ADO.NET Entity Fromwork 增刪修實作&第五次專題報告
      • 2019/0423/Java基礎(型別/溢位/自動強制型別轉換/鑄造物件/串流/)&I/O物件用法(底層/較不底層)
      • 2019/0424/Bootstrap_RWD基礎/應用&Asp.Net_MVC實作增刪修(修待補)
      • 2019/0425/伺服器IIS安裝&資料匯入與管理
      • 2019/0426/Asp.Net_MVC增刪修實作(補修)&bootstrap – gridsystem– 網格系統&第六次專題報告&全國技能競賽網頁設計
      • 2019/0429/物件導向技術原理方法實作
      • 2019/0430/資料庫設計應用效能調教_SQL all end&ASP.NET_MVC_Controller單元_純C無V無M操作/簡單複雜繫結
    • 201905
      • 2019/0501/內部網站辨識&外部DNS域名/IP+自架DNS伺服器理解
      • 2019/0502/Java語言基礎、物件導向基礎
      • 2019/0503/Asp.net泛型處理常式驗證圖片應用&第七次專題報告Usecase
      • 2017/0506/Bs_FlexBox&Asp.Net_MVC_View+Razor@+Viewbag+helper
      • 2019/0507/Java 物件導向_類別+函式觀念&階段性作業三
      • 2019/0508/Asp.Net_MVC_Model_ADO.NET+Entityframework+LoginMember實作+MVC觀念
      • 2019/0509/Java物件導向(函式)_儲存型態+回傳值+多載+自制+例外處理+this參照+存取+複合
      • 20919/0510/第八次專題報告=功能DEMO
      • 2019/0514/Java_靜態類別+繼承特性
      • 2019/0515/RWD Utility+Card&MVC ViewModel+CRUD(RD)
      • 2019/0516/BS form&驗證+JQ驗證 & MVC_CRUD(CU)
      • 2019/0517/ASP.NET Webform介紹Master page 主頁 & Session 簡介 & 登入login驗證 & 隱碼攻擊injection & 工具箱程式碼片段使用
      • 2019/0520/繼承&存取權特性+java作業四+字符串格式化+多形+抽象類別
      • 2019/0521/抽象類別+介面
      • 2019/0522/Bootstrap Components 元件介紹 + MVC API 概念&實作
      • 2019/0523/IIS IP限制&ASP.NET部屬
      • 2019/0524/WebApi異質程式連線方式&第九次專題報告_循序圖
      • 2019/0528/Bootstrap Components 元件介紹 + MVC 登入驗證 + 商品加入購物車 實作
      • 2019/0529/ASP.NET_MVC購物車訂單功能完成+BootstrapComponents元件介紹
      • 2019/0530/原本是伺服器的課,但拿來做專題。
      • 2019/0531/ASP.NET_WebformAllView物件功能清單&ListView實作&第十次專案報告(完整循序圖)
    • 201906
      • 2019/0603/Bootstrap Components RWD End + ASP.NET_MVC Part2 PhotoSharing CodeFirst & Model 驗證
      • 2019/0604/ASP.NET_MVC Part2 PhotoSharing Controller & Filter & ADO.NET & View@RAZOR Helper
      • 2019/0605/Java介面實作&結束+安卓工作室(整合Layout與Java)Intent意圖&Bundle包裹
      • 2019/0606/第十一次專案報告功能demo+SingnaIR+伺服器作業+端午歌唱比賽
      • 2019/0609/黃大神傳授Visual_Studio&除錯技巧
      • 2019/0610/番外篇 Web Socket 即時連線& 就業前準備與技巧
      • 2019/0611/安卓工作室_(意圖+隱含意圖)資料傳遞+Android生命週期+硬體裝置與應用
      • 2019/0612/WebSockets Notification + MVC Part2 PhotoSharing PartialView & ADO.NET & EntitySQL & VMd
      • 2019/0613/MVC Part2 PhotoSharing ViewModel & ErrorHandle
      • 2019/0614/第十二次專案報告 功能Demo
      • 2019/0618/MVC Part2 PhotoSharing Route & Sitemap & _LayOut & AJAX
      • 2019/0618/RWD在職班_(Javascript_object-oriented programming)
      • 2019/0619/安卓工作室_(硬體裝置與應用)相機操作&GPS+階段性作業6+延伸 ( APP End )
      • 2019/0620/MVC補充C#MS SQL匯入CSV+上傳CSV存入MS SQL
      • 2019/0621/第十三次專案報告 功能Demo
    • 2019/0701/最終專案報告
    • 2019/0702/結訓與家人遊台東預計0708開始找工作自學筆記應該會等工作穩定後繼續開始
  • 自學里程碑
    • 201901
      • 2019/0107/DR
      • 2019/0108/UW
      • 2019/0103/Git
      • 2019/0103/CS
      • 2019/0115/Vscode
      • 2019/0116/JSON&AJAX
      • 2019/0122/卡內基
      • 2019/0126/MBTI
      • 2019/0131/PDP 外在 內在
    • 201902
      • 2019/0217/huli_half Developer
      • 2019/0219/SEO
      • 2019/0219/雪球速讀法
    • 201903
      • 2019/0304/asp、php、jsp、asp.net、net. Framework、asp.net core
      • 2019/0329/網站架站初嘗試
    • 201904
      • 2019/0415/Datatype-Explanation
      • 2019/0416/ASP.NET_Webform&Core&MVC(MVVM/MVP)
    • 201905
      • 2019/0613/開發職訓局共同專案時遇到的問題與解法
      • 2019/0514/ASP.NET SignalR
      • 2019/0514/JS擴展-JQ、React、Vue、Angular...
      • 2019/0514/Sass&Scss
      • 2019/0514/MVC結合Webform
      • 2019/0515/ASP.NET MVC_TempData/ViewData/ViewBag
      • 2019/0522/[自學筆記]海綿體啟蒙??
Powered by GitBook
On this page
  • 基礎
  • HTML
  • CSS
  • JavaScript
  • 基礎
  • 物件
  • 變數
  • 運算子
  • 函數
  • 事件

Was this helpful?

  1. 自學里程碑
  2. 201902

2019/0217/huli_half Developer

Previous201902Next2019/0219/SEO

Last updated 6 years ago

Was this helpful?

基礎

1.新的問題造就出新的library(函式庫)

2.(WS/MAC) 都必備工具編輯器/終端機

3.前後端不等於!=前後台,Keyword面試經典題

HTML

4.HTML=超文本標記語言=讓瀏覽器看得懂的文本架構排版指令

5.HTML既定規則/原理 階層/父子屬性 鬆散辨識 元屬性

CSS

6.CSS=階層樣式表=讓瀏覽器看得懂的文本架構添加裝飾屬性

7.開發者工具怎麼改,如果都只是改客戶端,別以為你是駭客,改了還是只有你自己看的見 ( 但有眉角 ...

8.需求(電腦不知道你到底是要幫哪個地方化妝)了解,選擇器為啥需要有分類

(指定#/類別./標籤h1)(id/class/tag)

9.一般來說style並不會寫在html裡面,而是會獨立出一個css檔案並在head引入

<html>
<head>
  <link rel="stylesheet" type="text/css" href="cool.css">
</head>
<body>
...
</body>
</html>

10.black區塊元素(ex.div、p...):佔用整個區塊的空間(可設定高寬/上下距)。

11.inline行內元素(ex.span、a...):強制佔用標籤本身(text/img)的空間/會蓋過其他人(高寬固定不可設置)。

12.inline-block讓元素不獨佔一行又可設置其屬性

13.每個元素都有預設的display但還是能用css修改但只是不建議。ex.div變成inline,span轉為black

14.black可以看成一個box,具有長寬、內距(padding)、外距(margin),框線(border)

14.HTML相同不同的化妝術(CSS)可以打造無數種截然不同的網頁

15.但是CSS雖然可以達成有動畫/變化但是並無法讓使用者與網頁互動,

想要互動就必須寫點小程式=>JS!!

JavaScript

17.Java與JavaScript的關係就跟與龍共舞中周潤發與周星馳的關係一樣

18.JavaScript如同CSS會獨立成一個檔案再引入

19.JS為物件導向語言,物件/事件/功能

A.在程式裡取得按鈕

var btn = document.querySelector('#btn');

B.監聽按鈕的click事件

btn.addEventListener('click', onClick);

C.跳出彈出式視窗

function onClick (){alert('click!');}

20. 匿名函式 / callbackfuntion 遞迴

21.學到這邊JS卡住了先看以下

基礎

22.以往沒有JS通常利用CGI做媒介,將客戶端所有資料傳置伺服器端,檢查完有錯在回傳客戶端直到正確,非常考驗伺服器功率,直到有了JS可以在客服端完成部分任務。

23.JS大小寫有不同的意義

24.嚴謹寬鬆其實都是在形容該語言中變數型態定義

25.<!- - - -> 其實是HTML的註解標記,一些舊的網頁不支援JS會直接顯示JS代碼,而//為JS註解標記,合體則為<!- - XX //- ->! , 後半段的 //- ->!則是讓JS忽略 - ->!,JS的註解標記有兩種,第二種為/* */。

26.HTML與JS都是直譯式語言,一行翻譯完執行一行。

27.JS可以編寫於HTML裡面JAVA不能

28.JAVA編寫的程式為編譯語言,需要編譯為Java byte-code才可執行(現階段java基礎為0後續補)

29.JS多運用Cookie存少許資料於瀏覽器,且不能控制網路,多用於html與客戶端之互動。

30.java可以讀寫檔案,可以控制網路(現階段java基礎為0後續補)。

31.javascript原為livescript後來與寫java的公司合作所以改名為javascript但兩者根本沒關係。

32.js可以寫在html任何地方,但通常js寫在head原因為html為直譯式,寫在head能確保js被優先載入,且使用某些WYS/WYG的網頁編輯器修改body時不會影響到js。

33.寫在</html>後面,好處是不會影響到<html>內容,適合一班免費網頁供應商置入廣告。

34.將js放入另一個檔案的好處有二1.所有的html檔案只需要加入這句就可以享用library.js內的js,2.當瀏覽器不支援js時就不用下載js檔案。

35.物件與物件利用.串接,( )中都是方法,{ }中為函式," ' ' "中間為字串,; 結束這段

36.noscript 為當網頁不支援js時會顯示的內容 (一定要寫在body,才會顯示在頁面)

物件

37.JS為瀏覽器的物件導向式語言,即是瀏覽器內的任何東西都視為物件,而物件又包含其他物件。

38.名稱name / id = 1.找物件名稱2.找出該物件的上層(容器/ Container)並用 . 串聯。(如果在該層想操控該層名稱則不需列出上層名稱)

document.my_form.myname

39.方法Method=類似一個函數(function) 操控與該物件有關的動作,寫在在物件名稱後方用( 參數 )代表,並包覆著參數 , 就算沒有方法 ( ) 也必須要寫

document.write()

40.屬性 Property=用來取得該物件的屬性或設定屬性內容也是用 . 與物件名稱串聯

document.bgColor="silver"

41.想改變物件屬性只要把屬性當作變數,等號右邊指定內容即可。(更深的js物件包含的方法跟屬性應該要去w3c看,可能等我html跟css

變數

42.JS變數命名規則英文、數字、底線,第一個字元不可是數字,不可是保留自

43.JS Date Type

44.鬆散型態好處:不須牢記,不須寫太多東西,js會自動判斷你想用的資料型態。壞處:有時會搞錯,js未來可能會盡量與java整合所以... ???

45.js允許同個陣列儲存不同型態資料

46.陣列內資料為該陣列元素(elements),資料數目為長度(length)

var array_name = new Array( length ); // length直接輸入數字

var array_name = new Array( date1 , date2 .... );

47.陣列內的資料表達式

array_name[index]

index 為由0開始的陣列指定位置,最大值為 length -1

陣列的長度表達式

array_name.length

運算子

48.運算子( Operators): 算術 Arithmetic /字串 String /邏輯 Logical /位元 Bitwise /指定 Assignment/比較 Comparison /特別 Special

49.邏輯 通常是做一些有關布林型態的運算。 傳回的值可以是 true 或 false , 如果有算式未被定義, 就會傳回 null 。

例子:辨斷能否參加高考 (Alevel exam), 假設參加高考的要求是語言科目合格, 或者年滿 21 歲。

例子說明:例子中所有變數都是布林型態, 參加者年滿 21 歲 , 經運算後 alevel 就是 true 。

50.位元運算子 (Bitwise Operators) 用來做二進制的位元運算。 因為位元運算可以說是低階 (Low-level)工作, 所以運算得較快, 而且有些位元運算子可以做算術運算, 例如乘以 2 的倍數或除以 2 的倍數。

51.指定運算子 (Assignment Operators)將運算後的結果放到某個變數, 最常用的就是等號 (=), 還有, 指定運算子可以令算式簡單一點。

52.比較運算子 (Comparison Operators)用來比較多兩個算式的關係, 例如一個算式是否等於另一個算式。 比較後傳回的結果是 true 或 false 其中一個。

53.特別運算子 (Special Operators) 用來做特別或較複雜的運算。

函數

54.函數其實是一組程序, 你可以自行定義它來做指定的工作。 在定義了函數之後, 當你要執行該函數的程序, 只須呼叫它便可。

55.使用函數的好處是可以將一個大的程式分成多個小部份, 方便管理及偵錯, 還可以讓程式的每個部份都可以享用函數, 以減少重覆的程序。

56. 語法: 定義函數

57. 語法:呼叫函數

例子說明:

這個例子有兩個 <script> , 一個在 <head> 範圍, 另一個在 <body>範圍。

在<head>範圍內的<script>定義了一個welcome函數,而在<body>範圍內的<script>就呼叫 welcome 函數。

58.參數 : 有時我們希望函數在不同的情況下有不同的結果, 因此會用參數。 將參數傳入函數, 成為函數內的變數, 就可以根據這些變數的內容來做不同的工作。

59. 定義一般函數的寫法:

例子說明:

student("Tom", 18, true); 呼叫 student 函數, 同時將 "Tom", 18 和 true 分別傳入 student 函數內的 name , age 和 is_graduated 三個變數。

60.傳回資料 : 函數也可以傳回 (return) 資料, 通常這些資料是該函數的運算結果。

傳回資料的寫法

61.變數的範圍 : 如果你在函數內定義一個變數, 那就只有該函數可以存取這個變數。

62.如果你定義一個變數的地方是在 <script> 範圍內, 但不是在任何函數內, 那麼該個變數就可以被整頁來儲取, 包括不在 <script> 以內的範圍。

事件

63.事件是由系統轉化使用者的動作或系統訊息而得來的。 使用者的動作例子包括: 按下滑鼠鍵、確定送出表單等。 而系統的動作包括: 當一頁完全載入, 或瀏覽器要離開某頁等。 系統會將每個動作轉成一個事件, 然後送到程式, 我們便可以跟據不同的事件來設計不同的工作。 這種工作模式就叫做事件處理 (Event Handling), 而負責處理事件的名稱就叫做事件處理者 (Event Handler)。

64. 事件處理的好處就是不用在主程式內檢查某事件有否發生, 我們只須把要做的工作連繫到事件, 當某事件真的發生了, 系統就自動把這個訊息送到程式, 那就會自動執行要做的工作了。

65.JavaScript 的事件處理者通常是連繫著物件的, 因此不同的物件就支援不同的事件處理者。

66.把函數指定到事件 : 我們通常把那些在某事件發生後要做的工作寫成一個函數, 不過如果你的工作很簡單, 可以不用寫在函數內。

67.語法:把事件處理者寫成一個物件的 HTML 標記屬性, 而屬性內容就是要執行的 JavaScript 敘述

68.this 其實是一個物件, 它是指當時正在使用中的物件。用 this 的好處就是不用知道該物件的名稱也可以使用該物件。

69.終止事件 : 你可以中途停止一個函數或事件。

語法:終止函數

70.流程控制 (Flow Control)一個程式未必一定要由上到下執行的, 我們可以跟據一些條件來控制一個程式執行那一個部份, 亦即是控制它的流程。

  1. if

  2. if ... else

  3. for

  4. while

  5. break

  6. continue

71.for

72.while

73.continue

74.中階JS (先告一段落)到時再補

75.

緣起不滅 - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天
為自己的人生鮮艷上色:CSS - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天
MDN Web Docs
CSS display:inline-block 可設定區塊寬度與高度 - 網頁設計教學站
Logo
详解css中的display属性(行内元素和块级元素)SegmentFault 思否
Logo
CSS - 關於本站
CSS Zen Garden: CSS設計之美
我跟 Java 真的沒關係:JavaScript - iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天
強弱型別Wikipedia
http://taiwantc.com/js/js_tut_b0.htmtaiwantc.com
http://taiwantc.com/js/index.htmltaiwantc.com
粗黑線的地方為抽象裡面的實體箱子的位子
圖一: JavaScript 物件層次圖 (JavaScript Object Hierarchy) 來源: Netscape JavaScript Reference
Logo
Logo
Logo
Logo
Logo
Logo