Spring画面系をどう乗り切るか（技術面）その2
CSS/jQueryを試してみる。
趣旨
とんがった案件でなくてもSpring画面系で必要な技術 HTML CSS jQuery Bootstrap
が出てくるのが当たり前になっている状況がある。
公開しているページを改良しながら電卓を作ってみる
参考にしたページ
修正内容
・４則計算記号を変更した。
→ それに伴って正規表現を使用した。
・gridを使用するようにした。
.ライブラリを使って電卓を表示するようにした。
モジュール一覧
・calc.css
・calculator.png
・calculatorBasic.html
・form.html
・jquery.calculator.js
・jquery.calculator.min.js
・jquery.plugin.js
・jquery.plugin.min.js
学習用アプリの画像貼り付け
ソース抜粋
作るもの
<script>
$(function(){
$('.button').click(function(){
var pushed = $(this).text();
var inputLabel = $('#boxinputLabel');
var h1Text = inputLabel.text();
h1Text = h1Text.replace("×", "*");
h1Text = h1Text.replace("÷", "/");
if (pushed == '=') {
// 計算
inputLabel.text(eval(h1Text));
} else if (pushed == 'AC') {
// 全てクリア
inputLabel.text('0');
} else {
alert(inputLabel.text())
console.log(inputLabel.text());
if (inputLabel.text() == '0') {
inputLabel.text(pushed);
} else {
inputLabel.text(inputLabel.text() + pushed);
}
}
});
});
<style>
* {
font-family: 'Inconsolata', monospace;
color: #555;
}
body
{
background-color: white;
}
body > * {
margin: 3px;
padding: 10px;
}
.container {
margin: auto;
padding:auto;
display: grid;
grid-template-columns: 40px 40px 40px 40px;
grid-template-rows: 50x 40px 40px 40px 40px 40px;
width: 220px;
background-color: #E0DEDA;
grid-gap: 20px;
margin: 3px;
padding: 10px;
}
.container > * {
align : center;
}
#boxinputLabel{
grid-column: 1 / span 4;
grid-row-start: 1;
grid-row-end: 2;
background-color: #DFE9E9;
padding-left: 1rem;
padding-right: 1rem;
}
#boxAC {
grid-column: 1 / span 3;
grid-row-start: 2;
grid-row-end: 2;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box÷ {
width:10%;
grid-column: 4/ span 1;
grid-row:2;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box7 {
width:10%;
grid-column: 1/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box8 {
width:10%;
grid-column: 2/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box9 {
width:10%;
grid-column: 3/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box× {
width:10%;
grid-column: 4/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box4{
width:10%;
grid-column: 1/ 4;
grid-row:4;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
#box5{
width:10%;
grid-column: 2/ 4;
grid-row:4;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
#box6{
width:10%;
grid-column: 3/ 4;
grid-row:4;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#boxMinus{
width:10%;
grid-column: 4/ 4;
grid-row:4;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box1{
width:10%;
grid-column: 1/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box2{
width:10%;
grid-column: 2/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box3{
width:10%;
grid-column: 3/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#boxPlus{
width:10%;
grid-column: 4 / 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box0{
grid-column:1 / span 2;
grid-row:6;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#boxTen{
width:10%;
grid-column: 3/ 4;
grid-row:6;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#boxEqual{
width:10%;
grid-column: 4/ 4;
grid-row:6;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
© 2020 GitHub, Inc.
<html>
<head>
<meta http - equiv="Content-Type" content="text-html; charset=UTF-8">
<title>登録フォーム</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$("form").submit(function(){
var checksubmit = true;
if($("#uname").val() == ""){
checksubmit = false;
}
if($(":radio:checked").length == 0){
checksubmit = false;
}
return checksubmit;
});
});
</script>
</head>
<body>
<form>
キャストID<br>
<input type="text" name="id" id = "id">
<br><br>
パスワード<br>
<input type="text" name="pass" id = "pass">
<br><br>
キャスト名（必須）<br>
<input type="text" name="uname" id = "uname">
<br><br>
<input type="submit" value="登録する">
</form>
</body>
</html>
【URL】
以前IBMクラウドに乗せたもの。
https://paasjqueryflask1001.mybluemix.net/
【Github】
ダウンロードしていただければ説明していた通りの動きをするはず。
https://github.com/noikedan/flask-sample
【言語・FW】
・HTML/CSS/ JQuery（jQuery UI）
・Flask
【開発環境】
・mi
・Atom
【インフラ等】
・IBM Cloud
IBMクラウドへの乗せ方はこちらを参考にしてください。
https://qiita.com/makaishi2/items/21cbdb99444fb50e01e1
Formの練習をしてみる。
http://www.awsginaexample.com.s3-website-ap-northeast-1.amazonaws.com/form1.html
http://www.awsginaexample.com.s3-website-ap-northeast-1.amazonaws.com/form2.html
やって見て
練習にはなると思う。やらないよりはマシ以上の手応えは感じると思う。
・クラスとIDの違いを実感する。
・JQueryになれる。
・ソースを読む体験ができる。
など
Spring 案件ソルーション 1
https://qiita.com/gina/items/02f64562b6928606c716
Spring 案件ソルーション 2
https://qiita.com/gina/items/7f027db7a3ba91266c59