IT初心者の・プログラム基礎（JavaScript編）

趣味・特技
この記事は約5分で読めます。

プログラム導入編（［初歩］JavaScript）

この記事では、
・Webサイトの操作上で使ったプログラムを紹介します。（JavaScriptに特化）
・私も初めての時イメージすらできなかった為、基礎の基礎を解説しています。
・参考にしていただければ幸いです。

IT初心者の方でも、この記事イメージを持っていただければ幸いです。

※　本記事のプログラムは一応動作確認していますが、正しく動作を保証するものではありません。
よって使われる際は、”自己責任”でお願いします。

コマンド事例（［初歩］JavaScript）

JavaScriptは、Webサーバで動作させるものとクライアントPCで動作させる
事ができます。
JavaScript：動的型付けのプログラム言語。オブジェクト指向のスクリプト言語です。

主な違い
環境：ブラウザ（Chrome,Edge等）かWindows
制御：ブラウザのボタンでのイベント処理とキー操作などの自動化
拡張子：HTML等との連携と単独実行
APIやHTMLの連携：HTMLと連携しDOM操作とWScriptやShellの処理の違い


（Webサーバについては、ここをクリックし参照ください。またコードの内容はある程度試行していますが自己責任でお願いします。）

コメント文
JavaScript言語の単一行のコメント文は、//です。
複数行になる場合は「/* */」で囲みます。（CSSのコメントもこのようなコメント文）

変数の記述

・変数の型は自由に変えられる。大文字小文字は区別される。

　・記載方法
　　わかりやすい変数名にする。
　　キャメルケース：一般的、複数の単語からなる変数を指定した場合、単語の区切りを
　　大文字にする記載方法。例）currentYear、「～」のようなイメージ。
　　スネークケース：複数の単語からなる変数を指定した場合、単語の区切りを
　　_（アンダーライン）で区切る記載方法。例）current_year
　　パスカルケース：複数の単語からなる変数を指定した場合、最初の文字を大文字に
　　する記載方法。例）Currentyear

・let：数値や文字、文字の場合は’’（シングルコーテーション、ダブルコーテーションなどで）囲む。

複数の変数を宣言する場合
「let i,j,k」と記述してもＯＫです。

・boolean：true及びfalseのみしか定義できない。
・const：定数、例）円周率など変わらない数値。

変数として認められないもの
・単語と単語にスペースを入れる。例）current year
・数字で始まる。例）1user×、user〇

エスケープシーケンス

//エスケープシーケンスの記述例

上記のようにシングルコーテーションでの文字に「I’m」など

イベント

・サーブレット：サーバ上で動作するJAVAのこと。
・イベント：Web上でユーザが行う様々な動作のこと。（例）マウスクリックや移動など。
・イベントハンドラ：イベントの発生をきっかけに何らかの処理を行うこと。
・JVM：OSに依存せずJAVAが動作するために存在する。

JSコードをHTML文の内・外の記述方法

HTML：Webサイトの土台となる骨組み。静的言語。自動更新ができない。例）JavaScript等に比べ今日の日付を表示させるなら、毎回手動で書き換えなければいけない。

index.htmlの
<body>
<script>JSコードを記述</script>
</body>
index.htmlのの前に
<script src=”***.js”></script>
<html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
</head>
<body>
    <script src="todos.js"></script>
</body>
</html>
//JavaScript
let input = prompt('コマンドを入力してください（new, list, delete, quit）');
const todos = ['水やりをする', '掃除をする'];
while(input !== 'quit' && input !== 'q') {
    if (input === 'list') {
        console.log('*****************');
        for(let i = 0; i < todos.length; i++) {
            console.log(`${i}: ${todos[i]}`)
        }
        console.log('*****************');
    } else if (input === 'new') {
        const newTodo = prompt('新しいTodoを入力してください');
        todos.push(newTodo);
        console.log(`「${newTodo}」を追加しました`);
    } else if (input === 'delete') {
        const index = parseInt(prompt('削除するインデックスを入力してください'));
        if (!Number.isNaN(index)) {
            const deleted = todos.splice(index, 1);
            console.log(`「${deleted[0]}」を削除しました`);
        } else {
            console.log('有効なインデックスを入力してください');
        }
        
    }
    input = prompt('コマンドを入力してください（new, list, delete, quit）');
}
console.log('アプリを終了しました');

[ブラウザ画面]

[結果表示]


まとめ

最後まで閲覧いただきありがとうございます。ご参考にしていただければ幸いです。

タイトルとURLをコピーしました