アラフォーからのプログラミングとデザイン

大人から始めたプログラミングとデザインについてのあれこれ

JavaScriptでアラートを出すシンプルなコードを勉強しました

webページに出てくるアラートを今日はしっかりやりたいと思います。

まずは簡単にSOS!とこのように表示します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-21-31-46

このアラートボックスを表示するためのコードを書きます!シンプルです。

-------------------------------------------------------------------------------------------------------

<html>
<head>

<title></title>

<script type="text/javascript">

window.alert("SoS!");

//↑ここはwindowつけなくてalertだけでもOK

</script>

</head>
<body>

</body>
</html>

----------------------------------------------------------------------------------------------------------------

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-21-29-00

非常にシンプルです。その下にブラウザに表示する内容を書いてみます。

--------------------------------------------------------------------------------------------

window.alert("SoS!");の下に↓のコードを追加します。

var title="Welcome to my Webpage!";

//変数titleに入れたい文字を代入する
document.write("<h1>"+title+"</h1>");

//表示するために見出しのh1タグと変数titleを連結させる。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-27-21-38-39

アラートのOKをクリックすると代入した言葉、Welcome to my Webpage!が表示されます。

アラートのコードの下にさらにアラートを複数追加すると「OK」をクリックした後にさらに次のアラートが表示され、すべてOKを押されるまでページが表示されません。

何気なくポップアップって見ていたのですがこんな仕様になっていたのですね。。

実際手を動かしていくと自分がwebページを見たとき今まで何となく見ていた視点とまた違ってくるな〜と日々実感しております。

今日はここまでです!

 

にほんブログ村 IT技術ブログへ
にほんブログ村