JavaScript/jQuery超入門講座【第1回】「JavaScriptはじめの一歩」


はじめに

JavaScript/jQuery超入門講座の第1回目です。この講座ではプログラミング初学者を主な対象に、JavaScriptでプログラムに入門するための解説を行っています。

はじめは基本文法ばかりでつまらないかもしれませんが、だんだんと面白くなってくるはずです。本講座では以下のような内容を扱います。

  • JavaScriptの基本文法
  • jQuery
  • Ajax
  • オブジェクト指向JavaScript
  • HTML5とJavaScriptの連携による簡単なスマホアプリの作成

道具の準備

以下のリンクからお好みのテキストエディタをご利用下さい。メモ帳でもJavaScriptは書けますが、やはり機能が貧弱なので、高機能なテキストエディタを利用されることをお勧めします。また文字コードをUTF-8で保存するための手順も下記リンクに掲載しております。

プログラミングのためのテキストエディタの準備(Notepad++、ATOM、Microsoft Visual Code)

JavaScriptはじめの一歩

それでは早速、JavaScriptを書いていきましょう。

JavaScriptを書く場所

JavaScriptはHTMLの<script>要素の中に記述します。

<script>

JavaScriptのプログラム

</script>

もしくは、~.jsという外部ファイルを作りHTMLの中に読み込みます。

<script src=”~.js”></script>

まずはHTMLの中にそのまま記述してみましょう。

<実行結果>

JavaScriptでHelloWorld実行結果

<プログラムの解説>

上記のサンプルコードはHTML側で、文字コードをutf-8に設定しています。テキストエディタに入力し、保存をするときもutf-8で保存して下さい。以後、本講座に登場するサンプルコードは全てutf-8で保存するようにして下さいね。

JavaScriptでは基本的に「何を(に)」・「どうする」という形式でプログラムを書きます。今回のプログラムでは、document.write()となっていますね。

documentはDocumentオブジェクトのプロパティです。DocumentオブジェクトとはWEBページを意味するオブジェクトです。プロパティとは、オブジェクトが持っている属性のことです。

このdocumentが「何を」の部分にあたります。つまり「WEBページを(に)」という意味です。

そしてwrite()が「どうする」の部分にあたります。write()のように「どうする」にあたる部分をメソッドと呼びます。write()メソッドを文字や数値を表示するという意味です。

document.write()の「.(ドット)」のことをメンバー演算子と呼びます。

そしてJavaScriptでは文の最後は必ず「;(セミコロン)」で終わります。

document.write(“文字列”);とすることで、「WEBページに文字を表示する」という意味になります。

尚、“”もしくはで囲まれた部分は文字列として認識されます。

JavaScriptで計算する

document.write();に計算式を入力することで、計算結果を出力することもできます。

このサンプルコードでは画面に9と出力されます。

「+」演算子は数学の+と同じなので分かりやすいですね。しかし、例えば掛け算は「*」という記号で行います。

このような演算子を算術演算子と呼びます。以下に算術演算子の一覧を示します。

算術演算子 意味 例の結果
+ 足算 7+3 10
引算 7-3 4
* 掛け算 7*3 21
/ 割り算 7/3 2.3333333333333335
% 剰余(割り算の結果の余りのこと) 7%3 1
++ 1加算 a++
1減算 a–

HTML付きの文字列を出力する

上記のように入力することで、HTMLタグでマークアップされた結果を出力することができます。

<実行結果>

javascript-html

alert()による文字の出力

window.alert(文字や数値);と書くことでホップアップで文字や数値を出力することができます。

せっかくなのでjQueryも使ってみましょう

jQueryはJavaScriptを理解していなくても使うことができます。jQueryとはJavaScriptの記述を楽にする便利なライブラリのことです。

最初に、<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>と書くことで、GoogleからjQueryを読み込みます。

jQueryを正常に動作させるには全てのHTMLファイルが読み込まれた後に、jQueryを実行する必要があります。そのための記述が以下です。

$(“document”).ready(function(){ここにjQueryの処理を書く。});

