javascriptに関心がありますね。
javascriptは、年々注目が高まっている言語です。
習得すれば、おしゃれなWEBサイトの制作からサーバーサイドの処理まで幅広く使えます。
今回は、javascriptの基本的な使い方を説明します。
javascriptとは
javascriptは、WEBサイトに動きをつけることができます。
特に最近では、汎用性の高い原語として人気を集めています。
日本国内で知名度の高いYahooのポータルサイトで表示されているタブメニューもjavascriptを使用することで実装することも可能です。
(写真はyahooのトップページの一部です。画像参照URL:https://www.yahoo.co.jp/)
また、javascriptの特徴としてクライアントサイド・サーバーサイドどちらでも利用できることが挙げられます。
クライアントサイドでは、HTMLやCSSなどの言語が使用されます。
(これらの言語は、WEBサイトのベースやデザインを実装する言語です。)
サーバーサイドでは、PHP・Ruby・Pythonなどが使用されます。
(これらの言語はデータベースとの連携やログイン機能などを実装する言語です。)
javascriptは、両方の機能を持つ言語です。
javascriptをサーバーサイドとして使用するためのフレームワーク、「Node.js」も普及しています。
javascriptの基本的な使い方
早速、javascriptの使い方を説明しましょう。
まずは、コンソールを使って、「Hello world!」と表示させます。
下記のコードをHTMLのbodyタグの中に記述してください。
<script>
console.log("Hello world!");
</script>
コードを記述したらブラウザで確認しましょう。
(今回、使用するブラウザは「Chrome」です。)
ブラウザを起動させても何も表示されていないと思います。
その理由は、コンソールは一般ユーザーに表示されることはないからです。
コンソールを確認するためには、Chromeのデベロッパーツールを使用します。
デベロッパーツールの起動方法は使用しているOSによって違います。
・Windowsを使用している方：「F12キー」をクリック
・Macを使用している方：「Ctrl+Shift+i」をクリック
デベロッパーツーールのタブに表示されている「Console」をクリックします。
すると、「Hello world!」と表示されているのが確認できます。
javascriptは、HTMLファイルに直接記述することも可能です。
その他に、外部ファイルのjavascriptファイルを読み込んで反映することもできます。
外部ファイルとしてjavascriptファイル読み込むために下記のコードを記述しましょう。
<script src="作成したファイルの名前.js"></script>
このようなコードを記述したら、拡張子が「js」のファイルを作成します。
そのファイルに「Hello world!」を表示させるためのコードを記述しましょう。
console.log("Hello world!");
デベロッパーツールで確認すると、「Hello world!」と表示されます。
変数
次は変数を使用しましょう。
変数は、使用頻度が高いので、必ず使えるようにしましょう。
貶するを使用するときは「宣言」を使用するのが必要です。
javascriptでは、「var」を使って宣言をします。
「var」の後に続く文字列が変数名になります。
var = 変数名
では、実際にコードを見て、解説します。
var message = "hello world!"; console.log(message);
「var」の後に記述されている「message」が変数名です。
「＝」イコールは、算数などで使用される「等しい」という意味ではありません。
右辺のモノを左辺に代入する代入演算子です。
ここでは、「message」に「Hello world!」を代入しています。
なので、「message」をコンソールで確認すると、「Hello world!」と表示されます。
演算子
javascriptを使って計算をおこなうことも可能です。
プログラミングで計算をおこなうことを「演算子」といいます。
足し算・引き算などはこのように記述します。
var a = 10 + 5;//15と表示されます。 console.log(a); var b = 10 - 5;//5と表示されます。 console.log(b);
足し算には「+」、引き算には「-」を使用します。
掛け算・割り算はこのように記述します。
var a = 10 * 5;//50と表示されます。 console.log(a); var b = 10 / 5;//2と表示されます。 console.log(b);
掛け算には「*」、割り算には「/」を使用します。
また、このように記述することで割り算の余りを表示することが可能です。
var a = 10 / 3;//1と表示されます。 console.log(a);
文字列
javascriptで文字列で表示するためのコードを紹介します。
文字列を表示するためには、「””」(ダブルクォーテーション)もしくは「”」(シングルクォーテーション)を使用します。
「””」、「”」には違いはありません。
var a = "Hello world!";//Hello world!と表示されます。 console.log(a); var b = 'Hello world!';//Hello world!と表示されます。 console.log(b);
これとは別に特殊文字というモノがあります。
特殊文字は、開業やタブなど通常の文字では表現できないモノを表現します。
よく使用する特殊文字は、改行とタブです。
・\n・・・改行するための特殊文字
・\t・・・タブ(スペース)をあけるための特殊文字
var a = "Hello\nworld!";//Helloの後に改行が入ります。 console.log(a); var b = "Hello\tworld!";//Helloの後にタブスペースが入ります。 console.log(b);
また、演算子で説明した「+」は文字列で使用する場合、連結という機能に変わります。
var a = "Hello" + "world!";//Helloworld!と表示されます。 console.log(a);
条件分岐
if文を使うことで、条件分岐が可能です。
実際にコードを記述して解説します。
var score = 80;
if (score >= 60){
console.log("合格です。");
}else{
console.log("不合格です。");
}
//「合格です」と表示される
これは「score」に代入した数値が60以上なので、「合格です」と表示されます。
仮に、「score」に代入した数値が59以下の場合は、「不合格です」と表示されます。
また、「else if」を使用することで、分岐される条件を追加することが可能です。
var score = 40;
if (score >= 60){
console.log("合格です。");
}else if (score >= 40){
console.log("もう少し頑張りましょう。");
}else{
console.log("不合格です。");
}
//「もう少し頑張りましょう」と表示される
switch
値に応じて処理を変えたいときにシンプルに使用できるのが、switch文です。
実際にコードを見てみましょう。
var color = "red";
switch(color){
case "red":
console.log("赤色です");
break;
}
変数の「color」には「red」が格納されています。
なので、「赤色です」というコンソールが表示されます。
処理はいくつも記述することが可能です。
var color = "white";
switch(color){
case "red":
console.log("赤色です");
break;
case "blue":
console.log("青色です");
break;
case "black":
console.log("黒色です");
break;
case "green":
console.log("緑色です");
break;
case "white":
console.log("白色です");
break;
}
この場合は、変数に「white」が格納されているので、「白色です」と表示されます。
while
繰り返し処理をおこなう際に使用するのが、whileです。
whileは、このように使用します。
var num = 0;
while (num < 10) {
console.log(num);
num++;
}
//0から9までの数字が表示されます。
上記のコードは、「num」の値が10以下であるとき、「num」の値と10未満になるまで「num」の値を1づつ加える処理です。
このようにwhile文は、条件式が真になるまで処理を繰り返すことが可能です。
また、while文はこのように記述することもできます。
var num = 0;
do{
console.log(num);
num++;
}while(num < 10)
//0から9までの数字が表示されます。
この2つのコードの違いは、条件が偽のときに現れます。
例えば、先ほどと同じコードで「num」に格納する値だけを100にします。
var num = 100;
while (num < 10) {
console.log(num);
num++;
}
//何も表示されません。
上記のコードでは何も表示されません。
しかし、下記のコードでは結果は違います。
var num = 100;
do{
console.log(num);
num++;
}while(num < 10)
//100と表示されます。
このコードでは、条件判定が後でおこなわれるため、「console.log(num);」の処理がおこなわれます。
その結果、「100」という数字だけが表示されます。
for
for文は、while文と同じように繰り返し処理をおこなうことができます。
実際にコードを見てみましょう。
for (var num = 0; num < 10; num++) {
console.log(num);
//0から9までの数字が表示されます。
}
このように、記述すると0から9までの数字が表示されます。
while文と表示される結果は変わりません。
breakを使用することでループを途中で抜けることも可能です。
for (var num = 0; num < 10; num++) {
if (num === 5) {
break;
}
console.log(num);
}
//0から4までの数字が表示されます。
numの値が5と同じになったタイミングでループから抜けることが可能です。
continueを使用することで処理を飛ばすこともできます。
for (var num = 0; num < 10; num++) {
if (num === 5) {
continue;
}
console.log(num);
}
//5以外の0から9までの数字が表示されます。
ダイアログボックスを表示させよう
javascriptでダイアログボックスを表示させる方法を説明します。
ダイアログボックスを表示させる方法は、主に以下の3つです。
・alert
・confirm
・prompt
alertはこのように使用します。
alert("アラートです。");
このように記述してブラウザをリロードすると、アラートウィンドウが表示されます。
confirmは、「OK」もしくは「キャンセル」の選択肢を提示して、アラートウィンドウが表示されます。
var sample = confirm("OKですかキャンセルですか");
console.log(sample);
「OK」をクリックするとtrueの値が返ってきます。
「キャンセル」をクリックするとfalseの値が返ってきます。
promptは、テキストを入力できるアラートウィンドウを表示します。
var password = prompt("パスワードを入力してください。");
console.log(password);
関数
関数を簡単に説明すると複数の処理をまとめたモノです。
関数を使用するときは、functionを使用します。
function old(){
console.log("20歳です");
}
old();
このように記述すると、「20歳です」と表示されます。
また、引数を設定することで、文字列を追加することが可能です。
function old(time){
console.log(time + "20歳です");
}
old("10年前の年齢は");
//「10年前の年齢は20歳です」と表示されます。
old("3年後の年齢は");
//「3年後の年齢は20歳です」と表示されます。
引数を設定することで可変的に表示結果を変えれます。
また、無名関数もあるので覚えておきましょう。
(匿名関数ともいいます。)
var old = function(time){
console.log(time + "20歳です");
}
old("10年前の年齢は");
//「10年前の年齢は20歳です」と表示されます。
old("3年後の年齢は");
//「3年後の年齢は20歳です」と表示されます。
先ほどと少し記述が変わりましたが、表示結果は変わりません。
また、関数には即時関数というモノがあります。
即時関数は、全体を「()」で囲って、最後に「 ();」を記述するだけです。
(function(time){
console.log(time + "20歳です");
})("10年前は");
即時間数は、設定した関数を呼び出さなくても、すぐに処理が実行されます。
また、関数名を省略することも可能です。
配列
配列はデータをグループ化して、変数に格納・呼び出しができます。
var color = ["red",'black',"white","green"] console.log(color[0]);
このように記述すると、「red」と表示されます。
注意して欲しいのは、配列の指定です。
配列の順番は0から始まるので、最初の値を取得するためには0と記述しなければなりません。
また、配列のグループを2つに増やすことも可能です。
var color = [
["red", "black", "white"],
["green", "pink", "gray"]
];
console.log(color[1][2]);
//grayと出力されます。
オブジェクト
オブジェクトは、配列と同じようにデータをグループ化します。
配列との違いは、名前と値の両方がグループ化されることです。
実際にコードを見てましょう。
var person = {
name: "田中太郎",
email: "tanakatarou-test@gmail.com",
bloodtype: "A"
};
console.log(person.name);//「田中太郎」と表示されます。
console.log(person.email);//「tanakatarou-test@gmail.com」と表示されます。
console.log(person.bloodtype);//「A」と表示されます。
また、オブジェクトのプロパティの値に関数を設定した場合、その関数をメソッドとよびます。
メソッドは、このように記述します。
var person = {
name: "田中太郎",
email: "tanakatarou-test@gmail.com",
bloodtype: "A",
sample: function(){//メソッド
console.log("こんにちは" + this.name + "です。");
}
};
person.sample();
Math・Dateオブジェクト
javascriptには、Math・Dateオブジェクトが用意されています。
どちらも使用できるように、使い方を覚えておきましょう。
console.log(Math.ceil(5.3));//小数点の切り上げをおこないます。「6」と表示されます。 console.log(Math.floor(5.3));//小数点の切り下げをおこないます。「5」と表示されます。 console.log(Math.round(5.3));//四捨五入をおこないます。「5」と表示されます。 console.log(Math.random());//ランダムで数値が表示されます。
Mathオブジェクトを使うことで、小数点の切り上げ・切り下げや四捨五入もできます。
Dateオブジェクトを使用することで現在の西暦や月を表示できます。
var day = new Date(); console.log(day.getFullYear());//「2018」と表示されます console.log(day.getMonth());//「6」と表示されます
1つ注意してほしいのが、「Month」を使用するときです。
月は、「0」から数えられます。
なので、現在の月よりも1ヵ月前の数字が表示されます。
window
windowオブジェクトを使用することでウィンドウの幅や高さを取得できます。
console.log(window.outerWidth); console.log(window.outerHeight);
このように記述することでウィンドウ幅と高さを取得できます。
また、このように記述するとウィンドウを指定のURLに飛ばすことが可能です。
window.location.href = "https://www.google.co.jp/";
javascriptを使ってHTML・CSSを操作します
javascriptを使用して、HTML・CSSの内容を編集、追記することが可能です。
実際にコードを見てみましょう。
<p id="test">これはテストです。</p>
<script>
var hello = document.getElementById('test');
hello.textContent = 'テスト完了です。';
hello.style.color = 'red';
</script>
このように記述することで、赤色の文字で「これはテストです。」と表示されます。
また、イベントを設定することも可能です。
<button id='test'>Click!</button>
<script>
document.getElementById('test').addEventListener('click', function() {
var p = document.createElement('p'),
text = document.createTextNode('クリックすると追加されます。');
document.body.appendChild(p).appendChild(text);
});
</script>
上記のコードはボタンをクリックするたびに、「クリックすると追加されます。」というテキストが追加されます。
まとめ
いかがでしたか？
javascriptは、幅広く色々なコトができるため、覚えるのは大変かもしれません。
しかし、基礎的な部分を身につけるだけでも、スキルアップすることが可能です。
ぜひ、チャレンジしてみてください。