前端
DOM 文件物件模型
html 階層樹根
jq = js 做好的函式庫 => 幾乎js能做的都做得到但是更簡化 => 好學所以變主流
教學方式 jq
dom 網頁上操作 抓id就能操作
網頁上物件活的不是死的 但因為階層樹根的特性 可以從最上面階層慢慢選到下面你要的地方
asp.net 就是根據需要的功能選擇適合的控制項去調整屬性跟操作跟邏輯
前端則是更複雜你可以不用button但是用div改成button的樣子
創建標籤 createElement
apendChird 新增標籤
要新增到正確的樹狀位置
children [ ] 指定樹狀位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#btn{
border:2px solid;
width:100px;
cursor:pointer;
background-color:#808080;
box-shadow:2px 2px 5px black;
}
</style>
</head>
<body>
<table border="1" width="400" id="myTable">
<tr>
<td>姓名</td>
<td>成績</td>
</tr>
<tr>
<td>張三</td>
<td>54</td>
</tr>
<tr>
<td>李四</td>
<td>78</td>
</tr>
</table>
<hr />
姓名:<input id="txtName" type="text" /><br />
成績:<input id="txtScore" type="text" />
<div id="btn" onclick="InsertData()">插入成績資料</div>
<script>
var myTable = document.getElementById("myTable");
var Name = document.getElementById("txtName");
var Score = document.getElementById("txtScore");
function InsertData() {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerText= Name.value;
td2.innerText = Score.value;
tr.appendChild(td1);
tr.appendChild(td2);
myTable.children[0].appendChild(tr);
}
</script>
</body>
</html>
JQUERY
前端網站很容易沒辦法向下版本相容所以舊版本起勿更新最好是重製在製
好像是因為綁GIT所以不相容
後來發現只要把官網函式庫鏈結檔案下載下來就好了 不一定要用這種方式安裝
cdn cbn 模式
$呼叫('函數名稱').addClass('yellow');
$呼叫('函數名稱').addClass('red').addClass('line');
扛拜 ??? combine 結合
不會依照 這裡的命令顯示會依照 css style head 順序後面會蓋掉前面的先執行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.line {
border: 1px solid;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<ul id="list">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
<ol id="list2">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ol>
<script src="Scripts/jquery-3.3.1.js"></script>
<script>
//$('#list').addClass('yellow');
//$('#list').addClass('line');
//$('#list').addClass('red');
$('#list').addClass('red').addClass('line').addClass('yellow');
</script>
</body>
</html>
系統分析就像一門藝術很抽象化
這裡少聽東西 建議聽回播看看
jq選擇器
選擇器跟 css一樣可以去選擇子標籤
$('#list2 li').addClass('line')
選擇子標籤的指定標籤
$('#list2 li:first-child').addClass('line')
指定子標籤但不影像子標籤的子標籤
$('#list2>li:first-child').addClass('line')
選擇子標籤內的基數列
$('#list>li:nth-child(2n+1)').addClass('yellow');
js沒有選擇器可用那怎辦呢
指定id的標籤
var list = document.getElementByID("list")
如果要指定子標籤呢?要就重複做不然只能寫迴圈
for(i=0;i<list.children.length;i++){list.children[i].className="red line"};
如果要指定基數列呢?
for(i=0;i<list.children.length;i++){list.children[i].className="red line";
if (i % 2 == 0)list.children[i].className += " yellow";};
要指定子標籤的指標簽呢?
list2.children[0].className = "line";
js與jq最大差別在於選擇器
jq控制css
按鈕按下去文本才吃屬性
<h1>
歡迎光臨我的網站
</h1>
<input id="Button1" type="button" value="button" onclick="getH1ClassCSS()" />
<script src="Scripts/jquery-3.3.1.js"></script>
<script>
function getH1ClassCSS() {
//$('h1').addClass('h1');
$('h1').css({
'background-color': 'red',
'color': 'white',
'border': '3px solid green',
'text-align': 'center',
'font-size': '36pt'
});
}
</script>
集合不是放在中括號就是放在大括號
jq 不只不用宣告連監聽器都省了 ...
jq小動畫 互相呼叫函式
<body>
<h1>
歡迎光臨我的網站
</h1>
<input id="Button1" type="button" value="button" onclick="getH1ClassCSS()" />
<!--<input id="Button2" type="button" value="button" onclick="getH1ClassCSS2()" />-->
<script src="Scripts/jquery-3.3.1.js"></script>
<script>
function getH1ClassCSS() {
//$('h1').addClass('h1');
$('h1').css({
'background-color': 'red',
'color': 'white',
'border': '3px solid green',
'text-align': 'center',
'font-size': '36pt'
});
setTimeout("getH1ClassCSS2()",300);
}
function getH1ClassCSS2() {
$('h1').css({
'background-color': 'blue',
'color': 'yellow',
'border': '10px dotted white',
'text-align': 'center',
'font-size': '50pt'
});
setTimeout("getH1ClassCSS()", 300);
}
</script>
</body>
在職班補充
#pre Javascript DOM 操作
Append
appendChild
createElement
getElementById
createTextNode
insertBefore
children
children[n]
target
#jQ 函式庫 常用的功能已經寫好了，繼承像CSS選擇器的方法。
很多前端的compones元件 formwork框架 很多都是 Jq 開發的。
JQ API寫得非常好
1跟2同時存在 但2版不支援舊版IE 、 3版為整合版同時支援
新開發的網站可以選擇新版，但舊的盡量不要更新版本，並不是完全像下相容
其實
Jquery = $
$() = jquery()
$(‘#list’) = jquery(‘#list’)
##小技巧 利用 CSS 選擇器 打關鍵字選擇 複製到 JQ去貼
nth-child(2n+1)
combine class 會以後面為組 不是指combind的順序 而是style的上下
屬性有相衝時的優先順序
簡單的
<script>
$('#list').addClass('line');
$('#list>li').addClass('yellow');
$('#list>nth-child(2n+1)').addClass('red');
</script>
在javascript 就必須要利用到
迴圈等等方式才能做到上面三行的功能
//var list = document.getElementById("list");
//list.className = "line";
//for (i = 0; i < list.children.length; i++) {
// list.children[i].className = "line yellow";
// if (i % 2 == 0)
// list.children[i].className += " red";
//}
##jq對css方法的支援
Inline 每行都寫 => css 選擇器 少寫一些 => 無法指定必須動態加時 jq
只要是Key value 在程式裡面必須要用字串表現且要用逗點隔開
專題出問題後面被康哥打亂了都沒在聽但是應該跟之前的不會差太多
簡報
系統分析與設計
99 流程圖 -> 需求確認完成(通常會少( 只會大概知道.
環境圖 式草稿 確認系統與外部時體之間關係
事件條列式 是為了打草稿 打功能草稿
xx流程圖上的字不一定會出現在條列式上?
菱形是指判斷
use case
職業競賽 通常管理系統
enduser 使用者的霸主 只是單純再用系統的人
只知道 使用者流程 但 know how 不懂 系統的流程
coder 大陸 工匠
programer 設計
系統設計師 sd
sa
dba
pm
斗面拉里舉 domain knowledge
企業管理 產銷人發財
工業管理 物料 生館 銷售 製造 存貨\
結構化技術
物件導向技術 uml 軟體工程
雛型主要是降低時間風險成本
螺旋模式主要在風險控管
敏捷軟體開發? 前面一堆sop太慢 遊戲公司最需要 因為生命週期很短 只有一種遊戲歷久不衰 博弈 scrum 燃盡圖
mda
159 - 161
js 程式進入點 main or page load
sql 計算過 having 包含 groud up 強迫參考完整性
高考
其他
循序圖 趨勢線 上升下
