水曜日, 4月 12, 2023

Let's start JavaScript 01 
HTMLと関係とお作法

HTMLの補完としてのJavaScriptについてのプチ連載です。なお、HTMLは、HTML Living Standard、SSはCSS3/4、JavaScript(※)はES2021(ES12)に準拠します。また、ブラウザは常に執筆時最新です。


※JavaScriptには現在バージョン区分はなく、ECMAScript 2021(ES2021 or ES12)に準拠している JavaScriptと認識されています。



連載に当たって、基本的なファイル構造は上の体裁で統一します。今回の画像(alien.png)は950×950pxです。

まず、HTMLだけで上のイメージを作成すると・・・

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ぶたさんエイリアン</title>
<meta charset="UTF-8">
</head>
<body bgcolor="lightpink">
<font size="4" color="mediumvioletred">
<center>
<H3>ぶたさんエイリアン</H3>
<img src="pic/alien.png"
width="400" height="400"
alt="ぶたさんエイリアン">
</center>
</font>
</body>
</html>
<!-- index.html -->
"lightpink"は"#ffb6c1"でもOK
"mediumvioletred"は"#c71585"でもOK

単純な1ページであればこれで問題ないのですが、後々のことを考えるとCSSやJavaScriptを別ファイルで作った方が賢明ですね。

というコトで、HTMLとCSS、そしてJavaScriptに分けると・・・

■HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ぶたさんエイリアン</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<script src="links/action.js"></script>
<div class="mainbox">
<img src="pic/alien.png" width="400px"
alt="ぶたさんエイリアン">
</div>
</body>
</html>
<!-- index.html -->
※height="400"は指定しなくてもwidthに連動

■CSS
/* rule.css */
@charset "UTF-8";
body {
background-color: lightpink;
text-align: center;
color: mediumvioletred;
font-size: 130%;
font-weight: bold;
}
.mainbox {
width: 400px;
height: 400px;
margin: 0px auto;
}
/* rule.css */

■JavaScript
/* action.js */
document.write("ぶたさんエイリアン");
/* action.js */

今回のケースではJavaScriptは特に必要ないので無理矢理設定してみました。
ちなみにCSSとJavaScriptを全てHTMLへ強引に入れると以下の様になります。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ぶたさんエイリアン</title>
<meta charset="UTF-8">
<style>
body {
background-color: lightpink;
text-align: center;
color: mediumvioletred;
font-size: 130%;
font-weight: bold;
}
</style>
</head>
<body>
<script>document.write("ぶたさんエイリアン");
</script><br>
<img src="pic/alien.png" width="400px" <!-- ※ -->
alt="ぶたさんエイリアン">
</body>
</html>
<!-- index.html -->

HTML(HyperText Markup Language)、
CSS(Cascading Style Sheets)、
JavaScriptをそれぞれ乱暴に言うと・・・
    ・HTML Webページ記述の基本
    ・CSS 共通命令の管理
    ・JavaScript HTMLで表現できない処理
ですね。