Java Script入門1

基礎編（演算）

Java Script（ジャバスクリプト）とは？

  • JavaScript（ジャバスクリプト）ブラウザの中で動くプログラミング言語（げんご）で、ブラウザさえあれば動きますので、カンタンに始められます。
    • ※逆に他のプログラミング言語は、色々インストールが必要だったりします。
  • 名前が長いので、ココでは【 JS（ジェイエス） 】と、よぶことにします。
  • ちなみに【 JAVA（ジャバ） 】という有名なプログラミング言語がありますが、JSとは特に関係ありません。
  • 【JS】は、【HTML】や【CSS】と同じく、現在のWEB技術（ぎじゅつ）には欠（か）かせないプログラミング言語です。今のサイトは【HTML】【CSS】【JS】の、3つはほぼ必ず使われています。
  • また、WEB以外でも【JS】がつかえる環境（かんきょう）がふえていますので、【JS】を覚えれば色々なところで役にたつ言語でもあります。

Java Script（ジャバスクリプト）とは？

記述方法（きじゅつほうほう）

  • サイトでJSを使うためには、2種類の使い方があります。
  1. HTMLファイルに直接（ちょくせつ）書く方法。
  2. 別ファイルに書いて、それをHTMLから読み込ませる方法。※CSSと同じ。

HTMLファイル

JSコード

JSコード

HTMLファイル

JSファイル

別ファイルを読む

①

②

  • 基本（きほん）②の方法で行いますが、①の方法もさらっと書いておきます。

  • 下記のようなタグを書き、その中にJSを記載します。

<script>
    //ここにjsを書けば動きます。
</script>

    <script src="main.js"></script>
</body>　←bodyの終わりタグの上に書く

※ファイル名が「main.js」で、HTMLファイルと同じ階層に設置されている場合のパス。パスの指定方法はCSSや、画像と同じです。

記述方法（きじゅつほうほう）

  • 次は②の別ファイルに保存しておき、よみこむ方法です。
  • HTMLファイルの</body>（bodyタグの終わり）の上に、以下のコードを書けば読み込まれます。※ここではやらなくてもOKです。
  • ちなみに</body>（bodyタグの終わり）以外の場所に書いても読み込まれますが、jsファイルがもしイッパイ書かれていた場合、読み込みのに時間がかかってしまいます。
    • jsファイルの読み込み中は、HTMLファイルの読み込みが止まってしまうため「サイトが、なかなか表示されない」場合があります。。
  • <body>の最後に書くことによって、見ている人を待たせずに読み込みができるということです。

変数（へんすう）

  • さて、jsの基礎（きそ）というか、プログラミングの基礎を学んでいきましょう。まずは変数です。
  • 変数とは名前の通り、変化する数字などを入れる「箱」のような物と考えてください。
    • 変数を作る事「宣言」（せんげん）すると言います。
    • 変数を入れておくことを「代入」（だいにゅう）すると言います。
  • 変数の名前は、ほぼ自由に付けれますが、少しだけ【使えない単語（たんご）】や【最初の文字に数字はダメ】などのルールがあります。※1aという名前は✕。a1ならOK。
    • 使えない単語を予約語（よやくご）と言います。
      • 予約語は、このスライドを下にすすめば確認できます。

変数

（箱）

10という数字（値）

10

代入

変数 aaa を作りまーす！

宣言

宣言→変数をつくること

①

②

代入→箱に入れること

予約語（よやくご）

  • jsの予約語です。
  • 【予約語】とは、プログラミング言語で、すでに使っている単語です。
  • そのため、変数の名前に使うと【もうその名前はつかっているよ！】と、エラーになってしまいます。
  • 「 宣言 」方法
  • 「 代入 」方法 
var aaa;

変数 aaa を作りまーす！

変数 aaa

10

10という数字（値）が変数に入ります。

変数 aaa  

この時点では、変数はカラです。

※変数名がaaaの場合

aaa = 10;
  • 文章の終わりに必ず【 ; 】（セミコロン）をつけます。
  • JSの場合はつけなくても動くのですが、他のプログラミング言語などでは【つけないとエラー】になることが多いので、つけるようにクセつけましょう。

もくじへ戻る

  • 変数の作り方は以下のように、【 var 】（バー）と書いた後に、スペースを開けて名前を宣言（せんげん）して作ります。

変数（へんすう）

カラ

var abc = 10;

「宣言（せんげん）＋代入（だいにゅう）」方法

※変数に入れる値が決まっている場合は、省略して書くのが一般的です。

※注意点

var abc;
abc = 10;

var abc; ※2回めなのでエラー
var abc;
abc = 10;

abc = 120; ※変数abcが120に上書きされる

