JavaScriptで画像アップロード時にサムネイルを表示させる方法 | minory
<input type=”file”>で画像をアップロードする際、特に複数ある場合にサムネイルがないと、正直何をアップロードしようとしているのか確認できません。 そこで、JavaScriptとWeb APIのFileReaderオブジェクトを使用して、画像をBase64エンコードしてサムネイルを表示する方法をご紹介します。 ファイル選択時にサムネイルを表示 やり方としては、ファイルを選択した際に発火するJavaScriptのonChangeイベントの時に、FileReaderを使ってBase64エンコードし、用意していたサムネイル用のイメージタグに差し込みます。 HTMLで画像選択フォーム作成 #file-imageがファイル選択で、#print_imgが表示用のイメージタグです。
キー付きコレクション - JavaScript | MDN
ECMAScript 2015 で値と値とをマッピングする新しいデータ構造が導入されました。Map オブジェクトはシンプルなキー / バリューマップで、挿入順に要素を反復処理することができます。 次のコードでは Map を用いたいくつかの基本的な操作を表しています。また、追加の例や全ての API については、Map リファレンスページをご覧ください。for...of ループを使って、各反復処理において [key, value] からなる配列を返しています。 let sayings = new Map(); sayings.set("dog", "woof"); sayings.set("cat", "meow"); sayings.set("elephant", "toot"); sayings.size; // 3 sayings.get("dog"); // woof sayings.
altJS勉強会「Haxeすごいからみんな使え！」
Common Lisp製のテキストエディタにコントリビューションをしたので、その実装とかこぼれ話を発表しました。
なぜJavaScriptでテストコードを書くのか？
はじめに 第1回目の本稿は、実際にテストコードを書く前に、基本的な考え方である「なぜテストコードを書くのか？」を解説します。 対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 頻繁な変化への対応 まずは、開発現場で多く行われている基本的な考え方を振り返り、テストコードがなぜ必要なのかを考えて行きたいと思います。 これまでのテストの考え方 まずは、一般的なウォータフォールモデルを例に考えてみましょう。通常ウォータフォールモデルでは、設計→実装→テストという順番で、作ったものを最後にテストします。最後にテストを行うというのは、言い換えると「品質を最後に担保する」と言えます。 また、最後にテストする場合は、通常テスト仕様書などを作成した上で必要なテストパターンを洗い出し、手動でテストを実施します。 変化への対応が求められている スタートアッ
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方Read less
JavaScriptの新旧ユニットテストツール - 強火で進め
「エンジニアサポート新年会2012 CROSS」のセッションの1つでJavaScriptのセッションが行われました。 エンジニアサポート新年会2012 CROSS http://tech.nifty.co.jp/party/2012/index.htm JavaScript 八面六臂 2回戦 http://tech.nifty.co.jp/party/2012/sessions/bRoom2.htm そこでJavaScriptのユニットテストツールの話が有り、新旧のツールが上げられていたのでメモ。 昔から有る QUnit 、Jasmine 。新しく出てきたものとして mocha 、Buster が紹介されました。 QUnit 公式サイト。 QUnit - jQuery JavaScript Library http://docs.jquery.com/QUnit 【レポート】jQueryテ
JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
GoogleがWeb全体のスピードアップにいよいよ本格的に着手, 一社だけではできないと強調 からリンクのあった、 http://code.google.com/intl/ja/speed/articles/optimizing-javascript.html が日本語かと思ったら日本語じゃなかった・・・・。 いやー、意外とというか文字列については、全然知らんかった。 Closureって便利だし、「おぉ〜俺って使ってるジャン」みたいな気になれるからついつい使っちゃうんだけど、高コストなのね・・・・。反省。 ということで、超適当翻訳。どっかの誰かが書いてるかも。 前おき 著者: Google Chromeのエンジニア Gregory Baker, Software Engineer on GMail & Erik Arvidsson 推奨される経験：JavaScriptの実践的な知識 クライ
ブラウザから手軽に使えるJavaScriptの統合開発環境『TIDE』 | 100SHIKI.COM
これはすごい・・・。 TIDEは「Tiny IDE（統合開発環境）」の略らしい。 そのシンプルな名前にたがわず、実に手軽にJavaScriptを書いて、テストすることができる。日本語もきちんと通るようだ。 しかもIDEだけあって、変数の中身をウォッチしたり、ステップごとに実行していくことが可能だ。 JavaScriptは慣れていないとどうにもとっつきにくかったりするが、こうした環境があればその動作を確認しながら学習していくことができるだろう。 まだベータ版ということで多少のバグがあるようだが、これからJavaScriptをやってみよう！と思われている方にはお勧めだ。
Yahoo!、JavaScriptフレームワーク最新YUI 2.6.0発表 | エンタープライズ | マイコミジャーナル
YUI - Yahoo! User Interface Library The YUI development communityは1日(米国時間)、YUI (Yahoo! User Interface Library)の最新版となるYUI 2.6.0を公開した。YUIはYahoo!で開発されたAjax JavaScriptフレームワーク。さまざまなUIコンポーネントが用意されており、対応ブラウザチェックも実施されているためクロスブラウザ開発に活用できる。 YUI 2.6.0は以前のバージョンと比較して450を超える問題が修正されているほか、機能拡張や最適化も実施されている。これまでベータ扱いだった8つのコンポーネント(Cookie、DataSource、Resize、YUI Loader、DataTable、Layout Manager、Rich Text Editor、Profiler
Prototype 1.6.0.3登場、待ち望まれていたバグ修正あり堅実さ向上 | エンタープライズ | マイコミジャーナル
Prototype JavaScript Framework 9月29日(米国時間)、Ajax JavaScriptフレームワークPrototypeの最新版となるPrototype 1.6.0.3が公開された。Prototype 1.6.0.3では切望されていたバグ修正が実施されており、ひとつまえのバージョンと比較して30のバグ修正と25の改善が実施されている。入れ替えるだけでアップグレードでき、すべてのPrototype 1.6系ユーザにアップグレードが推奨されている。 Prototype 1.6.0.3はバグ修正や改善が実施された1.6.0系の最新版という位置づけでもあるが、次期アップグレードバージョンとなるPrototype 1.6.1へ向けた準備リリースというニュアンスも持っている。すでにPrototype 1.6.1に向けた開発が取り組まれており、今回は1.6.1向けに開発された
JavaScriptライブラリ75選 | エンタープライズ | マイコミジャーナル
Smashing Magazine WebサイトやWebアプリケーションのインタラクティブ性・ダイナミック性を向上させるにはJavaScriptの活用が有効だ。最新のWebブラウザはJavaScriptの実行性能向上に継続的に取り組んでいるし、劇的な実行速度向上が相次いで報告されている。WebサイトやWebアプリケーションにおけるJavaScriptの採用はしばらくの間はホットトピックであり続ける流れにある。 JavaScriptを使ったアクションや効果の追加を実施する場合、どういったライブラリがあるのかを調べ求める機能を実現した適切なライブラリやフレームワーク、またはコードの断片をコピーして活用するといった作業をおこなう。そこでSmashing Magazineで公開されている75 (Really) Useful JavaScript Techniquesに注目しておきたい。Webデベロ
【連載】いまからはじめるPrototype.js (1) Prototype.jsの概要と$で始まるメソッド | エンタープライズ | マイコミジャーナル
Prototype.jsとはなにか Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。 ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。 これから6回にわたって、こ
Google ChromeにおけるJavaScriptプログラミングの留意点 | エンタープライズ | マイコミジャーナル
最初のβ版が登場してからまだほとんど日の経っていないGoogle Chromeだが、確実にそのシェアを延ばしている。この傾向が続けば、2008年9月にはWebブラウザシェア第4位を占めるのは間違いないだろう。どのタイミングでSafariと同じシェアに到達するかが最初の注目ポイントといえそうだ。 ユーザにとってはこうした有益なアプリケーション候補が増えることは好ましいことだが、Webデベロッパにとっては頭の痛い問題だ。ただでさえクロスブラウザ実装が面倒だというのに、今度はこれにGoogle Chromeも加わることになる。Webデベロッパ、特にJavaScriptプログラマが気になるのはGoogle Chromeのその魅力的な機能よりも、既存のWebブラウザと比較してどの程度違いを持っているのかということだろう。 この点に関してMozilla Foundation, JavaScript E
"404 Not found"ページをより効果的にする方法、Google | エンタープライズ | マイコミジャーナル
Google Webmaster Central "404 Not found" - HTTPステータスコードでもっとも目にするもののひとつだ。4からはじまる3桁のステータスコードにはリクエストエラーがあてがわれており、要求されたページが存在しない場合には404が返る。"404 Not found"に遭遇する理由はさまざまだ。すでにそのページが削除されていたり別のURLへ移動している場合もあれば、URLをコピー&ペーストした段階で必要な部分切り捨ててしまったり、入力を間違えた場合などがある。 目的があってページを訪れようとしたユーザが"404 Not found"に遭遇した場合、Webブラウザの戻るボタンを押して1つ前に戻ったり、タブを閉じて再検索をかけたりする。これはちょっともったいない話だ。タイプミスやコピー&ペースト時のミスであれば、目的のページにたどり着けるようにナビゲートする方法
JavaScript 2.0はECMAScript 3.1ベースに、ECMAScript 4は譲歩 | エンタープライズ | マイコミジャーナル
ECMAScript JavaScript 2.0の動きに大きな変化があった。ECMAScript 4をベースにしたプログラミングを練習してきたのであればそれは改めなければならないようだ。JavaScript 2.0はECMAScript 4ではなくECMAScript 3.1をベースとしたものになりそうだ。MozillaでJavaScript Evangelistを務めるJohn Resig氏のブログにこのあたりの事情がまとめられている。 次期ECMAScriptの規約策定にはAdobe、Mozilla、Opera、Googleなどが主に参加していたECMAScript 4と、MicrosoftやYahoo!が主に参加しているECMAScript 3.1の2つの流れがある。ECMAScript 4は多くの機能を取り込んで大幅に言語を変更するもので、ECMAScript 3.1はECMAS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
PHPやJSなどの各種フレームワークを比較できる『Best Web Frameworks』 | 100SHIKI
ちょっとした説明に便利なTooltipsのスクリプトいろいろ | IDEA*IDEA
[JS]フロートウインドウを生成するスクリプト -Mocha
S2ファクトリー | Web/アプリ/システム/デザイン/ディレクション
