2018年次回作成アプリ 学習言語ネタ jquery ajax,まずはjqueryを勉強中
アイフォンアプリも作りたいけど、仕事にも直結する言語についても学習しなくてはならないのでJqueryでを勉強中。物覚えが悪いので快調には進まず、いつも回り道。年を取ると頭が鈍くなっていけない。
javascript をより便利にしたjquery を勉強する。
(個人的メモ)勉強中のフォルダは
/Users/maseda/Desktop/jQuery学習のフォルダにある。
単に勉強ではつまらないので簡単なゲームを作ることにした。
アイフォーンアプリで作ったネタを使うことにした。画像があるから使いまわせるし。
内容
jquery
まずは画像を表示して画像をクリックすると画像が消える
画像を動かすアニメーション
などをやってみる。
過去に勉強した記事
JQUERYの簡単なサンプルを書いてました
https://pikucha.sakura.ne.jp/blog/2017/03/25/javascript%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%E3%82%A2%E3%83%B3%E3%83%89%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%AE%E3%81%BF%E3%81%AE%E6%A9%9F%E8%83%BD%E3%81%A8jquery%E3%81%AE%E3%83%9C%E3%82%BF/
ボタンじゃないけどPタグをクリックするとデバッグログに出力するなど。
・参考にしたサイト
ソースについても記載ありです。コードは一部省略、改変しているので、元の参考にしたサイトを参考にしたほうがよいです。
jQuery入門 – Qiita
https://qiita.com/Tocyuki/items/0b42c9225aafc995167a
もぐらたたきっぽいゲーム – jQuery入門 – ポンクソフト
http://ponk.jp/jquery/basic/tataki
7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4
http://ozpa-h4.com/2012/11/07/jquery-lecture/
jQueryダウンロード、2018年4月8日
https://jquery.com/download/
リンク先はそのままJSコードが表示されるだけなので、ブラウザの別名保存で保存する。
私はデスクトップにフォルダを作ってそこにいれて後でコピーすることにする
1 |
<script src="jquery-3.3.1.min.js"></script> |
追記
今日の勉強内容
参考サイト
http://ponk.jp/jquery/basic/jigsaw
クロムでデバッグするときは
f,pos[]は変数と配列
console.log(‘pos[%d]= %d’,f,pos[f]);
みたいにかける
以下は
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ (略) for(var i=0;i<16;i++){ $('<div id="piece'+i+'" class="piece"></div>').css({ backgroundPosition: '-'+getx(i)+'px -'+gety(i)+'px',left: getx(pos[i]),top: gety(pos[i]) }).appendTo($('body')); } }); ↓こんな感じで実行される。はじめの2つのpxは画像の位置で部分切り出しされている <div id="piece1" class="piece" style="background-position: -80px 0px; left: 240px; top: 80px;"></div> (piece0から15のDIVが出力されて画像として表示される) |