読者です 読者をやめる 読者になる 読者になる

JavaScriptとは

JavaScript入門

プログラミング言語とは

  • コンピューターへのお願いする言語
  • 複雑なタスクを処理する「プログラム(アルゴリズム)」を考えるのは人間

f:id:web-design-lesson:20161114023530p:plain

JavaScript

  • ブラウザを操作するためのプログラミング言語
  • JavaScriptを使うと、静止したデータであるHTMLやCSSを、その場でリアルタイムに書き換えて、一部のコンテンツを入れ替えたり、画像のスライドショーのような動きをつけたりすることができます
  • HTMLやCSSだけではできないことをする
    1. ブラウザに表示されているTMLやCSSをリアルタイムに書き換える
    2. ブラウザに表示されているHTMLやCSSから情報を読み取る

JavaScriptのプログラミングと動作の仕組み

  • イメージとしては「インプット → 加工 → アウトプット」
  • 入力された値(または初期値) → 処理(命令) → 出力(ブラウザーに表示)
JavaScriptを記述するために必要なツール

f:id:web-design-lesson:20160504161424j:plain


検証

  • Googole Chromeの機能
  • コンテクストメニューで表示する
コンソール
  • コンテクストメニューで表示する

f:id:web-design-lesson:20160505083837p:plain

consoleは、オブジェクト

  • 指示を指す相手

f:id:web-css-design:20160926005914p:plain

log( )は、オブジェクトにさせたいことを指示する

  • log( )は、メソッド
  • ( )内のテキストや数値を表示する

( )は、パラメーター

  • 指示に必要な情報

電卓代わりの数値計算

  • コンソールで実行する

f:id:web-design-lesson:20160505084243p:plain


まとめ

JavaScriptとは
JavaScriptの利用シーン
  • マウスクリックでコンテンツ表示を切り替える
  • 一定時間ごとに、何かの処理を繰り返す
  • サイトやデザインの内容を動的に変更する
  • 入力フォームの内容をチェックする
  • 他のWebページやサイトのデータのやり取りをする(Ajax
出力
  • 3種類のアウトプット
  • 数値と文字列の連結に注意!


コンソールへのアウトプット

  • console.log( );
  • consoleは「オブジェクト」
  • 「オブジェクト」は、指示を出す相手
  • log( )は「メソッド」
  • 「メソッド」は、オブジェクトにさせたいことを指示する
  • ( )は「パラメータ」
  • 「パラメータ」は、指示に必要な情報
ダイアログボックスへの出力
  • alert( );
  • 実際のWebサイトでは使われることはありません
HTMLやCSSへの出力
  • document.write( );
  • ブラウザページへを書き換えて表示

document.getElementById( id名 )

  • documentオブジェクトのgetElementByIdメソッド
  • HTMLのセレクタの部分に表示
プログラムの入力ミスを減らすには
  • 変数の入力を後回しにして、閉じかっこと「;セミコロン」までを入力してしまうこと
シングルクォートの役割
  • 囲まれた内容は、そのまま出力されます
  • その内容を「文字列」と呼びます
JavaScriptを書く場所
  • head部内
  • </body>の上
外部ファイル(JavaScript)の読み込み
<script src="script.js"></script>