2012年8月30日木曜日

制御構文(3/6)

x
■条件で繰り返す「while」
条件をチェックして繰り返す「while」
whileの後に0があり
条件となる値や変数、式などを用意
その値が正しい(真偽値のtrueである)間、その後の処理を繰り返す
値が正しくなくなる(falseになる)と繰り返しを抜けて次へ進みます。
2つの書き方の違い
「いつ、条件をチェックするか」
<最初にチェックする書き方>
繰り返しに入る前にチェック→最初から条件がfalseだった場合→繰り返し部分を全く実行せずに次へ
<最後にチェックする書き方>
まず、繰り返し部分を実行してから条件チェック→条件がfalseだったとしても、必ず1度は処理を実行
■利用例■
変数Nが素数かどうかをチェックするスクリプト
素数:1とその数自身以外の整数でわることができない値
実際に2~その数未満のすべての整数で割ってみればわかる
割った余りがゼロになることが1度でもあれば、それは素数じゃないということ
ここでは、numの値を2から順に増やしながら繰り返し実行
条件部分は、while(num<N)
つまり numの値が変数Nより小さい間、繰り返しを続けている
numの値は、繰り返しの最後で1増やしていますが、これは「num++;」
「++」というのは「インクリメント演算子」で、変数の値を1増やす
「--」は、変数の値を1減らす
*protram list*
 1 'while文の基本形(1)
 2 while(条件)
 3      ....実行する処理....
 4
 5 'while文の基本形(2)
 6 do
 7      ....実行する処理....
 8 while(条件);
 9
10
11 ※サンプルスクリプト
12
13 <html>
14     <head>
15         <script type="text/javascript">
16         <!--
17         var N = 887;
18
19         var num =2;
20         var result = true;
21         while(num < N){
22             if (N % num == 0){
23                 result = false;
24                 break;
25             }
26             num ++;
27          }
28          if (result)
29              alert(N + "は、素数です。");
30          else
31              alert(N + "は、素数じゃないです。");
32          //-->
33          </script>
34      </head>
35      <body>
36          <H1>TEST.</H1>
37      </body>
38 </html>

2012年8月23日木曜日

制御構文(2/6)


■値に応じてジャンプする「switch」
if:二者択一
細かな分岐が必要
「switch」
条件として指定した値をチェックし、その値に対応する場所にジャンプする働き
switchは、その後の()内にある変数や式などの値をチェックし、その値のcase文にジャンプし、そのにある処理をします。
case: 「case 値:」
注意:caseが終わっても、自動的に構文を抜けたりしない
caseの後に用意するスクリプトでは、最後に「brake」を用意
現在の構文から抜け出る働き
もし、対応するcaseがなかった場合には、「default」というラベルにジャンプ
<利用例>
変数Aに、今何時かを示す0~23の数字を入れると、その値に応じてメッセージが表示される
「var A = 13」
Aを6で割った値を使ってcaseにジャンプ
小数点以下まで細かく割ってしまいますので、整数部分の値だけを取り出せない
「Aを6で割った余りをAから引いて6で割る」という計算
*protram list*
 1 ※switchの基本形
 2 switch(値){
 3 case 値1:
 4     ....実行する処理....
 5     break;
 6 case 値2:
 7     ....実行する処理....
 8     break;
 9
10 ....必要に応じてcaseを用意....
11
12 default:
13      ....どれにも対応しない場合の処理....
14 }
15
16 ※サンプルプログラム
17
18 <html>
19     <head>
20         <script type="text/javascript">
21         <!--
22         var A = 13;
23         var n = (A - (A % 6)) / 6;
24         switch(n){
25         case 0:
26             alert('おやすみなさい....。夜中です。');
27             break;
28         case 1:
29             alert('おはよう。朝です。');
30             break;
31         case 2:
32             alert('こんにちは。昼です。');
33             break;
34         case 3:
35             alert('こんばんは。夜です。');
36             break;
37         default:
38             alert('ん? なんか変な時間ですよ?');
39         }
40         //-->
41         </script>
42      </head>
43      <body>
44          <H1>TEST.<H1>
45      </body>
46 </html>

2012年8月20日月曜日

制御構文(1/6)

