前端JQ
鍵盤事件keyboardevent
keyUp keydown keypress
Html textarea 其實就像是asp.net的textbox
範例-鍵字計數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>您還可以輸入<span id="counter"></span>個字</p>
<textarea id="memo" rows="6" cols="40" maxlength="100"></textarea>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
var maxLetter = 100;
$('#counter').text(maxLetter);
$('#memo').keyup(function () {
//alert('aa');
var memoLength = $('#memo').val().length;
var msg = maxLetter - memoLength;
$('#counter').text(msg);
});
</script>
</body>
</html>
JQ-Show/Hide顯示動作特效
利用事件觸發然後執行show/hide的動畫
可以藉由taggle觸發，但tagle做的事情侷限，例如無法三秒顯示、五秒隱藏。
做if改變標頭文本(隱藏/顯示)
JQ text()沒給參數為取值，有給為給值。
Call back function 把 function 寫在 taggle 的第二個參數，就能先fun1在fun2。但就不能使用this抓不到上層的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2 id="shownews">顯示</h2>
<div id="news">
「于太」的老公是昔日經營地下網路簽賭，身家逾千億元的于國柱：他也是台中起家，跟當初所爆出林太的背景資料相符。說起于國柱，就不得不回顧過往他在台灣有多麼風起雲湧，雖然他的行事低調，不過2005年他在國道被綁，行凶的是曾經策劃多起巨額綁票、使用重型軍械與警方駁火的張錫銘。當時張錫銘綁架了于國柱，贖金獅子大開口開價新台幣40億元。
于國柱曾被綁架，而且贖金高達新台幣40億元。（翻攝自三立新聞）
張錫銘被逮，判無期徒刑。他因擁有重軍火與警方對峙而史上聞名。（翻攝自東森新聞）
于國柱最初經營天王星賓果西餐廳，後又開了天蠍星賓果西餐廳及超級大賭場，並取得楊登魁經營的龍虎榜百家樂衛星賭場中部經營權、然後與友人合組天下科技公司，生產電腦式的賓果賭博軟體及機台；之後他前往對岸砸上億元經營寶盈線上運動賭博網站。
全盛時期，于國柱日賺高達4億元，寶盈5年就賺了新台幣4000億元；另外，于國柱還曾在喝一杯咖啡的時間，就決定買了一輛700多萬元保時捷，並且把車子給老婆開，如此驚人手筆「寵妻」也成為台中車界傳奇。
勝利進行DJ表演，于太在他身後的最佳觀賞位置。（翻攝自jenniferz_zgri IG）
GD跟勝利都是于太（之前名為林太）的追星對象，也有一說她是為了GD才接近勝利。（翻攝自ruru15微博）
于太身為賣力砸錢的超級粉絲，自然有不少親近他們的自拍合影。（翻攝自Burning Sun官網）
至於為何于太會傳成林太？其一是因于國柱本身極為低調，除了行蹤連老婆都瞞，豪宅也裝了密密麻麻的監視器，跟鄰居更是互無往來。公司員工甚至不知他是老闆，有人找時，員工還回：「要找于先生！你等一下喔！我們公司沒有這個人！」
</div>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#news').hide();
//$('#shownews').click(function () {
// $('#news').show(5000);
//});
//字的變換與動畫同時執行
//$('#shownews').click(function () {
// $('#news').toggle(3000);
// if ($(this).text() == "顯示")
// $(this).text("隱藏");
// else
// $(this).text("顯示");
//});
$('#shownews').click(function () {
$('#news').toggle(3000, function () {
if ($('#shownews').text() == "顯示")
$('#shownews').text("隱藏");
else
$('#shownews').text("顯示");
});
});
</script>
</body>
</html>
除了showhide，JQ還有其他動畫特效。
JQ-Slidedownuptaggle 動畫特效滑入出 …
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2 id="shownews">顯示</h2>
<div id="news">
「于太」的老公是昔日經營地下網路簽賭，身家逾千億元的于國柱：他也是台中起家，跟當初所爆出林太的背景資料相符。說起于國柱，就不得不回顧過往他在台灣有多麼風起雲湧，雖然他的行事低調，不過2005年他在國道被綁，行凶的是曾經策劃多起巨額綁票、使用重型軍械與警方駁火的張錫銘。當時張錫銘綁架了于國柱，贖金獅子大開口開價新台幣40億元。
于國柱曾被綁架，而且贖金高達新台幣40億元。（翻攝自三立新聞）
張錫銘被逮，判無期徒刑。他因擁有重軍火與警方對峙而史上聞名。（翻攝自東森新聞）
于國柱最初經營天王星賓果西餐廳，後又開了天蠍星賓果西餐廳及超級大賭場，並取得楊登魁經營的龍虎榜百家樂衛星賭場中部經營權、然後與友人合組天下科技公司，生產電腦式的賓果賭博軟體及機台；之後他前往對岸砸上億元經營寶盈線上運動賭博網站。
全盛時期，于國柱日賺高達4億元，寶盈5年就賺了新台幣4000億元；另外，于國柱還曾在喝一杯咖啡的時間，就決定買了一輛700多萬元保時捷，並且把車子給老婆開，如此驚人手筆「寵妻」也成為台中車界傳奇。
勝利進行DJ表演，于太在他身後的最佳觀賞位置。（翻攝自jenniferz_zgri IG）
GD跟勝利都是于太（之前名為林太）的追星對象，也有一說她是為了GD才接近勝利。（翻攝自ruru15微博）
于太身為賣力砸錢的超級粉絲，自然有不少親近他們的自拍合影。（翻攝自Burning Sun官網）
至於為何于太會傳成林太？其一是因于國柱本身極為低調，除了行蹤連老婆都瞞，豪宅也裝了密密麻麻的監視器，跟鄰居更是互無往來。公司員工甚至不知他是老闆，有人找時，員工還回：「要找于先生！你等一下喔！我們公司沒有這個人！」
</div>
<hr />
<input id="Button1" type="button" value="登入系統" />
<fieldset id="login" style="width:250px">
<legend>登入系統</legend>
<table>
<tr>
<td>帳號</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input id="Password1" type="password" />
</td>
</tr>
<tr>
<td colspan="2"><input id="Button1" type="button" value="登入" /></td>
</tr>
</table>
</fieldset>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#news').hide();
$('#login').hide();
$('#shownews').click(function () {
$('#news').slideDown(1500);
});
$('#Button1').click(function () {
$('#login').slideToggle(1000);
});
</script>
</body>
</html>
JQ動畫特效淡入淡出 fadeinouttaggle
較特別的是多了 fadeto 可以依照秒數調整透明度
範例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#thing{
width:500px; height:500px;
background-color:brown;
}
</style>
</head>
<body>
<input id="Button1" type="button" value="登入系統" />
<fieldset id="login" style="width:250px">
<legend>登入系統</legend>
<table>
<tr>
<td>帳號</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input id="Password1" type="password" />
</td>
</tr>
<tr>
<td colspan="2"><input id="Button1" type="button" value="登入" /></td>
</tr>
</table>
</fieldset>
<input id="Button2" type="button" value="button" />
<div id="thing">
</div>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#login').hide();
$('#Button1').click(function () {
$('#login').fadeToggle(2000);
});
$('#Button2').click(fadeShow);
function fadeShow() {
var n = Math.random();
$('#thing').fadeTo(300, n);
setTimeout(fadeShow,300);
}
</script>
</body>
</html>
JQ-CSS組合動畫特效
Container拿來當動畫場景(有第一場景第二場景…
重點
Position 位置
Absolute 相對
Relative 絕對
首先 CSS 先設定好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container{
height:1100px;
width:800px;
position:relative;
}
#title {
border: 3px solid white;
background-color: black;
color: white;
font-size: 20pt;
width: 450px;
text-align: center;
padding: 5px;
top: 650px;
left: 500px;
font-weight: 900;
font-family: 微軟正黑體;
position: absolute;
}
#photo{
position:absolute;
left:-1200px;
}
</style>
</head>
<body>
<div id="container">
<img src="Desert.jpg" id="photo" />
<p id="title">大漠風光</p>
</div>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
</script>
</body>
</html>
就像演戲一樣一開始道具跟人員都要就定位，
接下來就安排走位，
誰先進誰先出誰說啥台詞誰做啥動作…
但是難道要用js寫迴圈還是幀數嗎?
要省功夫當然用
JQ動畫專用函式animate
animate ({CSS’KEY’:’+=VALUE’},幀數,’幀數壘加方式Swim越來越大’)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container{
height:1100px;
width:800px;
position:relative;
}
#title {
border: 3px solid white;
background-color: black;
color: white;
font-size: 20pt;
width: 450px;
text-align: center;
padding: 5px;
top: 650px;
left: 500px;
font-weight: 900;
font-family: 微軟正黑體;
position: absolute;
}
#photo{
position:absolute;
left:-1200px;
}
</style>
</head>
<body>
<div id="container">
<img src="Desert.jpg" id="photo" />
<p id="title">大漠風光</p>
</div>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script>
$('#title').hide();
$('#photo').animate({ 'left': '+=1200' }, 2000, 'swing', function () {
$('#title').fadeIn(1500, function () {
$('#photo,#title').hide(2000);
});
});
</script>
</body>
</html>
下集預告 皮卡丘互動式動畫
題外話 股市 ( 有人打工被退訓
5秒搓合 集合競價(取低於底價但最高) 先進國家中只有中國跟台灣，
明年要改為逐筆交易，逐筆搓合。
對散戶影響?(網路太慢設備太慢)
股市禿鷹，高頻交易(1秒鐘萬筆以上，狙擊差價)
散戶心態必須改變不能掛現價，大戶跟法人要筆誰的速度快，畫面一定更不上，線上遊戲都會因為網路慢覺得Lag，那股式金融交易???
股票是經濟樣態的櫥窗，大概可以領先預測半年。
經濟好轉要升息，重貼現率。
不管有沒有投資股票，股市會牽動整個產業，厲害的國家則會牽動全球。
川普放話前會先放空，和緩的時候作多。
台灣股市現在是外資盤。
要去學一下會計，每股盈餘(大立光:光學，蘋果買單。eps霸繫摳)，違約交割，現金股利，大立光研發能量有成功，iphone做home鍵廠商後來就消失了，鴻海只做組裝但良率很高毛利率很低，代工就夠低了組裝更低，所以蘋果銷售好鴻海就會好，但關你啥事?鴻海沒賺錢，台灣gdp就會低，就會經濟緊縮，消費力降低，痛苦指數提高。大麥克指數，預測經濟(統計後的結果)。迷你裙指數。鰻魚飯指數。現在台股很奇怪，道瓊跌，但台股量縮價漲，感覺外資要拉高出貨。觀察股市可以看清經濟，看清權值股可以看公司。長期就投台灣50。期貨比台股早45分開盤，平倉完?賺賠。期貨1點45收盤。老師的策略有分當沖長期短期。設停損，市場反指標。基期低時進場，結果下市…
Use case 簡談
行為者actor&case
事件、功能、行動中
Actor不一定是人可能是系統
Actor只要會做Case的行為就要連起來，然後整理成不交錯。
Ex1.結帳裡面有哪個行為者，哪個動作。
use case不是在表達流程，而是行為者與動作有什麼關聯。
CASE關係有三種，UML新版圖才會表示關係。
include包含關係、extened延伸關係、genalization一般(繼承)關係，
元自於物件導向。
Ex3.
A包含B，A一定要用到B。
A延伸B，A某種情況使用B。(需要標註條件)
(買飲料在有甜心卡的情況下可以買一送一)
A一般B，具體的東西抽象化(一般化)。
雞(烤雞、火雞、母雞)結帳(付現、信用卡、貨到付款)
精準不精準是比較出來的
課本309頁
空箭頭實箭頭???
Ex2.提親
software ideas 畫圖軟體 可以不用用滑鼠用鍵盤
Uml 13種圖都可以畫
流程圖與use case沒有對應關係，
Usecase要先畫才能產出??類別圖?循序圖(表達流程)? 341頁
有點不太懂
-------------------------------------------------------
環境圖與流程圖為需求分析
USECASE物件導向結構化的系統分析
Ermode系統分析資料塑模
流程塑模DFD 業界沒再用結果台銀在考??
塑模完會有產出物
這時系統設計-細節規格 (青蛙蟾蜍程式
PSM->換成程式碼
才開始實做編碼，資料庫按照規格開成資料表
編碼階段用物件導向不一定系統分析時要用物件導向的系統分析