変数（へんすう）

  • 宣言と代入は、省略（しょうりゃく）して一行で、書くことも出来ます。
  • 同じ名前の変数は、一度しか宣言（せんげん）出来ません。
  • 代入は何度でも出来ます。（ただし上書きされます）
var abc = 10;

var abc = 120; ※abcを、2回宣言（せんげん）してるのでエラー
  • ダメな例
var abc = 10;
abc = 120; ※abcが120になる
  • 正しい例

変数（へんすう）

  • 省略（しょうりゃく）して書いた場合も同じで、2回宣言（せんげん）してしまうと、それだけでエラーになります。

var hoge = 'こんにちは';
var hoge2 = 'Hello';

var hoge = '10';
※数字ではなく、文字列として代入されます。

変数（へんすう）

  • 変数には文字列（もじれつ）も代入出来ます。※文字が２つ以上のものを文字列（もじれつ）といいます。
  • 文字列の場合は文字列を【 ” 】か【 ' 】で囲（かこ）みます。
  • jsの場合は【 ' 】を使うのが一般的（いっぱんてき）なので、それでいきましょう。
    • ※理由としては、HTMLで【class=""】みたいに【 " 】を使うことが多いので、見分けがつきやすいように、JSでは【 ' 】で統一（とういつ）します。
  • 数字も文字列として使いたい場合は、同じように囲むと、数字ではなく文字列として認識（にんしき）されます。※この違いは後で詳しくやります。
  • 変数に、変数を代入することも出来ます。その場合は、中身の値だけが代入されます。
var abc = 10;
var xyz = abc;
console.log(xyz)
※10と出力される

試してみよう

↑ Javascriptを選択

  • では、変数を作ってみましょう。
  • 今回はまだ基礎（きそ）なので、ファイルに直接（ちょくせつ）かかず、カンタンにプログラミング言語が動かせるサイトを使います。
  • 右のサイトをクリックして開いてください。（paiza.io）
    • サイトが開いたら、下の画像のように、クリックしてください。
      • 次に続きます。

試してみよう

  • この画面になればOKです。
  • 最初から書いてあるコードは消してはいけません。
    • ​次のページに続きます。

試してみよう

  • まずは下の画像のように、入力してみましょう。※自分でキーボードをたたいて、入力します。
  • 【 var abc = 100; 】の部分が、【abcという変数をつくって】、【そのabcに100という数字をいれる】という命令（）
  • その下の【console.log()】は、「コンソールに表示する」という命令（めいれい）で、（）の中のものを、コンソール（下の画像の赤線のとこ）に表示してくれます。
  • 表示することを【出力（しゅつりょく）する】と言いますので覚えておきましょう。

試してみよう

  • まずは画像のように、入力して、下の実行（じっこう）ボタンを押してください。
  • 【var abc = 100;】の部分が、変数ですね。
  • その下の【console.log()】は、「コンソールに表示する」という命令（めいれい）で、（）の中のものを、コンソール（下の画像の赤線のとこ）に表示してくれます。
  • 表示することを【出力（しゅつりょく）する】と言いますので覚えておきましょう。

試してみよう

  • もう少し試してみましょう。
  • 今度はコードを下のように変えてみます。
  • もう一度実行すると出力される内容が変わりましたね？今度は100は表示されていません。
  • つまり【console.log()】は（）の中のものだけを出力するということです。
    • このpaiza.io（パイザ.アイオー）というサイトは、このようにカンタンにプログラムを試すことができますので、しばらくはこのサイトで確認しながら進んでいきます。
      • ※次はテストなので、テストはpaiza.ioを使わず、自分で考えてみましょう。
1 + 2; //たす
1 - 2; //ひく
1 * 2; //かける
1 / 2; //わる

※「足す」や「引く」は、学校の算数と同じですが、
　　「かける」と「わる」は、記号が違うので気をつけてください。

2 * (2+4)　← １２になる。
※このように（）をつけて、優先順位（ゆうせんじゅんい）を変えることもできます。
算数と一緒ですね。

算術演算子（さんじゅつえんざんし）

  • 次は、演算子（えんざんし）というものを学びましょう。
  • なんか言葉がむずかしいですが、【+（たす） -（ひく）】とか、【<（小なり）>（大なり）】のことです。もう知っていますよね？
  • その演算子（えんざんし）の一番よく使う、【算術演算子（さんじゅつえんざんし）】から見ていきましょう。
  • 少し変わった算術演算子として、【%】というのがあります。
  • %は【余り（あまり）の数だけ】を結果にします。 
10 % 3; 
※結果は1

※余り以外の数字は無視されます。

