タグ

javascriptとJavaScriptに関するgo5025のブックマーク (99)

  • CreateJS入門サイト - ICS MEDIA

    このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">

    CreateJS入門サイト - ICS MEDIA
  • 【シミュレータ】Javascriptで量子アニーリング | Blueqat | Quantum Computing

    【シミュレータ】Javascriptで量子アニーリング Tweet はじめに 量子コンピュータの活用に関しては必ずしも実機が手に入りません。そのため、シミュレータを活用することが多々あります。今回はJavascriptで量子アニーリングのシミュレータを確認することで、様々なインターフェイスを導入することができます。 早速コードの確認 早速コードを確認してみたいと思います。 下記は150量子ビットで並列数に対応するトロッタ数が50の量子アニーリングです。Jijという量子ビット間の相互作用は固定です。 1、量子ビットをランダムに初期化します。今回は150量子ビットに対して50トロッタあるので、全部で150*50量子ビットの初期化を-1か+1で行います。 2、早速量子モンテカルロ計算です。スケジュールはあらかじめG=10から0.999倍の減衰を2000回繰り返しながら横磁場を減らしていく計算を行

    【シミュレータ】Javascriptで量子アニーリング | Blueqat | Quantum Computing
  • フリーで商用利用可能なグラフ描画ライブラリ

    こんにちは、しぐれがきです。 自作のWebアプリ作成にあたり、グラフ描画ライブラリを導入しようと考えています。 一応、自作といっても公開も視野に入れたいので、事前に商用利用可能かを調査しました。 せっかく調査したので、記事で備忘録としてまとめたいと思います。 目次 グラフ描画ライブラリへの要件 ■商用利用 ・商用利用可能なこと ■デザイン ・デザインが見やすいこと ■グラフの種類 ・複数のグラフに対応していること -棒グラフ -折れ線グラフ -円グラフ -ドットグラフ(分散グラフ) -曲線グラフ 調査結果 グラフ描画ライブラリ一覧 特定キーワードでググってグラフライブラリをリストアップしました。 調査方法は調査方法を参照

    フリーで商用利用可能なグラフ描画ライブラリ
  • 簡単にJavaScriptでSPAのブログを構築して公開できるライブラリ「CMS.js」を使ってみた! - paiza開発日誌

    どうも、まさとらん(@0310lan)です! 今回は誰でも簡単にJavaScriptでブログなどを構築可能なCMSツールを実現するライブラリをご紹介します! Jekyllなどの静的サイトジェネレータと考え方は似ていますが、こちらはサーバサイドスクリプティングが一切不要ですべての作業をフロントサイドで完結できるのが特徴です。 GitHub Pagesと組み合わせることですぐにでもブログを構築して公開することができるので、ご興味ある方はぜひ参考にしてください! なお、JavaScriptはpaizaラーニングの「JavaScript入門編」(完全無料)で学ぶことができます。そちらも合わせてチェックしてみてください。 【 CMS.js 】 ■「CMS.js」の使い方 それでは早速ですが、実際に「CMS.js」を使ったブログを作って公開してみましょう! 来は「CMS.js」のライブラリをダウンロ

    簡単にJavaScriptでSPAのブログを構築して公開できるライブラリ「CMS.js」を使ってみた! - paiza開発日誌
  • jsでTDD!MochaとChaiとsinon.js入門 - lxyuma BLOG

    ※この記事は社内勉強会向けの資料の下書きです。書きなぐりの下書きで見直すと最後の方の文書がヤバいので、いつか書き直します。読み辛い所は申し訳ないです。 概要 TDD テスト自動化とTDDを整理 TDDとBDDの違い Test Framework in javascript QUnit/jasmine/mochaについて、違いやメリデメを知る mocha 基的な書き方 アサーションライブラリのメリデメを整理する chai 記述形式の違い整理 基文法 sinonjs spy stubs mock TDD Test Driven Development テスト駆動開発 by ケントベック 特徴 xUnit系/BDD系のテストフレームワーク使う テストするコードも実装 テストファースト 実装の後にテストするのではなく、テストを先に書いて実装する サイクル Red(失敗) => Green(通過

    jsでTDD!MochaとChaiとsinon.js入門 - lxyuma BLOG
  • PhoneGapアプリ Androidのバックボタンを制御 - Qiita

    概要 PhoneGap(Cordova)でのアプリ開発の際、Androidのバックボタンを押されると困る(意図しない動きをする)ことがあります。 その場合に、標準のブラウザバック以外の処理を実行する方法です。 JavaScriptコード document.addEventListener("backbutton", function(e){ e.preventDefault(); //処理したいコードをこの下にかく }, false);

    PhoneGapアプリ Androidのバックボタンを制御 - Qiita
  • [JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita

    [JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定についてJavaScripttips ※家はこちらのブログエントリーになります. 毎日 html, css, js についてのエントリーを公開しているのでよかったらRSS登録してください♪ null とか undefined とか 0 とか 空文字('') とか false とかの 判定について書いてみました. 各型, 値の評価 各型, 値が条件式でどう評価されるのかを見てみましょう. value type result

    [JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について - Qiita
    go5025
    go5025 2017/03/26
    if (!hoge) { ... } この条件が true になるのは上の表から分かるように null, undefined, 0, 空文字(''), false になります.
  • 【Javascript】要素の子要素削除の処理(セレクトボックス初期化など) at softelメモ

    例えば、ul,li要素のリストや、selectの中のoption要素を、追加したり削除したりする処理を考えます。 <select name=”staff”> <option value=””> – </option> <option value=”1″>いち</option> <option value=”2″>に</option> <option value=”3″>さん</option> <option value=”4″>よん</option> <option value=”5″>ご</option> </select> 今、上のセレクトボックスから、選択状態のoption以外を、全部取り除こうとしています。 さて、間違い探し! var select = document.form[0].staff var options = select.options for (var i =

    【Javascript】要素の子要素削除の処理(セレクトボックス初期化など) at softelメモ
    go5025
    go5025 2017/03/20
    ある要素の子を全部削除するならこれが簡単。 子ノードがある限り、すべてremoveChild()。先頭に来た要素(firstChild)を取る。 function removeChildren(x) { if (x.hasChildNodes()) { while (x.childNodes.length > 0) { x.removeChild(x.firstChild) } } }
  • select 内の option 要素(セレクトボックス)を JavaScript で追加していく | Flashlight Mutous

    Flashlight Mutous select 内の option 要素(セレクトボックス)を JavaScript で追加していく Web のことや生活をつらつらと。 Home Technology Diary About Isthmis.me すごく単純なことなのですが、検索しても2002年の化石のような記事や質問サイトでの短いやり取りばかりだったり、 運良く見つけてもレガシーだったり効率の悪い書き方でコードの行数が膨大にあったり……で軽く絶望したので、普通のやり方を書き残しておきます。 基的すぎることって、ネットにはなかなか書かれていないんですね。 例)「やればできる NETSCAPE道場」みたいな感じの時代を感じるサイトばかりでビックリしました;   ★簡単な説明つきコード // <select id="select"> を取得 var select = document

    select 内の option 要素(セレクトボックス)を JavaScript で追加していく | Flashlight Mutous
    go5025
    go5025 2017/03/20
    連想配列にした項目を for in で展開しながら、 <option value="配列のインデックス">配列の中身</option> として書き出していっています。
  • jQuery:配列の重複値を弾く | クロジカ

    var array = ['東京都','千葉県','埼玉県','千葉県','千葉県','東京都']; このような重複するデータを持つ配列の重複を弾きたい場合は下記のようにfilterを利用する。 array = array.filter(function (x, i, self) { return self.indexOf(x) === i; }); 下記のように重複値が弾かれて整理される。 console.log(array); // ['東京都','千葉県','埼玉県']

    jQuery:配列の重複値を弾く | クロジカ
    go5025
    go5025 2017/03/19
    重複するデータを持つ配列の重複を弾きたい場合は下記のようにfilterを利用する。 view plain array = array.filter(function (x, i, self) { return self.indexOf(x) === i; });
  • 【追記:2018 01/25】配列の連結(concat vs Array.prototype.push.apply) - Qiita

    こちらに追記しようとしたのですが見にくかったので別記事にしました ES6での配列の連結方法になります https://qiita.com/kaz2ngt/items/c03625587bf398b6f81a 以下過去記事 投稿テストも兼ねたメモ 一般的に配列の連結はconcatを用いるが、配列に配列を継ぎ足していくような処理だとconcatでは毎回配列を生成しているのがきになり、他の手段を調べてみるとArray.prototype.push.applyというものがあったためメモ 実行ファイル var a = [0, 1, 2, 3], b = [4, 5, 6, 7], i, count = 10000; console.time(); for (i = 0; i < count; i++) { a = a.concat(b); } console.timeEnd();

    【追記:2018 01/25】配列の連結(concat vs Array.prototype.push.apply) - Qiita
    go5025
    go5025 2017/03/19
    一般的に配列の連結はconcatを用いるが、配列に配列を継ぎ足していくような処理だとconcatでは毎回配列を生成しているのがきになり、他の手段を調べてみるとArray.prototype.push.applyというものがあったためメモ
  • JavaScriptで即時関数を使う理由 - Qiita

    (function (param1, param2) { //処理 }('hoge', 'fuga')); var result = (function (param1, param2) { return param1 + param2; }(1, 2)); console.log(result); //3が出力される。 ズバリ、スコープの汚染を防ぐため。 JavaScriptのスコープ JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ」のみ。すなわち関数は任意にスコープを作るための唯一の手段である。 関数スコープの中でvarを使って定義された変数は関数の中でローカルな変数になるので、関数の外側の変数を上書きしたりすることはない。 なるべく変数の有効範囲をせばめる 一時変数を使用する一連の処理があった時に、それらの変数をすべてグローバル変数にしてしまうのはアンチパタ

    JavaScriptで即時関数を使う理由 - Qiita
    go5025
    go5025 2017/02/11
    JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ」。関数は任意にスコープを作る唯一の手段。関数スコープの中でvarで定義した変数は関数中でローカルな変数になり、関数の外側の変数を上書きしない。
  • JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita

    はじめに ここではJavaScriptの配列である、Arrayの基的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。 JavaScriptの最新情報などの技術系のみをつぶやくTwitterをはじめました。 Twitter: @takeharumikami RSSはこちら RSS: http://qiita.com/takeharu/feed Feedly: フォロー

    JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita
    go5025
    go5025 2017/01/15
    ここではJavaScriptの配列である、Arrayの基本的な使い方をまとめました。主な内容としては、要素の追加、結合、取得、削除となります。
  • JSONP Javascriptがちょっと分かってきたかも - シンプルシンプルデザイン JavaScript

    いまどき「マッシュアップ」という言葉を使うこと自体ちょっぴり恥ずかしいのですが、外部APIを連携する際のお覚書き。 これまで外部APIの連携は、「php」と「Ajax」でやっていたのですが、「jsonp」の手軽さに驚愕しました。 jsonpはセキュリティ的に使用上要注意とよく聞きます。 そのため、jsonpを使用することを避けてきたわけですが・・・。 これがどうして。 なんで今まで使わなかったんだろうと後悔です。 前置きはこのくらいにして、早速サンプルファイルを紹介(そのままコピペで試せます)。 JSONPを実装しようとすると、コールバック関数、オブジェクトとかいう言葉をよく聞きますが、一旦考えずに形だけ把握します。 <?xml version=”1.0″ encoding=”UTF-8″ ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Tr

  • 1つの盤上をダイナミックに動き回る迫力あるスライドツール·impress.js MOONGIFT

    impress.jsはprezi.comにインスパイアされた迫力あるダイナミックなプレゼンテーションを実現するソフトウェアです。 インパクトのあるプレゼンテーションを実現したいならばスライドにもこだわってみましょう。使ってみたいのはimpress.jsです。 何の変哲もないWebベースのスライドです。スペースキーや矢印キーでスライドを切り替えます。 突然大きな文字ベースのスライドに。 回転したり文字サイズが変わったりとかなり激しい動きです。 こちらが全体像。ぜひ下の動画を見てください。 デモ動画です。 impress.jsの使い方は簡単で、div.stepを定義してその中にHTMLでスライドの内容を記述していくだけです。data-rotateを使えば回転したり、data-scaleでスライドの大きさを変更できます。配置も自由に決められて、あっという間にインパクトの強いスライドが作れるでしょ

    1つの盤上をダイナミックに動き回る迫力あるスライドツール·impress.js MOONGIFT
  • EditArea - the code editor in a textarea

    ", $line["name"], $line["fname"], $news[$line["people_id"]], $line["status"], $line["team_name"], ($line["team_leader"]=="1")?"yes":"no", $line["type"], $line["wp_name"]); } printf(""); ?> Custom controls: Example 2 Multi file mode example with syntax selection option. The highlight colors of the selected line is also shown. Custom controls: Example 3 Test in French with css syntax, verdana font,

    go5025
    go5025 2011/12/12
    Safari では動いた。
  • HTML+JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは

    HTMLJavaScriptiPhone/Androidアプリを作れるTitanium Mobileとは:Web技術でネイティブアプリを作れるTitanium(1)(1/3 ページ) iPad/iPhone VS Androidに戸惑っているWebデザイナ/開発者のために、Web技術でネイティブアプリを作れるオープンソースの開発ツールを紹介し、その利点や使い方を連載で解説します iPad/iPhone VS Androidに戸惑っていませんか? 2010年1月5日、グーグルAndroid 2.1を搭載した「Nexus One」を発表しました(参考:GoogleAndroid 2.1搭載の“スーパーフォン”「Nexus One」を発表)。高精細なディスプレイや高速なプロセッサによる快適な動作など、iPhoneのライバルとしての存在感が話題になりました。また1月21日には、NTTドコモ

    HTML+JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは
  • 一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集

    Silverback Giveaway 一見、背景画像をCSSJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar

  • [JS]高速で軽量なJavaScriptのフレームワーク -RightJS

    RightJS RightJSと他ライブラリとの比較 IE, Fx, Op, Safari, Chromeの各ブラウザでのパフォーマンスは、jQuery、Prototype、Mootoolsなどの主要なJavaScriptのライブラリと比較して、概ね高速なパフォーマンス結果となっています。 デモではモーフィング、ハイライト、フェード、スライドなどのビジュアルエフェクトを楽しめます。 demo RightJSのライセンスは、MIT licenseとのことです。

  • [JS]アニメーションのエフェクトを加えるJavaScriptのフレームワーク集

    ちょっとした動きから、ダイナミックな動きまでアニメーションのエフェクトを加えるJavaScriptのフレームワークをSix Revisionsから紹介します。 10 Impressive JavaScript Animation Frameworks