2014-10-06

2014-10-06

プログラム言語Add Star

JavaScript

 

 

プログラム言語の分類 

  • CPUが理解できる機械語と、人間が理解できる高水準言語がある

機械語（低級言語）
  • コンピュータが直接読み取ることができるもの
  • 2進数で表現される数字の羅列

高水準言語（高級言語）
  • 人間が理解しやすいように設計されているプログラミング言語
  • 命令が英単語をもとに作られていることが多く、低級言語と比べると比較的人間が使う言葉に近い
  • 書かれたプログラム(ソースと呼びます) を直接コンピュータが処理するわけではなく、コンパイラあるいはインタープリタを使用して低級言語に置き換える、という作業が必要

インタプリ方式とコンパイラ方式

インタプリ方式

コンパイラ方式

初心者のプログラミング

コンピュータのしていること

計算です。

もちろん、いろいろな計算です。

人間なら面倒だと思うありとあらゆる計算をやってくれています。

ですから、あらためて「数学」という言葉を持ち出すまでもありません。


しかし、人間が「あっ、そ～だ！」と後から考えたことを、コンピューターに伝えようとすると、コンピュターがわかる言語で書かなくてはいけません。


解釈としてはまちまちですが、

  • 大きな意味を伝えようとする「プログラミング」
  • 小さな意味を伝えようとする「スクリプト」

と言っておきます。

このとき、いろいろな計算をしてもらうために「ルールの計算式」をつくり、そこにいろいろな値を当てはめた場合を計算してもらいます。

そのときにべんりな考え方が「変数」です。


変数

プログラミングにおいて、変数（variable）とは、プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものです。


宣言（変数宣言）

プログラムの中でどのような名前の変数を用いるのかを、プログラミング言語の文法にのっとって明確に示すことを変数の宣言と呼びます。

いくつかのプログラミング言語では、変数を宣言する際にその名前だけでなくそのデータ型も指定する必要があります。


代入

宣言した変数に対して実際にデータを関連付けることを代入と呼びます。

ある変数に対して初めて行う代入は、特に初期化と呼びます。


参照

その変数に代入したデータを利用することを、変数の参照と呼びます。


スコープと寿命

変数のスコープとは、変数がソースコード内のどこで使えるかを示す概念です。

一方、変数がプログラムの実行時においていつ使えるかを規定する概念が変数の寿命です。



この「変数」を使っての四則演算などの処理や関数を使った制御が、授業でのプログラミングの殆どです。


など、ほとんど同じような記述の仕方をします。


この授業では、基本的な記述の仕方から簡単なWebアプリを動かすまでがカリキュラムですが、基本的なことが理解できていれば「プログラマー」に育成するという会社からの求人があるので、「プログラマー」志望の人も心配はいりません。



初心者にとっては、日常的な計算の考え方をコンピュータに伝える言語で記述できるかどうかが勉強の本質です。

授業では、単純な「四則演算」から始めます。


しかし、初心者にとってもずかしいのも「変数」です。

最初の段階は、器の使い方にこだわらずに、使った結果がどうなるのかを実感する練習をします。

数値の計算を、変数に置き換えてみると・・・という方法で勉強します。


 

計算式

 

( 150*2 + 120*2 ) / 2 = ans（答え）



 

JavaScriptの場合

 

この書き方、電卓の処理と同じです。

この書き方で、ブラウザのアラートボックスに「答え」を表示することはできます。

しかし、数式をそのまま入れただけ。

プログラミングとは言えない。

なぜなら、人間がすでに答えを出した内容を入れているだけで、コンピュータに計算をさせていないから。


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>JavaScriptを使った計算</title>
</head>
<body>
<script>
alert((150*2 + 120*2)/2);
</script>
</body>
</html>

上記の場合は、単なる数式なので無理に「変数」置き換える必然性はありません。

数値が変化することにより、結果が変化する練習をとおして、「変数」について理解していきましょう。


JavaScriptとは


XHTML＋CSSで作られたWebページにJavaScriptを組み合わせると、いままでは印刷物のように動かないページしか作れなかったWebページに動きや機能といった振る舞いを追加することができます。


JavaScript（ジャヴァスクリプト）
  • Netscape社の開発したHTML内に埋め込めるオブジェクト指向のスクリプト言語
  • 主にWebブラウザ上で動作し、HTMLの動的書き換えや入力フォームの自動補完など、Webページの使用感向上を目的として使用される
  • 見た目はJava言語やC、C++に似ていますが、 Javaとは違うもので互換性はまったくない
  • JavaScriptはブラウザがインタプリタとなりスクリプトを実行する
  • OSに依存しない
  • 特別な開発環境を必要としない（ソースは通常のテキスト）
  • プログラムの変更が容易

 

ECMAScript（エクマスクリプト） 

 

  • ECMA：European Computer Manufacturer Association（ヨーロッパ電子計算機工業会）が定めたJavaScriptの標準仕様
  • JavaScriptは、インタプリタをブラウザ中に用意しているため、Webブラウザごとの機能の違いが問題となり、ECMAインターナショナルにより標準化される

 

JScript

 


JavaScriptでできること

ドキュメント操作
  • Webページに文字を表示する
  • 文字や背景の色を指定する
  • Webページを切り替える
  • クッキーの読み書き

ウィンドウ
  • 確認ダイアログを表示する
  • 新しいウィンドウを表示する
  • ウィンドウのサイズを指定する

