プログラミング初心者です。
jQuery mobileで書かれたコードをJavaScriptのみを使って書きたいと思っています。
経緯
MonacaでBackend Memoというメモ帳のサンプルアプリがあり、そのプログラムを読んでJavaScriptとアプリ開発の勉強をしようと思いました。
Backend Memoの仕様やソースコードの説明が以下のサイトページで書かれています。
Backend Memo
UIは、jQuery mobileを使って書かれています。
しかし、JavaScriptやアプリ開発の質問をする中で、色々な人に指摘されたことがあります。
それは、
「初心者がJavaScriptもちゃんと書けないうちに、jQueryとかのライブラリに手を出すのは、いろいろすっ飛ばしていて、間違っている。まずは生のJavaScriptの書き方や概念を覚えるべきだ」
というものです。
確かに、それはそうかもしれません。
しかし、勉強をするためにいろいろなソースコードを見て真似したりするわけですが、
実際に実用的なものを作るうえでは、むしろ、ライブラリを使わないことの方が少ないわけで、
JavaScriptならば、大概はjQueryを使っており、
JavaScriptのみで書かれたソースコード=勉強教材を用意する(見つけ出す)のは困難なんです。
なので、あくまで生のJavaScriptを勉強する、という名目のもと、
拾ってきたjQueryを含むJavaScriptコードを、生のJavaScriptのみで書き直す
という方法をとろうかと思っています。
しかし、何ぶん初心者ゆえ、
何をどう直せばよいか、どうアプローチをとればいいのか、まるまるまるっきり分からない、
ため、直し方を教えて頂きたく思い、質問しました。
人によっては、**「やってほしいことを丸投げにした質問」**と判断し、批判されると思いますが、
どうか、そこはご理解頂いた上でご回答いただけると幸いです。
該当のソースコード
具体的に知りたいのは、以下のコードからjQuery mobileの記述を生のJavaScriptに直す方法です。
$とか♯とか、ちょっとした書き方の作法の違いレベルなら判るのですが、
書き方に大幅な違いが出てくるものは、自分で処理しきれる自信がありません。
ですから、もう初めから教えて頂きたく思います。
全てでも一部でも構いませんし、考え方、アプローチのしかたを教えて頂くのでも構いません。
ご回答宜しくお願い致します。
メモの追加
追加ページ上で Save ボタンを押したときに、onSaveBtn() を呼び出します。次に、ページ上で入力された title と content の値を、 addMemo() 関数に渡します。
この関数では、 monaca.cloud.Collection().insert() ( Monaca バックエンド API ) を使用して、 Memo コレクションに、コレクションアイテムを挿入します。
javascript
1function onSaveBtn() 2{ 3 var title = $("#title").val(); 4 var content = $("#content").val(); 5 if (title != '') 6 { 7 addMemo(title,content); 8 } 9} 10 11function addMemo(title,content) { 12 var memo = MC.Collection("Memo"); 13 14 memo.insert({ title: title, content: content}) 15 .done(function(insertedItem) 16 { 17 console.log('Insert is success!'); 18 $("#title").val(""); 19 $("#content").val(""); 20 //display a dialog stating that the inserting is success 21 $( "#okDialog_add" ).popup("open", {positionTo: "origin"}).click(function(event) 22 { 23 event.stopPropagation(); 24 event.preventDefault(); 25 getMemoList(); 26 $.mobile.changePage('#ListPage'); 27 }); 28 }) 29 .fail(function(err){ console.log('Insert failed!');})
回答9件
あなたの回答
tips
プレビュー