お正月ごろはPHPの環境を自宅のPCに入れて
サーバーに手を突っ込むと楽しいらしい。
ただ危険なのでセキュリティには気を付けないといけない。
うっかり入力ミスを防ぐのはvalでできる。
セキュリティ的にはサーバー側でやらないとだめらしい。
フロントエンジニア：javaScripterのこと
入力してボタン押したらリストに追加
--->test2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>basic of jQuery</title>
<link rel="stylesheet" href="test2.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="hoge">
<h1>jQuery</h1>
<input type="text" id="t1">
<button id="b1">追加</button>
<ol id="o1">
<li>text</li>
<li>html</li>
<li>attr</li>
</ol>
</div>
<script src="test2.js"></script>
</body>
</html>
--->test2.js(自分で作った分)
$(function(){
$('#b1').on('click',function(){
console.log('hi');
var moji = $('#t1').val();//取得
var ele = $('<li>').text(moji);//liアイテムを生成
$('#o1').append(ele);
});//親に子要素を追加
});
//変数に入れなかったら？
$('#o1').append( $('<li>').text(moji)); //親に子要素を追加
これでもできることはできるけど美しくないから
変数eleをかませて行を変えたほうがいい
要素を生成するときは<'ようそ'>で囲う
div hogeが妙に縦がないと思ったら高さ指定していたからだった。
/*height: 100px;/*高さ*/
↓
つまり箱であるdiv hogeの高さを指定してしまっていると、
はみでた部分はdivからはみでっぱなし。
(divの高さは拡張されないということになる)
background 自習のつづき
https://www.sejuku.net/blog/75366
ボックスを点線で囲う
--->test2.css
div.hoge{
background-image: url("img/fish_kue2.png");
background-size: contain;/*元画像の縦横比は保持して、要素に元画像が全て収まるように調整*/
/*background-size: cover;*/
width: 500px;/*幅*/
height: 100px;/*高さ*/
border: dashed 5px #ffa500; /*枠線指定*/
border-radius: 10px;
padding: 30px;
}
