Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery | IT工房｜AI入門とWeb開発
今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。（中級者向け） モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のページを隠します。そして、画像などを表示する領域をブラウザの中央部に置くものです。 代表的なものにLightBoxがあります。 今回のサンプルの表示内容は画像ではなくて、同じドメインに存在する他のHTML文とします。 これをAjaxを活用して読み込みます。 さらに、読み込んだHTML文内のリンク先をAjaxを活用して読み込む方法です。 サンプル 見出しをクリックするとモーダルウインドウが表示されます。モーダルウインドウに表示されたh1にはリンクの設定をしています。この部分をクリックするとajaxを使用して同じ場所にリンク先が表示される仕組みのものです。 HTML <dl> <
PhotoSwipeプラグインの使い方！スマホサイトのギャラリーに使える！ | SHINGO IRIE
スマホサイト向けのサイトで、写真をたくさん見せたい時に使えるライブラリ「PhotoSwipe」が便利です。タッチすると全画面で表示して、次へ次へとスワイプも可能です。 PhotoSwipeの使い方各ファイルをダウンロードまずはPhotoSwipe公式サイトから、ファイル一式をダウンロードします。 Script/CSSファイルを読み込み<link href="photoswipe.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="klass.min.js"></script> <script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script> 起動<script> (function(window, Pho
socket.ioで特定ユーザーにemitしたい時 - ぶれすとつーる
最近socket.ioがメジャーバージョンになって少しかわって 今まで io.sockets.socket(id).json.emit('msg', send_msg); みたいな感じでかけてたのですがsockets (namespace)がsocketメソッドを持たなくなってて、「 あれ特定ユーザ探す方法なくね」って思ってたんだけどドキュメントよんでたら Each Socket in Socket.IO is identified by a random, unguessable, unique identifier Socket#id. > For your convenience, each socket automatically joins a room identified by this id. This makes it easy to broadcast messages
Firebug
Thank you, Firebug. You made the web amazing for all! The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of
jQuery入門講座 使い方-jQueryの高速化
索引 ├ 使い方 目次 └ バグノート(1) 1章：jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章：jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章：jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編：研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ cssア
イベント ≪ モーダル ≪ JavaScript ≪ Bootstrap3日本語リファレンス
HTML <p>show.bs.modal: <span id="showBsModal"></span></p> <p>shown.bs.modal: <span id="shownBsModal"></span></p> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く（Ａ）」ボタン"> 開く（Ａ） </button> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal" data-clickbotton="「開く（Ｂ）」ボタン"> 開く（Ｂ） </b
javascript入門／正規表現の使い方 | SONICMOOV LAB
のようにすればよいのですが、「先頭や末尾にある文字列か含まれるか」などある特定の条件でマッチするかを調べる為には正規表現を使わなくてはなりません。 正規表現は文字のパターンを記述する為の表現法です。 正規表現の使い方 基本的な書き方 matchを使った基本的なパターンマッチの書き方 修飾子 【修飾子編】大文字と小文字を無視するマッチなどのやり方 大文字と小文字を区別しない グローバルマッチ 複数行マッチ 組み合わせ ブラケット 【ブラケット編】特定の文字が含まれているかを探すためのやり方など ある文字を見つける ある文字以外を見つける ある範囲の数字を見つける ある範囲の数字以外を見つける ある単語を見つける メタキャラクタ 【メタキャラクタ編】数字や文字、タブなどのマッチのやり方 改行や行終端を除いて、単一の文字とマッチ 文字や数字とマッチ 文字や数字以外とマッチ 数字とマッチ 数字以外
JavaScript - Wikipedia
HTML中のJavaScript。scriptタグで囲まれている。 JavaScript（ジャバスクリプト）は、プログラミング言語であり、HyperText Markup Language（HTML）やCascading Style Sheets（CSS）と並ぶ World Wide Web（WWW）の中核技術の一つである。JavaScriptで書かれたプログラムはHTMLやCSSと同様に、ウェブサービスのクライアントであるウェブブラウザ上で解釈、実行される。 プロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。 利用される場面はウェブサイト、ウェブアプリケーション、バックエンド、デスクトップアプリケーション、モバイルアプリケーションなど、ウェブブラウザからサーバ、デスクトップパソコンからスマートフォンまで多岐にわたっている。
NodeとSocket.IOで作るルーム機能つきチャットのサンプル - console.lealog();
というわけで、最近勉強してたSocket.IOでサンプルを作りました。 このソースをまるごと持って行ってIPなりポートなり調整すれば動くはずです。 おかげでロジック自体はシンプルになったけど、使い勝手云々いじると必然的にクライアント側のコードが多く・・。 今回は久しぶりにjQueryも使ってます。 仕様 部屋とニックネームを決めて入室し、その部屋でリアルタイムチャット 違う部屋の内容は見れない エンターキーでPOSTできる 一回入った部屋を出て、違う部屋に入れる スマートフォンでもキレイに見れる システムメッセージとユーザーのメッセージは住み分ける などなど。 ソース Html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
Recruit Tech Blog | 株式会社リクルート
株式会社リクルート エンジニアコース新人研修の内容を公開します！（2025年度版） 2025.08.28 新人研修
Socket.IOについてのメモ - y's note
公式のドキュメントが個人的に分かりにくいので自分がよく使っているものを備忘録を兼ねてまとめてみました。 バージョンは執筆時点の最新版であるVer1.3.5です。 それ以外のバージョンでは上手く動かないことがあるので注意してください。 Socket.IOのインストール方法 node.jsのスクリプトファイルがあるディレクトリ（フォルダー）に移動し、 $ npm install socket.io サーバーへの接続方法 サーバー側 //前略 var port = 80; var ip = 'localhost'; var io = require('socket.io')(app.listen(port,ip)); //クライアントとの接続に成功するとconnectionイベントが発火する io.on('connection',function(socket) { console.log('c
いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜
こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。 さてみなさん「Node.js」って知っていますか？ 僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。 ▼2020年最新版はこちら！ Node.jsとは 一言で言うとアツいJavaScriptです。 通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。 例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスし
Node におけるスケールアーキテクチャ考察(Scale 編) - Block Rockin’ Codes
[追記] 途中までは Node での複数プロセス起動、プロセス間通信等について書かれていますが、後半は自分が前回の記事 を書くにあたって自分が考えてたことを少し強引に広げて書いた個人的な妄想が多く含まれ、Node におけると言っときながら、後半は Node 関係ない感じになってしまいました。 正直まだ分かっていないことが多いです。変なところをどんどん指摘していただけるとむしろ嬉しいです。 Node におけるスケールアーキテクチャ考察(SSP 編) - Block Rockin’ Codes の続きです。 もともと何となく結論があって書き始めたんですが、書きながら色々調べているうちによくわからなくなりました。 まだまだ調べたらないことがわかったので、とりあえず今わかっているところまで書きます。 結局何がいいたいのかよくわからない感じかもしれないけど、ゴールは SSP のバックエンドの Nod
JavaScript Reference - MDN
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子数値と文字列日付と時刻の表現正規表現インデックス付きコレクションキー付きコレクションオブジェクトの利用クラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターリソース管理国際化JavaScript モジュール中級編Advanced JavaScript objectsAsynchronous JavaScriptClient-side web APIs言語概要JavaScr
ふじこのプログラミング奮闘記
jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも（ｏ´ω｀ｏ）ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素（DOM）を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング（「伝達」とでも言うのかな）です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;
jQuery リファレンス：stopImmediatePropagation
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
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; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - socketio/socket.io-client: Realtime application framework (client)
Loading...
encoding.js/README_ja.md at master · polygonplanet/encoding.js
