web制作勉強中です。

職業訓練校でweb制作を勉強しています。勉強のメモなど記録します。

【授業メモ】JavaScript基礎

授業メモ JavaScript
通常プログラミング言語は翻訳（コンパイル）する動作をしないと、記述しただけでは動作しないが、
JavaScriptは記述しただけで動作する簡易版のプログラミング言語。
この、コンパイル不要のプログラミング言語のことを、スクリプト言語と呼ぶ。
※ よく聞くJavaとはまったく別のもの。Javaは本気のプログラミング言語。
コンピュータが順を追って理解していく「インタープリタ方式」のため、
HTMLのように、間違ったところがあっても合っている部分は正しく表示されるようなことはない。
途中で一つ間違うと、全て表示されなくなってしまう。そのため、ミスにより注意が必要。
 
JavaScriptで出来ること
  • 演算処理
  • ドキュメント操作（表示/非表示や色の指定など、CSS3で出来ることと似ている。使い分けを覚える必要がある。）
  • マウス等のイベント処理（クリックやマウスオーバー等マウス動作に合わせたイベント処理。）
  • DOMを使用した処理（HTMLをツリー構造のように扱うことができるDOM。サイトの構成を簡単に変えられる。）
 
 
JavaScriptを入力してみる
※JavaScriptファイルだけでは動けず、HTMLに読み込ませる必要がある。
CSSと同じく、エンベットと外部読み込みの方法がある。
 
★エンベットのやり方
  • stylesheetに書いても、bodyの中に直接書いてもどちらでもよい。
  • <script></script>　scriptタグの中に記述する。
  • JavaScriptで文字列を表示するには、「window.document.write(' ');」を使う。セミコロン忘れず！
  • クオーテーション はシングルでもダブルでも使用可能だが、 シングルクオーテーション が推奨されている。
  • ('テキスト'）かっことシングルクオーテーションの間は半角スペースあってもなくてもよい。
         
<body>
<script>
  window.document.write( 'Hellow World!!' );
</script>
</body>
 
JavaScriptもオブジェクト指向の流れを汲む言語です。
本格的なオブジェクト指向言語ではなく、基本的な概念のみを取り入れて、扱いやすくした「簡易的なオブジェクト指向言語」と言われています。
 
★専門用語とオブジェクト指向の考え方を知る
  •  材料は「オブジェクト」
  •  行う作業は「メソッド」
  •  保管用具は「変数」
  •  火加減などは「パラメータ」
  •  味付けは「プロパティ」
料理（卵焼きを作る）なら
  1. 「たまご」オブジェクトの「割る」メソッドと「混ぜる」メソッドを実行する
  2. 「甘さ」プロパティを加算する
  3. 「焼く」メソッドに、時間パラメーターと火力パラメーターを付加して実行する
  4.  醤油オブジェクトで「塩辛さ」パラメーターや「色」パラメーターを変える
 
 
 
基本的なメソッドの使い方を覚える
★window.document（ブラウザーに文字を表示させる）
JavaScriptで文字列を表示するには、「window.document.write(　)」を使います。
表示したい文字列をシングルコートではさみます。「window.」は省略できます。
window.document.write( 'Hellow World!!' );
 
★window.alert（警告ダイアログに表示させる）
 window.alert( 'Hellow World!!' );
 
★window.confirm（確認ボックスを表示する） 
 window.confirm( '保存しますか？' );
 
★window.prompt（ユーザーに文字を入力してもらう）
ユーザーに文字や数字を入力してもらい、それを「戻り値」として受け取ることが出来ます。
window.prompt( '金額を入力して下さい' );
 
 
 
 
変数の使い方
変数とは
何か数値や値を入れておける箱。
変数に入れることで、いつでも出したりしまったりできる。
 
変数宣言
こういった変数を使いますよの宣言。
 
変数名
id名と似たような考え方だが、使っちゃいけない（すでに使われているため）名前があるので注意！
下記は使っちゃダメリスト！！！覚える。

f:id:shima0web:20170828174438j:plain

 
★var 変数名 = '値、もしくは文字列';　
var宣言　これからx（変数）を Hellow World（値または文字列）としますよの宣言。
変数の左右、＝のあとは半角スペース
 
<script>
var x = 'Hellow World!!';

document.write(x);
</script>
 
 
 
 
JavaScriptによる四則演算

f:id:shima0web:20170828174450j:plain

★計算式の時は''シングルクオーテーションはいらない　文字列の時は必須　半角スペースの位置覚える
文字列　var a = '10 + 20';
計算式　var a = 10 + 20;
 
計算式の書き方
var x = 2;
var y = 3;
var a = x * y;
document.write(a);
 
 
★変数の中の値は上書きされる
var a = 10; 　　　　 →a=10
a = a + 5;
document.write(a);　→a＝15に上書きされた
 
 
JavaScriptによるイベント処理
  • イベント（クリックやホバー）したそのもの自身に変化を与えたい時はthisを使う。
  • サムネイルをクリックしたらメインが変わる、ような場合はid名を付けて指示する必要がある。
  • イベントのあとは、画像のソースを記述したいが、""ダブルクォーテーションの中にダブルクォーテーションを入れることはできないルールのため、変化後のソースはシングルクオーテーションで表す。
  • その場合、末尾が'"シングルクオーテーション＋ダブルクォーテーションになるので、どこまでがどのくくりか注意する。
      img src="" alt=""　onClick="this.src='img/01.jpg'"
 
 
★ onClickによる画像置換
onClick　クリックすること
<li><img src="img/01s.jpg" alt=""onClick="this.src='img/01.jpg'"></li>
 
 
★hover→onMouseOver＋onMouseOutによる画像置換
onMouseOver　マウスをhover（置いている）している時
onMouseOut　 マウスを放した時
<li><img src="img/01s.jpg" alt="" onMouseOver="this.src='img/01.jpg'" onMouseOut="this.src='img/01s.jpg'"></li>
 
★buttonをonClickで背景色を変える
buttonタグ→HTMLのインライン要素。タグで囲うとボタンになる。
<button onClick="document.bgColor='#0F2540'">紺</button>