Waplusテックチームブログ

よく参照するのをわかりやすくまとめよう！

レッスン1-javascriptの基礎知識

by · 2019年4月19日

まずはjavascirptとは何なのか？を説明していきます。
ちょっと座学的な感じなので苦手な人はパスしてもいいかもです。

javascriptはその名の通りスクリプト言語です。

プログラミング言語は複数存在しており、その中の1つと考えてください。

スクリプト言語とは

プログラミング言語には、コンピュータが理解しやすい機械語に変換するコンパイラ型言語と非コンパイラ型言語に分かれます。この非コンパイラ型言語を俗称としてスクリプト言語と呼びます。

全部含めてプログラミング言語であり、スクリプト言語は正式に定義されて別れているわけではありません。
便宜上であったりマーケティング的な意味合いで別れています。

とはいえスクリプト言語は簡易的に作成出来る手軽な言語として広く使われています。

スクリプト言語の種類

スクリプト言語の大半はWeb系の言語になります。代表的な所では下記の通りです。

javascript
PHP
ruby
Python

上記にも本当に沢山あります。ココでは紹介しませんがありすぎて困ります(^_^;
余談ではありますが上記の言語は案件が多めで人気といえます。
とはいえ人気の言語が必ずしも優れた言語というわけではないことだけは知っておいてください。

プログラマは日頃から常に時代の流れを見ながら案件に合わせてツール（言語）を選んでいます。
なのでこれからプログラミングを学ばれる方は、今後も常に勉強し続ける人生が待っていると思ってください。

スクリプト言語以外

C言語
C++
Java

どちらかというとコンパイラ型言語の方が聞いたことがあるかも知れません。

特にJavaは非常に広く使われているため知っている人も多いのでは無いでしょうか。

javascriptの事を略してjava(ジャバ)と呼ぶ人がいますが全く違う言語です。

上記の通りスクリプト言語ですらありません。javascriptを勉強して「Javaの勉強をしている」などと言うと大変な事になります(^_^;

環境設定

本来ならばプログラミング言語を使おうと思うとパソコンの中に使える環境をインストールする必要があります。

これを環境構築と言います。

ですがjavascriptは違います。
実はjavascriptはブラウザの中に実行出来る環境があります。そのためブラウザさえあれば特に何もしなくてもjavascriptは実行出来るのです。

逆に言うとブラウザが無いと何も出来ないとも言えます。
それはサーバー側でjavascriptを実行することは出来ないと言うことです。
(実行するにはnode.jsというサーバーをインストールする必要があります)

PHPなどの他のプログラミング言語のほとんどはサーバーで実行されています。
javascriptはクライアント（ユーザー）側で(ブラウザで)実行される変わった言語なんです。

早速javascirptを書いてみよう

今後の事も含めてわかりやすくするために作業用フォルダを作ってレッスン毎にフォルダ別けしていってください。

作業用フォルダを作っておく

まずは作業用フォルダに適当なindex.htmlファイルを作って見ましょう。

作業用フォルダは下記ディレクトリ構成にしておくと管理が楽ですよ。

こんな感じに作って見て下さい。

書いてみる

index.htmlの中身はこんな感じに記載してみて下さい。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>javascript勉強会1回目</title>
  </head>
  <body>
　　　　 <div>こんにちは！</div>
        <script>
          alert('こんにちは！');
        </script>
    </body>
</html>

たったこれだけですが、あなたは既にjavascriptを書いています。

それは<script></script>タグの中のalert(‘こんいんちは！’);です。

<script>タグはHTMLの中にjavascript書きますよ！というタグです。

なので<script>タグ内の記述はhtmlとしては処理されません。
javascriptとして処理されます。

index.htmlをダブルクリックで開いて見て下さい。

こんなウィンドウが出てませんか？

これがalert();です。

このようにjavascriptにはブラウザに特定の動作をさせる命令が数多くあります。

javascriptで出来る事

そもそもjavascriptはどんなことが出来るのでしょうか。

実際の方法は別にして大まかに出来る事を紹介します。

ブラウザの状態を制御する

・ブラウザのサイズを変更する

・マウスポインタの位置を取得する

・ブラウザを閉じる。または開く

ブラウザの制御はセキュリティの理由から制限をかけているブラウザもあります。

突然ブラウザが閉じたり開いたりしたら驚きますよね(^_^;
昔はそんなサイトもありましたｗ

ただブラウザの情報や状態を取得することは比較的容易です。

イベントハンドラ

・クリックされた時

・キーボードが押された時

・スクロールされた時

・マウスが乗っているか時

イベントハンドラは何かが実行された時に行われる処理です。

HTMLファイルの読み込みが完了した時。などかなり細かく取得する事が出来て、右クリックか左クリックか判別することも可能です。

さらにマウスが押された時なのか、離された時なのかもわかります。

HTMLの書きかえ

HTMLタグそのものを書きかえたり、タグ内のテキストを書きかえたりすることが可能です。

さらにclass名を書きかえたりなども出来ます。なのでidやclassを判別することも出来ます。

これはサーバーに置かれているファイルを書きかえているわけではありません。

皆さんのパソコンでブラウザに読み込まれているファイルを書きかえています。
なのでリロードすると元に戻ってしまいます。

最後に

今回はあまりjavascriptを書きませんでしたが、次回も座学っぽい内容になってしまいます(^_^;
次回はプログラミングの基礎-仕組み編です。
頑張って書きますので今しばらくお待ち下さい。

タグ:

おすすめ