制御構文(1/6)
■二者択一の条件分岐「if」
制御構文:スクリプトを実行していく流れを制御
「これを実行したら次はこっちにいって、それからこちらをやって・・・」
2つ:「分岐」と「繰り返し」
分岐:「必要に応じて実行する処理を変える」
繰り返し:「必要に応じて処理を繰り返し実行する」
「if」文:条件を指定しておき、その条件が正しいかどうかで実行する処理を変える働き
条件が正しい時に実行する処理を書くだけの書き方と、その後に「正しくない時に実行する処理」を追加して書く書き方
「条件」:「正しいか、正しくないか」を示す値・二者択一の値・「真偽値」・値でも変数でも式でも
一番使われるもの
「比較演算子」: =<>!
ifでは、実行する文は「1つだけ」しか記述できません。2文以上は書けない。
そこでJavaScriptでは、「複数の分を1まとまりとして扱えるようにする」ものを利用。{}
if (....){
    文1;
    文2;
}
elseのあとに書く場合も同様
<利用例>
HTMLに埋め込んで実際に動くスクリプト
sample.htmlとしてWebブラウザから開いてみる
画面に「NOT」と表示されます。違う値
同じ値なら「OK!」
「alert」という「関数」
*program list*
 1 ※ifの基本形(1)
 2 if(条件)
 3   ...実行する処理...
 4
 5 ※ifの基本形(2)
 6 if(条件)
 7   ...実行する処理...
 8 else
 9   ...実行する処理...
10
11
12 ※比較演算子について
13 A == B  AとBは等しい
14 A != B  AとBは等しくない
15 A <  B  AはBより小さい
16 A <= B  AはBと等しいか小さい
17 A >  B  AはBより大きい
18 A >= B  AはBと等しいか大きい
19
20
21 ※サンプルリスト
22
23 <html>
24     <head>
25         <script type="text/javascript">
26         <!--
27         var A = 10;
28         var B = 20;
29         if (A == B) alert("OK!");
30         else alert("NOT");
31         //-->
32         <script>
33     </head>
34     <body>
35         <H1>TEST.</H1>
36     </body>
37 </html>

2012年8月10日金曜日

値・変数・演算(4/4)

■値と変数の利用例

1.数値の演算

変数AとBを足したものを変数Cに設定
「それぞれの文の最後にセミコロンがある」
JavaScript それぞれの文の終わりは「改行か、またはセミコロン」

 1 1.数値の演算
 2 var A = 100;
 3 var B = 200;
 4 var C = A + B;

2.テキストの演算

Cは、"HelloBye!"

 6 2.テキストの演算
 7 var A = "Hello";
 8 var B = "Bye!";
 9 var C = A + B;

3.配列の利用

ARRという名前の配列を作成し、そのインデックス0と1を足し、インデックス2の値をかけたものをインデックス10に代入しています。ARR[10]の値は「9」になります。

11 3.配列の利用
12 var ARR = [1,2,3];
13 ARR[10] = (ARR[0] + ARR[1]) * ARR[2];

4.連想配列の利用

ARRという名前の連想配列を作成し、そこに'apple''orange'というキーを保管
それらの値を足し、'fruite'というキーに代入
ARR['fruite']の値は「30」

15 4.連想配列の利用
16 var ARR = {'apple':10,'orange':20};
17 ARR['fruite'] = ARR['apple'] + ARR['orange'];

2012年8月9日木曜日

値・変数・演算(3/4)

■配列について
「配列」:多数の値をまとめて管理するもの
1.配列の作成
[]記号を使う
「new Array」を使う
既に配列に収める値が用意されている場合には、[1,2,3]
まだ値が用意されていない場合は
「new Array()」で空っぽの配列を作成、その後、必要に応じて値を保管
2.要素とインデックス番号
配列では、保管している値は「インデックス」という番号を使って管理
この番号は、配列名の後に[]記号を使って指定
Aという名前の変数に配列を代入したとき、そのゼロ番に入っている値は、「A[0]」と記述
インデックス番号は、ゼロから。1ではない。
値はゼロから順に入れる必要はない。「ゼロに入れた後、次は10番でも」
3.連想配列
番号ではなく名前で管理したい場合 → 「連想配列」
連想配列は{}:{"A":1,"B":2,"C":3}
"A"、"B"、"C"がキー
「"A":1」というのは「"A"という名前のキーに1という値を設定する」
4.連想配列の要素とキー
連想配列に保管された値は、「配列キー」といった形で記述して利用
配列のインデックスの番号の代わりにキーを書く
注意:「インデックスは使えない」
連想配列は「キーでも値を設定できるのではなく」
「インデックスの代わりにキーを使う」 つまりインデックスは使えない
protram list
 1 1.配列の作成
 2 変数 = [ 値1,値2,.,,必要なだけ用意する]
 3 変数 = new Array();
 4 変数 = new Array( 要素数 );
 5 変数 = new Array( 値1,値2, ....必要なだけ用意... )
 6
 7 2.配列の値の利用
 8 変数 = 配列 [ インデックス番号 ]
 9 配列 [ インデック番号 ] = 値・変数など