var x =  21 % 3; 
console.log(x); 
※結果は0。つまり割り切れているので、21は3の倍数（ばいすう）とわかる。

算術演算子（さんじゅつえんざんし）

  • 余りがない場合、つまりは割り切れる（9÷3など）の場合は0になります。
  • そのことを利用して、「◯◯の倍数（ばいすう）」を調べたいときによく使われます。
  • ちなみに倍数とは、「ある数を足していったら、なる数」です。たとえば、3+3は6なので【6は3の倍数】、さらに6+3は9なので【9は3の倍数】です。さらに9+3は12なので【12は3の倍数】…という感じです。
    • このように永遠（えいえん）に倍数は存在します。まぁ算数で習ったのと同じです。習っていない人はそのうち習います。
var x = 10 + 30; 
console.log(x); 
※40が出力される。
var x = 10 + 30; 
var y = x * 2;
console.log(y);
※80が出力される。

算術演算子（さんじゅつえんざんし）

  • 計算の結果を変数に代入することも出来ます。
  • さらに数字が代入された変数を式に使うことも出来ます。
var x = 10 + 10; 
x = x + 10; 　←変数xに10を足して、上書き（代入）している。
console.log(x);  ←30が表示されます。
var x = 10 + 10; 
x += 10; ← 短くした部分。
console.log(x);

※【 + 】以外の演算子（えんざんし）でも書き方は同じです。【 = 】は必ず右側です。

算術演算子（さんじゅつえんざんし）

  • よくあるプログラムとして、元の変数に、10を足したい場合は、このような書き方になります。
  • これを短くした書き方もあります。
  • このような処理は非常に良く使いますので、覚えておきましょう。
var x = 1; 
++x; ←これだけで1足した数が代入されます。
console.log(x);  
※2が表示される。
var x = 1; 
--x; ←これだけで1ひいた数が代入されます。
console.log(x);  
※０が表示される。
  • つまり    
x = x + 1;

の略が   

++x;

です。   

  • 同じく
x = x - 1;
--x;

算術演算子（さんじゅつえんざんし）

です。   

の略が   

  • さらに、プログラムを作っていると、「変数の値を1ふやしたい」や「変数の値を1へらしたい」というケースが良くあります。
  • そのため、よりカンタンに書ける、特殊な書き方があります。
  • この書き方を【インクリメント】と【デクリメント】と呼びます。
    • 【++（1ずつ足す）】→　インクリメント
    • 【--（1ずつ減らす）】→　デクリメント 
var x = 1; 
var z = ++x; //変数xに1足した数（計算した後）を変数zに代入。
console.log(x);  //結果2になる（上記で++xが実行されているため）
console.log(z);  //結果2になる（2になった状態の変数xを代入したため）
var x = 1; 
var z = x++; //変数x（計算する前）を変数zに代入した後で、1足している。
console.log(x);  //結果2になる（上記でx++が実行されているため）
console.log(z);  //結果1になる（1足される前の、変数xが代入されたため）

※今はなんとなくの理解でOKです。

算術演算子（さんじゅつえんざんし）

  • ちなみに[++x]ではなく[x++]とも書けますが、微妙（びみょう）に意味が変わり、場合によってはエラーの元になります。
  • 基本は[++x]で使いましょう。

[++]が先の場合（++x）

[++]が後の場合（x++）

var a = '私は' + 'トムです';
console.log(a);  
※「私はトムです」と出力される。
var x = 'こんにちは'; 
var z = x + 'トム';
console.log(z);  
※「こんにちはトム」と出力される。

算術演算子（さんじゅつえんざんし）

  • 【+（たす）】の場合は、文字列（もじれつ）をつなげることもできます。
  • ただし、【+（たす）】以外の算術演算子（さんじゅつえんざんし）は、文字列（もじれつ）には使えません。
var a = 'トムヤンクン' - 'トム';
console.log(a); 
※NaN（ノット・ア・ナンバー）という、エラーになる。
var a = '機関車トムソーヤ' - 'ムソーヤ';
var b = a + 'ーマス'
console.log(b); 
※NaN（ノット・ア・ナンバー）という、エラーになる。
var x = 'こんにちは'; 
console.log(x + 'トム'); 
※「こんにちはトム」と出力される。
var x = 10; 
console.log(10 * 10);   
※「100」と出力される。

例

算術演算子（さんじゅつえんざんし）

  • ちなみに［console.log()］の（）の中でも計算は可能です。
  • この場合は計算した結果だけを出力してくれます。

