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

JavaScriptとは

JavaScript基礎

プログラミング言語とは

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

JavaScriptとは

  • クライアントサイドで動作するプログラミング言語
  • 「ジャバスクリプト」と読む
  • Java」とは全く別ものなので、混同しないよう注意すること
  • HTML&CSSを書き換えることができる
  • インタラクティブなコンテンツを作成することができる(Webサイト上で動くプログラムを作るための言語)
JavaScriptを記述するために必要なツール

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


検証

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

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

バイスモード
  • バイルでの表示を確認するモード

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

コンソール

  • コンテクストメニューで表示する

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>