タグ

javascriptに関するkuracomのブックマーク (195)

  • JavaScriptの動かないコード  (JavaScriptエラー集) - 主に言語とシステム開発に関して

    「このJavaScriptコードが動かないのは,なぜですか?」というミニクイズ集。 すべて制限時間は1分。 別名,JavaScriptのエラー事典。またはアンチパターンのまとめ。 中級編 初級編 番外編 2015年5月現在,全53記事。 中級編 JavaScriptの仕様関連 p要素への appendChild() で失敗する かけ算を間違える イベントハンドラが見る値のエラー クロージャを使わない場合に起きるエラー オブジェクトのprototypeを変更した時のエラー 正規表現で同じ文字の連続を検出したい - 置換前パターン中での後方参照 jsonオブジェクトをevalできないエラー 不要なイベントが連鎖で発生してしまう  (バブリングの対処) オブジェクトのプロパティ定義にthisを使って失敗するエラー setTimeoutのタイマーが指定時刻に動かないエラー オブジェクトのメソッドを

    JavaScriptの動かないコード  (JavaScriptエラー集) - 主に言語とシステム開発に関して
  • あれ、いつも書いてるな~というJavaScript の小技集 | バシャログ。

    いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな~という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお~と思ったものがいくつもあったので抜粋してみました。 ※追記1: ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2:「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3:予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな~という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました! 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v

    あれ、いつも書いてるな~というJavaScript の小技集 | バシャログ。
  • クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」

    TOP  >  plugin  >  クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 (Drop) そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas

    クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」
  • JavaScript 徹底入門のための資料&書籍まとめ - 酒と泪とRubyとRailsと

    JavaScriptはブラウザから簡単に使えるし、jQuery Pluginも簡単に追加できるので、つい基礎をおろそかにしたまま使っていて、ちょっと凝ったことをしようとした時にいつもハマっていました。ということで今回は、独習JavaScriptの第二版を購入して読み進めつつ、ネットのお勧めのドキュメントを見て、補足しながら勉強していったのでそのメモです。 (03/09 21:50) JavaScriptの習熟度を上げるための勉強フローを追加 🍄 [動画] ドットインストールJavaScript入門 JavaScript当に使ったことがない初学者の方にお勧めしたいのがドットインストールの動画。説明が環境構築からスタートしてくれるので、つまずことなく最初の一歩を踏み出すことができます。 😸 [Web] JavaScript基礎文法最速マスタ 『JavaScript基礎文法最速マスター』

    JavaScript 徹底入門のための資料&書籍まとめ - 酒と泪とRubyとRailsと
  • Kazitori.js

    Kazitori.js は複雑になりがちな pushState 処理をいい感じにさばいてくれる ルーターを提供するライブラリです。 Kazitori.js を使うことによって以下のことが簡単に実現します。 IE7以上の環境で動作します。 古い IE や、一部 Android など、pushState に対応していないブラウザでは 自動的にハッシュ(#)として処理されます。 生の JavaScript だけでなく、CoffeeScript、Haxe でのコーディングをサポートしています。 Haxe については Extern を公開しているので合わせてご利用下さい。

    Kazitori.js
  • JavaScript Patterns

    A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns (upcoming). Patterns collected while developing 喜感网. General Patterns Function Declarations - creating anonymous functions and assigning t

  • びよ〜んと弾むのが気持ちいい!タブレット・スマフォで使いたいナビゲーション -Bounce Menu

    タップすると、びよ〜んと弾んでナビゲーションが表示されるタブレット・スマフォ向けに実装してみたいナビゲーションを紹介します。 Bounce Menu 左下をタップで動作します。 実装はこんな感じです。 HTML <div class="device"> <div class="screen"> <div class="menu"> <ul> <li class="lock"><a href="">Lock</a></li> <li class="share"><a href="">Share</a></li> <li class="download"><a href="">Download</a></li> </ul> </div> <div class="toggle"> <div class="x"></div> <div class="y"></div> </div> <div cl

  • Qiitaのtextarea自動補完がOSSになりました - Qiita

    jQuery.textcomplete(デモ) GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 を書いたのも今は昔、いつか続きを書こう書こうと思いながら気がつけば5ヶ月が過ぎました なんか続きを書くのが面倒くさくなったのと、某日最大レシピ共有サイトの技術部長の人から「OSSにして欲しい」という要請を人伝に受け取ったこともあって、OSS化した次第です。 ライセンス MITライセンス 簡単な使い方 簡単に説明します。詳しくは README を読んでください。 まず jQuery.textcomplete は名前からも分かるように jQuery プラグインになっているので、別途 jQuery が必要です。 <script src="path/to/jquery.js"></script> <script src="path/to/jquery.textcomp

    Qiitaのtextarea自動補完がOSSになりました - Qiita
  • 一歩進んだHTML/CSS/JSを目指すために | 1000ch.net

    2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s

  • [JavaScript] SVGが使えるか判定する

    IEでもバージョン9からSVGに対応してるらしいので、SVGをもっと使っていきたい。 けど、IE8まではSVGに対応していないので、SVGが使えるかどうかをJavaScriptで判定する。 簡単 var ableSVG = (window.SVGAngle !== void 0); SVGColorSVGAngleってプロパティがあるかどうかで判定する void 0ってのはundefinedと同じ意味なので、SVGColorSVGAngleがないってことはSVGは使えないってこと --add[2011/12/9] SVGColorで判断してたんだけど、そんなプロパティはfirefoxにはなかった。 参考: SafariとChromeを判別してみる

  • The All-In-One Almost-Alphabetical Guide to Detecting Everything - Dive Into HTML5

    The All-In-One Almost-Alphabetical Guide to Detecting Everything (Confused? Read Detecting HTML5 Features for a conceptual introduction. Want an all-in-one library instead? Try Modernizr.) <audio> return !!document.createElement('audio').canPlayType; <audio> in MP3 format var a = document.createElement('audio'); return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); <audio> in

    kuracom
    kuracom 2013/07/30
    svgなど最近のネタが使えるかどうかを判別するコード
  • About SPARKFUL | SPARKFUL

    打造伴隨人們多年、一同成長的有趣產品從每日補水到每日走路、從記帳理財到待辦事項,我們的產品都是從生活中的小事情開始,讓小小的樂趣在生活中發芽。我們相信好的產品可以伴隨人們多年,進而影響大家的生活習慣。 我們的工作核心,就是將「樂趣」帶到每一個人的身邊。無論是外地工作的女兒,透過《Walkr》收到父母的能量記錄來確認彼此健康;《植物保姆》陪伴小女孩在醫院裡枯燥的治療時光;或是透過《記帳城市》學習理財,真實地在現實生活完成了夢想。 我們知道,一定還有很多有趣又動人的故事默默發生在這千萬人中。 一個充滿樂趣的產品,伴隨著人們長大,成為回憶的重要核心。我們都相信,這些故事都是這千萬使用者中,最重要的那些體驗,是我們和我們的使用者們共同擁有的回憶。

    About SPARKFUL | SPARKFUL
  • [JS]テキストにSci-Fi styleのかっこいいアニメーションのエフェクトを与えるスクリプト -Text Effects

    ランダムな文字を次々に表示し、一つのテキストを生成するSci-Fi styleのアニメーションのエフェクトを与えるjQueryのプラグインを紹介します。 Text Effects Text Effects -GitHub ※上記のアニメーションgifは軽量化のため、間引いてます。実際はもっと多くの文字列が高速に表示されます。 Text Effectsのデモ Text Effectsの使い方 Text Effectsのデモ テキストのエフェクトにはいくつかのバリエーションがあります。 上記のアニメーションgifのようなシンプルなエフェクトをはじめ、複数のテキストを使ってループで表示したり、逆からテキストを生成するリバースなどがあります。 Text Effectsの使い方 使い方は非常に簡単です。 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。

  • パパ活アプリ・サイトおすすめランキング15選!P活女子が比較【2024年最新】

    「簡単にパパと出会える」とよく使われているのがパパ活アプリ・サイトです。しかし色々なパパ活アプリ・サイトがリリースされたため数が多くどれが良いのか分かりません。 「パパ活」が初めての女子にとっては何より安全で、良いパパと出会えるアプリ・サイトを選びたいですよね。 そこで今回は、おすすめのパパ活アプリ・サイトや特徴・選び方・使い方について解説します。「パパ活アプリ・サイトに登録してみたいけど、ちょっと怖い…」「安全にパパ募集したい」と感じている方はぜひ参考にしてみてください。

    パパ活アプリ・サイトおすすめランキング15選!P活女子が比較【2024年最新】
  • svgweb - Project Hosting on Google Code

    Code Archive Skip to content Google About Google Privacy Terms

  • CDN performance in numbers - CDNperf

    Information All results are based on RUM (Real User Metrics) data from users all over the world We gather and analyze more than 300million tests every day A 2500 millisecond timeout is set. If a query takes longer, its marked as timeout The data is updated once per hour. Use perfops.net to get real-time data "Performance" is the time it took for a user to download a 500byte image from a CDN. Durin

    CDN performance in numbers - CDNperf
    kuracom
    kuracom 2013/07/05
    JSやCSSを提供するCDNサービスの死活や遅延を視覚化しているサイト。Googleスゲー…
  • ScaleOut | Supership

    2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 件に関する詳細は、プレスリリースをご確認ください。

    ScaleOut | Supership
  • The js1k Experience

  • JavaScript でのローカル ファイルの読み込み - HTML5 Rocks

    Read files in JavaScript Stay organized with collections Save and categorize content based on your preferences. Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate the

    JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
  • jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法

    Sensebahnのサイト内では、ページを遷移するときにページ全体の更新ではなくページの一部を書き換える方法をとっています。(2013/1/31のデザイン変更で廃止しました。) そうすることで、ページ全体を読み込むよりも速く遷移でき、さらに、画面がブランクになる瞬間が発生しないので目のチラツキを抑えられます。 仕組みとしてはAjaxを使います。 AjaxはJavaScriptで簡単に使うことができます。 JavaScriptを使って、Ajaxによりページの一部を、他のページの内容に書き換えるのです。具体的には、次のコードでやります。 example.html <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <scri

    jQueryだけで(Pjaxを使わずに)Ajax+pushStateする方法