<a href="#">文字</a> とすると、文字の下に線が入って気持ち悪い。 ➡CSSでtext-decoration:none;とすると消える。 画像クリックで画像を拡大表示する場合。 ➡<a href="~~.html"><img src="./images/gazou.jpg" alt="これをクリックすると拡大"></a> として、htmlファイルを別に用意することで拡大させる事が出来る。
ajaxの定義 1,XHTMLとCSSを利用したWeb標準での画面構成にする。 2,DOMを使用してイベントに連携した動的な画面表示を行う。 3,XMLとXSLTを仕様したデータ交換と操作を行う。 4,XMLHttpRequestを使用し、非同期でサーバとのメッセージ交換を行う。 5,JavaScr…
Ajaxって何？ AjaxとはAsynchronous JavaScript + XMLの略で、ブラウザに搭載されているJavaScriptの機能を利用し、サーバーから送られてくるXMLなどのデータを非同期でやり取りする手法。簡単に言えば、ページ遷移なしに画面の切り替えが出来るというもの。…
出来上がりはこんな。 切り替え前↑ 切り替え後↓ 簡単な説明。 文字数が多いと画面の領域を多く使ってしまうので「文頭のみ」を表示させたい時などに使う。ボタンの切り替えで全文、文頭の双方が表示可能。 普通ならこんな手順で考える？ 1.まずは全文が表示…
出来上がりはこんな感じ。 ⬇親要素をクリックして開くと... 説明とソース <html lang="ja"> <head> <meta charset="UTF-8" /> <title>プルダウンメニューを作る</title> </head> <body> <h1>プルダウンメニュー</h1> <div style="display:none;" onclick="clickMenu(event,this);"> 親メニュー１ <div style="display:none;" onclick="clickMenu(event,this);"> 子メニュー１…</div></div></body></html>
出来上がりはこんな感じ。 仕様。 １０枚の画像を並べて表示させる。その画像をクリックすると、拡大領域にクリックされた画像が表示される。クリックされた画像には周りに、色付きのボーダーをつけ、拡大された画像がどれなのか分かりやすくする。手順。 1.…
mouseover="selectPhoto(this);のようにthisが頻繁に出てくるが、いまいちよく分からない。 調べてみると... 「thisキーワードは実行中のコードが「自分自身」を表すオブジェクトにアクセスするためのキーワードです。」 と書いてある。 やっぱりオブジェク…
Dynamic HTML 簡単に言うと、JacascriptによるWebコンテンツの動的な書き換えのこと。Javascriptが広く普及した要因となるもの。 単にページが表示されるだけの、静的なHTMLに対し、Javascriptやcssを使ってwebページ自体の内容を書き換える技術を言ったりも…
前回と違う点。 ・画像を用いて、神経衰弱を作ってみる。 ・シャッフル・降参ボタンを追加。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>神経衰弱２</title> </head> <body> <h1>神経衰弱ゲーム</h1> <table> <tr> <td> <img src="./images/case03_surface.png" id="card_0" onclick="showCard(0);"> </td> <td> </td></tr></table></body></html>
仕様。 １６個のマスの０〜７までの数をペアでランダムに入れる。 ２個開いたとき正解だった場合は、その２つの数字を表示された状態にする。 ２個開いたとき不正解だった場合は、２つの数字を再び隠した状態にもどす。 タイマーを使ってスコア表示を行う。…
補足内容。 1...１番目に選ばれた人と２番目に選ばれた人が同じだった場合の処理が抜けていた。 2...もし入力された人数が、一人以下だった場合の処理が抜けていた。まず、１から修正。（p1 = p2）となってしまった場合、もう一度ランダムに組み直させる。do…
仕様。 参加人数を入力しボタンを押すと、予め用意された命令が「〜が〜に対して〜をやる」のように表示される。手順。 1.画面を作る。 2.命令を配列に格納する。 3.格納した命令をランダムに取り出せる処理を書く。 4.ランダムに１番目に一人選ぶ処理を書く…
仕様。 入力された支払額と人数を取得させ、計算ボタンを押すと、計算結果が表示される。ぴったり払えない場合は、いくら払った時、いくら余る。いくら払った時、いくら足りない。という結果が出る。（１人あたりの支払いは１００円単位） 手順。 1.画面を作…
仕様。 ➡自分の誕生日(19**-**-**という風に)を入力し、ボタンを押すと、産まれてからの日数と歳を表示してくれる。手順。 1.画面を作る。 2.現在の時間と生まれた日の時間を取得。 3.2の二つを引く。（経過時間を得る。） 4.ミリセカンドで表示されてしまう…
仕様 ・１〜９までの数字をランダムに表示させ続ける。 ・ストップボタンを押すことで、数字を止める。 ・３カ所、ランダム表示させる。 ・そろった個数のアラートを表示させる。手順 1.画面を作る。 2.一定の時間ごとにランダムに数値を表示させる処理を書…
仕様。 ・結果ボタンを押すと、ランダムに結果が表示される。手順。 1.画面を作る。 2.配列に表示パターンを格納。 3.ボタンを押すと、ランダムに配列から一つ要素を取り出す処理を書く。 4.結果を表示する処理を書く。説明＆ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>運勢</title> </head> <body> <h1>運勢ゲーム</h1> <input type="button" value="結果！" onclick="choice();"> <p></p></body></html>…
仕様 ・スタート、ストップボタンがある。 ・スタートを押し、ストップを押すと、どれほど正確に止められたかが表示される。手順 1.画面を作る。 2.スタートを押したときの処理をかく。 3.ストップを押したときの処理をかく。 4.５秒からのずれを計算する処…
仕様。 ・最初は0.0を表示。 ・スタート、ストップ、リセット機能がある。手順。 1.画面を作る。 2.スタートボタンを押したときの処理。 3.ストップボタンを押したときの処理。 4.リセットボタンを押したときの処理。説明＆ソース <html lang="ja"> <head> <meta charset="UTF-8" /> <title>ストップウォッチ</title> </head> <body> <div id="countup">0.0</div></body></html>…
＊＊＊よく使うし、その都度調べて、忘れがちで分かりにくかったのでまとめる。タイマー処理は２種類ある。 //setTimeoutの場合。 例：setTimeout(function { console.log('２秒たちました'); },2000); ➡一定時間後にある処理を行う。 //setInterval場合。 …
scriptで使う変数の書き方。 ・英字から書き始める。数字からは書けない。 ・予約語は使えない。(var, do, elseなど) 使える文字 ・英数字。$, _のみ。 var x = 0; var y = x++; alert(y); これはyにxを入れてからxに１をたすので実行結果は０となる。 var x…
ゲームの詳細。 ９個のランダムに表示された数字を小さいものからタッチしていき、スコアを競う。 手順 ・まず、９個の数字を入れるためのボタンを作る。 ・ランダムに９個のボタンに数字を割り振る。 ・ボタンに実際に数字を表示させる。 ・ボタンクリック…
配列変数：一つの変数が複数の箱を持ち、それぞれ番号で区別するもの。 オブジェクト：一つの変数の中に、複数の値を代入出来るもの。 ****オブジェクトの説明**** <title>test</title> <script type="text/javascript"> var aa = new Object(); aa.aaa = "test"; aa.b = 123; alert(aa.aaa); alert(aa.b); </script>…
----------仕様の確認---------- ・4×4の16マスにカードを配置する。 ・「シャッフル」と「降参」の二つのボタンを用意する。 ・カードは、「スペードの1~4」、「ハートの1~4」のカードをそれぞれ２組ずつ利用。予め3種類の配置パターンを決めておく。 ・任…
***準備 ・テキストエディタ ・ブラウザ（Chrome推奨） ***scriptを書く場所 htmlが完全に読み込まれてから処理させたいのでbodyの最後の部分に書く。 ***変数を使うときの宣言 変数を使うときは初めに var 変数名 と書き、新しくこの変数を使いますという宣…
