- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2024-04-08T21:34:11+09:00","default:irrp","irrp")
※本ページでまとめているのはES6より前の時代のJavaScript(Vanilla JS)の話です
→言語・開発環境
→JavaScript
→AJAX関連
#contents
*一般記事 [#f3c15af6]
-[[Learn JavaScript のご紹介  |  Blog  |  web.dev>https://web.dev/blog/introducing-learn-javascript?hl=ja]] 2024.4
-[[JavaScriptの基礎知識をGIFアニメで分かりやすく解説 -総まとめ>https://coliss.com/articles/build-websites/operation/javascript/javascript-visualized.html]]
-[[JavaScript「再」入門>https://developer.mozilla.org/ja/docs/JavaScript/A_re-introduction_to_JavaScript]] 2006.3.6
-[[JavaScript初級者から中級者になろう — uhyohyo.net>https://uhyohyo.net/javascript/]] 2022
-[[20+ Web Projects With Vanilla JavaScript | Traversy Media>https://vanillawebprojects.com/]] 2022.1
--20個のWebアプリ開発を通して、HTML,CSS,JavaScriptを学ぶことができる
-http://vanilla-js.com/ （ジョークサイト）
-[[現代の JavaScript チュートリアル>https://ja.javascript.info/]]
-[[JavaScript基礎文法最速マスター>http://d.hatena.ne.jp/gifnksm/20100131/1264934942]] 2010.2.1
-https://developer.mozilla.org/ja/docs/JavaScript
-[[JSBooks>http://jsbooks.revolunet.com/]]
--free javascript books(英語)
-[[Google JavaScript Style Guide>http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?#JavaScript_Language_Rules]] 2012.7.5
-[[ようこそJavaScriptの世界へ>http://www.atmarkit.co.jp/fcoding/articles/js/01/js01a.html]] 2009
-[[Javascriptにクラスはない>http://blog.livedoor.jp/dankogai/archives/51223538.html]] 2009.6.13
-[[JavaScriptのイロハ>http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/]]
-[[新JavaScript例文辞典>http://www.openspc2.org/reibun/javascript2/index.html]]
-[[JavaScript例文辞典>http://www.openspc2.org/reibun/javascript/]]
-[[とほほのJavaScriptリファレンス>http://www.tohoho-web.com/js/index.htm]]
-http://js-users.jp/
-[[Effective JavaScript>http://web.archive.org/web/20060207164031/http://www.interq.or.jp/student/exeal/dss/ejs/]]
-[[JavaScript深層>http://web.archive.org/web/20051219052017/www.hawk.34sp.com/stdpls/jsnotes/jssinso/]]
-[[やりなおしのJavaScript>http://www.thinkit.co.jp/article/72/]]
-[[素人がJavaScriptを勉強するブログ>http://d.hatena.ne.jp/javascripter/]]
-[[イヌでもわかるJavaScript講座>http://www.red.oit-net.jp/tatsuya/java/]]
-[[Javascript/Ajax cheat sheets>http://www.scottklarr.com/topic/95/javascriptajax-cheat-sheets/]]
-[[Eloquent JavaScript>http://eloquentjavascript.net/contents.html]]
-http://javascriptist.net/
-[[JavaScriptがズバリわかる>http://itpro.nikkeibp.co.jp/article/lecture/20061114/253629/]]
-[[JavaScript/CSSサンプルリンク集>http://www.hereticanthem.com/webdesign/295/]]
-[[Web2.0エンジニアのためのJavaScriptリファレンス集>http://labs.unoh.net/2006/12/javascript-sites-for-web20-developers.html]]
*ECMAScript [#ubab945a]
-http://www.ecmascript.org/
--本家。ECMAScriptのリファレンスなど
-SpiderMonkey
--http://www.mozilla.org/js/spidermonkey/
--http://www.mozilla-japan.org/js/spidermonkey/
--JavaScript EngineのC言語による実装。
--Firefoxに搭載
-Tamarin
--http://www.mozilla-japan.org/projects/tamarin/
--Adobeの開発したECMAScriptエンジン。つまりActionScriptのエンジン
--Flash Playerに搭載
-ActionMonkey
--SpiderMonkey と Tamarin を統合しようというプロジェクト。
--Mozilla 2 での実現を目指しており、Firefox 4 あたりに搭載予定。
-ScreamingMonkey
--ブラウザ固有のスクリプトエンジン機構を Tamarin に搭載して、Tamarin が他のブラウザでも動作できるようにするプロジェクト。
--現在、IE 上で動くプロトタイプができているらしい
-Rhino
--http://developer.mozilla.org/Ja/Rhino
--Javaで実装されたJavaScriptエンジン
-JScript
--http://msdn.microsoft.com/ja-jp/library/cc427807.aspx
--MicrosoftによるECMAScriptの実装
--JScriptはJavaScriptとは別の言語
--JScript.NETとして.NET Framework上でも動く
**関連記事 [#p6d99c65]
-http://firefoxhacks.at.webry.info/200711/article_2.html
*JavaScriptは「プロトタイプ・ベースのオブジェクト指向言語」である件 [#mc931de2]
-[[タイプ・クラス・プロトタイプ - OOの語彙>http://blog.livedoor.jp/dankogai/archives/51033584.html]] 2008.4.13
--オブジェクトを作るには、二通りの方法がある。
---1. 設計図どおりに作る
---2. すでにあるオブジェクトをパクる
--最初に普及したのが、1のやり方で、設計図はクラスと呼ばれている。クラスはあくまで設計図なのでオブジェクトではない。型がデータそのものでないのと同じように。
--ところが、JavaScriptのおかげで2のやり方が注目されるようになった。すでにオブジェクトがあるなら、それを「コピー」して、違うところだけ後付すればいい。このコピーの元をプロトタイプと言う。母となるオブジェクトから子となるオブジェクトを作るというわけだ。
--このやり方でオブジェクトを作る言語を、プロトタイプ型オブジェクト指向言語(prototypal object-oriented language)とかプロトタイプベース(prototype-base OO)と呼んでいる。それと区別する意味で、クラスを元にオブジェクトを作る言語はクラスベース(class-base OO)と呼ぶようになった。
-JavaScriptには言語仕様としてのクラスはないが、クラスに相当する機能としてコンストラクタが存在する。関数オブジェクトをnewすることでオブジェクトのコンストラクタとなる。
-コンストラクタは、クラスの変数とメソッドのコンテナとして機能する。（つまり、JavaScriptのコンストラクタはクラスベースオブジェクト指向言語におけるクラス定義に相当するもの、と考えてよいと思われる）
*JavaScriptにおけるオブジェクト [#iaaf5233]
**オブジェクトのプロパティ [#cddd0da7]
-オブジェクト初期化式の例
var Numeric = { type: 'class', 'defined': 'native', 1: 'one' };
alert(Numeric.type); → classと表示
alert(Numeric.defined); → nativeと表示
alert(Numeric['type']); → classと表示
alert(Numeric['defined']); → nativeと表示
alert(Numeric[1]); → oneと表示
-プロパティ値を参照、設定するには「.」に続けてプロパティ名を指定する方法と、[]内にプロパティ名を指定する方法の2種類があります。
-数値を指定した場合は「.」記法は利用できません。
-オブジェクト初期化式に名前を指定した場合であっても、[]内に指定する場合は文字列にする必要があります。
-プロパティ値として関数オブジェクトも指定できます。
-[]記法を使うことで、オブジェクトを事実上連想配列として使うことが可能
-for inループによってプロパティを列挙できる
var Numeric = { type : 'class',
'defined' : 'native',
1 : 'one' };
for( var i in Numeric){
alert('i=' + i + ',Numeric[i]=' + Numeric[i]);
}
-プロパティは属性を持っている
--DontEnum:for inで列挙されない
--DontDelete:deleteできない
--ReadOnly,Internal
-プロパティの属性はプログラムから制御することはできない
**関連記事 [#pd2018a3]
-[[JavaScriptにおけるオブジェクトの基本的性質>http://codezine.jp/a/article.aspx?aid=220]]
-[[JavaScriptにおけるプライベートメンバ>http://d.hatena.ne.jp/brazil/20051028/1130468761]]
--プライベートなメンバは持てないと思われているが、そうではないという話
-[[JavaScriptの変数とdelete演算子>http://nanto.asablo.jp/blog/2008/01/09/2552470]]
*関数オブジェクト [#g0d0c640]
-JavaScriptの関数はFunctionクラスのオブジェクトである
<head>
<script type="text/javascript">
function a() {
alert("hogehoge");
}
var init = a;
</script>
</head>
<body onload="init()">
</body>
-無名関数の定義
var obj=new Object();
obj.method = function(arg)
{
alert(arg);
}
obj.method("test");
-関数オブジェクトのFunctionコンストラクタによる定義
var myFnc = new Function('関数名', '関数の処理内容');
-Functionクラスにはcall()、apply()メソッドがあり、関数の呼出はcall()やapply()で代替できる
var arr=[];
arr.push("1","2"); //という処理をしたいとすると
//push()をapply()で書き換え
Array.prototype.push.apply(arr,['1','2']);
//push()をcall()で書き換え
Array.prototype.push.call(arr,"1","2");
--第一引数で渡すオブジェクトにnullやundefinedを渡すとthisはグローバルオブジェクト(ブラウザ環境であればwindowオブジェクト)になる
-高階関数
--関数の引数として関数オブジェクトを渡すこと
-関数の引数
--関数の引数の数はCやJava,C#のように厳密には扱われない
--渡した引数が足りないときは undefined として扱われる
--渡した引数が多すぎるときは arguments[n]で参照できる（添え字は０ベース）
--arugumentsは関数の中で暗黙に与えられているオブジェクト
**関連記事 [#p3323f34]
-[[JavaScriptの関数オブジェクトを完璧に理解する>http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/story/0,3800083428,20371265,00.htm]] 2008.4.12
-[[JavaScriptの関数とメソッド>http://codezine.jp/article/detail/221]]
*prototypeによる継承について [#af250c28]
-JavaScriptはクラス指向の継承ではなく、プロトタイプ指向の継承を備えている。
-暗黙の参照：prototypeプロパティに設定されたオブジェクトのプロパティは、元のオブジェクトのプロパティのように外部から参照できる。JavaScriptではこのことを利用してオブジェクトの継承関係を作成する。
-ただし、この「暗黙の参照」はプロパティの値を読むときだけで、値をセットしたりdeleteするときには行われない。
-prototypeはすべてのオブジェクトにあるので多段に暗黙の参照をすることができる。これをプロトタイプ・チェーンという
<!--プロトタイプチェーンのテスト -->
<script language="javascript" type="text/javascript">
var obj1 = new Object();
obj1.a = "obj1のプロパティa";
//Hogeクラスを作る＝function Hogeを定義
function Hoge(){}
Hoge.prototype = obj1; //Hogeのprototypeにobj1を使う
var obj2 = new Hoge();
//Hoge2クラスを作る
function Hoge2(){}
Hoge2.prototype = obj2;
var obj3 = new Hoge2();
alert('obj3.a='+ obj3.a);
</script>
**関連記事 [#sac29ee2]
-[[プロトタイプによるJavaScriptのオブジェクト指向>http://codezine.jp/a/article.aspx?aid=222]]
-[[JavaScriptのおもしろさ>http://arton.no-ip.info/collabo/backyard/?JavaScriptIsFun]] 2008.3.25
--クロージャ、オブジェクト初期化式、prototypeプロパティ
-[[Prototype的継承:http://blog.livedoor.jp/dankogai/archives/50662064.html]]
-[[Prototypal Inheritance in JavaScript>http://javascript.crockford.com/prototypal.html]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
