02-checkin.md

HTML/DOM check

https://jsfiddle.net/2seepb9L/1/

確認目的

• 簡単なDOM操作
  • getElementById
  • getElementsByClassName
  • getElementsByTagName
  • querySelector(All)
  • appendChild
  • insertBefore
  • createElement
• ループの書き方
  • for文で書く

<div id="foo">
  <ul></ul>
</div>

上記のhtmlを下記のようにする関数を書きなさい:

<div id="foo">
  <p class=“title”>item list </p>
  <ul class="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
    <li class="item">item 4</li>
    <li class="item">item 5</li>
  </ul>
</div>

データー形式変換 Exercise

https://jsfiddle.net/z38uv4wu/

確認目的

あなたは今、様々なハイファッションデザイナーの商品の棚卸し表を持っている。各デザイナーはシューズのラインナップを持っており、各シューズには名前と値段が付いている。

棚卸表の例:

var currentInventory = [
  {
    name: 'Brunello Cucinelli',
    shoes: [
      {name: 'tasselled black low-top lace-up', price: 1000, items: 3},
      {name: 'tasselled green low-top lace-up', price: 1100, items: 0},
      {name: 'plain beige suede moccasin', price: 950, items: 2},
      {name: 'plain olive suede moccasin', price: 1050, items: 10}
    ]
  },
  {
    name: 'Gucci',
    shoes: [
      {name: 'red leather laced sneakers', price: 800, items: 30},
      {name: 'black leather laced sneakers', price: 900, items: 0}
    ]
  }
];

全デザイナーの全ての靴を読み込み、次のようなフラットリストにして返す関数を書きなさい:

{designer name} - {shoe name} - {price}
{designer name} - {shoe name} - {price}
etc...

上記の例で言いますと、

[
  [Brunello Cucinelli, tasselled black low-top lace-up, 1000, 3],
  [Brunello Cucinelli, plain beige suede moccasin, 950, 2],
  [Brunello Cucinelli, plain olive suede moccasin, 1050, 10],
  [Gucci, red leather laced sneakers, 800, 30]
]