JavaScript
今後のために、学習に役立つサイトを記述しておきます。 developer.mozilla.orgMozilla Developer Centerの日本語訳サイト。分かりやすいかは別にして、情報量は一番だと思います。 一撃必殺JavaScript日本語リファレンスサンプルが充実しているので理解しや…
マウスをクリックするとボタンが作成されます。作成されたボタンをクリックすると、アラートウィンドウ [ cliked:button 番号 ] が表示されます。 アラートウィンドウ ソース <html lang="ja"><head> <meta charset=UTF-8"> <title>ボタンを作成</title> <style> html,body,h1 { margin: 0; padding: 0; } h1{ width:490px; fon</meta></head></html>…
犬がカーソルを追いかけるプログラムを作成します。 ソース <html lang="ja"><head> <meta charset="UTF-8"> <title>犬がカーソルを追いかける</title> <style> #area{ position:absolute; background-color:#fff; left: 0px; top: 10px; width: 1600px;/*犬が動く範囲 横*/ height: 700px;/*犬が動く範囲 縦*/ } #dog{ position</meta></head></html>…
正円の面積を求める関数 <html lang="ja"><head><meta charset="utf-8"><title>正円の面積を求める関数</title><script>function circle(){ var pai = 3; var r = prompt('半径を半角で入力してください。'); var area = Math.pow(r,2) * pai; //Math.pow(r,2)は、rの2乗を返す console.log(area); var out1 = '半径'+r+'mの正円</meta></head></html>…
パターン1の処理概要 最初から開いているパネルは1つのみです。他のパネルを選択すると開いているパネルは閉じて、選択したパネルが開きます。開いているパネルを再度選択しても開いているままで閉じません。 パターン1のプログラム <html lang="ja"><head><meta charset="utf-8"><meta http-equiv="Content-Style-Type" content="text/css"><meta http-equiv="Content-Script-Type" content="text/javascript"><title>…</meta></meta></meta></head></html>
DOMの利用 ウィンドウに表示されたドキュメントの操作はdocumentオブジェクトで行います。documentオブジェクトは多くのプロパティとメソッドを公開していますが、より標準的なDOMを利用するようにします。 ノードを作成する 要素ノードを生成 document.crea…
連想配列とは 通常の配列はインデックス番号で値を管理していますが、連想配列はわかりやすい名前などを付けて管理することができます。連想配列では、付けた名前(インデックス)のことをキーと呼びます。 連想配列の作成 var 連想配列名 = { キー名1:値, キ…
Document Object Modelとは HTMLの各要素に直接アクセスする仕組みです。 ブラウザがHTMLのソースを読み込むと、それを元にWebページを構成するすべてのタグをDOMオブジェクトとして再構築します。このDOMを操作することでWebページにアクセスすることができ…
Dateオブジェクトとは 現在の年、月、日、曜日、時、分、秒を取得したり設定したりできます。 Dateオブジェクトの生成は以下の記述で行います。 var date = new Date(); Dateオブジェクトのメソッド var myYear = date.getFullYear();// 年var myMonth = dat…
Mathオブジェクトとは 数学の演算を行うメソッドです。 Math.random Math.random()は、0～0.9990...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.round()は、小数点以下を四捨五入するメソッド…
関数とは 複数の処理をまとめたもの。 何回も同じことをする処理をまとめることでコーディングの無駄を省くことができる。また、ソースコードがすっきりして見やすくなる。 関数の定義 function 関数名() { 処理; } 関数の呼び出し 関数名(); 関数の練習 お…
配列とは 変数と同じ箱の役割がありますが、変数と違うところは複数の値を入れることができることです。仕切りのある箱と考えます。 宣言の方法 var 変数 = new Array ( 値1, 値2, ・・・ ); 変数：配列名 new：new演算子 値：整数、文字、関数、オブジェク…
while文でselectボタンを作る <select><script>var i = 2;while( i <= 20 ) { document.write('<option value="i">'+i+'個</option>'); i += 2;}</script></select> 結果 for文でselectボタンを作る <select><script>for(var i = 2; i <= 20; i+=2){ document.write('<option value="i">'+i+'個</option>');}</script></select> 結…
while文 条件式が真なら{ }内の処理を繰り返します。 書式 while( 条件式 ) { 繰り返す処理 } 条件式：if文と同様に真(true)・偽(false)で表せる値や式 繰り返す処理の中に条件式が偽になる処理を必ず入れます。そうしないと無限ループになってしまいます。 …
switch文とは 数値または文字がラベルと同じかどうかを判断し、同じだった場合その部分処理だけ実行します。 if文と違い条件式は書けません。 処理のあとのbreak文は必ず入れます。break文がないとすべてのcaseを判断してしまいます。無駄な処理を行うだけで…
イベントハンドラとは マウスポインタが「上に乗った」、「クリックされた」というような出来事のことをイベントといい、そのイベントに応じて何かを実行させるプログラミングモデルのことをイベントドリブンといいます。イベントハンドラはイベントに対して…
プログラムリスト 和暦を西暦に変換するプログラム 偶数・奇数の判別プログラム 標準体重を求めるプログラム 男性か女性かの入力をして標準体重を求めるプログラム 季節を求めるプログラム 和暦を西暦に変換するプログラム <body><script type="text/javascript">var heisei;var fullyear;var mess</body>…
if文 条件の一致ー＞真：true 条件の不一致ー＞偽：false if文 if ( 条件 ) { 条件が真であれば実行される処理 } if else文 if ( 条件 ) { 条件が真であれば実行される処理 } else { 条件が偽であれば実行される処理 } if else if文 if ( 条件１ ) { 条件１…
JavaScriptとは？ Webブラウザー上で動作するスクリプト言語であり、ソースコードを上から順に１行１行実行するインタープリタ方式の言語です。 変数 変数は箱と考えます。箱の中にはいろいろな値を入れることができます。 値：数値、文字列 変数につける名…
