PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザインの勉強と備忘録。Webサイト制作系の職業訓練を受けてます。

JavaScript

【JavaScript】 演習1

JavaScriptの演習をしました。 入力された数字から、条件で結果を表示する。 問題:8以上が合格 var num = prompt('半角数字で入力してください',''); num = parseInt(num); if(num >= 8){ document.write(num + 'は合です'); } else{ document.write(num +…

【JavaScript】 クロスフェード(jQueryのプラグイン)

jQueryのプラグインクロスフェードを使うことで、フェードして置換する事ができます。 jQueryの適応方法 jQueryをヘッドで読み込ませます。 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> クロスフェードプラグインを使う。 Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spank…

【JavaScript】ランダム関数

ランダム関数は、予測できない不規則な数値を表示させる関数です。 ランダム関数で乱数を表示する。 ランダム関数で乱数を表示します。乱数を表示させるためには「random()」を使います。 実行例 var num =Math.random(); document.write(num); 結果 結果は0…

【JavaScript】DOM

DOMはHTML文章をオブジェクトとして情報の取得する仕組みです。 DOMの操作を行うことで、HTMLの中身を変更することもできます。前提として、以下のHTMLを使います。 <html lang="ja"> <head> <meta charset="utf-8"> <title>プログラム実行テスト</title> </head> <body> <h1>プログラム実行テスト</h1> <p>第1段落</p> <p>第2段落</p> <p>第3段落</p> <script></script> </body> </html> 要素の内容…

【JavaScript】組み込みオブジェクト

組み込みオブジェクトはJavaScriptにもともと含まれているオブジェクトです。それを指定することで、様々な値を取得することができます。 時間を取得する 時間取得する組み込みオブジェクトを使って、現在時刻を表示します。 実行例(ソース) var d = new D…

【JavaScript】関数を呼び出して、イベントハンドラを操作する

関数を呼び出して、イベントハンドラを操作することができます。 実行例(ソース) ヘッド <script> function func(){ window.alert('画像をクリックしました'); } </script> ボディ <body> <p> <img alt="" src="img/#.jpg" onclick="func()"> </p></body>

【JavaScript】サムネイルを押すと、その画像に切り替える画像一覧

サムネイルにマウスポンタをのせるとと、下の大きな画像を切り替える画像一覧をつくります。 name属性を使い下の画像だけを変える 画像の置換の方法は前回の記事の方法を使います。大きな画像の中にname属性を入れることで、imgタグに指定してある画像を切り…

【JavaScript】 イベントハイドラを使い、CSSを使わないで、画像置換を行う

イベントハンドラを使うことで、CSSの擬似要素を使わずに画像置換を行います。 イベントハンドラの書き方 <img src="#.png" alt="" on...="'JavaScript'"> 「on...」はhtmlの要素で、onmouseoverやonclickなどがあり、その要素にJavaScriptを設定して書き込むことができます。 インハンドラで画像置換を行…

【JavaScript】 サイコロの奇数だけ表示する

サイコロの奇数だけを表示するには、for文、if文、剰余を利用します。 ソース for ( var i = 1 ; i <=6 ; i++){ if(i%2 === 1){ document.write('<img src="img/d' + i + '.jpg">'); } } 「i」の値が奇数だけをif文の中で処理できるように書いています。

【Javascript】 九九掛算表をつくる

JavaScriptを用いて九九掛算表をつくります 実行例(ソース) <html lang="ja"> <head> <meta charset="UTF-8"> <title>九九</title> <style> table{ border-collapse:collapse; } th,td{ border: solid 1px #666; width: 50px; } td{ text-align: center; } th{ background: #CCC; } </style> </head> <body> <table> <tr> <th></th></tr></table></body></html>

【Javascript】 関数

関数は一連の処理をひとまとめにして、名前をつけたものです。 書き方 関数のつけ方 function 関数名(引数を入れる変数){処理;} 関数の呼び出し方 関数名(引数を入れる変数); 引数を書く場合は括弧の中に。また書かなくても使えます。 関数の呼び出しは基本…

【JavaScript】 break文で繰り返しを制御

繰り返し処理中に条件に合致したあと、break文で繰り返し処理をとめることができます。 実行例(ソース) var tickets = [ 10, 20, 30, 40, 50 ]; for (var i = 0; i < tickets.length; i++) { if (tickets[i] > 30) { break; } console.log(tickets[i]); } …

【JavaScript】While文とFor文を使った繰り返し処理

繰り返し処理について学びます。 While文 While文では、継続条件式がtrue(条件に合致すること)のとき、処理をし続けます。 書き方 while(継続条件式) { 繰り返す処理 } 実行例(ソース) var a = 1; while(a <= 100){ a *= 2; console.log(a) } console.…

【JavaScript】 出力時に変数をカンマとプラスで繋げるときの違い

出力時にプラスだけで変数を繋げる場合、全て文字列として処理されます。 カンマで変数をつなげる場合、変数同士を演算させることが可能です。 実行例 var a = '西暦'; var b = 1988; var c = prompt('平成を西暦に直します',''); var c = parseInt(c); docu…

【JavaScript】連想配列

連想配列は、数値の変わりに意味のある言葉を使って配列を組むことができます。 書き方 連想配列の場合は、インデックスの事をキーと呼びます。 var 連想配列名 = { キー1:値1, キー2:値2, キー3:値3, … }; クォーテーションで囲めば連想配列名に全…

【JavaScript】配列

配列は変数の集まりのことです。エクセルの行のように、一つの行にたくさんの値をインプットさせることができます。 書き方 変数のそれぞれの値を要素といい、それぞれ0から数えるインデックスがつけられています。。 各要素の書き換えもや、要素の追加可能…

【JavaScript】 switch文

switch文はifよりも詳細に条件分岐を書き出したものです。switch文は一度条件に合うと、それ以降の条件が合っていなくてもすべてを実行してしまうので、breakを入れることでそれを強制的に回避できます。 書き方 switch(変数){ case 変数に対する条件: conso…

【JavaScript】ifとelse

ifを使うことによって、ブラウザに表示する結果を条件付で変えることができます。 elseはifを使った後に、条件に合わなかったものを表示します。 実行例(ソース) <script> var judge = confirm('あなたは大人ですか?'); //document.write(judge); if(judge===true</script>…

【JavaScript】比較演算子

等号号不等号を利用して、ブラウザに表示される内容を変えます。 実行例(ソース) <script> var a = 10; if(a > 5){ document.write('aは5より大きいです。'); } var b =5; if(b <= 5){ document.write('bは5以下です。'); } var c =13; if(c < 10 || c > 15){ docu…

【JavaScript】alert、promptを使ってダイアログボックスを表示する

前回「document.write('n');」でブラウザ上にテキストを表示する方法を学びましたが、今回はその他の方法も学びます。 alert alertはブラウザ上にダイアログボックスを表示することができるメソッドです。 実行例(ソース) <script> alert('test') </script> 結果 prompt pro…

【JavaScript】JavaScriptで出力する

JavaScriptでHTML内に実際に出力してみます。 普通にテキストを出力してみる 普通にテキストを出力するときは「document.write('n');」を使います。 実行例(ソース) 「test」を出力します。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>初めてのJS</title> </head> <body> <script> document.write('test'); </script> </body> </html> 出力結果 このよ…

【JavaScript】 JavaScript入門

今日から初めてJavaScriptをやっていくので、要点をまとめていきます。 JavaScriptとは? 高水準言語(人間の分かる言葉から機械が分かる機械語に変換してくれる言語)。 インタプリンタ方式(1行ずつ処理をする)。 スクリプトである(小さい処理をする言語…