Javascript ex1(Javascriptの構文)

コメントを残す

Javascriptの基本構文とその出力結果をまとめてみた。

1:変数の定義var,let,const

// var, let, const
// varは上書きできる
var name = 'Tom';
console.log('hello' + name);

// letも上書きできるよ
let name2 = 'anna';
name2 = 'Pon'
console.log('hello' + name);

// データ型は Number, String, Boolean, Undefined, Null, Symbol

let variable = 'str';
variable = 12;
variable = undefined;
variable = null;
variable = false;

// 実際に確認するには？
console.log(typeof variable);
// ポイント上書き禁止はconstで定義しよう！

// あとから上書きできないのでエラーになるよ
const nam = 'Yan';
nam = 'Tim';

出力結果

2:関数定義

// ()内を引数と呼ぶ
function hi(name, age) {
　 console.log('hi' + name + age);
// 関数が実行された結果(戻り値)を表示
   return name + age;
}
const returnVal = hi('Tarou2 ', 20);
console.log(returnVal);

// こちらのやり方でもOK
const hello = function (name, age) {
console.log('hello' + name + age);
return name + age;
}

const returnVal2 = hello('Tarou2 ', 20);
console.log(returnVal2);

// 関数名をもたない関数を無名関数と呼びコールバック関数でよく使う
// function(name, age) {
// console.log('hello' + name + age);
// return name + age;
// }

出力結果

3:配列とループ処理

const todos = [
{
  id: 1,
  title: 'Go to travel',
  completed: true
},
{
  id: 2,
  title: 'Go to shopping',
  completed: true
},
{
  id: 3,
  title: 'Go to museum',
  completed: false
 }
]

// 普通の書き方のとき
 for(let i = 0; i < todos.length; i++) {
// completed: trueのタイトルを取り出したいとき
   let todo = todos[i];
   if(todo.completed === true) {
   console.log(i, todos[i].title);
   }
 }

// for inの場合(短縮記法)
   for(let i in todos) {
 // completed: trueのタイトルを取り出したいとき
   let todo = todos[i];
   if(todo.completed === true) {
     console.log(i, todos[i].title);
 }
 }

// for ofの場合(短縮記法)
for(let v of todos) {
// completed: trueのタイトルを取り出したいとき
if(v.completed === true) {
console.log(v);
}
}

出力結果(実際にやる場合はどれか2つをコメントアウトしてください)

4:if文

if(false) {
  console.log('this is true');
} else if(true) {
    console.log('this is else if block');
} else {
    console.log('this is false');
}

出力結果

5:アロー関数

アロー関数を使うと省略した記法でコードを記述できる。

// 普通の記法
// function hello(name = 'Yama') {
// console.log('hello ' + name);
// }

// 普通の記法2
// const hello = function(name = 'Yama') {
// console.log('hello ' + name);
// }

// ↑をアロー関数にする場合1行だけなら{}を除ける
// const hello = (name = 'Yama') => console.log('hello ' + name);

// 引数がデフォルト値なら更に省略できる
// const hello = name => console.log('hello ' + name);

// 引数が2つならこのように記述
// const hello = (name, age) => console.log('hello ' + name + age);

// 戻り値を出力する場合、一般的記法
// const hello = (name, age) => {
// return 40;
// }

// 上と同じ意味だが更に省略できる
// const hello = (name, age) => 40;
// console.log(hello());

// 例：省略前の記法
// const retriever = (name, age) => 40;
// const arry = [1,2,3,4,5,6];
// arry.forEach(value => {
// console.log(value);
// })

// 省略後のアロー関数の記法
const retriever = (name, age) => 40;
// 戻り値40が出力される
console.log(retriever());

const arry = [1,2,3,4,5,6];
arry.forEach(value => console.log(value));
const hello = (name, age) => console.log('hello ' + name + age);
hello('Tarou Tanaka ', 15);
hello('Tarou Tanaka2 ', 25);

出力結果

6:コールバック関数とループ処理

// 普通のループ文
// const arry = [1,2,3,4,5,];
// for(let i = 0; i< arry.length; i++) {
// console.log(arry[i]);
// }

const arry = [1, 2, 3, 4, 5];
  function forEach(ary, callback) {
  for (let i = 0; i < ary.length; i++) {
  callback(ary[i]);
}
}
// コールバック関数を用意する
function log(val) {
  console.log(val);
}

function double(val) {
  val = val * 2;
  log(val);
 }
// コールバック関数を切り替えることで同じ関数でも出力結果を変えることができる

forEach(arry, log);
forEach(arry, double);

出力結果

7:配列とforEachメソッド

const arry = [1, 2, 3, 4, 5];

// 変数名は何でもいいのでv,forEachを使ったほうが記述が少ない
  arry.forEach(function(v, i, ary) {
    console.log(v, i, ary);
})

// アロー関数の記法だと更に省略できる
  arry.forEach(v => console.log(v));

