javascriptが全くのド素人前提で
どのように勉強を進めていったらよいでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答5件
0
初めは基礎を覚えてそこからレベルを上げていきましょう。
初めに覚えておくといいと思うのは
lang
1var a=50; 2console.log(window.a)//50
グローバルに定義した物はwindowオブジェクトのプロパティになることでしょう。
次にJavaScriptは関数スコープを持ちます。同名であっても関数内で宣言した物はローカル変数になります。
lang
1var a=50; 2function b(){ 3 var a=20; 4 console.log(a); 5}; 6b();//20 7console.log(a);//50
しかし例外があります。それが次のようなコードです。
lang
1var a=50; 2function b(){ 3 c=45; 4 console.log(a); 5}; 6b();//50 7console.log(c);//45
関数内で定義した変数cが外部から参照できています。これは変数宣言にvarを付けなかったのが原因です。
基本的にこのような書き方は変数の有効範囲を認識しづらくし、バグの原因になることが多いです。
lang
1//イベントのセットですが様々な書き方があります。 2window.onload//documentのload完了時 3window.addEventListener("load",function,useCapture); 4//<div onclick="function">など
addEventListenerを使用するのが良いと考えますがIE8以下では使えません。その点を補助するコードやライブラリを使用することを検討してもいいでしょう。しかしながらまずは基礎を覚えるといいかと。
また他のコードとの変数等の激突を防ぐため、グローバルは極力減らせるほうが好ましいと考えます。その際役に立つのが即時関数です。
lang
1 2(function (_Str){ 3 var _String=_Str+"CODE"; 4 console.log(_String);//TESTCODE 5}("TEST")); 6 7console.log(_String);//undefined
他のことに関しては徐々に覚えていくといいと思うので以下単語と概要だけ。
クロージャ:ローカル変数を保持することができる。現状プライベートに近いものを実現できる方法の1つ。
プロトタイプチェーン:そのオブジェクトが持たないプロパティをprototypeを辿り、見つけた場合それを使うという一連の処理のこと。JavaScriptのオブジェクト指向はクラスベースではなくプロトタイプベース。
メソッドチェーン:オブジェクトのメソッドが自身のオブジェクトを返すことによって連結してメソッドを実行できること。
lang
1function OutputWrapper(_String){ 2 OutputWrapper.prototype.Value=_String; 3 OutputWrapper.prototype.SetValue=function (_String){ 4 this.Value=_String; 5 }; 6 OutputWrapper.prototype.Console=function (){ 7 console.log(this.Value); 8 return this; 9 }; 10 OutputWrapper.prototype.Alert=function (){ 11 alert(this.Value); 12 return this; 13 }; 14}; 15//メソッドチェーンとプロトタイプチェーンを使用しています 16var Output=new OutputWrapper("TEST"); 17Output.Console();//TEST 18Output.Console().SetValue("AAAA");//TEST 19Output.Console().Alert()//console:AAAA alert:AAAA
書籍に関してですが私の手元にあるもので詳しく本気で勉強するのに向いているのは
・パーフェクトJavaScript 著:井上誠一郎 土江拓郎 浜辺将太
でしょうか。分かりやすく書かれた図鑑という印象です。理解を深めるにつれこの本を手元においていることが正しい判断だったと思えるようになる本だと思います。個人的には初級者から中級者向けかと。
また手元にはありませんが定番としてオライリーの
・JavaScript第6版
があります。何かおすすめがありますか?と聞かれてこれを答える人が多いと思います。しかしながらこれも前述のパーフェクトJavaScript寄りの内容の多い物でしょう。恐らく予想になりますがパーフェクトJavaScriptが知識寄りなのに関して、こちらは基礎をおさえたうえで実装と実践に関する知識に重きを置いているのではないでしょうか。(手元にある方の意見が伺いたいところ)
また判断に悩むところですが2ちゃんねるのスレッドなども参考にすると良いでしょう。最近は様々な問題を抱えており派閥、宗教戦争のような状態に見えます。得られる知識は以前に比べ実用的ではなく量も少ないと思われます。情報の取捨選択を行うべきでしょう。
自分が調べ続けている中でも様々なブログ、ホームページで実用的な知識、または検証結果などがあるため自分に合った資料となるサイトを見つけ出すことも大切でしょう。
その上で悩んだときはMDNを調べてみるのも手でしょう。一度目を通すことをお勧めします。
投稿2015/01/23 14:29
総合スコア730
0
ベストアンサー
ではドットインストールで勉強してはどうでしょう。
動画のため、ある程度時間は拘束されますが、1本あたりの動画時間はそれほど長くないため、こちらも空いた時間に勉強するのに適しているかと思います。
投稿2015/01/23 09:51
総合スコア1679
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
1)一通り基本を覚える
2)jQuery などの フレームワークの "便利さ" を痛感する
3)jQuery などの フレームワークの "重さ" も体感する
lang
1<!DOCTYPE html lang="ja"> 2<html lang="ja"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 6<script src="jquery.js"></script> 7<script src="jquery-ui.js"></script> 8<style> 9#debug { 10 font-family:"FixedSys"; 11 width: 100%; 12 height: 300px; 13 overflow:auto; 14} 15</style> 16<script> 17var DENTAKU = (function() { 18 function init() { 19 this.config = { 20 stack:[], 21 pos:0, 22 next:function() { 23 if (this.pos < this.stack.length) { 24 this.val = this.stack[this.pos++]; 25 } else { 26 this.val = null; 27 } 28 }, 29 reset:function() { 30 this.pos = 0; 31 }, 32 val:null 33 }; 34 } 35 init.prototype.express = function(s) { 36 var arr = s.replace(/\s*/g, "").split(/([+-]?\d*.?\d*[eE]\d{1,3}|[+-]?\d+[eE]\d{1,3}|[^\w])/g); 37 var arr2 = []; 38 for (var x=0;x < arr.length;x++) { 39 if (arr[x] != "") { 40 arr2.push(arr[x]); 41 } 42 } 43 this.config.stack = arr2; 44 this.config.reset(); 45 return this; 46 } 47 init.prototype.calc = function() { 48 var self = this; 49 self.config.next(); 50 print("@--------------------------"); 51 try { 52 var ans = _calc(self); 53 54 if (self.config.val != null && self.config.val != "") { 55 throw "unknown operand: " + self.config.val; 56 } 57 58 print("ANSWER: " + ans); 59 self.config.ans = ans; 60 return ans; 61 } catch (e) { 62 alert("ERROR: " + e); 63 return null; 64 } 65 } 66 function _calc(s) { 67 var left = _term(s); 68 69 while (true) { 70 if (s.config.val == "+") { 71 s.config.next(); 72 var right = _term(s); 73 print("add: L:" + left + " + R:" + right); 74 left = left + right; 75 } else if (s.config.val == "-") { 76 print("sub:"); 77 s.config.next(); 78 var right = _term(s); 79 print("sub: L:" + left + " - R:" + right); 80 left = left - right; 81 } else { 82 return left; 83 } 84 } 85 } 86 function _term(s) { 87 var left = _element(s); 88 89 while (true) { 90 if (s.config.val == "*") { 91 print("mul:"); 92 s.config.next(); 93 var right = _element(s); 94 print("mul: L:" + left + " * R:" + right); 95 left = left * right; 96 } else if (s.config.val == "/") { 97 print("div:"); 98 s.config.next(); 99 var right = _element(s); 100 print("div: L:" + left + " / R:" + right); 101 102 if (right == 0) { 103 throw "zero division."; 104 } 105 106 left = left / right; 107 } else if (s.config.val == "%") { 108 print("mod:"); 109 s.config.next(); 110 var right = _element(s); 111 print("mod: L:" + left + " % R:" + right); 112 113 if (right == 0) { 114 throw "zero division."; 115 } 116 117 left = left % right; 118 } else { 119 return left; 120 } 121 } 122 } 123 function _element(s) { 124 print("input: " + s.config.val); 125 126 var num = parseFloat(s.config.val); 127 128 if (isNaN(num)) { 129 if (s.config.val == "(") { 130 print("par:start"); 131 s.config.next(); 132 var left = _calc(s); 133 print("par:close, L:" + left + " , V:" + s.config.val); 134 if (s.config.val == ")") { 135 s.config.next(); 136 return left; 137 } else { 138 throw "')' expected."; 139 } 140 } else { 141 return num; 142 } 143 } else { 144 s.config.next(); 145 return num; 146 } 147 } 148 function print(s) { 149 document.getElementById("debug").value += s + "\n"; 150 } 151 return new init(); 152})(); 153 154window.onload = function() { 155 DENTAKU.express("(1 + (12 / 5) * 2").calc(); 156 DENTAKU.express("1e3 + 22").calc(); 157 DENTAKU.express("e3 + 22").calc(); 158 DENTAKU.express("3 / 0").calc(); 159} 160 161</script> 162</head> 163<body> 164<pre> 165【eval 使わない電卓】 166優先順位↑ 数値(符号付・指数)、左括弧 167 ↑ * / % 168 ↑ + - 169※eval 使わない、とは、使っちゃいけないのではなくて、eval する前にやっていいのか評価する仕掛けを入れなさいという意味。 170※このPGは、eval を使わないでさらに自前で解析する。 171 172</pre> 173<HR /> 174<textarea rows="10" cols="80" id="debug"></textarea> 175 176</body> 177</html>
追記ここから
-(1+2) とか計算できませんね。。。
- と + の評価をしてないからです。
追記ここまで
数値を抽出する正規表現のところ、極めて遺憾ですが、、、、全然いけていません。
ここで一杯質問して、知識の幅を広げましょう。
jQuery は、ここから DL できますよ。
http://jquery.com/download/
このサンプルは、jQuery は読み込むけど使っていません。
投稿2015/01/23 04:10
総合スコア1693
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/23 06:01
2015/01/23 10:40
0
書籍で言うと、
- JavaScript Ninjaの極意
- Effective JavaScript
はかなり有益ですよ。どちらか一冊は読んでみてはどうでしょ。
ただ、内容が難しいので、頭の中を通過させるだけでいいと思います。
あとはMDNのサイトでコマンド覚えれば、
自然とJS使いになれます。
俺も修行中です。
投稿2015/01/27 14:56
総合スコア112
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/23 18:10