この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方Read less
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方Read less
「Backbone.jsガイドブック」の読書会2回目。 1章の後半から始めた。underscore.jsのタイマー系の関数が超絶便利そうだった。 debounce throttle delay defer この辺。 重いレンダリング処理とか保存処理のイベント多発をsetTimeoutとかclearTimeoutでがんばってブロックしてたところは_.debounceの方がきれいに書けそう。 REMPのライブラリ保存処理がちょうどこんな感じで、 _.debounceだとこんな感じになる。 ストーリーボードのMarkdownのレンダリングのとこもこれ使ったらいいな、と思ってたらドキュメントにもまんまなこと書いてあった。 For example: rendering a preview of a Markdown comment, recalculating a layout after the
例えばJAVAには、for-each文という便利な構文があります。 class Test { public static void main(String args[]) { int [] ary = new int[] { 1, 2, 3, 4, 5 }; for(int num : ary) { System.out.println(num + ","); } } } 実行結果 1,2,3,4,5, これは拡張for文とも言われ、配列のすべての要素にアクセスすることができます。 Javascriptにも似たような構文のfor-in文があります。 が、このfor-in文実に曲者で、JAVAのfor-each文と同じ感覚で使うと、必ずどこかで痛い目を見ます。 例文を見てみましょう。 <html> <head> <title>for inテスト</title> </head> <body>
JavaScript によるイベントドリブン アジェンダ JavaScript の言語について DOM について イベントについて jQuery について MVC アーキテクチャについて まずはじめに Just moment! Web で JS を使うとき、HTML の知識が前提となることが多い http://www.kanzaki.com/docs/htminfo.html 少なくとも「簡単なHTMLの説明」は押さえておきたい。 目的 講義時間は限られているので JS を学ぶ上でとっかかりをつかめること リファレンスを提示します。概念を理解 言語的部分、DOM 及びイベントドリブンなプログラミング 覚えようとするとクソ多いのでリファレンスひける部分は覚えない JS とはどんな言語であるか? 基本クライアントサイド=ブラウザで動く 実装がたくさんある はてなのエンジニアはみんな誰もがある程
[for English user] This article is a simple introduction about my project for Japanese developer. You do not have to read this, reading this project directly would be enough. RequireJSの応用方法について調べた内容をGitHubでまとめています。実装詳細はGitHubをご覧いただくとして、このエントリではそれぞれの応用について簡単な紹介をしたいと思います。 キャッシュ防止 JavaScriptファイルがブラウザにキャッシュされてしまうために、スーパーリロードなりキャッシュのクリアなりをしないと変更後のファイルが試せないことがあります。 キャッシュを防ぐ方法としてクエリパラメータの利用が知られていますが、Requ
JavascriptJavascriptをデバッグするときに、FireBugsやCromeなどでデバッグできればいいんだけどそれが出来ない場合、デバッグがとてもメンドい。alertを埋め込んで行う俗にいうprintデバッグ的なやつで確認しないといけない。ほかにも方法はあるんだけど今はとりあえず置いといてｗその場合、巷ではDEBUGフラグとか、confirmとかでalertを制御してデバッグしてるらしいけどほんの出来心で隠しコマンドでJavascriptをデバッグモードに出来たらいいなと思って作ってみた。
2012年11月16日13:55 JavaScript Ruby グラフ描くならMorris.jsがお手軽で良いかも こんにちわ。寒くなってきましたがみなさまお元気ですか？ さて、先日ちょっとしたグラフを描画したかったんですよ。それでなにか使いやすいライブラリ無いかなーと思っていたら railscast (revisedなので有料です) で Morris.js ってjQueryプラグインが紹介されてて良さげだったので使ってみました。google analytics みたいなツールチップも出してくれます。 使い方はとっても簡単です。 まず、jQuery (>=1.7) と Raphael (>=2.0) が必要です。あとは Morris.js があれば動作します。 これらを app/assets/javascripts/application.js に設定してください。この記事執筆時点での
Document Object ModelDocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColorallanchorsappletsbgColorbodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomainembedsfeaturePolicyfgColorfirstElementChildfontsformsfragmentDirectivefullscreenfullscreenElementfullscreenEnabledheadhiddenimagesimp
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
javascriptでのCIを目指して、phantomjsの環境を作成する１
■概要 qunit-tapとproveを使ってJSの単体テストのCIをする方法に感化されて、まずは環境づくりに挑戦してみます。 ■インストール手順 centos 5.5に環境を作るまでの手順です。 ○phantomjsをインストール http://code.google.com/p/phantomjs/wiki/BuildInstructionsのコメントとかも参考にしながら進めました。 # vim /etc/yum.repos.d/atrpms.repo [atrpms] name= CentOS-$releasever - ATrpms baseurl=http://dl.atrpms.net/el$releasever-$basearch/atrpms/testing/ gpgcheck=1 gpgkey=http://ATrpms.net/RPM-GPG-KEY.atrpms en
まぁスマートフォンとPC用だと画像の切り替えに迷う。 基本的に画像をスマートフォンに対応させるには下記のようなCSSが多い気がする。 とりあえず現状では、下記の用にcssを指定するのはデフォルトのよう。 img{ width:100%; max-width:100%; height:auto; } 幅はIE用に「width:100%」にしておいて、後は「max-width:100%」にしておく。高さは自動的に変わるように「height:auto」にしておく。これで、PCやスマートフォンでのデバイスの幅、もしくは画像を包んでいる要素に合わせて画像は100%で表示される。 一つの画像による要領の問題 上記の方法だとスマートフォンでも画像がデバイスに合わせて縮小されるがもともとのファイルサイズが変わらないので、使いまわすのが難しいところ。 そこでjqueryとnoscript要素を利用した切り替
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
グーグルは、JavaScriptでMVCアーキテクチャのアプリケーション開発をする際に便利な機能を備えたライブラリ「AngularJS 1.0」のリリースをブログで発表しました。 MVCアーキテクチャとは、ソフトウェアがデータモデル（Model）の部分とユーザーインターフェイスの部分（View）、そしてビューとモデルのあいだで制御する部分（Controller）に分離された構造のことを指します。 これらが分離されているとプログラムの見通しがよくなり変更にも対応しやすく、テストも容易になるため、何種類ものユーザーインターフェイスと複雑なロジックなどから構成される大規模なアプリケーションではMVCアーキテクチャの採用が望ましいものと考えられています。 しかしWebアプリケーションをMVCアーキテクチャで実現しようとすると、ビューの役割を果たすHTMLのコードの中に、どうしても複雑なJavaSc
なぜ「速い」のか、について JSX 開発者の立場から。 たとえば、シューティングゲームで一番重たい処理は何か。言うまでもなく衝突判定。多数の弾や敵機の衝突判定を毎フレームごとに行う必要があり、この演算が重たい。 JSX に同梱されている web/example/shooting.jsx には衝突判定のコードが複数あるが、一番重たいのは Bullet#update 関数で、その処理は以下のようになっている*1。 for (var rockKey in st.rocks) { var rock = st.rocks[rockKey]; if (this.detectCollision(rock)) { if (rock.hp == 0) return false; inDisplay = false; if (--rock.hp == 0) { st.score = Math.min(st.s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
