調べたこと 第十八回
CSSとJavaScriptで装飾する
今一度、、
CSSは、要素に対して、色、サイズ、位置 などを装飾する仕組み
JavaScriptは、Webブラウザの中でプログラムを実行する仕組み
この2つを合わせて、素敵なページにする。
例
<div id="mydiv">というクラスがついた四角い要素に対して、JavaScriptで動きを出す
function move(){
document.getElementById("mydiv").style.left="100px";
}
<input type="button" onclick="move()"; value="移動">
これで、移動 というボタンを押すと左に100px分動くという動きをつけることができる。
これらの装飾で厄介なのが、ウェブブラウザによって動きが異なるということ。
ウェブブラウザごとに、またバージョンによっても動きが違うことがあり、いちいち
動作確認を取るのが現実的でないので、
「フレームワーク」というのが登場する。
これには、ブラウザごとに切り替える処理が内蔵されていて、プログラマが違いを知っておく必要はない。
フレームワークを常に最新版にしておけば、新しいブラウザにも対応。
このフレームワークとして、よく使われているものの中に、「jQuery」がある。
jQueryを読み込むとき、こんな書き方↓
<script language="javascript" src="jquery-1.11.2.min.js"></script>
読み込んでから、プログラムを書くときの内容はこうなる↓
function move(){
$(#mydiv).animate({ ←animateはアニメーションになるので、ゆっくり100px動く
left:"100px"
});
}