10
11 3.連想配列の作成
12 変数 = { キー1: 値1, キー2: 値2, ...必要なだけ用意.... }
13 変数 = new Array()
14
15 4.連想配列の値の利用
16 変数 = 配列 [ キー ]
17 配列 [ キー ] = 値・変数など

値・変数・演算(2/4)

■変数と代入
「スクリプトに直接書かれている値」→ リテラル
「変数に格納して利用する」 → ケース
変数 → 「値の入れ物」
1.変数の宣言
「var 変数名」 → 「var A」
変数の宣言は「しなくてもいい」 
 → 変数宣言をしないでいきなり変数を使い始めてもかまわない
   → JavaScriptのほうで自動的に変数宣言をしたものとして扱う
また、何度「var」宣言しても問題なし。
ただ、var宣言してあれば「圧倒的に読みやすい」
2.値の代入
「A=10」 → 「10という値を変数Aに代入する」
「=」 → 「代入演算子」
3.数値の演算
四則演算 「+」「-」「*」「/」
var A = 10 + 20
割り算 小数点以下、割り切れるまで
varで変数宣言するときも、そのまま代入演算子を使って値設定可能
整数部分だけを割り算し、あまりを計算するようなときには「%」
「10%3」は 「1」
4.テキストの演算子
「+」 → 2つのテキストを1つにつなげる
「var a = "ABC"+"XYZ"」とすれば、変数aには"ABCXYZ"というテキストが代入
・使用していい文字は、半角英数字とアンダーバー記号のみ
・1文字目は、数字は使ってはいけない
・スペースが私用して良い文字に含まれないので、複数の単度を1つの変数に設定することはできない
・大文字と小文字は別の文字として扱われるので注意!「A」「a」は別の変数
※注意--「+」演算子の働き
1+1は「2」 "1"+"1"は「"11"」

2012年8月8日水曜日

値・変数・演算(1/4)