$(“document”).ready(function(){});と難しそうなコードが登場しますが、あまり深く考えずに、「jQueryのコードはこの中に書くんだな」と思っていただければと思います。

$(“p”)と指定すると<p></p>で囲まれた全ての文字に影響します。

.css(“color”, “色”)と指定すると、文字の色を変えることができます。

$(“p”).css(“color”, 色);と指定することで、「<p>要素で囲まれた部分の文字を」・「指定した色に変える」という意味になります。

実行結果は以下の通りです。

jquery-intro

変数を使う

変数とはデータを入れておく箱のようなものです。

JavaScriptで変数を使うには以下の書式を用います。

var 変数名 = 値;

それでは変数を使った簡単なJavaScriptのサンプルを見てみましょう。

<実行結果>

js_var

var num = 36;は変数numに数値を代入しています。var str = “JavaScript入門”;は変数strに文字列を入力しています。これらの変数をdocument.write();で画面に出力しているというわけです。

尚、JavaScriptでは「+」演算子を使って文字列の連結ができます。サンプルを見てみましょう。

このサンプルでは、画面に<p>JavaScript入門</p>という文字列を表示しています。HTMLタグはHTMLとして解釈されるので、実際に画面に表示されるのは、「JavaScript入門」という文言になります。

またJavaScriptには以下のようなデータ型が存在します。

尚、データ型を調べるには、typeof演算子を利用します。

データ型 typeof演算子で返される文字列
数値型 number 3
文字列型 string “こんにちは!”
論理型 boolean trueまたはfalse
関数 function function test(){ return 0; };
配列・オブジェクト object var ary = [1, 2, 3];
未定義 undefined var a;

上記のデータ型のうち今までの解説で出てきたのは、numberとstringだけですね。論理型、関数、配列、オブジェクト、未定義については追って説明します。

下記のサンプルコードではtypeof演算子の実例を紹介しています。

尚、JavaScriptのプログラム中に、コメントを付けるには「//」または「/**/」を用います。「//」は1行のコメントに、「/**/」は複数行のコメントに用います。JavaScriptのプログラム中に書いたコメントは、プログラムの動作そのものには一切影響しません。しかし、後で自分で書いたプログラムを見て、分かりやすいように、なるべくコメントは書くようにしましょう。

以下にコメントの例文を記載します。

JavaScriptの関数の基礎

関数とは、一定の処理のかたまりをまとめておくことで、同じ処理を何度も書かずに済むようにするためのものです。

例えば、入力された数値の2倍を画面に出力関数を書いてみます。

関数の書式は、function 関数名(引数名) {}という形をしています。

引数(ひきすう)というのは、関数に渡す値のことです。引数は何個でも指定できます。

サンプルコードを見た方がわかりやすいと思うので、実際に見てみましょう。

「function」に続いて、「double」という関数名をつけています。double(num)の「num」は引数名です。引数は関数を実行するときに渡します。

関数の中身は、window.alert(num * 2);となっています。与えられた引数を2倍して画面に表示するわけですね。

関数は、定義しただけでは実行されません。関数を定義した上で、後から、関数を呼び出すことではじめて機能します。

このサンプルコードで関数を呼び出している部分は、double(12);という部分です。

引数に12を指定し、先ほど定義したdouble()関数を呼び出しています。その結果、画面には24と表示されたホップアップが表示されます。

また関数には「戻り値」というものを指定することができます。関数を実行した結果、出てきた値を返すわけです。戻り値の指定は、return 戻り値;という書式で行います。これも実際のサンプルコードを見た方がわかりやすいでしょう。

double関数は引数numを受け取ります。受け取った引数numを2倍した結果を変数resultに格納しています。そしてreturn文を使って、resultを戻り値として返しています。

返ってきた戻り値(200という値)をそのままにしておくわけにはいかないので、double_numという変数に代入しています。

 

あまり長く長すぎてもよくないと思うのでJavaScript超入門講座【第1回】はこのあたりで終わりにしようと思います。

今後とも当サイトをよろしくお願い申し上げます。

ゼロからのJavaScript/jQuery超入門講座TOPへ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA