SlideShare uma empresa Scribd logo
1 de 7
Baixar para ler offline
パートナーコース#2 Javascript

     (10) 配列とループ




         ver.1.0        1
10-0.html 前回の復習
script
function hyoji(){
   var text = "";

    for(var i = 1; i <= 10; i++){
       for(var j = 1; j <= i; j++){
                                                         for文を二重に使って図形
           text += "☆";                                  を描いています。
       }
       text += "<br>";
    }

    var output = document.getElementById("output");
    output.innerHTML = text;
}



                                                         outputというidのついた
                                                         <div>に変数textを出力して
                                                         います。




                                               ver.1.0                       2
10-1.html 配列
script
function hyoji(){                    ここでは、配列weekを宣
  var week = [];                     言しています。
  week[0] = "月曜日";                   var week = new Array();
  week[1] = "火曜日";                   と書くこともあります。
  week[3] = "水曜日";
  week[4] = "木曜日";
                                     配列に値を入れていきま
    alert(week[0]);                  す。
}                                    1番目の要素は0であらわ
                                     します。


                         ☆金曜日、土曜日、日曜日も追加しよう




                           ver.1.0                             3
10-2.html 配列その2
script
function hyoji(){
   var week = ["月曜日","火曜日","水曜日
","木曜日","金曜日","土曜日","日曜日"];

    alert(week[2]);
}

                                            このような書き方をすると
                                            配列に一度に全部の値を入
                                            れることができます。




                                  ver.1.0                  4
10-3.html 配列を操作する
script
function hyoji(){
   var a = [5,4,3,2,1];
                                             a.length
    var alen = a.length;                     という書き方で配列の長さ
    alert("aの要素の数は" + alen);                 がわかります。
    var atext = a.join("");
    alert("aをくっつけると" + atext);
                                             a.join(“”)
    a.reverse();                             とすると配列をくっつける
    alert("aを逆順にすると" + a.join(","));
                                             ことができます。
                                             a.join(“-”)とするとどうな
}                                            る?

                     a.reverse()
                     で配列が逆順になります。

                                 ☆ほかにもsort()という操作があります。
                                 これをするとどうなる??
                                   ver.1.0                        5
10-4.html 配列とループ
script
function hyoji(){
   var week = ["月曜日","火曜日","水曜日","木曜日","
金曜日","土曜日","日曜日"];                                       week.length
    var wlen = week.length;                              という書き方で配列の長さ
                                                         がわかります。
    var text = "";
    for(var i = 0; i < wlen; i++){
       text += week[i] + "<br>";
    }
    var output = document.getElementById("output");
    output.innerHTML = text;
}
                                                         配列weekの中身をひとつず
                                                         つtextに足していきます。




                                               ver.1.0                    6
10-5.html 配列でお絵かき
script
function hyoji(){
   var num = [1,2,3,4,2,2];
   var nlen = num.length;

    var text = "";
    for(var i = 0; i < nlen; i++){
       var max = num[i];
       for(var j = 0; j < max ; j++){
           text += "☆";                                  外側のforは、
       }
       text += "<br>";
                                                         配列numの要素を1つずつ取り出しま
    }                                                    す。
    var output = document.getElementById("output");
    output.innerHTML = text;
}                                                        内側のforでは、
                                                         ☆を要素の値の数だけtextに足しま
                                                         す。




                                               ver.1.0                        7

Mais conteúdo relacionado

Mais procurados

Template method #dezapatan
Template method #dezapatanTemplate method #dezapatan
Template method #dezapatankuidaoring
 
Lisp Tutorial for Pythonista : Day 3
Lisp Tutorial for Pythonista : Day 3Lisp Tutorial for Pythonista : Day 3
Lisp Tutorial for Pythonista : Day 3Ransui Iso
 
X hago2 shortcoding 20110827
X hago2 shortcoding 20110827X hago2 shortcoding 20110827
X hago2 shortcoding 20110827uskey512
 
Apg4b 2.05.再帰 sum関数の動作説明
Apg4b 2.05.再帰 sum関数の動作説明Apg4b 2.05.再帰 sum関数の動作説明
Apg4b 2.05.再帰 sum関数の動作説明APG4b
 
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第2回 ‟変数と型„
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第2回 ‟変数と型„【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第2回 ‟変数と型„
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第2回 ‟変数と型„Kaz Aiso
 
150420 flash004 変数
150420 flash004 変数150420 flash004 変数
150420 flash004 変数elephancube
 
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4Shingo Inoue
 
Java電卓勉強会資料
Java電卓勉強会資料Java電卓勉強会資料
Java電卓勉強会資料Toshio Ehara
 
すごいConstたのしく使おう!
すごいConstたのしく使おう!すごいConstたのしく使おう!
すごいConstたのしく使おう!Akihiro Nishimura
 
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第4回 「Function と Pro...
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第4回 「Function と Pro...【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第4回 「Function と Pro...
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第4回 「Function と Pro...Kaz Aiso
 
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Toshio Ehara
 
End challenge Part1
End challenge Part1End challenge Part1
End challenge Part1hisa2
 
repマクロ
repマクロrepマクロ
repマクロAPG4b
 
my_min関数の動作説明
my_min関数の動作説明my_min関数の動作説明
my_min関数の動作説明APG4b
 
クロージャデザインパターン
クロージャデザインパターンクロージャデザインパターン
クロージャデザインパターンMoriharu Ohzu
 
プログラムの実行順序
プログラムの実行順序プログラムの実行順序
プログラムの実行順序APG4b
 

Mais procurados (20)

Template method #dezapatan
Template method #dezapatanTemplate method #dezapatan
Template method #dezapatan
 
 
  
 
 
Lisp Tutorial for Pythonista : Day 3
Lisp Tutorial for Pythonista : Day 3Lisp Tutorial for Pythonista : Day 3
Lisp Tutorial for Pythonista : Day 3
 
X hago2 shortcoding 20110827
X hago2 shortcoding 20110827X hago2 shortcoding 20110827
X hago2 shortcoding 20110827
 
Apg4b 2.05.再帰 sum関数の動作説明
Apg4b 2.05.再帰 sum関数の動作説明Apg4b 2.05.再帰 sum関数の動作説明
Apg4b 2.05.再帰 sum関数の動作説明
 
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第2回 ‟変数と型„
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第2回 ‟変数と型„【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第2回 ‟変数と型„
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第2回 ‟変数と型„
 
150420 flash004 変数
150420 flash004 変数150420 flash004 変数
150420 flash004 変数
 
初めてのSTL
初めてのSTL初めてのSTL
初めてのSTL
 
そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4そしてjsの基礎へ戻る#4
そしてjsの基礎へ戻る#4
 
Java電卓勉強会資料
Java電卓勉強会資料Java電卓勉強会資料
Java電卓勉強会資料
 
すごいConstたのしく使おう!
すごいConstたのしく使おう!すごいConstたのしく使おう!
すごいConstたのしく使おう!
 
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第4回 「Function と Pro...
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第4回 「Function と Pro...【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第4回 「Function と Pro...
【DELPHI / C++BUILDER STARTER チュートリアルシリーズ】 シーズン2 Delphi の部 第4回 「Function と Pro...
 
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
 
End challenge Part1
End challenge Part1End challenge Part1
End challenge Part1
 
前期講座09
前期講座09前期講座09
前期講座09
 
勉強会課題①
勉強会課題①勉強会課題①
勉強会課題①
 
repマクロ
repマクロrepマクロ
repマクロ
 
my_min関数の動作説明
my_min関数の動作説明my_min関数の動作説明
my_min関数の動作説明
 
クロージャデザインパターン
クロージャデザインパターンクロージャデザインパターン
クロージャデザインパターン
 
プログラムの実行順序
プログラムの実行順序プログラムの実行順序
プログラムの実行順序
 

Destaque (7)

Voices automotive year17-number2
Voices automotive year17-number2Voices automotive year17-number2
Voices automotive year17-number2
 
Opdracht 19
Opdracht 19Opdracht 19
Opdracht 19
 
Gramer book #2
Gramer book #2Gramer book #2
Gramer book #2
 
Interfaz
InterfazInterfaz
Interfaz
 
Futuro Digital 2012 - Perú
Futuro Digital 2012 - PerúFuturo Digital 2012 - Perú
Futuro Digital 2012 - Perú
 
Lição 04 - Pela fé temos paz com Deus
Lição 04 - Pela fé temos paz com DeusLição 04 - Pela fé temos paz com Deus
Lição 04 - Pela fé temos paz com Deus
 
Mga sagisag
Mga sagisagMga sagisag
Mga sagisag
 

Semelhante a 配列とループ

VS勉強会 .NET Framework 入門
VS勉強会 .NET Framework 入門VS勉強会 .NET Framework 入門
VS勉強会 .NET Framework 入門kamukiriri
 
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和schoowebcampus
 
JavaScriptクイックスタート
JavaScriptクイックスタートJavaScriptクイックスタート
JavaScriptクイックスタートShumpei Shiraishi
 
Pythonで始めるDropboxAPI
Pythonで始めるDropboxAPIPythonで始めるDropboxAPI
Pythonで始めるDropboxAPIDaisuke Igarashi
 
Javaプログラミング入門【第3回】
Javaプログラミング入門【第3回】Javaプログラミング入門【第3回】
Javaプログラミング入門【第3回】Yukiko Kato
 
C++0x in programming competition
C++0x in programming competitionC++0x in programming competition
C++0x in programming competitionyak1ex
 
プログラミング言語Scala
プログラミング言語Scalaプログラミング言語Scala
プログラミング言語ScalaTanUkkii
 
10分で分かるr言語入門ver2.10 14 1101
10分で分かるr言語入門ver2.10 14 110110分で分かるr言語入門ver2.10 14 1101
10分で分かるr言語入門ver2.10 14 1101Nobuaki Oshiro
 
初心者講習会資料(Osaka.r#6)
初心者講習会資料(Osaka.r#6)初心者講習会資料(Osaka.r#6)
初心者講習会資料(Osaka.r#6)Masahiro Hayashi
 
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)Hiro H.
 
10分で分かるr言語入門ver2.9 14 0920
10分で分かるr言語入門ver2.9 14 0920 10分で分かるr言語入門ver2.9 14 0920
10分で分かるr言語入門ver2.9 14 0920 Nobuaki Oshiro
 
初心者講習会資料(Osaka.R#5)
初心者講習会資料(Osaka.R#5)初心者講習会資料(Osaka.R#5)
初心者講習会資料(Osaka.R#5)Masahiro Hayashi
 
Javaプログラミング入門【第2回】
Javaプログラミング入門【第2回】Javaプログラミング入門【第2回】
Javaプログラミング入門【第2回】Yukiko Kato
 
Rで学ぶデータマイニングI 第8章〜第13章
Rで学ぶデータマイニングI 第8章〜第13章Rで学ぶデータマイニングI 第8章〜第13章
Rで学ぶデータマイニングI 第8章〜第13章Prunus 1350
 
Clojure programming-chapter-2
Clojure programming-chapter-2Clojure programming-chapter-2
Clojure programming-chapter-2Masao Kato
 

Semelhante a 配列とループ (20)

VS勉強会 .NET Framework 入門
VS勉強会 .NET Framework 入門VS勉強会 .NET Framework 入門
VS勉強会 .NET Framework 入門
 
Pfi Seminar 2010 1 7
Pfi Seminar 2010 1 7Pfi Seminar 2010 1 7
Pfi Seminar 2010 1 7
 
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
 
JavaScriptクイックスタート
JavaScriptクイックスタートJavaScriptクイックスタート
JavaScriptクイックスタート
 
Pythonで始めるDropboxAPI
Pythonで始めるDropboxAPIPythonで始めるDropboxAPI
Pythonで始めるDropboxAPI
 
Javaプログラミング入門【第3回】
Javaプログラミング入門【第3回】Javaプログラミング入門【第3回】
Javaプログラミング入門【第3回】
 
C++0x in programming competition
C++0x in programming competitionC++0x in programming competition
C++0x in programming competition
 
プログラミング言語Scala
プログラミング言語Scalaプログラミング言語Scala
プログラミング言語Scala
 
10分で分かるr言語入門ver2.10 14 1101
10分で分かるr言語入門ver2.10 14 110110分で分かるr言語入門ver2.10 14 1101
10分で分かるr言語入門ver2.10 14 1101
 
初心者講習会資料(Osaka.r#6)
初心者講習会資料(Osaka.r#6)初心者講習会資料(Osaka.r#6)
初心者講習会資料(Osaka.r#6)
 
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
C++のSTLのコンテナ型を概観する @ Ohotech 特盛 #10(2014.8.30)
 
10分で分かるr言語入門ver2.9 14 0920
10分で分かるr言語入門ver2.9 14 0920 10分で分かるr言語入門ver2.9 14 0920
10分で分かるr言語入門ver2.9 14 0920
 
初心者講習会資料(Osaka.R#5)
初心者講習会資料(Osaka.R#5)初心者講習会資料(Osaka.R#5)
初心者講習会資料(Osaka.R#5)
 
たのしい関数型
たのしい関数型たのしい関数型
たのしい関数型
 
Rakuten tech conf
Rakuten tech confRakuten tech conf
Rakuten tech conf
 
Javaプログラミング入門【第2回】
Javaプログラミング入門【第2回】Javaプログラミング入門【第2回】
Javaプログラミング入門【第2回】
 
Python opt
Python optPython opt
Python opt
 
ji-6. 配列
ji-6. 配列ji-6. 配列
ji-6. 配列
 
Rで学ぶデータマイニングI 第8章〜第13章
Rで学ぶデータマイニングI 第8章〜第13章Rで学ぶデータマイニングI 第8章〜第13章
Rで学ぶデータマイニングI 第8章〜第13章
 
Clojure programming-chapter-2
Clojure programming-chapter-2Clojure programming-chapter-2
Clojure programming-chapter-2
 

Mais de TENTO_slide

HTMLの要素の選び方
HTMLの要素の選び方HTMLの要素の選び方
HTMLの要素の選び方TENTO_slide
 
グローバル変数
グローバル変数グローバル変数
グローバル変数TENTO_slide
 
ループその3
ループその3ループその3
ループその3TENTO_slide
 
ループその2
ループその2ループその2
ループその2TENTO_slide
 
デザイン型人材育成のために
デザイン型人材育成のためにデザイン型人材育成のために
デザイン型人材育成のためにTENTO_slide
 
2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料TENTO_slide
 

Mais de TENTO_slide (12)

HTMLの要素の選び方
HTMLの要素の選び方HTMLの要素の選び方
HTMLの要素の選び方
 
タイマー
タイマータイマー
タイマー
 
イベント
イベントイベント
イベント
 
復習その2
復習その2復習その2
復習その2
 
グローバル変数
グローバル変数グローバル変数
グローバル変数
 
ループその3
ループその3ループその3
ループその3
 
ループその2
ループその2ループその2
ループその2
 
デザイン型人材育成のために
デザイン型人材育成のためにデザイン型人材育成のために
デザイン型人材育成のために
 
Html03
Html03Html03
Html03
 
Html02
Html02Html02
Html02
 
Html01
Html01Html01
Html01
 
2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料
 

配列とループ

  • 1. パートナーコース#2 Javascript (10) 配列とループ ver.1.0 1
  • 2. 10-0.html 前回の復習 script function hyoji(){ var text = ""; for(var i = 1; i <= 10; i++){ for(var j = 1; j <= i; j++){ for文を二重に使って図形 text += "☆"; を描いています。 } text += "<br>"; } var output = document.getElementById("output"); output.innerHTML = text; } outputというidのついた <div>に変数textを出力して います。 ver.1.0 2
  • 3. 10-1.html 配列 script function hyoji(){ ここでは、配列weekを宣 var week = []; 言しています。 week[0] = "月曜日"; var week = new Array(); week[1] = "火曜日"; と書くこともあります。 week[3] = "水曜日"; week[4] = "木曜日"; 配列に値を入れていきま alert(week[0]); す。 } 1番目の要素は0であらわ します。 ☆金曜日、土曜日、日曜日も追加しよう ver.1.0 3
  • 4. 10-2.html 配列その2 script function hyoji(){ var week = ["月曜日","火曜日","水曜日 ","木曜日","金曜日","土曜日","日曜日"]; alert(week[2]); } このような書き方をすると 配列に一度に全部の値を入 れることができます。 ver.1.0 4
  • 5. 10-3.html 配列を操作する script function hyoji(){ var a = [5,4,3,2,1]; a.length var alen = a.length; という書き方で配列の長さ alert("aの要素の数は" + alen); がわかります。 var atext = a.join(""); alert("aをくっつけると" + atext); a.join(“”) a.reverse(); とすると配列をくっつける alert("aを逆順にすると" + a.join(",")); ことができます。 a.join(“-”)とするとどうな } る? a.reverse() で配列が逆順になります。 ☆ほかにもsort()という操作があります。 これをするとどうなる?? ver.1.0 5
  • 6. 10-4.html 配列とループ script function hyoji(){ var week = ["月曜日","火曜日","水曜日","木曜日"," 金曜日","土曜日","日曜日"]; week.length var wlen = week.length; という書き方で配列の長さ がわかります。 var text = ""; for(var i = 0; i < wlen; i++){ text += week[i] + "<br>"; } var output = document.getElementById("output"); output.innerHTML = text; } 配列weekの中身をひとつず つtextに足していきます。 ver.1.0 6
  • 7. 10-5.html 配列でお絵かき script function hyoji(){ var num = [1,2,3,4,2,2]; var nlen = num.length; var text = ""; for(var i = 0; i < nlen; i++){ var max = num[i]; for(var j = 0; j < max ; j++){ text += "☆"; 外側のforは、 } text += "<br>"; 配列numの要素を1つずつ取り出しま } す。 var output = document.getElementById("output"); output.innerHTML = text; } 内側のforでは、 ☆を要素の値の数だけtextに足しま す。 ver.1.0 7