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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

JavaScriptまとめ

JavaScriptとは

HTMLの書き換え
  • ブラウザに表示されているHTMLやCSSを書き換える
  • タグに囲まれたテキストを書き換える
  • 要素を追加・削除する
  • タグの属性値を変更する
  • CSSの値を変更する

動作と仕組み

  • インプット(入力)→ 加工 → アウトプット(出力)
    1. 入力:値を取得(初期値を決める)
    2. 処理:(演算)
    3. 出力(HTMLを書き換える)
  • イベント発生(その動作をいつやるか)
JavaScriptの仕様

アウトプットの確認にはコンソールを使う

  • consoleは「オブジェクト」
  • logは、「メソッド」
  • メソッドには、必ず「( )」がつきます(〜しなさいの意味)
  • 「( )」内は、「パラメータ」:指示に必要な情報
  • 「パラメータ」は、次列は「シングルクォート」で囲む

JavaScriptの記述場所

  • 「<script></script>」内に記述(type属性は不要)
  • 「</body>」の直前に記述
  • 読み込む場合は、「src属性」を記述

ダイアログボックスを表示する

  • window.alert( );
  • 「alert( )」は、windowオブジェクトに用意されているメソッド

HTMLを書き換える

  • 要素を取得する・コンテンツを書き換える
要素を取得する
  1. 書き換えたい部分のHTMLタグとそのコンテンツ(要素)を取得する
  2. 取得した要素のコンテンツを書き換える
getElementById
  • documentオブジェクトのgetElementByIdメソッド
document.getElementById( id名 )
要素を書き換えるtextContent
  • innerHTMLかtextContentか?
  • 出力が文字列のみの場合(要素内の内容)は、「textContent」
  • 要素が含まれた出力には、「innerHTML」

変数

  • 内容が変化する器
  • 変数を定義する(変数宣言)
  • 変数にデータを「代入する」
  • 変数からデータを「読みだす」
  • 変数のデータを「書き換える」
変数の寿命
  • そのページが表示されている間だけ
変数名の付け方
  • 文字かアンダースコア、$、数字が使用可能
  • ハイフンとイコールは使用不可
  • 1文字目に数字は使用不可
  • 予約語は使用不可
  • 変数名はわかりやすい単語でつける
  • 2つめ以降の単語の頭文字は大文字にする(キャメルケース)

条件分岐

  • confirm( ):確認ダイアログボックス(true または falseをリターン)
  • if文内は、( )内がtrueのとき
  • elseは、それ以外のすべて(省略可)
  • 「else if」は、noかどうかを判断する
条件式の書き方
  • 比較演算子「===」で、変数の型も一致するようにする
parseInt( )
  • 文字列を整数に変換する

論理演算子

  • 2つ以上の条件式で1つの条件を作る
&&演算子
  • かつ
||演算子
  • もしくは(または)

繰り返し

  • for文(指定した回数だけ繰り返す)
    1. 初期化
    2. 繰り返し条件
    3. 実行後の処理

FORTRAN では、i, j, k, l, m, n から始まる変数は、宣言していなければ「整数型である」という仕様

++演算子
  • インクリメント(増加)

繰り返し

  • while文(繰り返す回数が決まっていない)
  • ( )内の条件がtrueである限り処理を実行します
    1. 初期化(while文の前に記述)
    2. 繰り返し条件
    3. 実行後の処理({ }内の処理に記述)
  • 無限ループに注意

関数

  • よく行う処理を1つにまとめた小さなプログラム
関数の作成
  • var ファンクション名 = function( 要求するパラメータ ) { 具体的な処理 };
関数の呼び出し
  • ファンクション名( 要求されたパラメータ )
関数を作るメリット
  • 使いたいとき、どこからでも、何度でも呼び出すことができる
  • パラメータを変えれば、同じ加工処理を別のデータに適用できる
  • 処理をまとめることができる






広告を非表示にする