Ayalog

Webデザイナーの備忘録...

JavaScript超入門編

Javascriptとは

ブラウザを操作するためのプログラミング言語

 

htmlやcssをリアルタイムに書き換えて、一部のコンテンツを書き換えたり、

動きをつけたりすることができるプログラム。

 

 JavaScriptを使った書き換えの例

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

<p>詳細をもっと見る</p>  JavaScript → <p>閉じる</p>

 

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

html要素に新たな要素を追加または、削除することができる。

<ul>

 <li>開始します...</li> 

</ul>

JavaScript 

<ul>

 <li>開始します...</li>

 <li>最適化中...</li> <!--JavaScriptによってliを追加-->

</ul>

 

3.タグの属性の値を変更する

class属性、href属性、src属性など、HTMLタグにはさまざなな属性がある。

Javascriptではこれらの属性の値を変更することができる

<img src="apple.jpg">  JavaScript → <img src="orange.jpg">

(appleの画像をorangeの画像に変更している) 

 

4.CSSの値を変更する

p {

 font-size: 14px;

}

JavaScript 

p {

 font-size: 18px;

}

(JavaScriptでフォントサイズを変更)

 

JavaScriptでは、これら4つのパターンでhtmlとcssの書き換えが可能。

Javascriptで書き換えるメリット

1.変更内容が即座にブラウザに反映される。

2.変更があった場所だけ書き変わるので、ページ全体の再読み込みが発生しない。

よって待ち時間がない。 

 

JavaScriptの最も基本的で重要な役割

1.ブラウザに表示されているHTMLやCSS書き換える

2.ブラウザに表示されているHTMLやCSSから情報を読み取る 。