javascript練習問題(URL操作)

前提知識(URLの構造)
問題1 : 現在のURLを取得する
問題2 : 現在のURLのホストを取得する
問題3 : 現在のURLのパスを取得する
問題4 : 現在のURLのパラメータを取得する
問題5 : 現在のURLのハッシュを取得する
問題6 : 特定パラメータの値を取得する

前提知識(URLの構造)

URLの文字列はいくつかの要素に分解されます。

下記はURLサンプルです。
https://www.example.com/test/product.html?name=商品A&code=AAA#rev

プロトコル	ホスト	パス	クエリ文字列・パラメータ	ハッシュ
https	www.example.com	test	name=商品A&code=AAA	#rev

パラメータとは

URLに必ず付いている項目ではありません。

パラメータが付いているURLと、ついていないURLがあります。

例えば、商品一覧画面があり、検索機能があるような画面を思い浮かべてください。

商品一覧画(URL：https://www.example.com/test/product.html)

では、商品名が「アジ」のものを検索します。

検索語の画面(URL : https://www.example.com/test/product.html?name=アジ)

パラメータにname=アジの条件を付けて、画面がリロード(更新)されると表示内容が変わります。

パラメータは可変で値を変えることで、条件を設置することができます。

ハッシュとは

一言で表すと、ページの表示位置を示すために使用します。

HTMLコードにidを付与して、そのid名をURLの#の後ろに指定することで対象位置を表示します。

問題1 : 現在のURLを取得する

下記はURLサンプルです。
https://www.example.com/test/product.html?name=商品A&code=AAA#rev

現在のURLを取得してコンソールログに出力してください。

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
<script>
  let url = location.href;
  console.log(url);
</script>
</html>

コンソールログ出力内容

https://www.example.com/test/product.html?name=商品A&code=AAA#rev

問題2 : 現在のURLのホストを取得する

現在のURLのホスト名を取得してコンソールログに出力してください。

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
<script>
  // 書き方パターン1
  let host1 = location.host;
  // 書き方パターン2
  let host2 = location.hostname;
  console.log(host1);
  console.log(host2);
</script>
</html>

コンソールログ出力内容

www.example.com

問題3 : 現在のURLのパスを取得する

現在のURLのパス名を取得してコンソールログに出力してください。

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
<script>
  let path = location.pathname;
  console.log(path);
</script>
</html>

コンソールログ出力内容

test

問題4 : 現在のURLのパラメータを取得する

現在のURLのパラメータを取得してコンソールログに出力してください。

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
<script>
  let param = location.search;
  console.log(param);
</script>
</html>

コンソールログ出力内容

name=商品A&code=AAA

問題5 : 現在のURLのハッシュを取得する

現在のURLのハッシュを取得してコンソールログに出力してください。

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
<script>
  let hash = location.hash;
  console.log(hash);
</script>
</html>

コンソールログ出力内容

#rev

問題6 : 特定パラメータの値を取得する

パラメータは下記だと仮定して、nameパラメータの値を取得してください。

パラメータ例
name=商品A&code=AAA

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
<script>
 let url = new URL(window.location.href);
 let params = url.searchParams;
 console.log(params.get('name'));
</script>
</html>

コンソールログ出力内容