タグ

*とJavaScriptに関するmaangieのブックマーク (170)

  • JavaScript基礎文法最速マスター - gifnksmの雑多なメモ

    続々と増え続ける基礎文法最速マスターシリーズ(あまりにも増えてきたので他の言語記事へのリンクは別の記事に移しました)。 JavaScript 版は誰も書いていなかったようなので書いてみます。こういう解説記事的なものを書くのは初めてなので変なところがあったら指摘して頂けるとありがたいです。 JavaScriptの基礎概念についての解説はこちら:JavaScript概念最速マスター - TechTalkManiacs 1/31 23:58追記 コメント欄のos0xさんのご指摘を基に一部追記・修正を行いました。 2/2 2:52追記 switch文・正規表現・例外処理について追加しました。 2/2 6:44追記 コメントでfavrilさんにご指摘頂いた点(typo & コメント・サンプル追加)を修正・加筆しました。 2/2 7:15追記 トラックバックでLiosKさんにご指摘頂いた点(cal

    JavaScript基礎文法最速マスター - gifnksmの雑多なメモ
  • Jasmine/QUnitのテスト中にスクリーンキャプチャするプラグイン - Tech-Sketch

    JavaScriptに対する自動テストツールも充実し、Jenkinsなどを用いてCIをまわす人も増えてきました。 しかし、レスポンシブレイアウトや、Floatのレイアウト崩れなど、人間が見ればすぐに分かる「見た目」に関する問題は、自動テストによる判定がし辛いのが実情です。 この記事では、この問題を解決するために作成した、テスト中にスクリーンキャプチャを取るためのプラグイン「phantom-capture」を紹介します。 現状の問題点 Jasmine や QUnit といったテストフレームワークや、 PhantomJS , sinon.js といったツールの助けを借りることで、JavaScriptの自動テストが行えるようになり、サーバ側だけではなく、クライアント側にも自動テストを適用する人が増えてきています。 ビジネスロジックやバリデーション、DOMの構築結果などは問題なくテストすること

    Jasmine/QUnitのテスト中にスクリーンキャプチャするプラグイン - Tech-Sketch
  • 結婚式二次会用に Node.js x ブラウザでタイピング対決アプリを作ってみた - 凹みTips

    はじめに 先月、友人結婚式の二次会でタイピング対決をしたいとの企画を、幹事の友人から受けました。面白かった要件としては、 二人の顔を 2 台のカメラで映したい タイピングしてる様子をリアルタイムで見たい というものです。これをサーバは Node.js で、クライアントはブラウザで作成しました。エントリ書いてもいいよ、と許可を頂いたので、今後似たような依頼を受けた方のご参考になるように、エッセンス部分をご紹介します。 (追記:2013/11/20) 幹事さんも記事を公開されました: http://tjun.org/blog/2013/11/wedding-typing/ やったこと ホスト PC 側で新郎新婦それぞれの PC からのログインを待ち受けします。イイ感じに○で切り抜いてくれるような PNG をイラレで作っておきました。 それぞれの PC からログインしてもらいます。 ログインし

    結婚式二次会用に Node.js x ブラウザでタイピング対決アプリを作ってみた - 凹みTips
  • Resumable.js - HTML5で実現したリジューム付きファイルアップローダー MOONGIFT

    アップロード途中で止まると相当なストレスですよね。そこで使ってみたいライブラリです。 HTML5を使うとファイルをドラッグ&ドロップでアップロードできるようになってとても便利になっています。しかしごく小さなファイルのアップロードであればまだしも、巨大なファイルをアップロードするとなるとまだ大きな問題が残っています。それがネットワークエラーです。 Webではファイルを一括でアップロードしますので、途中でエラーが起きるとまた最初からやり直しになってしまいます。これはクライアント/サーバ双方に負荷がかかる仕組みです。これを改善できるのがResumable.js、リジューム対応のファイルアップローダーです。 サンプルのnodeアプリケーションで実験します。 900MBくらいのファイルをアップロードします。 右側にある一時停止ボタンを押すとアップロードが停止します。 いつでも再開が可能です。 この仕

    Resumable.js - HTML5で実現したリジューム付きファイルアップローダー MOONGIFT
  • Perl 初心者がとある JavaScript コードを読むための基礎知識 - あらびき日記

    この記事は abicky.netPerl 初心者がとある JavaScript コードを読むための基礎知識 に移行しました

    Perl 初心者がとある JavaScript コードを読むための基礎知識 - あらびき日記
  • なぜAltJSだったのか、そしてこれからもAltJSなのか [東京Node学園2013] - Line 1: Error: Invalid Blog('by Esehara' )

    東京Node学園でライトニングトークをしてきました。下がその資料です。 マイナーAlt JS百花繚乱 from Esehara Shigeo まずは、スタッフの方々、LTをAcceptして頂き、ありがとうございました(ちなみにPythonではPycharmのコミュニティーエディションを使ってます)。 ちょっと酔っ払って書いてるので、少し「クサい」ところもありますが、お付き合いして頂ければと思います。 全体の感想 まず、自分の話をするまえに、礼儀として全体の感想から。 で、感想なのですが、個人的に一番面白かった発表はECMAScript6が、現状としてどのような仕様になっているかという話でした。実はひっそりと『ECMA-262 Edition5.1を読む』というを買っていて、ECMAScriptってJavaScriptが元にしている仕様でしょー、くらいの浅はかな理解だったのですが、その浅は

    なぜAltJSだったのか、そしてこれからもAltJSなのか [東京Node学園2013] - Line 1: Error: Invalid Blog('by Esehara' )
  • D3.js の Data-Driven な DOM 操作がおもしろい

    D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG

    D3.js の Data-Driven な DOM 操作がおもしろい
  • http://www.hp-stylelink.com/news/2013/10/20131008.php

    http://www.hp-stylelink.com/news/2013/10/20131008.php
    maangie
    maangie 2013/10/08
    「constでの定数宣言は、IEでサポートされていないので使用しないでください」駄目じゃん。ぶこめも。
  • MicrosoftらがJavaScriptコードの自動テストサービス「BrowserSwarm」を公開 | OSDN Magazine

    Microsoftは9月26日、JavaScriptコード向けの互換性テストツール「BrowserSwarm」ベータ版を公開した。クラウド型のサービスで、JavaScriptコードのWebブラウザおよび端末互換性検証が行える。 BrowserSwarmは、MicrosoftのInternet Explorler(IE)チームが米AppendToおよびSause Labsと協業して作成した、JavaScriptフレームワークやライブラリのWebブラウザ互換検証を行うオープンソースプロジェクト。Web開発者の検証作業を軽減することを目的としている。AppendToはjQueryのトレーニングや支援を行う企業で、Sauce Labsはクラウドベースのクロスブラウザテストを提供する。 BrowserSwarmではGitHub上のコードレポジトリと連携し、リポジトリを更新するとユニットテストフレー

    MicrosoftらがJavaScriptコードの自動テストサービス「BrowserSwarm」を公開 | OSDN Magazine
  • JavaScriptはモダンな言語とは呼べないのか | ykzts.blog

    モダンな言語でHTML5を開発しよう! 俯瞰して理解するaltJSの比較 (前編 - TypeScript, CoffeeScript, Hexe) と題する記事があった。この記事は見出し中にある「HTML5を開発しよう」という言葉からして意味が通っていない。だが記事の内容から「HTML 5を始めとし、CSSJavaScriptといったウェブ関連の技術を用いたアプリケーション作りをしよう」という意図であろうと類推することができる。しかしこの記事で問題なのはそのような重箱の隅を突くが如き枝葉末節な部分ではない。この記事の中で薦められているいわゆるaltJSと称される複数の言語たちではない、JavaScriptという言語はモダンな言語ではない、つまり近代的な言語ではないと断言してしまっていることである。 ここ数年のHTML5やCSS3の劇的な進化に比べて、JavaScriptの言語としての進

    JavaScriptはモダンな言語とは呼べないのか | ykzts.blog
  • D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch

    Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス?データビジュアライゼーション? キーワードとしてインフォグラフィックスとデータビ

  • 画像がクリックされたら画像を入れ替える - JavaScript

    サンプルと機能 → Sample 1:クリックされたら画像を入れ替える → Sample 2:様々なフィルタを用いて画像を入れ替える 画像がクリックされたら画像を入れ替えます。 フォトアルバムなどを作る場合に有効です。 Sample 2のように入れ替える際にいろんな効果を加えることができます。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:クリックされたら画像を入れ替える <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 画像がクリックされたら画像を入れ替える // img0.jpg,img1.jpgなどの数字が続

  • JavaScript : onLoad

    サンプルコード [実行] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <script type="text/javascript"><!-- window.onload = function() { document.getElementById("result").innerHTML = "Load"; } // --></script> </head> <body> <div id="result"></div> <img src="photo.jpg" width="300" height="196

  • 200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング - あのねノート。

    2013-08-24 200行で作る、enchant.jsを使った簡単ぷよぷよプログラミング やり方 はじめに この前enchant.jsでぷよぷよ by おっ立ち野郎を作って公開しました。 enchant.jsで作ったHTML5+JavaScriptな「ぷよぷよ」を公開しました これを知り合いR君に紹介したところ、嬉しい事に「僕もぷよぷよ作りたい!」といってもらえました。それでぷよぷよの解説サイトをネットで見つけて紹介しようと思いました。 しかし、テトリスの解説サイトは山ほどあるのに、ぷよぷよプログラミングの解説サイトが全然ありませんでした。特に完成まで解説しているサイトは見つけられませんでした。テトリスはあるのに。 ということで、今回ぷよぷよプログラミングの完成までの解説を書いてみました。これはenchant.jsの基礎をひと通り勉強された方におすすめです。クマをちょこちょこ動かすだけ

  • コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita

    このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか? 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら

    コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
  • データ & アナリティクス | アクセンチュア

    データ分析から導き出されたインサイト無しにAI人工知能)の活用は始まりません。私たちは、各業界知識とデータ・アナリティクス技術を駆使しデータドリブン経営を強力に支援します。 データ、アナリティクス、AIは企業にとって競合他社との差別化を図るかつてないほど大きな要因になっています。今日の経営幹部が効率を向上しながら新たな収益源を開拓し、新しいビジネスモデルをタイムリーに構築する方法を模索する中、価値を生み出し成長を続ける企業には「データ活用」という共通項があります。私たちは、無数のデータから企業にとって当に必要なデータを活用するための方法を知っています。 将来を見据えたオペレーション体制を備えている企業の半数以上(52%)は、すでにデータとアナリティクスを大規模に活用しています。データとAIに関する取り組みをビジネス戦略に沿って実施することで投資利益率を迅速に最大化し、最終的にはAIをビ

    データ & アナリティクス | アクセンチュア
  • プログラミング経験者が JavaScript を学ぶためのリソース - フリーフォーム フリークアウト

    移転しました http://please-sleep.cou929.nu/20110721.html

    プログラミング経験者が JavaScript を学ぶためのリソース - フリーフォーム フリークアウト
  • 【PC遠隔操作事件】「真犯人」からのラストメッセージ(江川紹子) - エキスパート - Yahoo!ニュース

    PC遠隔操作事件の「真犯人」は、落合洋司弁護士らに送った「告白メール」、「自殺予告メール」、そして今年元日に送られた「謹賀新年メール」、それにの写真を添付した「延長戦メール」の4通のメールの他に、長文のメッセージ(以下「ラストメッセージ」と呼ぶ)を作成している。それは「謹賀新年メール」で添付されたパズルを解くと「先着1名様限定」で入手できる、と書かれていたものだ。そこには、それまで寄せられていた質問に答える形で、犯行についての説明や心境などが綴られている。 「真犯人」は、この「ラストメッセージ」を社会に向けた最後の発信とする、としていた。ところが、警察が元日に雲取山でUSBメモリーを発見できなかったため、1月5日に「延長戦メール」を送信。同日中に、江ノ島のに取り付けられた首輪から、SDカードが発見・押収された。なので、時系列で言うと、「ラストメッセージ」は「延長戦メール」より前に書かれ

    【PC遠隔操作事件】「真犯人」からのラストメッセージ(江川紹子) - エキスパート - Yahoo!ニュース
    maangie
    maangie 2013/08/11
    落合洋司。神保哲生。伊集院光。片桐裕。西本逸郎。
  • JavaScript開発のデバッグを加速するlog出力!

    ブラウザのデベロッパツールのコンソールへlogを出力する方法と、 その際の注意点や解決策についてソースコード付きで解説します。 最終的にはlog出力の完成形として、 IEエラー回避、consoleオブジェクトの記述無し、デバッグ切り替え機能付きの プラグインの作成まで順を追って解説致しますので、最後までお付き合い頂ければ幸いです。 JavaScript開発において、変数の中身の確認や、処理フローの状況を確認する為には、 今まではHTMLへ出力したり、alert()等で通知したりといった事が主流でした。 しかし、ブラウザの技術進歩により、かなりJavaScript開発の手助けとなる機能が充実して来ました。 そんな中、ブラウザのデベロッパーツールのJavaScriptコンソールへ logを出力する事が可能となりました。 今回の記事では、そんなlog出力の方法と、Safari、ChromeやFi

    JavaScript開発のデバッグを加速するlog出力!
  • Clojure Exercises / Clojure 演習

    clojure-exercises.md Clojure Exercises / Clojure 演習 Programming exercises frequently appeared / よくあるプログラミング課題 記述能力の高い Clojure. よくあるプログラミングの演習問題を Clojure で解いてみます. FibBuzz 整列アルゴリズム N Queen Problem / N クイーン問題 お釣りの要らない全ての支払い方 文字列を先頭から見て同じところまで除去 ぷよぷよ連鎖 三角形状の数値群で底辺に向かって総和が最大になる経路 (プロジェクトオイラー 問題 18) 月の初めが日曜日になるのは何回? (プロジェクトオイラー 問題 19) 行列中, 特定数の隣接要素の積の最大値 (プロジェクトオイラー 問題 11) 数字群を辞書順に並べる (プロジェクトオイラー 問題 24)

    Clojure Exercises / Clojure 演習