全社向けプログラミング講座

1回目

プログラミングって何？

人間が楽するためのもの

皆にコーディングを学んでほしい

-- バラク・オバマ

この国のすべての人がコンピュータープログラミングを勉強すべきです。なぜなら、あなたは思考の方法を学べます

-- スティーブ・ジョブズ

2012年から新学習指導要領に基づき、中学校の技術家庭科で「プログラムによる計測・制御」が必修に

子どもがプログラミングを勉強する時代

~研修の目的~

みんなでプログラミングを覚えよう

子供が勉強する時代に備えよう

SEの仕事が少し理解できるかも

プログラミング言語

コンピュータに命令するための言葉

プログラミング言語にもいろいろある

・C

・Java

・Objective-C

・C++

・C#

・PHP

・JavaScript

・Python

・Perl

and more …

プログラミング言語にもいろいろある

・C

・Java

・Objective-C

・C++

・C#

・PHP

・JavaScript←今回はこれでプログラミングを学ぶ

・Python

・Perl

and more …

用意するもの

・ブラウザ(firefox)

・テキストエディタ(メモ帳など)

使用する言語はJavaScript

JavaScriptとは

プログラミング言語のひとつである。
Javaと名前が似ているが、異なるプログラミング言語である。

オブジェクト指向のスクリプト言語であることを特徴とする。

実行環境が主にウェブブラウザに実装され、
動的なウェブサイト構築や、リッチインターネットアプリケーションなど
高度なユーザインタフェースの開発に用いられる。
（ウィキペディア）

１回目

Webページ(html)
ヘッダ部分に書いて動かす
jsファイルを呼び出して動かす
変数
演算子

２回目

if文
while文
for文
関数
スコープ(グローバルとローカル)

研修全体アジェンダ

３回目

DOM
イベント
タイマー

では始めましょう

Webページ（HTMLファイル）

<html>
   <!-- ヘッダ -->
   <head>
      <title>文書のタイトル</title>
   </head>
   <!-- ボディ -->
   <body>
      <p>メインコンテンツ</p>
   </body>
</html>

HTMLファイルを開きスクリプトを加える

<html>
    <head>
        <script type="text/javascript">
        /*（A：ここにプログラムを書く）*/
        </script>
    </head>
    <body>
        <script type="text/javascript">
        /*（B：ここにプログラムを書く）*/
        </script>
    </body>
</html>

A、Bどっちに書いてもOK

さっそく書いてみよう

ヘッダ部分に書いてみましょう

<html>
    <head>
        <script type="text/javascript">
            alert("Hello World!");
        </script>
    </head>
    <body>
    </body>
</html>

ファイル名"1-alert.html"で保存した後、

保存したファイルをダブルクリック！

処理が記述されたjsファイルを呼び出して

実行することも可能

<html>
    <head>
        <script src="helloworld.js" type="text/javascript">
        </script>
    </head>
    <body>
    </body>
</html>

ファイル名"helloworld.js"を作成

alert("Hello World!");

"1-alert.html"と同じディレクトリに保存した後、

先ほど同様に"1-alert.html"をダブルクリック！

他のダイアログもやってみよう

<html>
    <head>
        <script type="text/javascript">
            var answer = confirm("今んとこ楽勝？");
            alert(answer);
        </script>
    </head>
    <body>
    </body>
</html>

確認ダイアログ

課題１−１

<html>
    <head>
        <script type="text/javascript">
            var answer = confirm("今んとこ楽勝？");
            alert(answer);
        </script>
    </head>
    <body>
    </body>
</html>

確認ダイアログの処理が記述されたjsファイルを作成し、

呼び出して実行してください

変数

データを入れる箱
わかりやすい名前を付けて、プログラムの中で使い回す

変数とは

var message = "hello world!";
var count = 3;

イコール「=」は代入演算子（右辺のものを左辺に代入）

変数

変数を呼び出してみましょう
→例：messageの中身を出力する

<html>
    <head>
        <script>
            var message = "hello world!"
            alert(message);
        </script>
    </head>
    <body>
    </body>
</html>

演算子

加算：＋

減算：ー

乗算：＊

除算：／

<script>
　var x;
　x = 10 * 2;     // 20
　x = 3 / 3;      // 1
　x = x + 5;      // 1+5=6　（x += 5; と書いても同じ）
　x++;            // 6+1=7
　x--;            // 7-1=6 
　alert(x);
</script>

インクリメント：＋＋
デクリメント　：ーー

まとめ

プログラミングとは
プログラミング言語の種類
JavaScriptとは
Webページ(html)
ヘッダ部分に書いて動かす
jsファイルを呼び出して動かす
変数
演算子

JavaScriptに用いられるデータ型

数値　（number）
文字列（string）
論理値（boolean）
null　（中身なし）

以下は参考まで

オブジェクト(配列、関数、組み込みオブジェクト)
undefined（定義されていない）

変数

以下の実行処理結果はどうなる？

課題１−２

<script>
    var a = "100";
    var b = "200";
    var x = a + b;
    alert(x);
</script>

プログラミングって何？

人間が楽するためのもの

JavaScriptとは

１回目

２回目

３回目

では始めましょう

変数

変数

演算子

まとめ

変数

課題１−２

プログラミング講座1回目

プログラミング講座1回目

n_shimizu

プログラミングって何？

人間が楽するためのもの

JavaScriptとは

１回目

２回目

３回目

では始めましょう

変数

変数

演算子

まとめ

変数

課題１−２

プログラミング講座1回目

More from n_shimizu