Zenn
Open3

JS初心者向け課題

JavaScript
おるとろおるとろ

Chromeのデベロッパーツールではコンソール上からJSを実行することができます。

また、ちょっとした挙動を確かめるのにcodepenも便利です。

codepenではではHTMLとCSSとJSを書いて挙動を確かめることができます。
また、HTMLに対してJSがどう作動するのかを確かめるのに、consoleを使うと良いかもしれません。

挙動を確認しながら、以下のコードを作成してください。

いくつか指定する関数を書いてください。

  1. 引数を二つとり、それらを積を返す関数を書いてください。
  2. 引数を二つとり、それらの商を返す関数を書いてください。
  3. 引数を二つとり、それらの剰余を返す関数を書いてください。

配列とオブジェクトの違い

  1. 要素はなんでもいいので、配列を書いてください。
  2. 要素はなんでもいいので、オブジェクトを書いてください。
  3. オブジェクトの配列を書いてください。
  4. オブジェクトの配列を持つオブジェクトを書いてください。
  5. 配列の配列を書いてください。
  6. a=[{"first": 50, "second": 60, "other":[{"rat":1,"ox":4, "tiger":8}]}, {"first": 70, "second": 80, "other":[{"rabbit":2,"dragon":9, "snake":16}]}] について、aから9を取得してください。
おるとろおるとろ

反復

  1. 1から100まで全て足し合わせる処理を書いてください。
  2. 1から100までの偶数を全て足し合わせる処理を書いてください。

文字列操作

  1. 二つの文字列を引数として受け取り、それらを連結して表示する関数を書いてください。

DOM操作

HTMLのデータをJSから扱えるようにするため、ブラウザはHTMLという文字列文書をDocument Objectというオブジェクトとして抽象化（モデリング）し、JSに提供しています。これをドキュメントオブジェクトモデル（DOM）と言います。

以下のようなHTMLを作成し、DOMを操作してみてください。

<ul>
<li><p>選択1</p></li>
<li><p>選択2</p></li>
<li><p>選択3</p></li>
<li><p>選択4</p></li>
</ul>

こちらにHTMLを用意したcodepenを用意しましたので、活用してください。
https://codepen.io/kawadumax/pen/PoEwovQ

例

<p>タグの中身を全て"結果"に変える例

const lis = document.querySelectorAll("li"); 
// document.querySelectorAllは指定する要素全てを配列として取得する関数。
// ここではli要素を指定している。
// 取得したDOMすべてに対してinnerHTMLという文字列を表すプロパティを書き換える
for (let i = 0; i < lis.length; i++) {
  lis[i].innerHTML = "結果";
}

以下の課題については(https://www.hypertextcandy.com/vanilla-javascript-dom)を参考にしながらやってみてください。

  1. <li><p>選択5</p></li>を追加するJSのコードを書いてください。
  2. 選択2という文字列のCSSを変更して、color: red;のスタイルを付与するJSのコードを書いてください。
1のヒント1

まず最初に使うのはcreateElementです。

const li = document.createElement('li');
const p = document.createElement('p');
1のヒント2

pに文字列を挿入します。

p.innerHTML = "選択5";

liとpに親子完成を持たせます。

li.appendChild(p);
1のヒント3

ulを取得し、親子関係を持たせたliをulの最後に挿入します。

const ul = document.querySelector("ul");
ul.insertAdjacentElement('beforeend', li);
2のヒント1

まず先頭のliタグを取得したあと、その隣のタグ（兄弟要素と呼びます）を取得します。

const one = document.querySelector('li');
const two = one.nextElementSibling;
2のヒント2

二番目のliタグの子要素であるpタグを取得します。

const p = two.firstElementChild;
2のヒント3

あとはpタグのスタイルを変更します。

p.style.color = "red";
おるとろおるとろ

ProgateでjQueryのコースを学習後、以下の課題に取り組んでください。
途中、CSSアニメーションを使っている箇所があります。もし分からなければこちらを参照してください。
https://qiita.com/soarflat/items/4a302e0cafa21477707f

jQueryを用いてランディングページを作成してください。

以下の要請を満たしてください。