１　何ができるのか？

　JavaScript では何ができるのでしょうか？
　HTML と CSS の組み合わせで充分なのでは？

２　できること

ポップアップウインドウの表示
　あの「ウザい」やつですね。

入力フォームの入力内容の確認
　これは有用かも。

ブラウザの拡張機能
　あればいいけど。

マウスをのせたときアニメーションを表示
　まあ楽しいんでしょうが、あまり実利的ではないか。

クリックすることで
　文字を変更したり、文字の大きさや色を変えることができる。
　要は閲覧者の操作によってホームページに表示する内容が変わるこということですね。

リアルタイムで動くグラフ
　これは面白そうですね。表現の幅が広がりそうです。

Ｗｅｂアプリの作成
　HTML と CSS と JavaScript を組み合わせれば可能だそうです。
　ただし、一般的にはLAMPといって、Linux、Apache、MySQL、PHPなどが必要なようです。
　最終的にはこの領域を目指したいですね。

３　環境構築

VS Code のインストール
　開発用の環境です。
　当分の間、こちらを使っていくのがいいと思います。

４　簡単な HTML の入力

簡単な HTML ファイルを作ってみる
　簡単なものといっても、ある程度のボリュームがあります。

HTML（コード入力）

<!DOCTYPE html>
<html>
<head>
    <title>サンプル</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>入門</h1>
    <p>① まずは HTML の基本。<br>② JavaScript はその次。</p>
    <p>③ css も知っているといい。</p>
</body>
</html>

ブラウザ（実行結果）

サンプル

入門

① まずは HTML の基本。
② JavaScript はその次。

③ css も知っているといい。

　<h1> は見出しなどに用いるタグで、文字が大きくなりますね。ほかに <h2> ～ <h6> まであります。
　<p> は普通の文字ですが <br> を入れるとそこで改行されます。実行結果では、①と②は別の行になっていますね。
　そして、<p> タグを別々にするとこれも別の行になりますね。① ② と ③ とは別の行になっています。

見出しタグを試してみる
　hタグを使ってみましょう。

HTML（コード入力）

<!DOCTYPE html>
<html>
<head>
    <title>サンプル</title>
    <style>
        h1 {font-size:70px;}
        h2 {font-size:60px;}
        h3 {font-size:50px;}
        h4 {font-size:40px;}
        h5 {font-size:30px;}
        h6 {font-size:20px;}
    </style>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Ｈ１Ｈ１Ｈ１</h1>
    <h2>Ｈ２Ｈ２Ｈ２</h2>
    <h3>Ｈ３Ｈ３Ｈ３</h3>
    <h4>Ｈ４Ｈ４Ｈ４</h4>
    <h5>Ｈ５Ｈ５Ｈ５</h5>
    <h6>Ｈ６Ｈ６Ｈ６</h6>
    <p>ＰＰＰＰＰＰ</p>
</body>
</html>

ブラウザ（実行結果）

サンプル

Ｈ１Ｈ１Ｈ１

Ｈ２Ｈ２Ｈ２

Ｈ３Ｈ３Ｈ３

Ｈ４Ｈ４Ｈ４

Ｈ５Ｈ５Ｈ５

Ｈ６Ｈ６Ｈ６

ＰＰＰＰＰＰ

　デフォルトの設定を使うのは面白くないので、<head> の <style> で定義してみました。
　ピクセル単位でも自由に指定できます。まあ普通は CSS で定義するんでしょうけど。
　文字の色なども定義できるので、自分好みでできるのがいいところですね。

５　次回

　さて、次回からはいよいよ HTML 内に JavaScript のコードを加えていきます。

更新記事

