課題研究 JavaScriptの基礎理論と活用方法

http://www.tunagle.co.jp～ヒト、モノ、社会をつなぐ～

つなぐる株式会社代表取締役　井口敬之

課題研究【 JavaScript の基礎理論と活用方法】

２０１５．０６．１５

つなぐる株式会社


プログラムとは

コンピュータに対する命令（処理）を記述したもの。wiki より引用

• 順番に処理をする。（順次）• 繰り返し処理をする。（反復）• ある条件の時に処理をする。（分岐）



プログラミング言語

プログラムを書くために使われる言葉

• Java• C#• VB(Visual Basic)• C• C++• Ruby• Perl• JavaScript

さぁ、やれ！はい！



Java と JavaScript って違うの？

これぐらい違います！



Java と JavaScript って違うの？

これぐらい違います！

インドインドネシア



　 Java VS JavaScript

項目 Java JavaScript

実行形式コンパイラインタプリタ

型チェックが厳しい自由

用途主にサーバ側主にクライアント側

インターネットにアクセス

ページをダウンロードクライアントサーバ



JavaScript

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

wiki より引用

var username = prompt(" 名前を入力して下さい ", ""); // 入力を要求する if ( username != "" ) { // 入力があった場合 document.write(username, " さん、ようこそ！ "); // 画面に出力}else { // 入力がなかった場合 document.write(" 名無しさん、ようこそ！ "); // 画面に出力}



それでは実際に書いてみましょう！

1. デスクトップに「 exercise 」フォルダを作成2. その中に「 helloworld 」フォルダを作成



Hello World

<html> <body>

<p id="text"> この部分のテキストを書き換えたい！ </p>

<script type="text/javascript"> var text = document.getElementById("text"); text.innerHTML = "hello world"; </script>

</body></html>

1. 「 index.html 」ファイルを作成2. 以下の内容を記述

JavaScript という言語で書かれたプログラムの集まりを「スクリプト」という。



JavaScript の基本的なルール

大文字小文字は区別する

<html> <body> <script type="text/javascript">

var num = 10;document.write("<p>" + num + "</p>");document.write("<p>" + Num + "</p>");

</script> </body></html>




空白と改行は無視される

var name = "gose"; var name ="gose";var name = "gose";var name ="gose";

var name = "gose";




最後にセミコロンを付ける

var age = 10;




「 // 」または「 /**/ 」はコメントとして扱われる

コメントとは、スクリプトの中に書かれるがプログラムとして実行されない文書のこと。

var name = " 御所実業 ";name = name + " 高校 "; // 高校の名前を生成する

/* * 商品の消費税を * 計算する */var product = 100;var price = 0;price = product * (100 + 8) / 100; /* 税率は 8% とする */



JavaScript のデータ型

文字列文字を扱うとき

数値数字を扱うとき

論理値「 true 」、「 false 」を扱うとき

null「値が存在しない」を扱うとき



JavaScript の変数

変数名の前に、「 var 」をつけること



変数とは、扱うデータを一定期間記憶して、必要なときに利用できるようにするために、データに固有の名前を付けたもの。



JavaScript の予約語

既に仕様で使うと決められているキーワード

breakcasecatchcontinuedebuggerdefaultdeletedoelsefinallyforfunctionif

ininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewith

[ 引用 ]https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words



JavaScript の演算子

演算に使う記号のこと

演算とは、広い意味で「計算すること」を意味する。例えば、　足し算、引き算、掛け算、割り算。　文字を連結する。




単一演算子算術演算子関係演算子等価演算子ビットシフト演算子バイナリビット演算子バイナリ理論演算子三項演算子代入演算子カンマ演算子





JavaScript における演算子の優先順位と結合性

たくさんある演算子を同時に使った場合、優先順位に従って式が評価される。

演算子は、結合性に従って式を評価する。

結合性演算子

右 ! ++ --

左 * / %

左 + -

左 > >= < <=

左 == != === !==

左 &

左 &&

左 ||

右 =

() 括弧は、演算子ではないが、最優先で評価される



JavaScript における演算子の優先順位と結合性



結合性演算子左 * / %

左 + -

右 =

-------------①

---------------------②

①---------②---------------------------------------------- ③

④---------------------------------



JavaSctipt が実行する順番（順次）

プログラムの上から順番に処理する

<html> <body>

<p id="text"> この部分のテキストを書き換えたい！ </p>


</body></html>



JavaSctipt が実行する順番（順次）

プログラムの上から順番に処理する

<html> <body>


<p id="text"> この部分のテキストを書き換えたい！ </p> </body></html>



JavaSctipt の繰り返し処理（反復） - while 文 -

一定の条件が満たされている間、処理を繰り返す

<html> <body> <p id="text"> この部分のテキストを書き換えたい！ </p> <script type="text/javascript"> var text = document.getElementById("text");

var i=0; while(i<10){ text.innerHTML += " 繰り返し "+(i+1)+"回目 <br>"; i=i+1; }

</script> </body></html>



JavaSctipt の繰り返し処理（反復） - for 文 -

一定の条件が満たされている間、処理を繰り返す


for(var i=0; i<10; i++){ text.innerHTML += " 繰り返し "+(i+1)+"回目 <br>"; } </script> </body></html>



JavaSctipt の条件分岐（分岐） - if 文 -

ある条件を満たすなら処理 A を、そうでなければ処理 B を行う。


for(var i=0; i<10; i++){ if(i==0){ text.innerHTML += "<br> 繰り返し "+(i+1)+" 回目 <br>"; }else{ text.innerHTML += " 繰り返し "+(i+1)+" 回目 <br>"; } } </script> </body></html>



知っておくと便利！関数

まとまりのある処理を束ねたもの



知っておくと便利！関数


for(var i=0; i<10; i++){ if(i==0){ writeText("<br> 繰り返し "+(i+1)+"回目 <br>“); }else{ writeText(" 繰り返し "+(i+1)+"回目 <br>“); } }

/* html を書き換える */ function writeText(html){ var text = document.getElementById("text"); text.innerHTML += html; } </script> </body></html>

Technology

課題研究 JavaScriptの基礎理論と活用方法