■値について
表示の位置の値
大きさの値
色の値
フォント名やフォントサイズの値
「値には種類がある」
・数値
数値にも種類がある
JavaScriptでは、内部的にはすべて「実数」
整数や実数  100 1.234
○○×10の△乗   1.23E5    1.23×10の5乗
・テキスト
ダブルクォート(") か、シングルクォート(')でテキストの前後をくくる
"Hello"  'あいうえお'
両社の違いは、JavaScriptでは全くない
・真偽値
「真か偽か」 二者択一の状態
値は、JavaScriptに用意されている「true」「false」のいずれか
テキストではないので"true"と書いてはいけない
trueとだけ書く
・配列、関数、オブジェクト
「配列」 多数の値をひとまとめにして管理するためのもの
「オブジェクト」 HTMLの要素を扱う場合などに多用
「関数」 スクリプトをいつでもどこからでも呼び出せるようにまとめたもの
 値として扱うことができる→スクリプトそのものも、値として扱える
・null、undefined、NaN
nullは、「値が存在しない状態」
undefined 「値がまだ定義されていない状態」
NaNは、「数値であるべきものなのに数字でない」

2012年8月7日火曜日

JavaScript​ってどういうもの?(​3/3)

JavaScriptってどういうもの?(3/3)
■JavaScriptの開発環境は?
開発環境を整えずにエディタだけで書くのは、正直かなりつらい
1.プログラミング言語対応エディタ
「NOTEPAD++」
タブ方式で多数のファイルを開き編集できるフリーのエディタ
非常に多くの言語に対応
予約語を色分け
入力中に利用可能な単語を自動的にポップアップして表示
各種の入力支援機能
http://notepad-plus.sourceforge.net/
2.統合開発環境
Web開発のための機能も充実
HTMLJavaScriptのスクリプト作成にも十分利用
「Eclipse」+「Eclipse IDE for EE Developers」
日本語 「Pleiades」
http://eclipse.org/
http://mergedoc.sourceforge.jp/
3.Web用開発ソフト
Adobeの「Dreamweaver」
Webデザインのためのソフトウェア
JavaScriptのスクリプト作成の機能も充実
http://www.adobe.com/jp/products/dreamweaver/

2012年8月6日月曜日

JavaScript​ってどういうもの?(​2/3)

<学習のまとめ>

JavaScriptってどういうもの?(2/3)
■JavaScriptとHTMLの関係
JavaScriptで書かれたプログラムリスト(ソースコード)は、一般に「スクリプト」と呼ばれます
Webの世界では、JavaScriptのスクリプトは、一般に以下の2通りの組み込み方
1.HTMLのソースコードの中に埋め込む
HTMLのタグとしてスクリプトを埋め込む
HTML内にスクリプトを書いてしまうわけですから、全体としてソースコードが長くなりがち
あまり複雑なものになると、コードも読みにくくなる
2.外部ファイルとして用意しWebページに埋め込む
長いスクリプト→別途スクリプトファイル→HTMLから読み込んで利用
テキストファイル→拡張子「.js」→Webサイトにアップロード→HTMLにファイルをロードするためのタグを用意→ページにアクセスした際に自動的にファイルが読み込まれてスクリプトが動くようになる
<・・・・・>
どちらの場合も、HTMLのソースコードでは<script>というタグを利用
※注意  「language」属性と「type」属性について
間違い → <script language="javascript"> (昔)
広く利用されているHTML4.01というバージョンでは、languageではなくtypeという属性を用いるように推奨
「今、広く使われているブラウザではtype="text/javascript"と書けばOK!」
<program list>
※HTMLないに埋め込む際のスクリプトの書き方
<script type="text/javascript">
<!--
・・ここにスクリプトを書く・・
//-->

※XHTML内に埋め込む際のスクリプトの書き方
<script type="text/javascript">
//<![CDATA[
・・ここにスクリプトを書く・・
//]]>
</script>

※JavaScriptの外部ファイルを読み込むタグの書き方
<script type="text/javascript" src="ファイルのアドレス"></script>

<学習のまとめ>

たまに、アフィリエイトでこのようなものを貼りこんだようなきがしてきました。

そういうことだったのですね。

少し、進歩しました。

JavaScript​ってどういうもの?(​1/3)

<学習のまとめ>

JavaScriptってどういうもの?(1/3)
■JavaScriptとDOMの関係
JavaScriptは、Webブラウザに搭載されているスクリプト言語
「Webブラウザ専用の言語」ではない
純粋なプログラミング言語であり、Webページを操作するための機能などが用意されているわけではない
Webブラウザでは、JavaScriptという言語と「DOM(Document Object Model)」というものが搭載
DOM→HTMLやXLMの文書を利用するためのAPI→JavaScriptから、このDOMの機能を利用できる→Webページのさまざまな操作
「Webび世界では、JavaScript+DOMによってさまざまな操作をしている」
DOMでは、HTML/XMLのさまざまな要素を「オブジェクト」として利用できるような仕組みが用意
それらを使いこなすためには「オブジェクト」というものについてしっかり理解

<学習のまとめ>

しかしながら、JavaScriptを使うとは・・・

これなら、非常に幅広く、アプリケーションの構築が可能になりますね。

ただ、オブジェクトという言葉になれていないので、気が重いですが。

Google Apps Scriptの基本を​覚える(1/7)

<学習のまとめ>

Google Apps Scriptの基本を覚える(1/7)
■Google Apps Scriptって何?
・Google Apps
Googleが提供する統合オンラインアプリケーション
・Google Apps Script
GoogleのサービスをJavaScriptによるスクリプトで操作するためのスクリプト環境
・Google Apps Engine
Googleのサーバー環境を使い、Webアプリケーションを開発するためのもの
「Google Apps Scriptは、Google Appsとは関係のないもの」

■Google Apps ScriptはGoogleドキュメント専用ではない!
Googleが提供する主要サービスのほぼすべてで利用できる
「Google Apps Scriptは、JavaScriptでスクリプトを書く」
「JavaScriptの基本を身につけており、スクリプトを書ける」だけの知識が必要

<学習のまとめ>

とほほ、

まず、前段としてJavaScriptの理解が必要とは・・・・

一歩一歩前進していくしかありませんね。

お世話になるホームページについて

初心者のためのGoogle Apps Scriptプログラミング入門

http://libro.tuyano.com/index3?id=623009

上記がお世話になるホームページです。

なんと、JavaScriptまで勉強しないと理解できないって

いきなり、荷が重たくなりました。