javascriptの特徴について簡単にまとめてみた

##javascriptってどういうもの？

javascriptは「ブラウザを操作」するプログラミング言語です。javascriptで何かプログラムを書けば、ブラウザはその命令通りに処理してくれます。

###ブラウザを操作するってどういうこと？

ブラウザの役割はWEBページを表示させることです。WEBページはHTMLとCSS、数点の画像で作られてます。HTMLとCSSには重要な特徴があります。それは、一度ブラウザに読み込まれたら変化しないです。例えば、次のページに行こうとしない限り、基本的にブラウザ上に同じ情報を表示し続けます。

・HTML　→　ページのコンテンツを表示させるもの
・CSS　→　HTMLにスタイル情報を提供してレイアウトやデザインを決めるもの

ウィンドウ幅に合わせて伸縮するレイアウトやサイト、画面サイズに合わせてレイアウトを大きく変えるレスポンシブWEBデザインで作られているWEBページがありますが、レスポンシブもHTMLとCSSが初めに読み込まれた時から変わることはないです。HTMLとCSSは不変で静止したデータと言えます。

しかし、javascriptを使うことによって、これらの静止したデータであるHTMLとCSSを、その場でリアルタイムに書き換えることができます。加えて一部のコンテンツを入れ替えたり、画像のスライドショーのような動きをつけたりすることができます。

##具体的な「書き換え」の例

HTMLを書き換える方法ですが、大きく4つに分けられてます。

###1.タグに囲まれたテキストを書き換える

//idから取得したオブジェクトを日付データに書き換えてます
document.getElementById("choice").textContent = new Date();
console.log(document.getElementById("choice").textContent);

###2.要素を追加・削除する

//li要素を追加
var todo = ['デザイン','データ','申し込み','牛乳を買う'];
todo.push('歯医者にいく');
for(var i = 0; i < todo.length; i++){
  var li = document.createElement('li');
  li.textContent = todo[i];
  document.getElementById('list').appendChild('li');
}

###3.タグの属性の値を変える

function changePic(){
   var edit=document.getElementById("picdiv");
   edit.innerHTML="<img src='girls2.jpg'>"
  }

###4.CSSの値を変化させる

上記4つのパターンでHTMLとCSSが書き換えられると、変更された内容がブラウザに即時反映されます。しかも、画面が描き替わるのは変更があった箇所だけで、ページ全体の読み込みは発生せずに待ち時間もありません。これにより単なるWEBページではない、より動きのあるWEBページを作ることができます。