わかりやすいHTML５＋css+javascript

今回から自分なりの解釈のしかたで簡単に覚えていけるように
今までに習ってきたことを復習しつつ新たに出来る事を加えて色々試していきたいと思います。
基本的なホームページ作成からその他応用を自分なりに考えて説明していきますので間違っていたり謝った解釈の仕方など出てくるかもしれませんが多少の事は多めにみて頂けると幸いです。
あきらかに間違いだろ！と思うものはどしどしコメントに「つーかココちげーし！！」と書き込んで頂けると助かります。

まず手始めに簡単な日付取得「javascript」編
あまり興味がわかないものをやるのが苦手なので簡単にすぐ使えるようなものがよかった。
その中で日付の取得は非常に自分としては覚えておきたかった。何度もいうが簡単に。

まずはHTMLソースコード↓↓↓

<!DOCTYPE HTML>
<html lang="ja">
<meta charset="UTF-8">
<head>
<title>日付の表示</title>
<link rel="stylesheet" href="sample.css">
<script src="javascript/sample.js"></script>
</head>

<body onload="welcome()">

<script type="text/javascript">
var today = new Date();
var date = today.toLocaleDateString();
var time = today. toLocaleTimeString();
</script>

<h1><script>document.write(date);</script></h1>

<p>ようこそwebの世界へ！！</p>

<h2><script>document.write(time);</script></h2>

<h3　id ="clock"></h3>

</body>
</html>

ここまでがHTMLでの記述です。↑↑↑
とりあえず上記のコードだけでも日付の取得は可能。
ただその時の瞬間だけで動きはない。
そのため時間の取得が必要になる。
画像
ここからスタイルシート↓↓↓

sample.css

charset="UTF-8"
<style type="text/css">
body{
    background-color: #fffff0;
}
h1{
    background-color: #99cc33;
	width: 480px;
	height: 100px;
	margin: 20px;
	paddimg: 10px;
	border-style: outset;
	border-width: 10px;
	border=color: #333333;
	box-shadow: gray 10px 10px 10px 10px;
}
h2{
    background-color: #a3aa60;
	width: 300px;
	height: 100px;
	margin: 20px;
	paddimg: 10px;
	border-style: outset;
	border-width: 10px;
	border=color: #333333;
	box-shadow: gray 10px 10px 10px 10px;
}
h3{
    background-color: #99cc33;
	width: 200px;
	height: 100px;
	margin: 20px;
	paddimg: 10px;
	border-style: dotted;
	border-width: 5px;
	border=color: #663300;
	box-shadow: gray 10px 10px 10px 10px;
}
</style>

ここまでがスタイルシート↑↑↑
表示の為にテキトーに箱だけつくる。今回究極のまとめ方。
通常こんな形はありえないが色々やってみた。
h１の中に作る。非常にシンプルだ。
そしてjavascriptで時間の取得
ここからjavascript↓↓↓

<script type="text/javascript">
var i = 1;

  function welcome()
  {
        var t =window.setInterval("change()",1000); //1秒ごとに取得
}
  function  change ()
  {
       var elm = document.getElementById("clock");
	   var d = new Date();
	   var str = d.toLocaleTimeString();　　//時刻の取得
	   elm.innerHTML = str;  //表示する
}
window.alert("WELCOME TO EGZ-WEB-WORLD！！");
</script>

最後のwindow.alert("WELCOME TO EGZ-WEB-WORLD！！");で別ウィンドウを出してる。
今回はこの別ウィンドウで立ち上がるウェブアプリも活用方法を見つければと思い使ってみた。
まだわからない。。。

画像
まだありますが続きはwebで。