『会社四季報 2024年 3集夏号』を読む１１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）2024-07-25
『会社四季報 2024年 3集夏号』を読む１０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）2024-07-22
『会社四季報 2024年 3集夏号』を読む９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）2024-07-19
『会社四季報 2024年 3集夏号』を読む８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）2024-07-16
『会社四季報 2024年 3集夏号』を読む７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）2024-07-13
『会社四季報 2024年 3集夏号』を読む６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）2024-07-10
『会社四季報 2024年 3集夏号』を読む５（アグリゲーション、ＥＭＳ、ＢＰＯ、のれん、カカオ豆、オーツミルク）2024-07-07
『会社四季報 2024年 3集夏号』を読む４（ＳＥＰ、社内起業、ＺＥＰ、ＶＰＰ、ＤＯＥ、バイオセンサー、ＰＢＸ）2024-07-04
『会社四季報 2024年 3集夏号』を読む３（海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電）2024-07-01
テーマ株投資（５か月）2024-06-28
『会社四季報 2024年 3集夏号』を読む２2024-06-25
『会社四季報 2024年 3集夏号』を読む１2024-06-22
JavaScript でDOM ２2024-06-18
JavaScript でDOM １2024-06-14
JavaScript でオブジェクト５2024-06-10
JavaScript でオブジェクト４2024-06-06
JavaScript でオブジェクト３2024-06-02
JavaScript でオブジェクト２2024-05-29
JavaScript でオブジェクト１2024-05-25
JavaScript で関数３2024-05-21
JavaScript で関数２2024-05-17
JavaScript で関数１2024-05-13
JavaScript で配列６2024-05-10
JavaScript で配列５2024-05-07
JavaScript で配列４2024-05-04
テーマ株投資（３カ月目）2024-05-02
JavaScript で配列３2024-04-27
JavaScript で配列２2024-04-24
JavaScript で配列１2024-04-21
JavaScript で「繰り返し」２2024-04-18
『チーズはどこへ消えた？』を読む２2024-04-15
『チーズはどこへ消えた？』を読む１2024-04-11
JavaScript で「繰り返し」１2024-04-07
JavaScript で「もし」３2024-04-01
テーマ株投資（２カ月目）2024-03-29
JavaScript で「もし」２2024-03-28
「記憶」本５冊を読む３2024-03-24
「記憶」本５冊を読む２2024-03-20
「記憶」本５冊を読む１2024-03-17
テーマ株投資（１カ月半）2024-03-15
「睡眠」本６冊を読む３（夜間・朝の行動）2024-03-10
「睡眠」本６冊を読む２（昼間の行動）2024-03-03
テーマ株投資（１か月目）2024-03-01
JavaScript で「もし」１2024-02-29
JavaScript で変数３2024-02-27
「睡眠」本６冊を読む１（理論）2024-02-25
JavaScript で変数２2024-02-23
テーマ株投資（第３週目）2024-02-22
JavaScript でヘンな数2024-02-20
「メモ」本６冊を読む２（メモの方法）2024-02-18
テーマ株投資（第２週目）2024-02-16
JavaScript で足し算2024-02-14
「メモ」本６冊を読む１（メモの意義）2024-02-12
テーマ株投資（第１週目）2024-02-09
JavaScript で「こんにちは世界」2024-02-09
「コーチング」本６冊を読む2024-02-06
はじめてのテーマ株投資2024-02-01
JavaScript とは2024-01-30
「怒り」「アンガーマネジメント」本７冊を読む2024-01-27
JavaScript を始めてみる2024-01-22
初めての自動給水器2024-01-21
「ブランディング」本６冊を読む2024-01-20

手習い日記帳

JavaScript とは

１　何ができるのか？

２　できること

３　環境構築

４　簡単な HTML の入力

HTML（コード入力）

ブラウザ（実行結果）

入門

HTML（コード入力）

ブラウザ（実行結果）

Ｈ１Ｈ１Ｈ１

Ｈ２Ｈ２Ｈ２

Ｈ３Ｈ３Ｈ３

Ｈ４Ｈ４Ｈ４

Ｈ５Ｈ５Ｈ５

Ｈ６Ｈ６Ｈ６

５　次回

カテゴリー

更新記事

タグ

JavaScript とは

１ 何ができるのか？

２ できること

３ 環境構築

４ 簡単な HTML の入力

HTML（コード入力）

ブラウザ（実行結果）

入門

HTML（コード入力）

ブラウザ（実行結果）

Ｈ１Ｈ１Ｈ１

Ｈ２Ｈ２Ｈ２

Ｈ３Ｈ３Ｈ３

Ｈ４Ｈ４Ｈ４

Ｈ５Ｈ５Ｈ５

Ｈ６Ｈ６Ｈ６

５ 次回

カテゴリー

更新記事

タグ

１　何ができるのか？

２　できること

３　環境構築

４　簡単な HTML の入力

５　次回