比較演算子（ひかくえんざんし）

  • 次は、比較演算子（ひかくえんざんし）を学びましょう。
  • 比較演算子（ひかくえんざんし）とは
    • <（右が大きい）
    • >（左が大きい）
    • ===（同じ大きさ）
      • という記号を使い、【正しい】か【正しくないか】を判定（はんてい）する演算子です。
  • たとえば
    • 「1<2 」は【正しい】「1>2」は【正しくない】「1===10」も【正しくない】といった感じです。

  • 必ず「正しい：true（トゥルー）」か、「正しくない：false（フォールス）」どちらかに変化します。

  • 「true（トゥルー）」とは「真（しん）」、「false（フォールス）」は「偽（ぎ）」とも言います。
var x = 1 < 2; 
※このように計算をすると…
var x = true; 
※trueに変化する！
bool x = 10 < 2; 
※このように計算をすると…
bool x = false; 
※falseに変化する！

１<２は【正しい】ので

trueに変化

１０<２は【正しくない】ので

falseに変化

比較演算子 

var x = 10 < 10;

どちらも 正しい

＝は必ず右側に付くと覚えましょう！ 

var x = 10 >= 10; 
var x = 10 <= 10; 

var x = 10 > 10;

どちらも 正しくない 

var x = 10 !== 10;

正しいを逆にして falseになる

  • 注意点としては、下のような場合は、どちらも【 false（フォールス）】になります。
  • 「<」は「 左 より 右が大きい 」を表すので、「 同じ」は 【 false （フォールス）】です。
  • 同じく「>」は「 右 より 左が大きい 」を表すので、「 同じ」は【 false（フォールス）】です。
  • 同じ値もふくむ場合（ 以上 ）とするには、下のように[ = ]と合体させます。
  • 他にも、少し変わった【 ! 】というものもあります。
  • これは、他の演算子と組み合わせて使い、【正しい時は false、正しくない時は true】と結果を 逆にする 演算子です。下のように=の数を1つ減らして、!に変えて使います。

比較演算子

true 

var x = "こんにちは" === "こんにちは"; 
var x = "こんにちは" === "コンニチハ";

false

  • [===]と[!]のみ、文字列（もじれつ）を比べることができます。

  • 変数を使う事も出来ます。

    変数の場合は、代入されている値（あたい・ね）をくらべられます。

var a = 100; 
var b = 20;
var c = a === b; 
var a = 20; 
var b = 20;
var c = a === b;

true

false

論理演算子

true 

var a = 10 === 10 && 20 === 20;

これは左右が「true」か「false」じゃないので、比較がおかしい。※変な結果になる

var a = 10 && 10;
var a = 10 < 20 && 10 === 10 || 10 > 10 || 10 < 10;

true 

var a = 'こんにちは' && 'ハロー';
  • 次は論理演算子（ろんりえんざんし）です。
  • 論理演算子は比較演算子（ひかく）と同じように、「 true」「 false」を結果として返します。
  • 基本な論理演算子は、
    • 【 &&（左右"とも" true の時は、 true ）、 ||（左右どちらか true の時、 true 】を使います。
  • 違う点は、左右の値とも「 true」「 false​」を使って演算をします。つまり、論理演算の左右には、必ず比較演算（ひかくえんざん）か論理演算（ろんりえんざん）になります。
  • この書き方からわかるとおり、【論理演算子（&&や||）は、比較演算子（>や<や===）よりも、後に計算されます】
    • かけ算より、たし算が後に計算されるのと同じですね。

論理演算子

trueになる 

var a = 1 === 100000000;
console.log(!a);

falseになる 

var a = 1 <= 10;
console.log(!a);

falseになる 

var a = 1 != 100000000;
console.log(!a);

☆ちなみに…

実は、IT系の用語の読み方は、 けっこうテキトウなので、人によってかなり違う事があります。

特に、比較演算子や論理演算子の読み方は、あまり統一されていません。

一般的なのは、

【＜（小なり）】【＞（大なり）】【＜＝（以上）】【＞＝（以下）】【＝＝（等しい）】【！＝（ノットイコール）】【&&（かつ・アンド）】【||（または・オア）】【！（ノット）】

みたいな感じです。

  • また、かわったものとして【！】（エクスクラメーション※ビックリマークでも良いです）があります。
  • これの使いかたは他とは違い、片方のオペラント（値）にだけ付けると、その値が trueなら false、 falseなら trueとなります。

お疲れ様です！

  • まだまだ基礎編（きそへん）は続きます。
  • 基礎（きそ）はタイクツかもしれませんが、本格的（ほんかくてき）にプログラミングを学ぶためにはかならず必要ですので、がんばりましょう！
    • （大人だって諦めるような世界ですので、それを考えれば、ここまで来ただけでも大したものです）
  • 次のレベルに進む元気があれば、下のリンクから基礎編2に進んでください。

お疲れ様です！