JavaScript 基礎編2
前回の記事はこちら
JavaScirptの基礎まとめ 基礎編3はこちら
前回に引き続き基礎の内容をまとめようと思います。
関数
関数は処理をひとつにまとめることができ、定義した処理を呼び出すことで処理を実行する。
関数の基本
引数と戻り値が存在しない場合
- 関数の定義
function 関数名(){
処理;
}
- 関数の呼び出し
関数名();
引数が存在する場合
- 関数の定義
仮引数は関数を定義する際の変数
function 関数名(仮引数){
処理;
}
//例
function welcome(name){
console.log(`ようこそ、${name}さん`);
}
- 関数の呼び出し
実引数とは呼び出すときに実際に渡す値
関数名(実引数);
//例
welcome('Ryo');
戻り値が存在する場合
- 関数の定義
function 関数名(){
処理;
return 戻り値;
}
- 関数の呼び出し
関数名();
戻り値と引数が存在する場合
- 関数の定義
function 関数名(仮引数){
処理;
return 戻り値;
}
- 関数の呼び出し
関数名(実引数);
引数を複数もつ関数
- 関数の定義
function 関数名(仮引数1,仮引数2,仮引数3){
処理;
}
- 関数の呼び出し
関数名(実引数1,実引数2,実引数3);
デフォルト引数
仮引数を定義した関数で実引数を渡さない場合にデフォルトで値を設定する
- 関数の定義
function 関数名(仮引数 = デフォルト値){
処理;
}
- 例
function welcome(name = 'ほげほげ'){
console.log(ようこそ、${name}さん);
}
//例
welcome('Ryo');//ようこそ、Ryoさん
welcome();//ようこそ、ほげほげさん
関数の特殊記法
関数式
関数式は処理を変数に代入して関数を定義する方法
- 関数式の定義
const 変数名 = function(){
処理;
return 戻り値;
}
//例
const welcome = function(){
console.log('ようこそ');
}
welcome();//ようこそ
アロー関数式
関数式を簡潔に書く方法
- 引数なしの場合
// 通常の関数式
const sample = function(){
処理;
}
// アロー関数式
const sample = () =>{
処理;
}
- 引数ありの場合
// 通常の関数式
const sample = function(x,y) {
処理;
}
// アロー関数式
const sample = (x,y) =>{
処理;
}
オブジェクト
オブジェクト
オブジェクトとは日本語で、ものや対象物という意味。
「人物」や「自転車」といった「もの」の情報の集まりをオブジェクトという。
{
キー1: 値1, //これひとつをプロパティという
キー2: 値2,
キー3: 値3
}
//例
const fruits = {
name: 'バナナ',
color: '黄色' ,
taste: '甘い'
}
console.log(fruits);
- プロパティへのアクセス
console.log(fruits.name);//ドット表記法
console.log(fruits['name']);//ブラケット表記法
- プロパティの追加と上書き
追加
const fruits = {name: 'バナナ'}
fruits.color = '黄色';
fruits['taste'] = '甘い';
console.log(fruits);
//{name: 'バナナ',color: '黄色',taste: '甘い'}
上書き
const fruits = {name: 'バナナ',color: '黄色'}
fruits.name = 'みかん';
furits['color'] = '橙色';
console.log(fruits);
//{name: 'みかん',color: '橙色'}
メゾット
メソッドはオブジェクトの「振る舞い」を表したもの。
プロパティの値には関数が設定できる。プロパティの値に関数が設定されたものをメソッドという。
- メソッドの定義
const オブジェクト名 = {
プロパティ名：値,
メソッド名: 関数式
}
//例
const person = {
name: 'ボブ',
age: '32',
greet: function() {console.log('こんにちは');}
}
- メソッドの呼び出し
オブジェクト名.メソッド名(実印数)
//例
person.greet();
ブラウザオブジェクト
ブラウザオブジェクトでブラウザを操作する。
どこからでも呼び出せるグローバルオブジェクト。
- アラートを表示する
window.alert('アラート');
alert('アラート');\\windowは省略できる
- 確認のダイアログを表示する
confirm('これでokですか?');
指定した秒数後に実行する
setTimeout(関数,ミリ秒数);
指定した秒数ごとに繰り返し実行する
setInterval(関数,ミリ秒数);
locationオブジェクト
locationオブジェクトはＵＲＬを操作することができる
console.log(location.href);//現在のURLを表示
location.reload();//現在のページを再読み込みする