出力結果

8:reduceメソッド

const arry = [1, 2, 3, 4, 5];

//reduceの第２引数を指定しない場合には、accuに配列の0番目、currに配列の１番目の要素が渡ってくる
// arry.reduce(function (accu, curr) {
// console.log(accu, curr);
// return accu + curr;
// });
// 初期値を設定するとき。10が最初にaccu、currに1(配列の最初)が渡ってくる
  arry.reduce(function (accu, curr) {
  console.log(accu, curr);
  return accu + curr;
}, 10);

  const str = "animation";
  const strArry = str.split("");
  const result = strArry.reduce((accu, curr) => {
  console.log(accu);
// テンプレートリテラル
  return `${accu}<${curr}>`;
// 上と下は同じだよ
// return accu + "<" + curr + ">";
}, "");

  console.log(result);

出力結果

クラス

const obj = {
// プロパティとキーがあるものがオブジェクト
first_name: 'Suzutuki',
last_name: 'Akina',
printFullname: function() {
console.log('hello');
}
}

// classという演算子を用いてオブジェクトを初期化する処理を記載する
class Myobj {
constructor() {
this.first_name = 'Suzutuki';
this.last_name = 'Akina';
}

printFullname() {
console.log('hello');
}
}
// new演算子を使うことによってインスタンスが生成される
const obj2 = new Myobj();

obj.printFullname()
obj2.printFullname()
console.log(obj.first_name);
console.log(obj2.last_name);

出力結果

thisとbind

const obj = {
  first_name: 'Jirou',
  last_name: 'Yamada',
  printFullName: function () {
// このThisはobjを参照するのでfirst_name: 'Jirou',last_name: 'Yamada',が出力されるよ
   console.log(this);
// thisを固定する方法1: 変数としてこの時点のthisを入れる
   const _that = this;
     window.setTimeout(function () {
// このthisはwiondowを参照する
   console.log(this);
// こちらのやり方だとobjが出力されるよ
   console.log(_that);
  });
 }
} 
  console.log(obj.first_name);
  obj.printFullName();

const obj2 = {
  first_name: 'Akina',
  last_name: 'Suzutuki',
  printFullName: function () {
    setTimeout(function () {
// このthisはwiondowを参照する(bindがない場合)
  console.log(this);
// thisを固定する方法2:.bindを使う
// }.bind(this));
// thisのbindの引数で与えたオブジェクトに変えることもできるよ
  }.bind({ first_name: 'Akina' }));
 }
}
console.log(obj2.first_name);
obj2.printFullName();

出力結果

クラス継承

document.addEventListener('DOMContentLoaded', function () {
  const ta = new TweenTextAnimation('.tween-animate-title');
    ta.animate();
 });

// <span class>文字</span>としたい、空白も表現したい
class TextAnimation {
    constructor(el) {
// オブジェクトリテラルで初期化する
    this.DOM = {};
 //全てのDOM要素'.tween-animate-title'を格納する
      this.DOM.el = document.querySelector(el);
      this.chars = this.DOM.el.innerHTML.trim().split("");
      this.DOM.el.innerHTML = this._splitText();
}
  _splitText() {
    return this.chars.reduce((acc, curr) => {
     curr = curr.replace(/\s+/, ' ');
     return `${acc}<span class="char">${curr}</span>`;
  }, "");
}
  animate() {
    this.DOM.el.classList.toggle('inview');
 }
}
// 継承を宣言する
  class TweenTextAnimation extends TextAnimation {
    constructor(el) {
// 親のコンストラクタを呼び出す
      super(el);
      console.log(el);
      this.DOM.chars = this.DOM.el.querySelectorAll('.char');
      console.log(this.DOM.chars);
      console.log(this.chars);
}
// 記載を書き換えたい(オーバーライド)場合
  animate() {
  // inviewをつける
    this.DOM.el.classList.add('inview')
// iがないとi is not definedとなるよ
    this.DOM.chars.forEach((c, i) => {
// TweenMaxの書き方(toメソッド)
// 第一引数にDOM、第二引数が対象となるDOMアニメーションの間隔
    TweenMax.to(c, .6, {
// オプションeaseファンクション,delayの間隔,始まる状態
      ease: Back.easeOut,
      delay: i * .05,
// アニメーションの始まる状態
      startAt: { y: '-50%', opacity: 0},
// 終了時の状態透明度解除
      y: '0%',
      opacity: 1
   });
  });
 }
}


// この部分継承することでカットした部分
// this.dom.el = document.querySelector(el);
// this.chars = this.dom.el .innerHTML.trim().split("");
// this.dom.el .innerHTML = this._splitText();
// }
// _splitText() {
// return this.chars.reduce((acc, curr) => {
// curr = curr.replace(/\s+/, ' ');
// return `${acc}<span class="char">${curr}</span>`;
// }, "");
// }

出力結果

コメントを残す

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