JavaScriptだけでページ内をゆっくりと移動する、スムーススクロールを実装する方法を説明します。jQuery不要です。
スムーススクロールを実装する方法(ページ内をゆっくり移動)
JavaScriptだけでページ内をゆっくりと移動する、スムーススクロールを実装する方法を説明します。jQuery不要です。
[JS][CSS3] jQuery を使わずに fadeIn / fadeOut のアニメーションを実装する方法
Modified 2014-09-20 更新情報 setTimeout を使ってフェードイン・アウトするコードを旧IEでも動くコードへ書き直しました。 jQuery を使わずに、CSS3・requestAnimationFrame メソッド・setTimeout 関数で fadeIn / fadeOut のアニメーション表現を行うということをやってみました。jQuery を使えば fadeIn()、fadeOut() だけの記述で済むことですが、いざそれを使わずにとなると大変だなという印象です…。 各サンプルは、マウスオーバー時にフェードアウト・マウスアウト時にフェードインします。 HTML は共通で以下のようになっています。 <div id="box">FadeIn/Out</div> CSS3 でフェードイン・アウトする opacity の変化を transition プロパティでアニ
![[JS][CSS3] jQuery を使わずに fadeIn / fadeOut のアニメーションを実装する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/86e81ff91fa6b313217fdb231a7e53f682b53caf/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F03%2Ficon.jpg)
2011-01-29
JSR223スクリプト言語サポートでは、JavaScriptなどのスクリプト言語をJavaから利用するためのAPIを提供しています。Java6ではJavaScript（Rhino）がサポートされており、ライブラリを使えばJRubyやJythonなどが利用できます。 利用方法は簡単です。 public static void eval(String script) throws ScriptException { ScriptEngineManager mng = new ScriptEngineManager(); ScriptEngine engine = mng.getEngineByName("javascript"); engine.eval(script); } 例えばScriptはこんな感じ。 print("Hello World."); さらに、JavaScriptの中でJa
JavaScriptデザインパターン – 第1部：シングルトン、コンポジット、ファサード | Adobe Developer Connection
Basic JavaScript programming knowledge. Additional required other products (third-party/labs/open source) Query Library Download / Learn この記事は、JavaScriptでよく使用されるデザインパターンに関するシリーズ記事の第1部です。デザインパターンはプログラミングにおける実証済みの手法であり、特に、大規模なJavaScriptアプリケーションを大きなグループで作成する場合に不可欠なコードの保守性、スケーラビリティ、分離性を向上させます。 このシリーズ記事の第2部では、さらに、アダプター、デコレーター、ファクトリという3つのデザインパターンを紹介します。第3部では、さらに、プロキシ、オブザーバー、コマンドという3つのデザインパターンを紹介します。 シング
特集：jquery.jsを読み解く｜gihyo.jp … 技術評論社
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();
気になったら即調べるが吉、ということで。 数値→文字列 var num = 123; // わかりやすい String(num); // "123" num.toString(10); // "123" // この用途では使ったこと無い num.toFixed() // "123" // なるほど num + ''; // "123" 文字列→数値 var str = '123'; // わかりやすい Number(str); // 123 parseInt(str, 10); // 123 parseFloat(str); // 123 // なるほど str - 0; // 123 str * 1; // 123 str / 1; // 123 // すっきりやけど知らん人は読めない +str; // 123 -(-str); // 123 ~~str; // 123 str&-1;
ゲームの基本的な動作やエフェクトなどのソースコードを検索可能な「Game Mechanic Explorer」
「ゲーム開発初心者のために何かできないか」と思っていたゲーム開発者のジョン・ワトソンさんが、ゲーム開発フレームワークの「Phaser」を使いJavaScriptでゲーム開発に役立ちそうな動きやアルゴリズム、エフェクトを作成し、ソースコード付きで「Game Mechanic Explorer」にて無料公開しています。歩行やジャンプといったゲームの基本的な動きから、追跡型ミサイルや光源による影など、さまざまな動作は、ソースコードが分からなくても操作するだけでも楽しい気分になれます。 Game Mechanic Explorer http://gamemechanicexplorer.com ゲームの基本的な動作やエフェクトを確認するには、上記URLを開いて、画面左側にある「Choose」の横にある下向き三角をクリックします。クリックすると「Walking and jumping」「Bullet
｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣ | 気になる、記になる…
｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣ 2013 10/16 TNWによると、ファミコンで人気の｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣が公開されたそうです。 著作権的に問題ありですが、実際にキーボード操作でプレイする事が可能で、”1−1”だけかと思いきや”8-4”までの全ての面がプレイ可能となっています。 また、マップジェネレーターも用意されており、自分でマップを作る事も可能で、操作面ではBダッシュはShiftキーを押しながら動かすと可能で、ジャンプは十字キーの上かスペースキーとなっています。 ・Full Screen Mario 【追記】 Google Chromeのみのサポートとなるようです。
ブラウザ上でLinuxが動く! なんとGUIも! Javascriptで実装されたOR1Kエミュ『jor1k』|ガジェット通信 GetNews
ブラウザ上でLinuxが動く! なんとGUIも! Javascriptで実装されたOR1Kエミュ『jor1k』 いやはや、世の中にはクールで変態なハッカー（褒め言葉）がいるものです。 この『jor1k』というプログラムは、完全にJavascriptで実装されたOR1K（OpenRISC 1000）エミュレーターで、ブラウザ上でLinuxを実行することができてしまいます。 ブラウザ上でLinuxを起動してターミナルでコマンドラインの入出力をするだけであれば、これまでにも「Javascript PC Emulator」というJavascriptで実装されたPCエミュレーターがありました。しかし、『jor1k』のスゴイ所はX Window Systemが起動しGUIもちゃんと操作できることです。たとえば、冒頭の画像は、“お決まり”のxeyesを起動してみたところです。ちらつきはあるものの、目玉が
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
■ Draggablesのイベントハンドラが取得できる情報 jQuery UIが提供するドラッグ＆ドロップ関連のイベントハンドラは、第2引数からそのイベントに特化した情報が取得可能です。Draggablesのイベントハンドラには、次のような情報が渡されます（第2引数の変数名を「ui」とした場合）。 ui.instance：draggableのインスタンス ui.options：draggableの初期化時に指定したオプション ui.position：ヘルパの現在位置 ui.absolutePosition：ヘルパの現在の絶対指定による位置 例えば、下記のようにすることで、ドラッグ終了時の座標を取得できます。 <div id='target'>ドラッグ可能</div> <script type="text/javascript"> $('#target').draggable({ stop:
javascript - Array.prototype.slice.apply(arguments) // 引数一発配列化 : 404 Blog Not Found
2010年04月28日22:00 カテゴリLightweight Languages javascript - Array.prototype.slice.apply(arguments) // 引数一発配列化 これなのですが… 細かいJavaScriptの仕様や習慣やテク集 - 三等兵 var func = function() { var leng = arguments.length; for(var i = 0, arr = []; i < leng; i++){ arr[i] = arguments[i] * 10; } alert(arr); }; こう書けます。 var func = function() { var args = Array.prototype.slice.apply(arguments); var arr = args.map(function(n){ r
フォルダ内のファイル一覧を取得する
■プログラム説明（ソースコード説明） 最初に改行コードである13を変数CRに入れます。psdataフォルダのパスをFolder()に指定しフォルダオブジェクトを生成します。フォルダオブジェクトのgetFiles()を使いファイル一覧を取得します。結果は配列として返されます。取得した一覧の配列からfullNameを読み出すとファイルパスが取得できます。ファイルの数だけ取得したファイル名を文字列として加算します。最後にレイヤーを追加しレイヤーの種類をテキストにします。レイヤーのcontentsプロパティに文字列を入れるとファイル一覧が表示されます。 --------------------------------------------------------------------------------------------------------- ■ソースコード CR = Strin
MochiKit | feedforce Engineers' blog
JavaScript のライブラリ。 http://mochikit.com/ ドキュメント http://mochikit.com/doc/html/MochiKit/index.html デモ用インタープリタ http://mochikit.com/examples/interpreter/index.html 入手 リリース版はちょっと古いので、Subversion リポジトリから取ってくるのが いいでしょう。 svn co http://svn.mochikit.com/mochikit/trunk mochikit MochiKit.Base 比較関数や関数型プログラミングのための関数など。 MochiKit の基本部分。 compare 比較 >>> [1, 2] == [1, 2] false >>> compare([1, 2], [1, 2]) 0 map 写像 >>>
続々出てきた JavaScript 系新言語。どれを使う? | プログラマーズ雑記帳
先に選択方針を図にまとめたものをあげておきます。 JavaScript 系新言語のどれかは使うべき ? 最初にそもそも何か新しい言語を使う必要があるのか? というところから考えてみましょう。 JavaScript に変換する言語あるいは取って代わろうとする言語 がいろいろできてきている状況を考えると、 今のままの JavaScript には問題がある と多くの人が思っていることは間違いないです。 そのため、今後は JavaScript を直接書くのはやめて、 どれかの言語は使うべきだと思います。 JavaScript にもいいところはある、 新しい言語を覚えるのは大変という人も多いでしょう。 しかし、理由は後で説明しますが、そういう人でも TypeScript は使うべきです。 対象言語 ここに挙げたもの以外にもありますが、私が有名だなと思うものと対象にしました。 CoffeeScript
JavaScriptのゲッタ - Webtech Walker
JavaScriptでゲッタを定義するのにdefineGetterっていうのが使えて var obj = {}; obj.__defineGetter__('hoge', function() { console.log('hoge!!'); }); obj.hoge; //=> hoge!! こんな感じで()つけなくても関数が呼び出されるのでプロパティにアクセスのようにして関数を呼び出すことができる。 Node.jsのライブラリのコード読んでるとよくdefineGetterがでてくる（Node.jsのコードというかTJのコードに多いだけな気もする）。 express/lib/request.js at master · visionmedia/express · GitHub でもdefineGetterはECMAScript非標準なんで非推奨ってMDNに書いてある。 defineGet
JavaScriptのオブジェクトをコピーする - @ledsun blog
API Only - Stack Exchangeに詳しい解説があったので翻訳する。 質問 オブジェクトxをオブジェクトyにコピーしたい。yを変更してもxが変更されないようにだ。JavaScriptで、最もエレガントな方法は？ 追記: JavaScriptの組み込みオブジェクトをコピーすると不要なプロパティをコピーしてしまうことは理解している。今回は問題にならない。リテラルで生成した自前のオブジェクトを対象にするからだ。 回答 JavaScriptには、あらゆるオブジェクトをコピーできるシンプルで統一的な方法ありません。まず、リンクしたプロトタイプオブジェクトから属性を取得してしまう問題があります。プロトタイプオブジェクトの属性は、新しいインスタンスにコピーすべきはありません。Object.prototypeにcloneメソッドを追加するのであれば、プロトタイプオブジェクトの属性を明示的に
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業：株式会社ニーロク（http://i26.jp/）
オブジェクトでの作業 - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.dropzone.dev/js/