三章第二回 イベントリスナ — JavaScript初級者から中級者になろう — uhyohyo.net
三章第二回 イベントリスナこのページの最終更新日：2017年8月1日 addEventListener前回はJavaScriptから要素にイベントを登録する（イベントが起こったとき関数が呼ばれるようにする）方法として、イベントプロパティによる方法を紹介しました。 しかし、それは諸々の点から推奨されない方法でした。今回はよりDOM的にイベントを登録する方法としてaddEventListenerを紹介します。 <!doctype html> <html> <head> <title>test</title> </head> <body> <p id="abcd">test</p> <script type="text/javascript"> function aaa(){ console.log('aaa!'); } var p = document.getElementById('abcd
要素リストをループで回して addEventListener するみたいな、よくあるサンプルを断罪してみる - hogehoge @teramako
function setButtonHandler () { var buttons = document.querySelectorAll(".hogeButton"); for (var i = 0, len = buttons.length; i < len; ++i) { (function(n) { buttons[i].addEventListener("click", function() { alert(n); }); }(i)); } } って感じのコードってあるじゃないですか。JavaScript で陥りがちな落とし穴を解決するみたいな感じで。 でも、これって本当は良いコードじゃないよね。 (function(n) {.... }(i)) が格好わるいっていうか、毎回即時関数実行かよっていうね click のハンドラーも同じコードなのにループ数分生成しちゃってるよねー
addEventListener()－JavaScript入門
HOME JavaScript入門 addEventListener() 前のページで見た方法では、同じイベントに対して処理を追加するということができません。 一番最後に指定したものが適用されます。処理を追加登録する場合は、addEventListener()を利用します。 DOM要素にイベントを指定すると上書きになる 下のサンプルをご覧下さい。HTMLのタグのonclick属性で関数fnc1を呼び出すようにしています。 そこにJavaScriptを使ってonclickイベントに関数fnc2を呼び出すよう記述しました。 果たして結果はどうなるでしょうか？ <form> <input type="button" id="ev" value="イベント発動" onclick="fnc1()"> </form> <script> var obj = document.getElementById
JavaScript（jQuery）でhtmlをインクルード
JavaScript（jQuery）を使って外部に設置したhtmlファイルをインクルードさせるサンプルです。 ヘッダーやフッターなどの共通パーツを外部ファイル化することで、メンテナンス性が高くなります。 反面、JavaScriptで動的に生成するため、Googleのクローラーは認識しませんので、その対策が必要になります。 個人的には、とりあえずウェブマスターツールでサイトマップxmlを送信しとけば最低限は何とかなるかなって感じです。責任は持てませんけど。。 ※このサンプルはjQueryと jquery.cookie が必須になりますので、以下からダウンロードするか、CDNを読み込むなりしてください。 本家jQuery GitHub（https://github.com/carhartl/jquery-cookie） HTML ベースとなるhtml <!DOCTYPE html> <html
【JavaScript】ヘッダーなど共通部分を外部化してメンテナンス性を高めよう | affiliate.ks-product
affiliate.ks-product アフィ収入月10万円以下の初心者を対象に、アフィリエイト、SEO、セールスライティング、マーケティングなどネットで安定して稼ぐ方法を分かりやすくまとめています！関連書籍のレビューも書いています 近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上の為にヘッダー、フッター、グローバルナビゲーション等、各ページの共通部分は外部ファイル化してインクルード（読み込み）することが多いと思います。 しかし、WordPressやMovableTypeが使えない、ましてやPHPなどのサーバーサイド言語が使えない案件も多いかと思います。そこで紹介するのが今回のテクニックです。 サーバーサイド言語が使えなくてもJavaScriptがあるじゃない 共通部分の外部化・インクルードはサーバーサイ
JavaScript超初心者向け Meteor メモ (1) - Qiita
Meteorとは? Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。 node.jsをベースとしたフルスタックフレームワークで、サーバサイドの処理も、データベース処理も、クライアントと同様に全てjavascriptで書くことができます。 大体、こうしたものは、お作法覚えるまでが大変で初心者泣かせだったりするのですが、Meteorは 初心者に鬼フォーカスしてる 点が特徴だと思っています。 はじめるには? 2014.12.19更新 本家Tutorial Meteor 1.0のリリースに伴いチュートリアルサイトもできました！ 英語ですが、こちらを進めるのが良いと思います。 リアルタイムWebアプリケーションフレームワークMeteorについて 良記事です！ Meteorを勉強するモチベーションが高まるとおもいます。 フルスタックJSフレームワークMeteorのメリット＆
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでHTMLタグを削除する正規表現 - Qiita