タグ

*JavaScriptに関するkjtecのブックマーク (51)

  • jQuery のバブリング、preventDefault() や stopPropagation() の使用例 | Tips Note by TAM

    2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される(バブリング) preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす

    jQuery のバブリング、preventDefault() や stopPropagation() の使用例 | Tips Note by TAM
    kjtec
    kjtec 2016/11/30
    何をやっても伝播してしまい積んでる…
  • JavaScript における 日本語入力 確定 (Enter) イベント

    JavaScript日本語入力 ON のときと OFF のときとで 確定入力 (Enterキー入力) を判別する方法についてまとめます。 検索ボックスなどのテキスト入力ボックスにおいて確定ボタンの組み合わせた UI を設計するとき、入力を簡易にするために Enterキー で確定を意味させたいと思うことがあります。 …が、日本語入力の Enter と 確定を意味する Enter をどのように判別すると良いか材料がないので、 ここではいくつかのブラウザでイベントがどのように発生しているかを調査しました。 実際に使えるようにした jQuery プラグイン は こちら に記載しています。 目次 各ブラウザの挙動 確定入力の判別方法 各ブラウザの挙動 日本語入力ON および OFF それぞれの状態で [a] → [Enter] と入力したときの動作の違いを以下にまとめます。 以下の表では、「数

    kjtec
    kjtec 2016/11/25
    キーイベント
  • 初心者向けのjQuery入門講座

    使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、サイトの更新は休止状態(2014年3月が最終更新)です。ゲーム制作に関するブログ:スマゲー作るよ!はほぼ毎日更新し

    初心者向けのjQuery入門講座
    kjtec
    kjtec 2016/11/18
    頭から読みたい
  • MDN Web Docs

    Resources for Developers, by Developers Documenting CSS, HTML, and JavaScript, since 2005. / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { { { { } } } } { { { { } } } } { { { { } } } } { { { { }

    MDN Web Docs
  • スマートフォンサイトのサムネイル付メニューのつくりかた。 | バシャログ。

    先日、大涌谷(別名:地獄谷)行き、極寒と硫黄の中、渾身の力で手に入れた黒たまごをべて寿命を7年延ばしてきました。こんにちは、mackyです。おかげさまで、なんだか妙にハイテンションな日々が続いています。 さて、そんな今日は、ブログ記事などにもよく使われているサムネイル付きメニューを、前回ご紹介した、スマホサイトの矢印付きメニューをCSSのみで実装する。と合わせて使うパターンでご紹介しようと思います。 アイコン付メニューをつくってみよう。 まずはHTMLを用意します。 HTML <ul> <li><a href="#"><img src="images/thumbs.png"><strong>【JavaScript】minami</strong>JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました

    スマートフォンサイトのサムネイル付メニューのつくりかた。 | バシャログ。
    kjtec
    kjtec 2016/11/11
    スマホ用メニュー作成のサンプル
  • JavaScriptで位置情報を取得する方法(Geolocation API)

    ユーザーの現在位置を取得現在位置を取得するサンプルデモを見るには、下記ページにアクセスして下さい。このブログがあなたの位置情報を取得してもいいか、という確認が表示されるので、許可すると、あなたの現在位置(緯度、経度の座標)の取得を開始、表示します。 サンプルデモを見る 現在位置を取得するには、ユーザーのブラウザが、Geolocation APIという機能に対応している必要があります。Geolocation APIとは、簡単に言うと、端末の位置情報をやり取りするシステムです。GPSに対応しているスマホだけでなく、現在位置を設定できるデスクトップPCでも利用可能です。 判別方法は簡単です。Geolocation APIに対応している端末の場合、navigator.geolocationというオブジェクトが最初から存在するので、これの有無で判別すればいいだけです。 JavaScript // G

    JavaScriptで位置情報を取得する方法(Geolocation API)
  • Socket.IO: the cross-browser WebSocket for realtime apps.

    Socket.IOBidirectional and low-latency communication for every platform PerformantIn most cases, the connection will be established with WebSocket, providing a low-overhead communication channel between the server and the client. ReliableRest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatical

    Socket.IO: the cross-browser WebSocket for realtime apps.
  • Socket.IO入門 (全10回) - プログラミングならドットインストール

    WebSocket周辺の技術を便利に扱うためのライブラリ、Socket.IOについて基的な使い方を学びます。

    Socket.IO入門 (全10回) - プログラミングならドットインストール
    kjtec
    kjtec 2016/10/25
    /2016年12月中に視聴するぞ!
  • node.js

    Download the Node.js source code or a pre-built installer for your platform, and start developing today. Current version: v0.10.25

    kjtec
    kjtec 2016/10/25
    ダウンロードページ
  • サーバサイドJavaScriptの本命「node.js」の基礎知識

    3/4補足 稿を見ていただいた皆さん、はてなブックマークなどでコメントいただき、ありがとうございます。話題のNode.jsということもあり、はてなブックマークも1000ユーザーを超えました。私の力不足もあり、いろいろな方からご指摘をいただいておりますので、Nodeのインストール方法については、近日中に次回記事で補足・訂正させていただきたいと思います。ご指摘ありがとうございます。非常に勉強になります。 Node.js 0.4をインストールしてみよう 稿では、Ubuntu 10.10に記事執筆時のNode.js 最新版(v0.4.0)をインストールします。 以下のコマンドをターミナルから実行し、Node.jsのソースコードをダウンロードします。

    サーバサイドJavaScriptの本命「node.js」の基礎知識
    kjtec
    kjtec 2016/10/25
    手順を参考にさせていただきました。
  • JavaScript 祭で発表してきました - 若くない何かの悩み

    秋のJavaScript祭 in mixi で、「バグの見つけ方」について発表してきました。 speakerdeck.com 過去二つのスライドをくっつけたものなので、既視感があるかもしれませんが気のせいです。 さて、前の発表を終えてから、いくつか直したかった点があったので、その点だけ修正してあります。 例えば、「ステップ実行」→「手動動作確認」のあたりですね。 ステップ実行でバグを見つけるというより、見て触っておかしいと気づいて、ステップ実行へ突入するはずですから、「手動動作確認」の方がふさわしいと思ったためです。 あと、次の2つの感想が特に嬉しかったです。ありがとうございました。 スライドめっちゃすてきだしリントやテストの大事さがすごくわかりやすい… #jsfes— nao (@naoi109) October 15, 2016 これまでの人生で一番簡潔に型検査やリントやテストの重要性

    JavaScript 祭で発表してきました - 若くない何かの悩み