javascriptの勉強方法
解決済
回答 5
投稿
- 評価
- クリップ 3
- VIEW 1,301
javascriptが全くのド素人前提で
どのように勉強を進めていったらよいでしょうか？
どのように勉強を進めていったらよいでしょうか？
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+4
初めは基礎を覚えてそこからレベルを上げていきましょう。
初めに覚えておくといいと思うのは
次にJavaScriptは関数スコープを持ちます。同名であっても関数内で宣言した物はローカル変数になります。
基本的にこのような書き方は変数の有効範囲を認識しづらくし、バグの原因になることが多いです。
また他のコードとの変数等の激突を防ぐため、グローバルは極力減らせるほうが好ましいと考えます。その際役に立つのが即時関数です。
他のことに関しては徐々に覚えていくといいと思うので以下単語と概要だけ。
クロージャ:ローカル変数を保持することができる。現状プライベートに近いものを実現できる方法の1つ。
プロトタイプチェーン:そのオブジェクトが持たないプロパティをprototypeを辿り、見つけた場合それを使うという一連の処理のこと。JavaScriptのオブジェクト指向はクラスベースではなくプロトタイプベース。
メソッドチェーン:オブジェクトのメソッドが自身のオブジェクトを返すことによって連結してメソッドを実行できること。
・パーフェクトJavaScript 著：井上誠一郎 土江拓郎 浜辺将太
でしょうか。分かりやすく書かれた図鑑という印象です。理解を深めるにつれこの本を手元においていることが正しい判断だったと思えるようになる本だと思います。個人的には初級者から中級者向けかと。
また手元にはありませんが定番としてオライリーの
・JavaScript第6版
があります。何かおすすめがありますか？と聞かれてこれを答える人が多いと思います。しかしながらこれも前述のパーフェクトJavaScript寄りの内容の多い物でしょう。恐らく予想になりますがパーフェクトJavaScriptが知識寄りなのに関して、こちらは基礎をおさえたうえで実装と実践に関する知識に重きを置いているのではないでしょうか。(手元にある方の意見が伺いたいところ)
また判断に悩むところですが2ちゃんねるのスレッドなども参考にすると良いでしょう。最近は様々な問題を抱えており派閥、宗教戦争のような状態に見えます。得られる知識は以前に比べ実用的ではなく量も少ないと思われます。情報の取捨選択を行うべきでしょう。
自分が調べ続けている中でも様々なブログ、ホームページで実用的な知識、または検証結果などがあるため自分に合った資料となるサイトを見つけ出すことも大切でしょう。
その上で悩んだときはMDNを調べてみるのも手でしょう。一度目を通すことをお勧めします。
初めに覚えておくといいと思うのは
var a=50;
console.log(window.a)//50次にJavaScriptは関数スコープを持ちます。同名であっても関数内で宣言した物はローカル変数になります。
var a=50;
function b(){
var a=20;
console.log(a);
};
b();//20
console.log(a);//50var a=50;
function b(){
c=45;
console.log(a);
};
b();//50
console.log(c);//45基本的にこのような書き方は変数の有効範囲を認識しづらくし、バグの原因になることが多いです。
//イベントのセットですが様々な書き方があります。
window.onload//documentのload完了時
window.addEventListener("load",function,useCapture);
//<div onclick="function">などまた他のコードとの変数等の激突を防ぐため、グローバルは極力減らせるほうが好ましいと考えます。その際役に立つのが即時関数です。
(function (_Str){
var _String=_Str+"CODE";
console.log(_String);//TESTCODE
}("TEST"));
console.log(_String);//undefined他のことに関しては徐々に覚えていくといいと思うので以下単語と概要だけ。
クロージャ:ローカル変数を保持することができる。現状プライベートに近いものを実現できる方法の1つ。
プロトタイプチェーン:そのオブジェクトが持たないプロパティをprototypeを辿り、見つけた場合それを使うという一連の処理のこと。JavaScriptのオブジェクト指向はクラスベースではなくプロトタイプベース。
メソッドチェーン:オブジェクトのメソッドが自身のオブジェクトを返すことによって連結してメソッドを実行できること。
function OutputWrapper(_String){
OutputWrapper.prototype.Value=_String;
OutputWrapper.prototype.SetValue=function (_String){
this.Value=_String;
};
OutputWrapper.prototype.Console=function (){
console.log(this.Value);
return this;
};
OutputWrapper.prototype.Alert=function (){
alert(this.Value);
return this;
};
};
//メソッドチェーンとプロトタイプチェーンを使用しています
var Output=new OutputWrapper("TEST");
Output.Console();//TEST
Output.Console().SetValue("AAAA");//TEST
Output.Console().Alert()//console:AAAA alert:AAAA・パーフェクトJavaScript 著：井上誠一郎 土江拓郎 浜辺将太
でしょうか。分かりやすく書かれた図鑑という印象です。理解を深めるにつれこの本を手元においていることが正しい判断だったと思えるようになる本だと思います。個人的には初級者から中級者向けかと。
また手元にはありませんが定番としてオライリーの
・JavaScript第6版
があります。何かおすすめがありますか？と聞かれてこれを答える人が多いと思います。しかしながらこれも前述のパーフェクトJavaScript寄りの内容の多い物でしょう。恐らく予想になりますがパーフェクトJavaScriptが知識寄りなのに関して、こちらは基礎をおさえたうえで実装と実践に関する知識に重きを置いているのではないでしょうか。(手元にある方の意見が伺いたいところ)
また判断に悩むところですが2ちゃんねるのスレッドなども参考にすると良いでしょう。最近は様々な問題を抱えており派閥、宗教戦争のような状態に見えます。得られる知識は以前に比べ実用的ではなく量も少ないと思われます。情報の取捨選択を行うべきでしょう。
自分が調べ続けている中でも様々なブログ、ホームページで実用的な知識、または検証結果などがあるため自分に合った資料となるサイトを見つけ出すことも大切でしょう。
その上で悩んだときはMDNを調べてみるのも手でしょう。一度目を通すことをお勧めします。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+3
ではドットインストールで勉強してはどうでしょう。
動画のため、ある程度時間は拘束されますが、1本あたりの動画時間はそれほど長くないため、こちらも空いた時間に勉強するのに適しているかと思います。
http://dotinstall.com/lessons/basic_javascript_v2
動画のため、ある程度時間は拘束されますが、1本あたりの動画時間はそれほど長くないため、こちらも空いた時間に勉強するのに適しているかと思います。
http://dotinstall.com/lessons/basic_javascript_v2
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
１）一通り基本を覚える
２）jQuery などの フレームワークの "便利さ" を痛感する
３）jQuery などの フレームワークの "重さ" も体感する
追記ここから
-(1+2) とか計算できませんね。。。
追記ここまで
# 数値を抽出する正規表現のところ、極めて遺憾ですが、、、、全然いけていません。
ここで一杯質問して、知識の幅を広げましょう。
jQuery は、ここから DL できますよ。
http://jquery.com/download/
このサンプルは、jQuery は読み込むけど使っていません。
２）jQuery などの フレームワークの "便利さ" を痛感する
３）jQuery などの フレームワークの "重さ" も体感する
<!DOCTYPE html lang="ja">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<style>
#debug {
font-family:"FixedSys";
width: 100%;
height: 300px;
overflow:auto;
}
</style>
<script>
var DENTAKU = (function() {
function init() {
this.config = {
stack:[],
pos:0,
next:function() {
if (this.pos < this.stack.length) {
this.val = this.stack[this.pos++];
} else {
this.val = null;
}
},
reset:function() {
this.pos = 0;
},
val:null
};
}
init.prototype.express = function(s) {
var arr = s.replace(/\s*/g, "").split(/([+-]?\d*\.?\d*[eE]\d{1,3}|[+-]?\d+[eE]\d{1,3}|[^\w])/g);
var arr2 = [];
for (var x=0;x < arr.length;x++) {
if (arr[x] != "") {
arr2.push(arr[x]);
}
}
this.config.stack = arr2;
this.config.reset();
return this;
}
init.prototype.calc = function() {
var self = this;
self.config.next();
print("@--------------------------");
try {
var ans = _calc(self);
if (self.config.val != null && self.config.val != "") {
throw "unknown operand: " + self.config.val;
}
print("ANSWER: " + ans);
self.config.ans = ans;
return ans;
} catch (e) {
alert("ERROR: " + e);
return null;
}
}
function _calc(s) {
var left = _term(s);
while (true) {
if (s.config.val == "+") {
s.config.next();
var right = _term(s);
print("add: L:" + left + " + R:" + right);
left = left + right;
} else if (s.config.val == "-") {
print("sub:");
s.config.next();
var right = _term(s);
print("sub: L:" + left + " - R:" + right);
left = left - right;
} else {
return left;
}
}
}
function _term(s) {
var left = _element(s);
while (true) {
if (s.config.val == "*") {
print("mul:");
s.config.next();
var right = _element(s);
print("mul: L:" + left + " * R:" + right);
left = left * right;
} else if (s.config.val == "/") {
print("div:");
s.config.next();
var right = _element(s);
print("div: L:" + left + " / R:" + right);
if (right == 0) {
throw "zero division.";
}
left = left / right;
} else if (s.config.val == "%") {
print("mod:");
s.config.next();
var right = _element(s);
print("mod: L:" + left + " % R:" + right);
if (right == 0) {
throw "zero division.";
}
left = left % right;
} else {
return left;
}
}
}
function _element(s) {
print("input: " + s.config.val);
var num = parseFloat(s.config.val);
if (isNaN(num)) {
if (s.config.val == "(") {
print("par:start");
s.config.next();
var left = _calc(s);
print("par:close, L:" + left + " , V:" + s.config.val);
if (s.config.val == ")") {
s.config.next();
return left;
} else {
throw "')' expected.";
}
} else {
return num;
}
} else {
s.config.next();
return num;
}
}
function print(s) {
document.getElementById("debug").value += s + "\n";
}
return new init();
})();
window.onload = function() {
DENTAKU.express("(1 + (12 / 5) * 2").calc();
DENTAKU.express("1e3 + 22").calc();
DENTAKU.express("e3 + 22").calc();
DENTAKU.express("3 / 0").calc();
}
</script>
</head>
<body>
<pre>
【eval 使わない電卓】
優先順位↑ 数値（符号付・指数）、左括弧
↑ ＊ ／ ％
↑ ＋ －
※eval 使わない、とは、使っちゃいけないのではなくて、eval する前にやっていいのか評価する仕掛けを入れなさいという意味。
※このPGは、eval を使わないでさらに自前で解析する。
</pre>
<HR />
<textarea rows="10" cols="80" id="debug"></textarea>
</body>
</html>追記ここから
-(1+2) とか計算できませんね。。。
- と + の評価をしてないからです。
追記ここまで
# 数値を抽出する正規表現のところ、極めて遺憾ですが、、、、全然いけていません。
ここで一杯質問して、知識の幅を広げましょう。
jQuery は、ここから DL できますよ。
http://jquery.com/download/
このサンプルは、jQuery は読み込むけど使っていません。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
書籍で言うと、
はかなり有益ですよ。どちらか一冊は読んでみてはどうでしょ。
ただ、内容が難しいので、頭の中を通過させるだけでいいと思います。
あとはMDNのサイトでコマンド覚えれば、
自然とJS使いになれます。
俺も修行中です。
- JavaScript Ninjaの極意
- Effective JavaScript
はかなり有益ですよ。どちらか一冊は読んでみてはどうでしょ。
ただ、内容が難しいので、頭の中を通過させるだけでいいと思います。
あとはMDNのサイトでコマンド覚えれば、
自然とJS使いになれます。
俺も修行中です。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
まずはCodecademyなどの学習サイトを使って勉強してはどうでしょうか。
CodecademyはiPhoneアプリもあるので、時間が空いた時とかに勉強するには良いかと思います。
ただ多少の英語力が必要ですが。
CodecademyはiPhoneアプリもあるので、時間が空いた時とかに勉強するには良いかと思います。
ただ多少の英語力が必要ですが。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.61%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/01/24 03:10
パーフェクトシリーズは言語仕様に定評があるような記事を見かけた記憶があります。
MDNはWeb系にそんなに関わってこなかったのでノータッチでした。参考にします。