imagesLoaded
imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. imagesLoaded on GitHub 4,500 Edit this demo or vanilla JS demo on CodePen. Just to keep things interesting, there’s a 10% chance of adding a broken image. Install Download imagesloaded.pkgd.min.js minified imagesloaded.pkgd.js un-minified CDN <script src="https://unpkg.
JavaScript - MDC
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子数値と文字列日付と時刻の表現正規表現インデックス付きコレクションキー付きコレクションオブジェクトの利用クラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターリソース管理国際化JavaScript モジュール中級編Advanced JavaScript objectsAsynchronous JavaScriptClient-side web APIs言語概要JavaScr
第1回 Underscore.jsとは | gihyo.jp
本連載では、JavaScriptライブラリの1つ、Underscore.jsを解説していきます。第1回目となる今回は、Underscore.jsの概要と特徴、動かすところまでを紹介します。 Underscore.jsの概要 UnderscorejsはDocumentCloud Inc.とJeremy Ashkenasが開発しているJavaScriptライブラリです。DocumentCloud Inc.によりオープンソースとして提供されています。ファイルサイズは圧縮したもので4.9Kバイト（現バージョン1.5.2）と軽量なライブラリです。 Underscore.jsは、配列、オブジェクトの操作をはじめ、関数、オブジェクトなどを扱う際の便利関数が80あまり定義されています。配列、オブジェクトの操作の記述がネイティブな機能だけで書くよりも簡潔にシンプル書けるため非常に便利です。 また、Proto
.oninput | JavaScript 日本語リファレンス | js STUDIO
window上のinputイベントのためのイベントハンドラです。 inputイベントは、<input>要素の値が変更された際に発生します。 このイベントは、バブルアップ伝搬(bubbles)します。 window上でサポートされていれば、同様に<input>要素上でもサポートされます。 例 <script> window.addEventListener('input',function(e){ console.log("keyupイベントを検知! 検知先の要素:", e.target); }, false); </script> <input placeholder="ここに何かを打ち込み、コンソールを確認してください" /> 注意事項 デスクトップ 機能 Chrome Firefox (Gecko) IE Opera Safari 基本
Element: input event - Web APIs | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020. Learn more See full compatibility Report feedback The input event fires when the value of an <input>, <select>, or <textarea> element has been changed as a direct result of a user action (such as typing in a textbox or checking a checkbox). The event also a
String.prototype.charCodeAt() - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback charCodeAt() メソッドは、指定された位置にある UTF-16 コード単位を表す 0 から 65535 までの整数を返します。 charCodeAt() は常に UTF-16 コード単位の並びとして文字列をインデックスするので、孤立サロゲートを返すかもしれません。コードポイント値全体を取得したい場合は、 codePointAt() を使用してください。
カンマ演算子 (,) - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback カンマ演算子 (,) は、それぞれの演算対象を（左から右に）評価し、最後のオペランドの値を返します。これにより、複数の式が評価される複合式を作成することができ、複合式の最終値はそのメンバー式の一番右端の値となります。これは、for ループに複数の引数を提供する場合によく使用されます。
AjaxにおけるCSRF攻撃対策 - バカンス駆動開発
前回で近いうちにAjaxのセキュリティについて書きます！と宣言しましたが、あれはつまりCSRF攻撃の対策についてでした。今回はAjaxでCSRF対策を行う方法を書きます。 先に結論 Ajax通信におけるCSRF攻撃対策は通常の遷移時に施す対策と考え方はかわりません。 実装方法 ログイン時にトークンを生成しセッションオブジェクトにセットし、トークンをクライアントに送信 クライアント側のjsスクリプト内でトークンをAjax通信時に常に付加するように設定 サーバー側でAjaxで送信されたトークンの有無とセッションオブジェクト内のトークの一致を確認 ログアウト時にセッションは全て破棄 ここで生成するトークンはワンタイムではないです。ログイン時にずっと使いまわします。 ところで、パーフェクトPHPチルドレンとしては見逃せないエントリが CSRF対策のトークンをワンタイムにしたら意図に反して脆弱になっ
【JavaScript & HTML5 】文字コードに関係なくテキストファイルを正しく読み込む - のんびり猫プログラマの日常
ブラウザ上で編集する「Webテキストエディタ」を作るという案件がありまして。 まず【既存のテキストファイルを読み込む】というところで引っかかったので覚書しとく。 テキストファイルといっても、文字コードがshift-jisだけならまだいいんだけど、 中にはUTF-8だったりEUCだったり、UTF-16とかもうね・・・ そういう様々な文字コードのファイルでも、正しく読み込んで表示しなくては お話にならないのだ。 そこでググりながら作ったよ、もう。 1 File APIを使ってみる HTML5になって、ローカルファイルを手軽に扱えるようになったね。 そう、File APIっていうのを使ってみようよ。 www.html5rocks.com このページに書いてある、ファイル読み込み時のオプション。 これが大切です。以下、そのまま引用。 File 参照を取得したら、FileReader オブジェクトを
Node.jsとは何なのか調べてみました | スターフィールド株式会社
サーバーサイドのプログラムとして数年前から注目されているNode.jsですが、 私は、サーバーサイドで動くJavaScriptで、非同期の処理が得意というくらいの認識しかなかったので、 さすがにまずいと思い、どんなものなのか調べてみました。 今回は同じくサーバーサイドで動くプログラミング言語であるPHPと比較する形でまとめてみました。 (私はまだ理解が浅いので、間違ったことを書いてしまっている可能性がありますので、ざっくりと参考までに) 1. Node.jsのJavaScriptとPHPは基本的に役割が異なる 正直私はNode.jsはPHPを動かすためのApacheのようにJSファイルをサーバー上に置くことで、 それを実行してくれるようにするものだと思っていました。 実際はそうではなく、Node.jsはサーバーサイドでJavaScriptを実行できるようにしてくれるものです。 これは、JS
注目のサーバサイドJavaScript実行環境「Node.js」 | IIJの技術 | インターネットイニシアティブ（IIJ）
（※）このページで紹介している事項は記事初出時点の情報に基づいたものです。本ページはアーカイブとして掲載しています。 ツイート 2012年7月31日 今、ソフトウェア開発者の中で注目されている「Node.js」。本記事の前半は、Node.jsが誕生した背景とこれまでの歩みといった概要について紹介します。後半では、Node.jsのアーキテクチャの概要や今後の課題や展望など技術的な内容について説明します。なお、Node.jsの正式名称はNodeです。他と区別したい時にNode.jsと呼ぶことになっていますが、ここでは初めてNode.jsを知る方にもわかりやすいよう記載名をNode.jsで統一します。 Node.jsが生まれるまで 1995年に誕生したJavaScriptは、ブラウザ上で動作するスクリプト言語として開発されました。当初はJavaScriptの実行速度も遅く、セキュリティの問題も数
exif-js と ios-imagefile-megapixel でスマホからの画像アップロードのプレビュー表示に対応する
画像アップロードするときにプレビュー欲しいよね〜 プレビューするとたまに画像が回転されてるよね〜 スマホだと画像選択するアプリで EXIF 情報を見て回転させて表示しているから プレビューが横向きとかになってておかしいと思われがちだよね〜 そんな問題を解決するのが exif-js です。 exif-jsjseidelin/exif-js 使い方は https://github.com/jseidelin/exif-js/blob/master/example/index.html を見てください。 例えば、アップロードされたファイルに対して Orientation を取得する場合は以下のように記述します。 $('#jsFileInput').on("change",function(){ var file = $(this).prop("files")[0]; EXIF.getData(f
JavaScriptを使ってExifデータを読み取る·exif.js MOONGIFT
exif.jsはJavaScriptを使って写真のExifデータを読み取るライブラリです。 スマートフォンの普及によって写真データをオンライン上に扱うケースが増えています。そんな写真のメタデータであるExifをJavaScriptで扱ってしまおうというのがexif.jsです。 サンプルです。写真を指定するとそのExifから位置情報を読み取ってGoogleマップにマーカーを立てています。 コードです。FileReaderでデータを読み取った上で解析しています。 exif.jsは位置情報のみならずホワイトポイントやフラッシュ、シャッタースピードなどExifで取得できるデータが網羅されています。これだけのデータが取れれば、面白い使い方が考えられそうです。 exif.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFT
FileReader.readAsDataURL() - Web API | MDN
readAsDataURL メソッドは、指定されたBlob または File の内容を読み込むために使用されます。読み込み操作が終了すると、readyState が DONE となり、loadend が発生します。このとき、result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。 メモ: blob の result は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:*/*;base64, を削除しておく必要があります。
Japan Map ( jQuery plugin )
Quick Start Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan. The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched. Here is most simple example. <!DOCTYPE
日本地図を表示するjQuery プラグイン Japan Mapは簡単便利 | ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)
jQueryについてちょっと別の事で検索をしていたのですが、偶然「日本地図を表示するjQuery プラグイン Japan Map」を見つけました。日本地図を表示したりクリックしてページに遷移したりできそうな面白いものだったので、どんな風に使えるかを試してみました。 日本地図を表示するjQuery プラグイン Japan Map とは？ http://takemaru-hirai.github.io/japan-map/ Takemaru Hiraiさんが作られて公開しているjQueryプラグインです。このページにこのプラグインの使い方やサンプルコードが載っています。このjQueryを使うだけで日本地図が表示出来ちゃう！というのはとても簡単で楽しそうです。 ライセンスも MITライセンス なので色々なことに使えそうです。 ファイルをダウンロードして動かしてみる http://takemaru
Node.js — どこでもJavaScriptを使おう
Create an HTTP ServerWrite TestsRead and Hash a FileStreams PipelineWork with Threads // server.mjs import { createServer } from 'node:http'; const server = createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World!\n'); }); // starts a simple http server locally on port 3000 server.listen(3000, '127.0.0.1', () => { console.log('Listening on 127.0.0.1:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パズドラ風アイコンジェネレーター ver.2 #ここでハマったよiOS - slowjet
exif-js
แทงบอลออนไลน์