JavaScript
開発環境は、Windows 7 Professional(32bit)。1.公式サイトへアクセスする。 Node.js 2. 8.11.1 LTSと書かれたボタンをクリックする。インストーラがダウンロードされる。 3. ダウンロードしたnode-v8.11.1-x86.msiを実行し、インストールする。 4.コマンド…
開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。下記の例だと、黒い四角内をクリックすると『親要素』というアラートが表示され、赤い四角内をクリックすると『子要素』→『親要素』と2回アラートが表示されてしまう。HT…
開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。ボタンをクリックすることでページの下部に、メッセージを3秒間させるアニメーションを作成する。heightが0pxなので、読み込んだ時点では、Message部分は見えない。HTML…
開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。最大5つの黒丸のxとyの位置を最初に決めておいて、描画し、そこから、100ミリ秒単位で、描画をすべて消して、xとyの位置をそれぞれ、ランダムで、-1,0,1のどれか加えて変…
例えば、liタグの中の要素を1つずつ抜き出して配列に入れることを想定する。 var str = "<li>test</li><li>test2</li><li>test3</li><li>test4</li>"; str.match(/<li>(.*)<\/li>/); 実行結果 Array [ "<li>test</li><li>test2</li><li>test3</li><li>test4</li>", "test</li><li>test2</li><li>test3</li><li>test4" ] この場合だと文字列中で、最初にマッチしてから</li>…
object-fit-imagesというJavaScriptファイルを用いて実現します。1.下記のサイトへアクセスする GitHub - bfred-it/object-fit-images: 🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ... 2.右側の緑の『Clone or download』を…
1.公式サイトへアクセスする AngularJS — Superheroic JavaScript MVW Framework 2.『DOWNLOAD ANGULARJS』をクリックする 3.青い『Download』ボタンをクリックすると、Angular.jsのコードが表示されるので、 コピペして、『angular-1.6.9.min.js』(ダウンロ…
開発環境は、jquery-3.2.1.min.js。マウスカーソルを合わせた*部分を、太字にして、話したら、元に戻す。 『liが先頭に追加』ボタンをクリックすると、先頭に、青い*が追加され、『liが末尾に追加』ボタンをクリックすると、末尾に、赤い*が追加される。 か…
【問題】スクロールした途中で、一番上まで戻るようにする ・id属性がright-bottom-naviの部分をクリックすると上まで戻るようにする。 【解決】 $(function(){ $('#right-bottom-navi').on('click',function(){ window.scrollTo(0,0); }); }); 上記のコード…
開発環境は、Windows 7 Professional(32bit) + Firefox 58.0.2(32bit)です。複数の同じclass属性のボタン要素があったときに、どこか1箇所にマウスホバーすると同じclass属性の全部のボタンが変化してしまいます。それを防いで、マウスホバーした1箇所のみ変…
開発環境は、Windows7 Professional(32bit)+firefox 57.0.2(32bit)+jQuery3.2.1。 <html lang="ja"> <head> <meta charset="utf-8"> <script src="jquery-3.2.1.min.js"></script> <style> </style> <script> var s_count = 0; var m_count = 0; var h_count = 0; $(document).ready(function(){ $(function(){ se…</meta></head></html>
開発環境は、Windows7 Professional(32bit)+firefox 57.0.2(32bit)+jQuery3.2.1。 <html lang="ja"> <head> <meta charset="utf-8"> <script src="jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ var canvas = $("#rect")[0]; if(canvas.getContext){ var context = canvas.getContext('…</meta></head></html>
JavaScriptでグローバル変数を関数の引数として渡したときに思ったような挙動にならないのでおかしいな？と思って調べたら、JavaScriptにおいて関数の引数は、ローカル変数になるようだ。調べたところ、対処法が書いてあったのでメモ。 var global = 0; func…
