2018-06-16から1日間の記事一覧

JavaScript入門 CSSのプロパティを操作

#sample2{display:none; } #sample3{position:absolute;} こんにちは。レモンティーです。今回はJavaScriptでCSSのプロパティを操作してみます。↓のように要素を取得して、.style.プロパティ = 値 とすればOKです。 let x = document.getElementById("testId…

JavaScript入門 タイマーで定期的に処理 setIntervalでn秒ごとに処理してclearIntervalで停止

こんにちは。レモンティーです。今回は定期的な処理と、その停止です。使うのはsetIntervalとclearIntervalです。 var timer; //開始 timer = setInterval("関数()",間隔); //停止 clearInterval(timer) あああああ開始 停止 サンプルのコードはこれです。 H…

JavaScript入門 画像を動的に変更

こんにちは。レモンティーです。今回は画像を動的に変更します。使うのはgetElementByIdです。 let x = getElementById("testid"); これでimgタグを取得して、srcプロパティにある画像のPathを変更すればOKです。 サンプル サンプルのコードはこうなっていま…

JavaScript入門 n秒後に処理をする setTimeout

こんにちは。レモンティーです。今回はn秒待ってから処理を行います。使うのはsetTimeoutです。 setTimeout("関数()",待機時間); ミリ秒単位で待機時間をきめてあげれば、 そのぶん待ってから関数を発火させてくれます。3秒待つサンプルサンプルのコードは…

JavaScript入門 別のウインドウでページを開く

こんにちは。レモンティーです。今回はJavaScriptを使って別窓でページを開きます。使うのは window.open("URL","ウインドウ名","その他の情報"); です。その他の情報というのは 表示位置の情報やスクロールバーの有無などです。例えば "width=640,height=48…

JavaScript入門 乱数を使う Math.random()

こんにちは。レモンティーです。今回は乱数をつくります。使うのはMath.randpmです。 let rnd = Math.random(); これで0以上1未満の乱数を取得できます。サンプル切り上げと組み合わせてサイコロにしてみます。 サイコロコードはこんな感じです。 HTML <button type="button" onclick="showRnd()">サ</button>…

JavaScript入門 n乗、n乗根、四捨五入 Math

こんにちは。レモンティーです。今回はJavaScriptで n乗、n乗根、四捨五入、切り捨て、切り上げ などを計算します。 n乗 n乗根 円周率 四捨五入 切り捨て 切り上げ n乗 Math.pow(A,n); n乗根 Math.sqrt(A); 円周率 Math.PI; 四捨五入 Math.round(A); …

JavaScript入門 ダイアログを表示する alert confirm prompt

こんにちは。レモンティーです。今回はJavaScriptでダイアログを表示します。今回扱うのは ・OKボタンのみのalertダイアログ ・OK、キャンセルの二択のconfirmダイアログ ・入力を受け付けるpromptダイアログ の三つです。 alert confirm prompt alert OKボ…

JavaScript入門 基本文法

こんにちは。レモンティーです。今回はJavaScriptの基本文法です。 (概念自体は知っている前提です) 数値、文字列、コメント 変数、定数 条件分岐 繰り返し 関数 配列 数値、文字列、コメント 数値の演算はよくある + - * / % です。文字列もよくある "aiu…

JavaScript入門 はてなブログでJavaScriptを使う

こんにちは。レモンティーです。今回はJavaScript入門です。JavaScriptを使えば、はてなブログでも動的な仕掛けを簡単に作れます。 見たまま記法以外ならJavaScriptのコードを直に書いて動かせるのです。さっそくやってみます。試しにここをクリックしてくだ…

JavaScript入門 テキストやタグの動的な書き換え

こんにちは。レモンティーです。今回はテキストやタグを動的に書き換えます。使うのは次の2つです。まずdocument.getElementByIdで変更の対象を取得します。 let x = document.getElementById("test"); 次に取得した対象にinnerHTMLで変更を加えます。 x.in…

JavaScript入門 別のページへの遷移

こんにちは。レモンティーです。今回は別のページへの遷移です。使うのは location.href = "URL" です。↓のボタンを押すとhttp://www.example.comに遷移します。サンプル コードはこうなっています HTML <button type="button" onclick="jump()">サンプル</button> JS <script> function jump(){ location.href = "htt</script>…

JavaScript入門 文字列から数値に変換 parseInt

こんにちは。レモンティーです。今回は文字列から数値への変換です。使うのはparseIntです。 let number = parseInt("text"); これで文字列を数値に変換できます。 + サンプルのコードはこんな感じです。 HTML <form name="F1"> <input type="text" name="T1" value="1">+<input type="text" name="T2" value="1"> <input type="button" value="合計を計算" onclick="sum()"> </form> JS <script> function …