タグ

Javascriptに関するarerreeeのブックマーク (92)

  • 第4回 JavaScriptでオブジェクト指向プログラミング ― @IT

    JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ

    第4回 JavaScriptでオブジェクト指向プログラミング ― @IT
  • この順番で読めばOK!JavaScriptを理解するための14冊 | DECONCEPTER

    JavaScriptの書籍はjQueryやサンプル中心のチップスなどを含めると、多数出ており、これから勉強したい人にとってはどれから読めばいいか迷うところだと思います。 今日はここ数年で出た書籍の中で初級者から脱中級者になるまでに読みたい書籍を、この順番で読めばステップアップできるという内容で紹介したいと思います。 STEP1. 初心者へのおすすめはダントツでこれ一択。 初心者向けの内容としてはこれがダントツでおすすめです。内容が易しく丁寧な上にサポートサイトで書籍の内容を動画で説明してくれています。 Amazon.co.jp: よくわかるJavaScriptの教科書: たにぐち まこと: サポートサイトはこちら STEP2. 全体を把握するには十分なボリューム。脱初級者向けにはこの2冊。 2冊とも初級者にとっては少し厳しい内容になっていますが、この2冊が理解できれば後は作りまくる

  • [Javascript] nullとundefinedとfalseと0と空文字と

    大抵の、特に変数の型宣言を行わないタイプの言語では、型の異なる値の条件式は悩みの種です。 Javascriptもご他聞に洩れずというか、undefinedとnullが異なる分だけ更にややこしくなっているようです。 暗黙の型変換で痛い目にあわないよう、ちょっと実験してまとめてみます。 実験にはとりあえず、手っ取り早いので Jash を使用。 一緒に試してみるならば、こちらのBookmarkletをクリックしてコンソールに入力しながら読むとわかりやすいかもしれません。 nullとundefined。たまに「同じもの?」と聞かれることもあるので、とりあえず確かめて見ます。 >> null==undefined true あれ、同じでしょうか? >> null===undefined false もちろん違います。 しかし、== 演算子で比較する限りは「同じ」と言ってもよいようです。 では、実際は

  • JavaScript初心者入門講座

    JavaScriptのサンプルを使って簡単な基礎から、データベースの操作まで学べる初心者向けの入門講座です。関数の作り方やJavaScriptを外部ファイルとして読み込む方法、フォームのデータを正規表現でチェックする方法、イベントの設定方法、配列の使い方などが学べます。 ・より格的なプログラミングを学びたい場合は Java初心者入門講座 を次のステップとしてご活用ください。 ・Web系のプログラミングを学びたい場合は PHP初心者入門講座 をおすすめします。 ・PHPJAVAではデータベースにMySQLを使用しているため、 MySQL初心者入門講座 を先に学ぶと習得が楽になります。もちろん必要になった段階でMySQLを学んでもOKです。 JavaScript格的なゲームを作ることができます。 しかも使い慣れたプログラミング言語のJavaScriptで、いろんなプラットフォームに対応

    JavaScript初心者入門講座
  • 第2回 JavaScriptの関数をマスターしよう

    第2回 JavaScriptの関数をマスターしよう:連載:Ajax時代のJavaScriptプログラミング再入門(3/4 ページ) 関数の引数として関数を引き渡す - 高階関数 - 以上、JavaScriptの関数がオブジェクトであり、変数にも自由に代入できることが理解できた。では、関数の引数として関数を引き渡すこともできるのではないか ―― そのとおり。 JavaScriptでは、文字列や数値を引数としてセットするのとまったく同じ要領で、ある関数をそのほかの関数の引数としてセットすることが可能だ。そして、このような関数のことを「高階(こうかい)関数」と呼ぶ。 ■高階関数の基的な例 高階関数を利用した具体的な例をリスト12に示す。 以下のコードで定義するarrayReduce関数は、引数に与えられた配列(ary)の内容を、指定されたユーザー定義関数funcの規則に従って順番に処理し、最終

    第2回 JavaScriptの関数をマスターしよう
  • JavaScriptで正規表現練習ゲーム作った - aike’s blog

    特に何か目的があるわけじゃないんですが、JavaScriptの練習のためにゲームを作ってみました。 Regex Of The Dead タイピングゲームのように正規表現を練習するためのシンプルなゲームです。ゾンビと一般人が迫ってくるのでゾンビの名前にだけマッチするように正規表現を入力して倒していきます。 HTML5の流れでオーディオ、グラフィック、フォントHTML/JavaScriptで簡単に扱えるようになり、さらにenchant.jsのようなゲームエンジンも充実してきて、ゲームJavaScriptだけで気軽に作れるようになってきたようです。 そんなわけで試しに書いてみたのがRegex Of The Deadです。プログラミングは長いことやっているもののゲームを作ったのは大学のとき以来かもしれません。 最初、何か良さそうなゲームエンジンがないものかいくつか調査しましたが、こういったタイ

    JavaScriptで正規表現練習ゲーム作った - aike’s blog
  • クロージャと高階関数

    Javascriptには関数式と呼ばれるものがあります。関数式は数値や文字列のようにプログラムにリテラルとして書かれた関数です。

  • webRequest APIをざっくり理解する。(あるいはChrome拡張の作り方) – mzsm.me

    昨日2月9日、Google Chrome 17の安定版がリリースされました。 このバージョンでの変更点の一つに、webRequest APIが正式に実装されたことがあります。 これまでこのAPIはexperimental(実験的機能)として実装されていましたが、今回晴れて正式なものになりました。 このAPIを使うと、Chromeが行う通信を監視して通信があるたびにイベントを実行したり、HTTPヘッダを書き換えたりすることができます。 Chrome 17では、User-Agentを他のブラウザに偽装することができる機能がDeveloper Toolsに付いたのですが、その機能もこのAPIを利用して実装されてい(ると思われ)ます。(Developer Tools自体もJavaScriptによって実装された“Webアプリ”なので、多分そのはずです) HTTPヘッダをいじれるというと不安に思われる

  • JavaScriptテストの基礎知識と使えるフレームワーク6選

    JavaScriptテストの基礎知識と使えるフレームワーク6選:フレームワークで実践! JavaScriptテスト入門(1)(1/3 ページ) しっかりとJavaScriptの“テスト”を行うために、最近のJavaScript事情やテストを取り巻く環境、今注目のテストフレームワークを6つ紹介する JavaScriptでもテストを書こう @ITの読者の方たちのほとんどは、どのような言語を主に利用しているのかなどの違いはあるにせよ、日常的にプログラムを書いている方たちが多いかと思います。 アプリケーションを作る、ライブラリを作成する、オープンソースプロジェクトに貢献するなど、皆さんがプログラムを書く場面はそれぞれいくつかあるはずです。それらプログラムを書く場面に共通して大切な習慣の1つとして、「作成するプログラムに対しては必ずテストコードを書く」ことがあるのは、誰にでも同意してもらえることでし

    JavaScriptテストの基礎知識と使えるフレームワーク6選
  • データ構造 - 汎用日記(仮)

    いくつかあるので調べときなーと言われたので。簡単にしらべてみたぬん Hash ハッシュ 連想配列のイメージ。キーとバリューをセットで格納し、キーをもとにバリューを取り出す。 Set セット データの重複がないことが約束されたデータの集合。要素の順序について決まりがない場合に使う。 List リスト リスト内の各要素をポインタによって連結したもの。要素にアクセスする差異、最初からその要素まで順に見ていくため、途中の要素を取り出したい時には不向き。要素は必要なときに作られるため、余分なメモリの確保がない。 参考サイト:ƒAƒ‹ƒSƒŠƒYƒ€‚ƃf�[ƒ^�\‘¢•Ò�@‘æ‚P‚O�Í�@�üŒ`ƒŠƒXƒg Queue キュー 待ち行列 FIFOを採用したデータ構造。データを入れた順に取り出す。 FIFO「最初に入ったものが最初に出てくる」データの入出力方式を First In Firs

    データ構造 - 汎用日記(仮)
  • https://madebyknight.com/javascript-scope/

  • JavaScript練習課題01〜05 - はれ あめ はれ

    JavaScript練習課題(1) 載せていなかった授業内で進めたスクリプト 【J01】 クリックでアラートを表示するJavaScriptを記述しなさい。 (写真は自由。)「function」は使用しない通常のアラート。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js01</title> <style type="text/css"> p img { cursor: pointer; } </style> </head> <body> <p><img src="images/hana.jpg" width="500" height="333" onClick="alert('花の写真です')"></p> </body> </html> 【J02】 マウスオーバーでアラートを表示するJavaScriptを記述しなさ

    JavaScript練習課題01〜05 - はれ あめ はれ
  • JavaScriptの再利用とapply

    私がこういうの大嫌いなのは一部では有名な話ですが、職場では寛容に、ネット上では偏屈に、がポリシーなので素直に流しました。

    JavaScriptの再利用とapply
  • JavaScript, apply/call メソッドと prototype 継承 : Serendip – Webデザイン・プログラミング

    こちらのサイト『JavaScriptで継承やるときにprototype書きまくるのめんどい人は – あ、いしかわですね』で Function.apply を使って継承を記述する方法が紹介されていた。 apply と call の使い方を今一度復習しておく。 Function.apply function.apply(obj, args) function を obj のメソッドとして呼び出す。 引数として配列 args を渡すことができる。 function のボディ内では obj に this でアクセスできる。 /* オブジェクトにメソッドを適用させる */ console.log(Array.prototype.reverse.apply([1, 2, 3])); /* [ 3, 2, 1 ] */ console.log(String.prototype.split.apply('

  • CSSやJavaScriptファイルを連結、圧縮·Minify MOONGIFT

    jQueryやPrototypejs、YUIなど様々なJavaScrptライブラリが登場している。また、CSSもフレームワークが出てきており、便利な反面、表示されるまでのコネクション数やダウンロードサイズが肥大化している。 CSSJavaScriptを連結&圧縮 それを解決する手段として、サイズの縮小や複数のファイルをまとめてしまうという方法がある。それを自動化してくれるのがMinifyだ。 今回紹介するオープンソース・ソフトウェアはMinify、JavaScript/CSSの連結、圧縮ソフトウェアだ。 MinifyはPHPで作られており、Webベースで動作する。Minifyにファイルのパスを渡すことで余計な改行や空白を圧縮してサイズを小さくしてくれる。そして複数のファイルを渡すことで連結してくれる機能もある。 生成されたファイル 作成するのは同一ドメイン内のファイルに限られる。また、グ

    CSSやJavaScriptファイルを連結、圧縮·Minify MOONGIFT
  • JavaScript 言語概要 - JavaScript | MDN

    JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ

    JavaScript 言語概要 - JavaScript | MDN
  • マンガで分かる JavaScriptプログラミング講座

    はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 (マンガは、左上から右下へと読みます) プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ

    マンガで分かる JavaScriptプログラミング講座
  • プロトタイプ(prototype)によるJavaScriptのオブジェクト指向

    はじめに JavaScriptはオブジェクト指向言語です。しかし、そのオブジェクトの性質は、他に良く知られているオブジェクト指向言語のJavaC++と大きく異なっています。 そこでこの記事では、なぜそのような違いがあるのか、JavaScriptにおけるオブジェクト指向の言語思想を見ていくと共に、その違いの根幹であるプロトタイプについて解説していきたいと思います。 なお、この記事はJavaScriptの解説ですが、その内容は、標準仕様のECMAScriptで扱われる範囲に基づいています。従って、同じくECMAScriptを元にしている言語(JScript、ActionScript)でも通じる内容になっています。 対象読者 プログラミングの基的な知識、ならびにオブジェクトやメソッドと言った基礎的な概念については、ここでは解説しません。最低限、オブジェクト指向プログラミングについて理解をして

    プロトタイプ(prototype)によるJavaScriptのオブジェクト指向
  • flash.external.ExternalInterface (Flex 3)

    ExternalInterface クラスは外部 API であり、ActionScript と Flash Player のコンテナとの間で直接通信できるようにするアプリケーションプログラミングインターフェイスです。コンテナの例としては、JavaScript が含まれる HTML ページがあります。JavaScript と ActionScript 間のすべての通信に、ExternalInterface を使用することを推奨します。 HTML ページで JavaScript を使用することにより、Flash Player から ActionScript 関数を呼び出すことができます。ActionScript 関数は値を返すことができ、JavaScript は、呼び出しの戻り値として即座にこの値を受け取ります。 この機能は、fscommand() メソッドに代わるものです。 External

  • JavaScriptのthisキーワードをちゃんと理解する - builder by ZDNet Japan

    前回までのおさらいと今回のあらすじ 前回までの記事で、JavaScriptでオブジェクト指向を行うにあたって必要な知識を一通り網羅しました。その中で、オブジェクトに属する関数=メソッドについても触れました。 今回は、オブジェクトやメソッドと深い関わりのあるキーワード、「this」について解説したいと思います。 thisキーワードについてきっちり理解する 「thisキーワードについてお話しする」と言いましたが、実はthisキーワードは連載中で既に触れています。連載第9回で、このように述べています。 「(thisキーワードは)実行中のコードが「自分自身」を表すオブジェクトにアクセスするためのキーワードです。」 「実行中のコード」とされているのは、関数(メソッド)などの実行可能なコードということです。つまり、thisキーワードはメソッドをメンバに含むオブジェクトを指す、と言って良いでしょう。 例

    JavaScriptのthisキーワードをちゃんと理解する - builder by ZDNet Japan