Weboo!

CSS3&javascript&jQuery

 

 

 

jsもくじ

JavaScriptとは？

JavaScriptとは、WEBページに動きや効果をつける為に開発されたオブジェクト指向のスクリプト言語（簡易プログラミング言語）です。
C言語やJavaに似た記法や文法を採用した手続き型の言語で、簡潔な記述でプログラムを開発することができます。
オブジェクト指向にも対応していますが、他の多くの言語で一般的なクラスを用いる方式ではなく、既存のオブジェクトの複製に
機能を追加していくプロトタイプベースと呼ばれる手法を採用しています。
関数を変数のように（第一級のオブジェクトとして）扱ったり、関数を引数に取る高階関数を定義できるなど
関数型プログラミング言語の仕様も取り込んでいる言語です。
WEBページのHTMLファイル内に埋め込まれて記述され、WEBブラウザに内蔵されたJavaScript処理系によって
ページの表示時に解釈・実行されることが多く、JavaScriptのみを記述したファイルを読み込む形で利用されることもあります。
インタラクティブな表現（ページ内の要素に動きや効果を加えたり、閲覧者の操作に即座に反応して何らかの処理を行う等）をするのに用いられます。

JavaScriptでできること

  • 演算

    …単純な四則演算のほか、三角関数や円周率等を使用したり、年齢を算出したり、日数を割り出すなど様々な用途で使用します。

  • イベント処理

    …サムネイル画像をクリックすると大きい画像が表示されるようなものから、メニュー項目をクリックすると下の階層のメニューが開くようなナビゲーションまで、様々なイベント処理を行えます。

  • Cookieの管理

    …ログインするユーザー情報や閲覧情報、購入した商品の情報等をブラウザに保存するCookie。これをJavaScriptで扱うことによって、ユーザごとにカスタマイズされたサイトを表示することができます。

  • canvas要素を使った表現、オーディオ、映像の再生

    …HTML5から導入された新要素であるcanvas、audio、video要素を使用することで、3次元グラフィックを2次元平面上に投影することと、オーディオファイルや映像ファイルを扱うことが可能になりました。

  • Google Mapの表示

  • jQueryプラグインを使った処理

    …この他にも使い方次第で沢山のことができます！

JavaScriptとJavaの関係

よく似た名前のプログラミング言語にJavaという言語がありますが、これはJavaScriptと全くの別物です。
名前は似ていますが、中身はメロンとメロンパンほどの違いがあります。
Javaはサーバ（TwitterやFacebookなどのサービスが実際に動いている機械）、Androidや携帯の内部で活躍し、
JavaScriptはクライアント（パソコンやスマホなど、皆が使っている端末）、ウェブページの表示やWEBアプリの処理など
ユーザーに近いところで活躍する言語です。

JavaScriptを使用するメリット

詳しくは次のスライドへ→



















1.簡単に学べる、始められる！

JavaScriptは特別な開発環境やコンパイルの必要が無いので
WEBブラウザさえあれば実行できるというメリットがあります。
Windows,Mac,LinuxなどのOSを問わず、ウェブブラウザとテキストエディタが
あれば開発作業をすることが可能です。

また、導入の敷居が低いことからプログラムのイロハを学ぶのに向いており、
if文やfor文などの基本的な構文に加え、関数やオブジェクトといった
ものも学ぶことができます。

2.できることがたくさん！

JavaScriptではWEBサイトを動きのあるものにするだけでなく
チャットのようなシステムを作ったり、スマホアプリを作ったり
ゲームを作ったりと、WEBサイト制作以外にも広く活用できます。
Monacaなどのアプリ開発サービスでは、JavaScript を使って
AndroidアプリやiOSアプリを開発でき、さらにはバックエンド（サーバーで動くプログラミング）の
Node.jsでもJavaScriptが使われるなどオールラウンドなプログラミング言語として進化を遂げています。

3.日々進化している！

