こんにちは!
今日は、JavaScript という言語を使って遊んでみようと思います!
凝ったWEBサイトなんかに行くと、小さいウィンドウが出てきたり、
マウスに合わせてイラストがくっついてきたりしますよね?
JavaScriptを使うと、そんな楽しいWEBページを作ることができちゃいます!
他にも時刻を表示させたり、メールフォームを設置したり、
エラーや確認ウィンドウが出るようにできたりと便利な機能がもりだくさん!
ほんとは遊ぶためのものではないんですが、
どうせなら楽しくれっつJavaScript入門なのです!!
とこrで名前は似てるけど、Javaとは何の関係も
互換性もないんだニャー
① ますは基本のHTMLから!
というわけで、もっとも簡単なJavaScriptのつかいかた。
HTML文の中に直接書き込んでいきましょう!
そのためにはまず基本のHTMLが書けなければいけませんね!
ズバリとっても簡単でしょう。
●それではメモ帳を起動してください!
●そして次の通りに入力してください
<html>
<head>
</head>
<body>
</body>
</html>
●とりあえずこれでいったん保存しましょう。
そのままなまえをつけて保存しても、メモ帳なので
テキスト文書で保存されてしまいます。
なので拡張子をhtmlにします。 今回はsampleというなまえで保存してみます。
なまえをつけて保存 → sample.html → できあがり!
できたファイルをいちどIEなどのブラウザで開いてみてください。
おそらくまっしろけな画面が表示されるとおもいます。 それで正解なのです!
●解説
<html>~</html> ここからここまでがhtml文書ですよ、という意味です。
<head>~</head> あたま!という意味です。
このなかに画面には表示されない情報を書きます。
例えば文字コードの設定だとか、ブラウザのツールバーに表示される
タイトルなどですね。 CSSも基本的にここに書きます。
<body>~</body> からだ?という意味です。ここのなかには実際に
画面に表示される情報を書き込んでいきます。 ためしにニャーンと日本語で
打ち込んでみてください。 ブラウザで開くと、画面にニャーンと表示されます。
<body>
ニャーン
</body>
<body>のなかで、文字を書いたり、画像をはりつけたり、リンクを貼ったり
いろいろすることでWEBページをつくっていくわけですね
② かんたんなWEBページを作ってみよう!
では、さっき言ったとおり文字を書いたり、画像をはいつけたり、
リンクを貼ったりしてかんたんにWEBページを作ってみましょう!
とりあえずページにタイトルをつけてみます。
<head>~</head>の間に書きます。
<title>タイトルなんだニャー</title>
こんだけです。
タイトルなんだニャーだなんて恥ずかしくて書けないニャーン
なんていうひとはじぶんで好きなタイトルをつけてみてください。
そしていったん上書き保存してブラウザで開いてみましょう。
タイトルがついてますね?
やっぱりまっしろじゃないかウソツキーと思ったひとは、
どこについてるか探してみてください。 上のほうです。
こんなところにタイトルなんかのっけてなんの意味があるのさと思うかもしれませんが、
検索にひっかかりやすくなったりページを識別したりいろいろ意味はあるです。
さて、そろそろ画面になにか表示させてみましょう!
ニャーンじゃあまりにもあれなので、
入門書風に「○○のホームページへようこそ!!」と書いてみましょう。
<body>
○○のホームページへようこそ!!
</body>
ここでまたいったん保存してブラウザで開いて確認します。
表示されましたか? 感想はいかがですか?
おそらく 殺風景だ!! と思ったことでしょう。
もっと字をでかくしたい! 色もつけたい!
きっとその気持ちがWEBデザインの第一歩です。
なかなかJavaScriptに到達しなくなってしまうので
そのへんのやり方は自分で調べてみてくださいね
次は画像を貼っつけてみましょう。
「○○のホームページへようこそ!!」の下に自分のフェイス写真を載せたい!
なんていう場合、
そのまんま「○○のホームページへようこそ!!」の下に次のタグを打ち込みます。
<body>
○○のホームページへようこそ!!
タマさんのホームページへようこそ!!
<BR>
<img src=”画像のファイル名”>
</body>
<BR>とは改行するためのタグです。
次に、リンクをはってみましょう。
自分のサイト内の他のページに飛ぶときも、外部サイトへ飛ぶときも同じタグを使います。
さっき画像をはりつけたタグの下に、次のように打ち込みます。
<a href=”(とびたいページのURLかファイル名)”>とびます</a>
これで、画面に とびます と表示されるとおもいます。
普段からみなさんおなじみの、リンクですよ! という意味の青字に下線ですね。
ほんとに基本中の基本ですが、とりあえずWEBページを作成できるようになった!
ということでHTMLについては終了していよいよJavaScriptにすすみたいとおもいます。
もっとこのサイトをああしたいし、こうしたい! という方は自分で調べてやってみたください
とにかく<html>~</html>のあいだにどんどんいれたいタグをいれていけば作れるもんです。
JavaScriptに到達しませんでしたが、疲れたので今日はおわりにだ!!
うちの子が生後2か月くらいのとき
うちの子が生後1か月くらいのとき
なんと!!
昨日実家に生後1か月くらいのあたらしいこねこちゃんが
2匹やってきたらしいです!
写真撮りにいかなきゃ!
そろそろ、なんとか屋敷って呼ばれる日も近い!
.