
こんにちは!駆け出しフロントエンジニアのnoriです!Javascriptの勉強をしているけど、なかなか知識が身についているかどうかわからないので、アウトプットとして基礎の基礎をまとめたいと思います!
Javascriptとは
JavaScriptは、ブラウザ上で動作するプログラミング言語です。Webページに様々な機能を追加でき、複雑なエフェクトやアニメーション、コンテンツの動的な書き換え、サーバとのデータのやりとりなどができます。
Javascriptの基本
Javascriptの記述方法
Javascriptを使用するには、以下の2つの方法があります。
- HTMLファイルにscript要素入れて記述する方法
- 外部ファイルとしてJavascriptファイルを読み込む方法
Javascriptファイルの作成
Javascriptのファイルは拡張子を「.js」にすることで使用することができます。
演算子
演算子 | 意味 |
+ | 足す |
ー | 引く |
* | 掛ける |
/ | 割る |
% | 余り |
+= | x += 5 –> x = x +5 |
++/-- | x++(xに1が足される) |
変数
var 変数名 = “数値、文字列など”;
「=」は代入演算子といって、右側の数値や文字列データを左側の変数に代入するという意味。イコールとは違う。
コメントアウト
単行のコメントアウト
// 単行コメント
複数行のコメントアウト
/*
複数行のコメント
複数行のコメント
複数行のコメント
*/
データ型の種類
- 文字列(string(” “または’ ‘で囲う))
- 数値(int(整数)、float(浮動小数点))
- 真偽値(true, false)
- オブジェクト
- 関数
- 配列
- 組み込みオブジェクト
- undefined(何も定義されていない)
- null(何もない)
- NaN(数値ではない(Not a Number))
文字列
演算子の「+」 を文字列と一緒に使うと、文字列を結合することができます。また、数値と文字列を結合しようとすると文字列として結合します。
mojiretsu = "5" + 5;
// => "55"
エスケープ
\を直前に入れることで特殊文字などを入れることができる
\n 改行
\t タブ
\\ バックスラッシュ
\" ダブルクォーテーション
\' シングルクォーテーション
文字列変換(.toString())
num = 100;
moji = num.toString();
console.log(moji); // => "100"
関数
関数とは、処理に名前をつけてまとめたもの。関数には2種類ある。
- Javascriptで用意されている関数
- 自作の関数
関数の基本
引数と戻り値はなくても良い
function 関数名(第1引数, 第2引数, ...) {
処理;
return 戻り値;
}
関数の呼び出し方
関数名();
匿名関数
関数自体に名前を付けない関数。無名関数とも呼ばれます。
function(第1引数, 第2引数, ...) {
return 戻り値;
}
配列
同じような値を順番に並べたものを配列と呼びます。インデックスは0から始まり、要素を取り出したり、上書きすることができます。
var prefecture = ["kanagawa", "chiba", "saitama"];
console.log(prefecture[0]); // => kanagawa
prefecture[0] = tokyo;
console.log(prefecture); // => ["tokyo", "chiba", "saitama"]
ループ(for文)
配列とループは相性がよく、配列の要素をfor文を使って取り出すことができます。
for (初回だけ実行する処理; ループ継続条件; 毎ループ後の処理) {
毎ループごとに実行する処理
}
例
var numbers = [1,2,3,4,5];
for (var i = 0, i > numbers.length(), i++){
console.log(numbers[i]);
}
// => 1
// => 2
// => 3
// => 4
// => 5
if文
条件分岐のifを使うと、条件に応じて処理を分岐することが出来ます。
if ( 条件 ) {
// 条件を満たす場合(true)に実行される処理
} else {
// 条件を満たさない場合(false)に実行される処理
}
例
var test = 80; if (test > 60){ console.log("合格"); } else { console.log("不合格"); } // => 合格
オブジェクト
オブジェクトはプロパティでアクセスできるデータのことです。
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop"
}
console.log(traffic_light.blue); // "go" ドット記法(変数を使ってプロパティにアクセス出来ない)
console.log(traffic_light["blue"]); // "go" ブラケット記法
非同期処理
setTimeoutを使うと指定した時間後に処理が実行されます。
setTimeout(function(){
console.log("遅れてコメント");
}, 1000);
// => 1秒後にコンソールログが表示される
組み込みオブジェクト
Arrayオブジェクト
- lengthプロパティ(要素数を取得する)
- sliceメソッド(指定した要素を取り出す)
- pushメソッド(新しい要素を追加する)
- forEachメソッド(要素を順番に処理する)
- mapメソッド(要素を順番に処理して、新たな配列を返す)
- filterメソッド(要素を条件によって選別して、新たな配列を返す)
Objectオブジェクト
- Object.keyメソッド(プロパティ名を新たな配列として返す)
Stringオブジェクト
- sliceメソッド(指定した文字列を取り出す)
基本的な3種類のポップアップ
alert
ボタンを押すとダイアログにメッセージが表示されます。
See the Pen basic-javascript-alert by Nori (@ysnoritnk) on CodePen.
confirm
ボタンを押すとダイアログに確認メッセージが表示されます。
See the Pen basic-javascript-confirm by Nori (@ysnoritnk) on CodePen.
prompt
ボタンを押すと入力フォームが表示されます。
See the Pen basic-javascript-prompt by Nori (@ysnoritnk) on CodePen.
DOM
DOMはDocument Object Modelの略で、documentプロパティにアクセスして様々な操作をすることができます。
では、何もないHTMLにJavascriptで記述を追加してみましょう。
See the Pen basic-javascript-innerHTML by Nori (@ysnoritnk) on CodePen.
HTMLには、何も記載されていませんが、Hello Worldが出現しています。これは、document(HTML)の中のidがboxというものの要素の中身を”Hello World”に変えるということが記載されています。
このようにDOMでは、要素内の内容を変えることができるほか、スタイルを変更したり、動きのあるエフェクトを追加することもできます。
まとめ
Javascriptのほんの一例についてまとめてみました。ブラウザ上で動作する唯一のプログラミング言語だけあって、覚えないといけないことも、出来ることも多いです。
他にもたくさんの機能がJavascriptにはあります。その全てをここでは紹介しきれないので、以下のようなサイトを参考にしつつ、一緒に学習していきましょう。では!
コメント