JavaScript 3-2 配列
実践課題B <script> var product=['リラックスチェア','リラックスデスクブック','スタンド']; var price=[4000,12000,800]; document.write('<tr>'); document.write('<td>'+product[0]+'<\/td>'); document.write('<td>'+price[0]+'円<\/td>'); document.write('<\/tr>'); document.write('<tr>'); document.write('<td>'+product[1]+'<\/td>'); document.write('<td>'+price[1]+'円<\/td>'); document.write('<\/tr>'); document.write('<tr>'); document.write('<td>'+product[2]+'<\/td>'); document.write('<td>'+price[2]+'円<\/td>'); document.write('<\/tr>'); </script> </table> 実践課題B-2 table border="1"> <tr><th>製品名</th> <th>価格</th></tr> <script> var product=['リラックスチェア','リラックスデスクブック','スタンド']; var price=[4000,12000,800]; for(var i=0; i<3; i++){ document.write('<tr>'); document.write('<td>'+product[i]+'<\/td>'); document.write('<td>'+price[i]+'円<\/td>'); document.write('<\/tr>'); } </script> </table> 実践課題C <script> var lk=['ホーム','会社情報','製品情報','お問い合わせ']; for(var i=0; 0<lk.length; i++){ document.write('<ul>'); document.write('<li><a href="#">'+lk[i]+'</a><\/li>'); document.write('<\/ul>'); } </script> 実践課題D <table border="1"> <tr><th>添字</th> <th>a</th> <th>b</th> <th>a*bを計算</th></tr> <tr><th>0</th> <th>5</th> <th>33</th> <th><button onClick="kakezan(0)">計算結果</button></th></tr> <tr><th>1</th> <th>12</th> <th>14</th> <th><button onClick="kakezan(1)">計算結果</button></th></tr> <tr><th>2</th> <th>18</th> <th>65</th> <th><button onClick="kakezan(2)">計算結果</button></th></tr> <script> var num1=[5,12,18]; var num2=[33,14,65]; var ans; num1[0]=5; function kakezan(i){ ans=num1[i]*num2[i]; alert('答えは'+ans+'です'); } </script> </table> 実践課題E <table border="1"> <tr><th>個数</th> <th>商品A</th> <th>商品B</th> <th>商品C</th></tr> <script> var price=[300,450,520]; for(var i=1; i<=10; i++){ document.write('<tr>'); document.write('<th>'+i+'<\/th>'); for(var j=0; j<3; j++){ document.write('<td>'+price[j]*i+'円<\/td>'); } document.write('<\/tr>'); } </script> </table>
JavaScript 3 配列
↓javascriptで配列と同じようなことをやった場合 <script> var member = [ {name:'佐藤',age:35}, {name:'伊藤',age:38}, {name:'山田',age:28}, ]; alert(member[2].name+'さん'); alert('現在'+member[2].age+'歳です。'); </script>
action script7-3 配列 平均・ランダム・追加
問題1・平均 var num:Array=new Array(70,88,63,95,59); var goukei:Number=0; for(i=0; i<5; i++){ goukei=goukei+num[i]; } var heikin:Number; heikin=goukei/num.length; this.heikin_txt.text=heikin; newArray内の数字の平均が求められている 問題2・ランダム var rnd:Array=new Array("大吉","中吉","小吉","末吉","凶"); var r:Number; r=Math.floor(Math.random()*5); this.box.text=rnd[r]; newArray内の中にあるものをランダムに表示 問題3・追加 var num:Array=new Array(55,33,61,57,49); var rate:Number=10; for(i=0; i<num.length;i++){ num[i]=num[i]+rate; this.a.text=num[0]; this.b.text=num[1]; this.c.text=num[2]; this.d.text=num[3]; this.e.text=num[4]; } newArray内の値にそれぞれ10を足した値を表示。
action script7-2 配列 length
問題1 var week:Array=new Array("日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"); var box:String; for(var i:Number=0; i<week.length;i++){ this.box.text+=week[i]+<span class="deco" style="color:#0000FF;">"\n"</span>;//←改行 trace(week[i]); } forの中身はArray内にあるものを順番に全部表示させていくよの意味。 問題2 var week_array:Array=new Array("月","火","水","木","金"); this.box.text=week_array; this.dataLength_txt.text=week_array.length; data1_txt.text=week_array[0]; data2_txt.text=week_array[1]; data3_txt.text=week_array[2]; data4_txt.text=week_array[3]; data5_txt.text=week_array[4]; this.dataLength〜の所は、new Arrayの中の()内にあるものの数。=5 []の所はその番号にあるものを表示させる、の意味。今回は個別のダイナミックテキスト内に表示させている。 問題3 var week_array:Array=new Array("月","火","水","木","金"); week_array.push("土"); ↑月~金の<span class="deco" style="color:#FF0000;">最後</span>に新しく"土"を加える。 問題4 var week_array:Array=new Array("月","火","水","木","金"); week_array.push("土"); week_array.pop("土"); ↑配列の最後のデータを削除。この場合は"土" 問題5 var week_array:Array=new Array("月","火","水","木","金"); week_array.push("土"); week_array.pop("土"); week_array.unshift("日"); ↑配列の<span class="deco" style="color:#FF0000;">最初</span>にデータを加える 問題6 var week_array:Array=new Array("月","火","水","木","金"); week_array.unshift("日"); week_array.shift("日"); ↑配列の最初のデーターを削除 問題7 var week_array:Array=new Array("月","火","水","木","金"); week_array.push("土"); week_array.unshift("日"); week_array.splice(3,2); ↑○番目から○個の数のものを消すの意味。この場合は3番目の次から2つ分削除。=水と木が消える 問題8 var week_array:Array=new Array("月","火","水","木"); week_array.splice(2,0,"土","日"); ↑○番目から""のものを加えるの意味。0は加えるよーという意味。この場合は2番目の次に"土" "日" を加える。=火の次に"土" "日"が加わる
action script7 配列 Array
問題1 var num:Array=new Array(10,32,7,9,15); this.txt.text="数値は"+num[3]+"です。"; 問題2 var week:Array=new Array("日曜日","月曜日","火曜日","水曜日","木曜日","便曜日","土曜日"); trace("今日は"+week[3]+"です。"); this.sikaku.text=("今日は"+week[3]+"です。"); <span class="deco" style="color:#FF0000;">ポイント</span> ・数字の数える順番は<span class="deco" style="color:#FF0000;">0</span>から 1,2,3・・・じゃなくて 0.1,2・・・ ・num[] week[]の[]の中の数字は、表示させたい(取り出したい)ものの番号。3なら4番目に書かれたものを表示 ・数字を入れるときは""を外す。→""で囲むということは文字として扱う、という事だから、これ付けっぱなしだと 計算とか困る。
JavaScriptの基礎課題1-4
課題1
「はじめてのJavaScript」と「p要素」でブラウザ上に表示させなさい。
答え
document.write('
はじめてのJavaScript
');課題2
変数を使い、警告ダイアログボックスに「はじめてのJavaScript、アゲイン!」と表示させなさい。
答え
alert('はじめてのJavaScriptアゲイン');
課題3
ページが表示された直後に・・・ マウスがクリックされた時・・・ マウスが乗った時に・・・
の各イベントで、警告ダイアログボックスが表示されるように記述しなさい。
答え
alert('ページが表示されると出現'); onclick=function(){alert(マウスがクリックした時に出現);}
ここにマウスを乗せると
課題4
関数を使い、クリックしたら警告ダイアログボックスが表示されるように記述しなさい。
「19+23=」を、「答えを見る」ボタンをクリックすることにより表示するようにしなさい。
答え
function total(){
var a=19;
var b=23;
var message;
message = a+b;
alert(message);
}
action script6
横のスライドの作り方
var base:Number;
var rate:Number = 5;
this.btn1.onRollOver = function() {
base = main.m1._x;
}
this.btn2.onRollOver = function() {
base = main.m2._x;
}
this.btn3.onRollOver = function() {
base = main.m3._x;
}
this.btn4.onRollOver = function() {
base = main.m4._x;
}
this.btn5.onRollOver = function() {
base = main.m5._x;
}
this.main.onEnterFrame=function(){
main._x-=(main._x+base)/rate;
}
main=大きい画像全体 m1~5=大きい画像の1つ1つの名前 btn1~5=サムネイル
制作上のポイント
大きい画像全体の作り方、1新規シンボル 2シンボル内に大きい画像を一つ一つ配置。1つ目はxy軸を0にする。その後2.3と横に繋げていく。長い巻物的感覚。横幅足らなくても画像置けば、自動で継ぎ足される。
大きな一つ扱いの画像と、その中の一つ一つ両方に名前付ける。
全部ムービークリップでOK
その後mainの上に新規作って、四角で囲ったりして右クリック、マスクでクリッピングできる。
その枠の形だけ写真が表示される。