HTML5の発表後、新しい要素が増えJavaScriptでできることも増えました。

例えば、HTMLから追加されたcanvas要素はJavaScriptと組み合わせることによって図形を描くことができます。
その他にもPHPと組み合わせたAjaxという技術を使うことによりページを遷移せずにコンテンツを変化させたり、Geolocation APIを
利用することで位置情報を取得したり、スタイルシートの設定を行ったり、できることの幅が広がってきています。
日々進化を遂げるJavaScriptは、これからもWEBコンテンツを中心に活躍が期待できる言語です。

JavaScriptのデメリット

1.動く環境が限られている

WindowsはJScriptがあるのでそうとも言えませんが、他のOSでは
WEBブラウザなどのホスト環境が無ければ動かせないため、汎用言語とは言えません。
また、WEBブラウザ毎にスクリプトエンジンが違うので、同じJavaScriptプログラムであっても
動作結果が異なる場合があります。 　


2.ソースコードが隠蔽できない

JavaScriptはソースコードを配布しなければプログラムを実行してもらうことができず、
ソースコードを難読化することはできますが隠蔽はできません。
　　したがって、保護すべき特許技術を使うようなプログラムには向いていません。

　　

JavaScriptを使ってみよう

それでは実際にJavaScriptを使ってみましょう！

  • Lesson0：準備をしよう
  • Lesson1:Hello Worldを表示させよう
  • Lesson2:クリックすると文字が出てくるボタンを作ろう
  • Lesson3:JavaScriptを外部から呼び出そう

Lesson0

準備をしよう

まずメモ帳を開いてみましょう。
テキストファイルではプログラムは動かないので、保存する時は拡張子を「.html」にして
ファイルの種類を「すべてのファイル」に、文字コードを「UTF-8」にしてください。

Lesson1

Hello Worldを表示させよう

プログラムを勉強する時に、まず最初に書くプログラムと言えば「Hello World!」を表示させるプログラムです。
下のサンプルコードをメモ帳に張り付けて、STEP0と同じ形式で保存し、任意のブラウザで実行してみましょう。 

						<html>
						<head>
						<title>サンプル</title>
						</head>
						<body>
						<script type="text/javascript">
						<!--
						document.write("Hello World!!");
						// -->
						</script>
						</body>
						</html>

実行結果→『 』
と表示されれば成功です！

Lesson2

クリックすると文字が出てくるボタンを作ろう

window.alert()メソッドを使用して、警告・確認などの画面で出てくる小さなウィンドウ、ダイアログボックスを作ります。
サンプルコード下の「Click Me!!」ボタンを押すと、Hello!!というダイアログが表示されます。
これを応用して、確認ボタン付きのものやファイル選択画面を開くダイアログボックスも作れます。 

						<html>
						<head>
						<title>サンプル</title>
						</head>
						<body>
						<form action="#">
						<input type="button" value="Click Me!!"
						onclick="window.alert('Hello!!')">
						</form>
						</body>
						</html>

Lesson3

JavaScriptを外部から呼び出そう

JavaScriptをページに記述するのではなく、外部ファイルとして保存してページに呼び出してみましょう。

どんなに長いコードでも１行の記述をするだけで実行でき、中身を変更する場合も１カ所の修正で済みます。

また、同じJavaScriptを複数のページで使用したいときにも役立ちます。

まず、STEP1のJavaScriptのコードを中身だけにします。

								<script type="text/javascript">
								<!--
								document.write("Hello World!!");
								// -->

これを「step3.js（※ファイル名は何でも可）」として保存します。拡張子は必ず「.js」にしてください。

そして、このJavaScriptを実行したいページに貼りつけるときは以下のように記述します。

								<script src="step3.js"　type="text/javascript"></script>

これで外部からJavaScriptを呼び出すことができます。

CSS3やjQueryも
学んでみよう！




- Menu -


CSS3

jQuery