JavaScript

Vue.jsを使う

開発環境は、Windows 7 Professional(32bit)。vue-cliがインストールされていることが前提。 vue init テンプレート名 プロジェクト名を入力する。プロジェクト名で指定したディレクトリが作成されて、テンプレート名で指定したものでディレクトリ内にプロジ…

JavaScriptで値渡しと参照渡しについて

開発環境は、Windows7 Professional(32bit) + Firefox 61.0.1(32bit)。値渡し - 値を変更しても元のデータは変わらない let x = 10; let y = 12; y = 12; console.log(y); // 12 console.log(x); // 10 参照渡し - 値を変更すると元のデータが変わってしまう…

Reactを使う

開発環境は、Windows 7 Professional(32bit) + Node.js v8.11.1。 ※Node.jsがすでにインストールされていることが条件です。1.コマンドプロンプトを実行し、以下のコマンドを実行する npm install -g create-react-app2.次にカレントディレクトリを移動し、…

JavaScriptでタイマー機能を使って数字のカウントを見せる

開発環境は、Windows 7 Professional(32bit)例えば、査定サイトで査定価格の金額を0円から査定価格までタイマーで動かして見せる動作を加えるとする。0円から査定価格の1/10ずつ増やしていって、査定価格に達したら、査定価格と切り替えてタイマーを破棄する…

PHPとJavaScript間でJSON形式でデータの受け渡しをする

開発環境は、Windows 7 Professional(32bit)+XAMPP v3.22+PHP 7.1.7。PHP側 json_encode関数は、連想配列をjson形式に変換する関数。失敗すればfalseを返す。 PHP側もJavaScript側も文字コードはUTF-8で保存すること。 100, "orange" => 80, "grape" => 200…

emojioneを使う

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。1.サイトへアクセスする GitHub - emojione/emojione: EmojiOne™ is the open emoji standard. #iwantemojione 2. /lib/js/emojione.min.jsへアクセスし、コピペしてemoj…

jQueryでウィンドウの幅を調べる

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。HTML側 <div id="size"></div> <div id="size2"></div> jQuery側 $(window).on('load resize',function(){ $('#size').html('windowの横幅:' + $(window).width()); $('#size2').html('スクロールバーも含めたwindow…

WindowsでNode.jsを使う

開発環境は、Windows 7 Professional(32bit)。1.公式サイトへアクセスする。 Node.js 2. 8.11.1 LTSと書かれたボタンをクリックする。インストーラがダウンロードされる。 3. ダウンロードしたnode-v8.11.1-x86.msiを実行し、インストールする。 4.コマンド…

JavaScript(jQuery)で親要素と子要素のイベントが被らないようにする

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。下記の例だと、黒い四角内をクリックすると『親要素』というアラートが表示され、赤い四角内をクリックすると『子要素』→『親要素』と2回アラートが表示されてしまう。HT…

jQueryのanimateを用いてページ下部にメッセージを表示させる

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。ボタンをクリックすることでページの下部に、メッセージを3秒間させるアニメーションを作成する。heightが0pxなので、読み込んだ時点では、Message部分は見えない。HTML…

javascriptで黒い丸をランダムに動かす

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。最大5つの黒丸のxとyの位置を最初に決めておいて、描画し、そこから、100ミリ秒単位で、描画をすべて消して、xとyの位置をそれぞれ、ランダムで、-1,0,1のどれか加えて変…

JavaScriptの正規表現で当てはまるすべてのパターンを抜き出す

例えば、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>…

CSSのobject-fitをIEにも対応できるようにする

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』を…

AngularJSを使ってみる

1.公式サイトへアクセスする AngularJS — Superheroic JavaScript MVW Framework 2.『DOWNLOAD ANGULARJS』をクリックする 3.青い『Download』ボタンをクリックすると、Angular.jsのコードが表示されるので、 コピペして、『angular-1.6.9.min.js』(ダウンロ…

jQueryのonメソッドでマウスホバーをし、動的に生成されたものにも適用する

開発環境は、jquery-3.2.1.min.js。マウスカーソルを合わせた*部分を、太字にして、話したら、元に戻す。 『liが先頭に追加』ボタンをクリックすると、先頭に、青い*が追加され、『liが末尾に追加』ボタンをクリックすると、末尾に、赤い*が追加される。 か…

jQueryで詰まった部分

【問題】親要素や兄弟要素を指定する 【解決】 ・指定した要素の親要素を指定する場合は、closest()メソッドを用いる。closest("親要素名や親要素のclass,id属性名")で直近のその要素や属性を指定できる。 ・指定した要素の前や後の兄弟要素を指定する場合は…

jQueryで複数の同じclass属性の要素からマウスホバーされたもの1つだけを選択する

開発環境は、Windows 7 Professional(32bit) + Firefox 58.0.2(32bit)です。複数の同じclass属性のボタン要素があったときに、どこか1箇所にマウスホバーすると同じclass属性の全部のボタンが変化してしまいます。それを防いで、マウスホバーした1箇所のみ変…

Javascript(jQuery)でタイマーを作る

開発環境は、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>

javascript(jQuery)で四角形と円の当たり判定をする

開発環境は、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でグローバル変数を関数の引数として渡したときに思ったような挙動にならないのでおかしいな?と思って調べたら、JavaScriptにおいて関数の引数は、ローカル変数になるようだ。調べたところ、対処法が書いてあったのでメモ。 var global = 0; func…