【JavaScript入門】初心者向けに基礎から文法をまとめました

JavaScriptとは

JavaScriptとはWebサイトやWebアプリケーションの作成に使用されるプログラミング言語。
計算などの「処理」をするプログラムでもあります。

たとえば、ボタンをクリックしたときにイベントを発生させたり、スライドショーやアニメーションなどの動きのあるコンテンツをつくることができます。

HTML、CSSだけではできない「動くコンテンツ（インタラクティブ）」を作れます。

こーいち

JavaScriptの文法はプログラミング言語の中でも、シンプルで覚えやすいほうと言われています。

JavaScriptを書く2つの方法

javascriptを書く方法は、おおまかに2つです。

1．拡張子「.js」というファイルに書く
2．htmlファイルのscriptタグ内に書く

1つ目の「.js」ファイルを作り、書くことが多いです。
本記事では、サンプルの意味でhtmlファイルのscriptタグ内に書く想定で、ブログを書いていきます。

プログラムでできる4つのこと

・出力
・入力
・分岐
・繰り返し

すべてのプログラムは4つだけで動いています。

たとえば、テレビやレコーダーは入力、出力のみ。

こーいち

HTML、CSSは出力のみ（書いてあるものを出すだけ）で、分岐や繰り返しはできません。

JavaScriptの出力

JavaScriptの出力

・JavaScriptのアラート（alert）の使い方
・JavaScriptのコンソール（console）の使い方

alert( )を使い、ブラウザに注意メッセージを出力できます。
文字列だけでなく、数値、変数、計算結果などポップアップ表示できます。

またconsole.log( )を使って、開発者ツールに出力できます。
具体的な出力場所は、ブラウザの画面で右クリックから「検証」→「Elementsの横のConsole」で確認できます。

JavaScriptの出力について、詳しくは【JavaScriptの出力】アラート、コンソールの使い方の基礎で解説しています。

: 【JavaScriptの出力】アラート、コンソールの使い方の基礎

JavaScriptの入力

・変数について
・変数の使い方
・変数の3つの種類

変数とはデータを格納しておく箱のようなもの。
さまざまな値を保持しておくJavaScriptの機能です。

変数を作成することを「定義する」という言い方をする場合もあります。
文章中の「共通部分」をデータとして代入しておくと、合理的に作業ができます。

変数の定義方法3つ

・var 変数名
・let 変数名
・const 変数名

【var】Variable（可変という意味）の略称。
変数を変更でき、かつ有効範囲が広い。

【let】変更可能の変数。
有効範囲が狭いため、変数名が被りにくく使い勝手が良い。

【const】有効範囲が狭く、変更不可の変数。
追記や変更もできません。

「const → let → var」の順番で使えばOK。

変数については、【JavaScriptの入力】変数の使い方、3つの種類を解説しますで詳しく解説しています。

: 【JavaScriptの入力】変数の使い方、変数の3つの種類を解説
続きを見る

JavaScriptの文字列【概要から連結】

・JavaScriptの文字列の概要
・JavaScriptの文字列の連結

文字列は'（シングルクォート）もしくは" （ダブルクォート）でくくって記述します。
文字列は加算演算子＋で連結できます。
HTMLを出力するときは、"(ダブルクォート)などの記号も文字列の一部として扱う場合があります。
`（バッククォート）で括られた文字列では、${変数名}という形で文字列を結合できます。
その他の特徴として、`を使うとその中の改行が有効になります。

詳しくは、【JavaScriptの文字列】概要から連結・結合をまとめましたで解説しています。