イベント
  • ページを読み込むときにメッセージを表示する
  • マウスポインタをのせると色が変わる

フォーム


JavaScriptの作業環境

テキストエディタ

ブラウザ

エラーの確認
  • IE：ステータスバーのエラー表示をダブルクリック
  • Firefox：エラーコンソールでエラー内容を確認できる

 

Firebug

 

 

 


オブジェクト指向言語とは


オブジェクトベース言語

オブジェクトの基礎を知る

プロパティ
  • オブジェクトに用意されているデータ

メソッド（Method）
  • オブジェクトの操作

例えば、

 

テレビなら

 

  • 「チャンネル」「音量」は、プロパティ
  • 「チャンネルを～に変更する」「音量を上げる」「音量を下げる」は、メッソッド

 

料理（卵焼きを作る）なら

 

  1. 「たまご」の「割る」メソッドと「混ぜる」メソッドを実行する
  2. 「甘さ」プロパティを加算する
  3. 「焼く」メソッドに、時間パラメーターと火力パラメーターを付加して実行する
  4. 醤油オブジェクトで「塩辛さ」パラメーターや「色」パラメーターを変える

このレシピのことを「プログラム」と呼び、手順のことを「アルゴリズム」と呼びます。


Webブラウザはオブジェクトの集まり
  • windowオブジェクト
  • documentオブジェクト
  • imageオブジェクト

JavaScriptとDOM
  • 初期のJavaScriptでは、オブジェクトとして扱えるHTML要素は多くありませんでした
  • HTMLドキュメントの任意の要素をオブジェクトとして扱えるようにした技術が「DOM（Document Object Model）」

記述のルール

  • シングルコーテーションもダブルコーテーションも同じ扱いです
  • Google JavaScript Style Guide ではシングルコーテーションの使用を推奨しています


行の終わりには必ずセミコロンを付ける
<script>
window.alert('セミコロンは必ず記述しましょう');
</script>

大文字・小文字について

JavaScriptは大文字と小文字を区別します。


コメントの記述法

 

コメントを１行で記述する

 

//　コメントです。日本語で記述できます。

 

コメントを複数行で記述する

 

/*　複数行のコメントです。
日本語で記述できます。*/

終了タグ「/」の前には「\」を付ける

この記述を「エスケープ」と呼びます。


 

円マークとバックスラッシュ

 

 

 

C:￥My Document￥Pictuer￥

 

 

「Cドライブ」内に有る「マイドキュメントフォルダ」の中にある「ピクチャーフォルダ」をさします。


情報の入力量が増えた段階で、キーから直接文字入力できるようにした日本語拡張キーボードが開発されました。

そのとき英文作成時にも便利なように、ふだんあまり使われないとだろうと思われたバックスラッシュ（\）のキーに対応する文字コードに円記号を割り振ったのだろうと思われます。


  • Windowsでは「バックスラッシュキー」
  • Macでは「文字パレット」から（キー入力の円マークは使用不可）

記述する場所

bodyタグの間に記述する

HTML文書内に実行結果を表示したいとき。


属性に記述する

イベントハンドラから直接呼び出すとき。

「input」などHTMLタグの属性に記述します。


headタグの間に関数を記述する

イベントハンドラに指定した関数を呼び出すときなどは、「head」内に関数部分を記述します。


HTML内部に記述する
  • 「</body>」の前に記述します
<body>
<script>
　ここにコードを記述
</script>
</body>


HTMLファイルから外部JavaScriptファイルを読み込む

「JavaScriptファイル」を別に作成し、「script要素」でそのファイルの場所を指定します。

スクリプトファイルは「src属性」で呼び出します。


<scriptsrc="jsファイル名"></script>

エラー

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>Hello!</title>
</head>
<body>
<script>
window.alert('Hello World!!);
</script>
</body>
</html>

Dreamweaverでは「エラー」表示されます。

 

f:id:web-0127:20140313214703j:image

 


ブラウザでは表示されません。


Firefoxの「要素を調査」
  • コンテクストメニューから

 

f:id:web-0127:20140313215606j:image

 


 

f:id:web-0127:20140313215607j:image

 


Chromeの「要素の調査」
  • コンテクストメニューから

 

f:id:web-0127:20140313220601j:image

 


 

f:id:web-0127:20140313220602j:image

 



JavaScript開発においての注意点


 

 

  • サーバー側でも入力漏れがあるかどうかチェックする仕組みをつける。
  • たとえばサーバー側のPHPなどのサーバーサイドプログラムで、
    エラーを検知して先に進まないようにする。

 

 


《JavaScript有効》

 

f:id:web-design-js:20111101201625j:image

 


《JavaScript無効》

 

f:id:web-design-js:20111101202311j:image

 



JavaScriptでのメニュー表示

JavaScriptを使った動的メニューの場合、JavaScriptを無効にすると表示されない可能性があります。


<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>JavaScriptメニューがオフの場合</title>
</head>
<body>
<script>
　メニューを生成するJavaScriptのコード
</script>
<noscript>
<!--
　代替えメニューを表示するHTMLのコード
-->
</noscript>
</body>
</html>


DreamweaverでJavaScript支援機能
  • 「Ctrl」+「space」

 

f:id:web-0127:20140313223412j:image

 


《Macの場合》

「Spotlight」のショートカットキーと重なります。

オフにしないと、機能しません。注意しましょう。

 

f:id:web-design-js:20111105193146j:image