JavaScriptの質問をしたり答えたりする掲示板

初めて投稿させて頂きます。

javascriptでcanvasでグラデーションの色が変化するアニメーションを作成しているのですが、HSLに関してよくわからないので教えて頂きたくお願い致します。

分からない点
・記述方法がわからない
・HSLがどの分類になるのかがわからない(関数なのか、オブジェクトなのか等)
下記ソースコードの記述を見ると関数だが、javascript HSLで検索しても記述方法や何に分類されるのか見つからなかった(検索の仕方が悪いかもしれませんが)

調べてわかった事は引数が3つあり、それぞれに当てはまる
hsl(色相, 彩度, 輝度)
色相　→rad or deg?
彩度　→100%
輝度　→50％
(値は下記ソースコードより)
基本はわかるのですが、rad or deg(これが色相？)の値だったり、その前後の＋だったり、カンマ区切り部分の区切り方が不明だったりと記述方法がわかりません。

下記ソースコードは他の掲示板で教えてもらった記述方法です。
11行目：　 var makeColor = () => 'hsl('+ rad + 'deg, 100%, 50%)';
書き方は関数だけど関数の基本的な書き方 var makecolor () => {}のような書き方でない

もう一つは下記ソースコードにはありませんが、
ctx = canvas.getContext("2d"),
HSLcolor = (d) => 'hsl('+ d + 'deg, 100%, 60%)';
getContext('2d')の後に連続で記述している。
HSLcolorの部分は自分で名前を作成した変数なのか、それとも別の物なのかがわからない

説明分かりづらく申し訳ございませんが、教えて頂きたくお願い致します。
再度、わからないこと
・HSLの記述方法がわからない
・このHSLというものは何に分類されるのか(関数？、オブジェクト?、etc）

<script>
    var line_canvas = document.getElementById("line"); 
    var line_ctx = line_canvas.getContext("2d");

function drawFrame() {
var makeColor = () => 'hsl('+ rad + 'deg, 100%, 50%)';
var grad = line_ctx.createLinearGradient(0,0,360,240);
line_ctx.clearRect(0, 0, 450, 450);
grad.addColorStop(0.0, makeColor(deg));
grad.addColorStop(1.0, makeColor(deg +30));

line_ctx.strokeStyle = grad;

    line_ctx.beginPath(); 
    line_ctx.moveTo(100,-100);
    line_ctx.lineTo(0,200);
    line_ctx.lineTo(100,200);
    line_ctx.lineTo(50,400);
    line_ctx.lineTo(200,150);
    line_ctx.lineTo(80,150);
    line_ctx.lineTo(67,0); 
    line_ctx.stroke(); 
    line_ctx.fillStyle = grad; 
    line_ctx.fill();   
}
 var deg = 0;
 setInterval(() => {
    rad = deg % 360;
    console.log(deg);
    drawFrame(deg++);
    },33);
  </script>

JavaScriptを用いて、あるサイト上から特定のGoogleカレンダー上の予定を確認、追加するプログラムを作ろうとして（予約システムのような感じです）
下記のようなソースを書いています。

取得は問題なくできていますが、予定追加がうまくできず、
どこをどのように修正したらよいかわからず困っております。
サンプルもなく、そもそもJavaScriptでできるのかすらわからないのですが・・・
同様の仕様を経験した方、わかる方がいらっしゃいましたらご教授願えませんでしょうか。

もしJSではできないのであれば、PHPでやってみようかと思っていますが…
PHPならできる、などあればご教授いただきたいです。

(function($) {
    $(function() {
        const API_KEY = [APIキー];
        const CALENDAR_ID = [カレンダーID];
        function start() {
            gapi.client.init({
                'apiKey': API_KEY,
            }).then(function() {
                return gapi.client.request({
                    'path': 'https://www.googleapis.com/calendar/v3/calendars/' + encodeURIComponent(CALENDAR_ID) + '/events'
                 })
            }).then(function(response) {
                let resultArea = document.getElementById('resultArea');
                let items = response.result.items;
                for(let i = 0; i < items.length; i++){
                resultArea.insertAdjacentHTML('beforeend', items[i].start.dateTime + '<br>');
                }
            }, function(reason) {
                console.log('Error: ' + reason.result.error.message);
            });
        };

        function addEvent() {
                        gapi.client.load('calendar', 'v3', function(){
                        var resource = {
                            'summary': $("#request_form .name").val(), // 予定のタイトル
                            'start': { // 開始日・時刻
                                'dateTime': $("#request_form .datetime_st").val();
                            },
                            'end': { // 終了日・時刻
                                'dateTime': $("#request_form .datetime_ed").val();
                            },
                            'location': 'Somewhere', // 場所
                            'description': $("#request_form .detail").val() // 説明
                        };
                        var request = gapi.client.calendar.events.insert({
                            'calendarId': CALENDAR_ID,
                            'resource': resource
                        });

                        console.log(resource);

                        request.execute(function(resp){
                        console.debug(resp);
                    });

                });
        };

        gapi.load('client', start);
        $("#request_form").on("submit", function(){
            addEvent();
        })
    });
})(jQuery);

実行するとコンソールに

cb=gapi.loaded_0:223
POST https://content.googleapis.com/calendar/v3/calendars/[カレンダーID]/events?alt=json&key=[APIキー] 401

と出ます。
（request.executeができてないようです）

canvasについて質問です。テトリスを作っていたのですが、fillStyleとfillRectの表示順には何か意味があるのでしょうか？一度fillStyleの前にfillRectを書いていたのですが、それだとfillStyleが反映されませんでした。しかし、他のコードを見てみるとfillRectが先に書かれているものもあるので、余計にわからなくなりました。

JavaScript初心者です。
サイトのパーツとしてPCサイズではhover時に中の要素を出して、スマホサイズではclick時に中の要素をアコーディオンメニューのように出すことを実装しようとしているのですが、
windowのresizeでwidthを取得していifの分岐、など試してみてもresize前のイベントが消えなかったり、挙動がバグったりして困っています。

現状は一度諦めて下記のように記述して、サイズ変更の都度リロードしている状態です。
下記の記述をresizeしても正しく動作するにはどうすれば良いでしょうか。
ご指導頂けましたら幸いです。
何卒宜しくお願い申し上げます。

function switchByWidth() {
  if (window.matchMedia("(max-width: 767px)").matches) {

    // スマホサイズ アコーディオンメニュー
    $(function () {
      $("#header__menu01").on("click", function () {
        $(this).find("span").next().slideToggle(200);
      });
    });

  } else if (window.matchMedia("(min-width:768px)").matches) {

    // pcサイズホバーイベント
    $("#header__menu01").hover(
      function () {
        //カーソルが重なった時
        $(this).children(".flex-wrapper").addClass("open");
      },
      function () {
        //カーソルが離れた時
        $(this).children(".flex-wrapper").removeClass("open");
      }
    );

  }
}

window.onload = switchByWidth;
window.onresize = switchByWidth;

JavaScript初心者です。
解決できずにつまってしまったため皆様のご指摘を頂けたら幸いです。

HTML、CSSにて画像がZ軸で重なった状態で、マウスホバーした時にspanタグで囲んでいる画像をdisplay=noneにして下の画像が出る仕様を行っています。
実際には以下のリストの中に同じclass名で複数liが入ります。

<ul class="img-cont">
      <li class="hover-wrapper hover-wrapper1">   
           <span class="item-wrapper1">
           <img src="#"></span>

            <a href="#">
            <img src="#"></a>
      </li>
    </ul>

以下のようにjQueryにて個別に実装して問題は無さそうなのですが、それぞれのli、spanのclass個数を取得して配列にし、それぞれにホバーイベントを実装するにはどのようにすれば良いでしょうか。

$('.hover-wrapper1').hover(function () {
      $('.item-wrapper1').css('display', 'none');
    }, function () {
      $('.item-wrapper1').css('display', 'inline-block');
    });
    $('.hover-wrapper2').hover(function () {
      $('.item-wrapper2').css('display', 'none');
    }, function () {
      $('.item-wrapper2').css('display', 'inline-block');
    });
    .....

初歩的な質問で申し訳ございませんが、何卒ご指導の程宜しくお願い申し上げます。

textboxに文字を入力し、検索ボタンを押すと入力した文字がdocument部分に出力されるプログラムを作成しています。作成した以下のコードをブラウザ上で確認すると、コンソールにエラーが表示されます。

エラーの解消方法を教えてください。使用しているブラウザはClomeです。
発生するエラー

Uncaught TypeError: Cannot read property 'word' of null
    at HTMLFormElement.document.getElementById.onsubmit

ーーーーーーーーーーーーーーーーー
作成したコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>タイトル</h1>
<h2>サブタイトル</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
    <form action="#" id="form">
        <input type="text" name="word">
        <input type="submit" value="検索">
    </form>
    <p id="output"></p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
    'use strict';
    document.getElementById('form').onsubmit=function(event){
        event.preventDefault();
        const search= document.getElementById('from').word.value;
        document.getElementById('output').textContent=`「${search}」の検索中...`;
    };
</script>
</body>
</html>

テンプレートリテラル「``」と「+」の違いが分かりません。
どちらも連結できるという事はわかるんですが
使い分けをする理由が良くわかりません
教えてください。
宜しくお願いします。

js初心者です。質問です。
ボタンが二つならんでいてtype(1)を押して開いた状態でtype(2)を押したらtype(1)が開いたままになってしまうので閉じるようにしたいのですが下記jsにどのように追加すればいいでしょうか？
教えていただけると助かります。

$('.gnavi ul li:nth-of-type(1) a').on('click',function(){

$('.gnavi dl.type01').slideToggle().toggleClass('open');

return false;

});

$('.gnavi ul li:nth-of-type(2) a').on('click',function(){

$('.gnavi dl.type02').slideToggle().toggleClass('open');

return false;

});

初めまして、
グローバル変数が何故か値を保持してくれません！！

あるfnction内でグローバル変数を使用しているのですが、
functionを抜けた後でも、」値を保持して欲しくて、function内でもグローバル変数に値を格納しています

しかしながら、
何故かグローバル変数を再度使用しようとしても、値が入ってません、、

どういった要因が考えられるでしょうか？？
どなたかお力添え願いたいです、、

はじめまして、たしぎと申します。
どうしてもわからない所があり質問させて頂きました。
よろしくお願い致します。

今回の質問はエラーの解決ではなく、if文の中に真偽値があるケースの
コードの動きについての質問になります。
コードはこちらの「スクロールによって見え隠れするヘッダー」を参考にした
素のJavaScriptでのスクロールヘッダーの実装になります。

質問内容

24行目、コメント②番のticking = falseが必要な理由がわかりません。

試したこと

まず6行目のコメント①番のfalseをtureに変えてみましたが、機能しません。
これはわかります。
次に24行目のコメント②のticking=falseを削除してみると、機能しません。
これがわかりません。
なぜこれが無いと機能しないのか、なぜこの位置で機能するのかがわかりません。
6行目コメント①のticking=falseだけで機能するような気がしてしまうのです。
このif文の条件式 ( !ticking ) はどのような参照をしているのかが知りたいです。
スコープやif文のドキュメントや記事などを、いくら調べても出てきませんでした。

html

<header id="header">ヘッダー</header>

JavaScript

(function () {
  const target = document.getElementById("header"),
    height = 56;
  let offset = 0,
    lastPosition = 0,
    ticking = false; // ①

  function onScroll() {
    if (lastPosition > height) {
      if (lastPosition > offset) {
        target.classList.add("head-animation");
      } else {
        target.classList.remove("head-animation");
      }
      offset = lastPosition;
    }
  }

  window.addEventListener("scroll", function (e) {
    lastPosition = window.scrollY;
    if (!ticking) {
      window.requestAnimationFrame(function () {
        onScroll(lastPosition);
        ticking = false; // ② これがわかりません
      });
      ticking = true; // ③
    }
  });
})();

以上の疑問についてお教え頂けますでしょうか。
もしくは参考になる記事等がありましたらお教えください。
よろしくお願い致します。

独学で躓いてしまった為、
初めてこちらの掲示板を利用させて頂きます。
何卒お願いいたします。
使用エディタはVisualStudioCodeです。

【 質問内容 】

JavaScript関連動画やWEBページを見ながら練習している初心者です。
絵のような画像を順番にフェードインして並べるプログラムを
実装してみたいのですが、複数表示しようとすると上手くいきません。
参考のWEBページ( https://qiita.com/t-ohtake/items/2997d449e7e243d77109 )

HTMLリソース中の２つのdocument.write() の内１つをコメントアウトすると、
正しく表示されますが、
どちらも順番に表示させようとするとimg_2のようにどちらか一方のみしか表示されません。
また、何回か連続でリロードするとどちらか一方だけに固定されている訳ではなく、
タイミングによってはもう一つの方が表示されると言った感じでした。

原因が分かる方がいらっしゃいましたら恐れ入りますが、
ご教示を頂けますと幸いです。

HTMLコード( index.html )

<!DOCTYPE html>
<html lang="en">
    <title>Document</title>
</head>
<body>

    <!--スクリプト読み込み-->
    <script type="text/javascript" src="index.js"></script>

    <script>

    //画像１表示
    document.write('<IMG src="/Users/apple/Desktop/frontend/img/apple.jpg" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr(1)">');

    //画像２表示
    document.write('<IMG src="/Users/apple/Desktop/frontend/img/orange.jpg" id="gazou2" name="gazou2" style="visibility : hidden;" onload="FadeInstr(2)">');

    </script>


</body>
</html>

JavaScriptコード(index.js)

opa=0; //透明度　0は透明
opacnt=3; //透明度の増減の間隔
timer=100; //setTimeout関数の実行間隔　ミリ秒
gazouId = "";//対象の画像

// フェードイン
  function FadeInstr(id)
     {

     //対象の切り替え
          if(id==1){
               gazouId = "gazou1";
          }else{
               gazouId = "gazou2";
          }
        MyIMG = document.getElementById(gazouId);
        MyIMG.style.visibility = "visible";
        FadeIn1(gazouId,opa);

            }
            //透明度を増加。
            function FadeIn1(gazouId,opa)
            {
                if (opa <= 100)
                {
                    MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
                    MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
                    opa += opacnt;
                    setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
                }
            }

中学生です。今コロナウイルスの影響で学校が休校になっています。そのため僕の学校ではオンライン授業をしているのですが、その時に時間割がいつもと違うので、グーグルカレンダーに予定を登録すれば、Hangouts　Chatに自動投稿される機能を作ろうと思いました。

以下のソースでは予定の時刻の3分前になったら自動で送信するようにしています。ただ、これを試してもChatに送信されることはありませんでした。本番のものはカレンダーidやwebhookUrlは入力してあります。

僕はまだ初心者で、この休校期間中に初めて触れた初心者です。そのため、どうしていいのかわからず困っています。どなたか改善策を教えていただけないでしょうか。



function getEvents(){
 var kaichiCal　=CalendarApp.getCalendarById(''); //取得するGoogleカレンダーのIDを指定する。
 var webhookUrl = ''; 
 // 取得したWebhookのURLを記載する。Chatで確認できるはずなので、それを入力します。
  if(!kaichiCal) {
  Logger.log("Unable to access calendar with id=" + kaichiCal);
  return;
  }
  var events = kaichiCal.getEventsForDay(new Date()); // カレンダーから予定を取得する
  var hello = 'こんにちは。\n 直近の予定をお知らせします。\n ------------------------------- ';


  // 各予定1つ1つに実行する処理
  for(var i=1; i < events.length; i++){




      // 予定の件名、開始時間を取得
     var startTime = events[i].getStartTime();
     var eventName = events[i].getTitle();

      //予定の開始時間から3分引いた時刻を取得
      var threeMinutesBefore = (startTime.getTime() - 3*60*1000);

      //現在時刻を取得
      var now = new Date();    

      if (fiveMinutesBefore < now && now < startTime){

        // 時間をJSTに変換 (GASの標準はUTC)
   var startTimeJST = Utilities.formatDate(startTime, "JST", "HH:mm")
  　 //送信用のメッセ―ジ
   var message = hello + startTimeJST + " " + eventName + " ";
  //chatに送る
  postchat(message);
}
}
}

  // chatに投稿する

 function postchat(message,webhookUrl){
   var botMessage = { 'text' : message}
   var options = {
    'method': 'POST',
    'headers' : {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    'payload':JSON.stringify(botMessage)  
  };
  var result = UrlFetchApp.fetch(webhookUrl, options);
  Logger.log(result);
}

昨日はご回答頂けまして誠にありがとうございます。

今回、変数の受け渡しで分からない点が出てきまして webで調べても分からなかった為 ご教授頂けないでしょうか。

game_end = 'OFF';

function kan_edit(All_number){

      //setInterval用の関数
      function kan_anim_timer(){

          if( game_end == 'ON' ){
              clearInterval(kan_timerArray.shift());
            }

      //setInterval設定
      $(document).ready(function () {
          kan_timerArray.push(setInterval(kan_anim_timer, 100));
      });

}

上記の様にsetIntervalを clearIntervalで停止するものとなります。
この際に【kan_edit(All_number)】内で【timer++】を使ったタイマーによる分岐を作るとclearIntervalさせることは出来ました。

他関数
game_end = 'ON';

しかし、上記の様に別の関数で終了用の変数内容を指定したのですが 既に動いている関数に反映させることが出来ませんでした。

ただ、他関数で変数を指定した後に生成したら どうなるのか確認したら そちらでは変数が反映されておりました。

実行中のsetInterval内のIF文の判定に外部functionで指定した変数を使うにはどの様にするべきでありますでしょうか？

ご教授頂けましたら幸いです。

昨日は回答頂けましてありがとうございます。

今回 for文の仕様面なのか？分からない点が出てきまして ご教授頂けないでしょうか。

//引数用
function set(number){

var class_01 = number;

const $btn = $('<button class="add"><img src="./data/image/kan.gif" width="100" height="100"></button>');
$('.add').addClass(class_01);
$('.add').toggleClass('add');

      $('.layer').append($btn).trigger('create');

}


//ループ
$(document).ready(function(){

  $(function() {

    for (var i=1; i<4; i++) {

      set(i);引数

    }

  });

});

問題部位を簡略化しました。

こちらで動かすとループ文内の関数が走ってボタンが生成されます。
生成された後に付属しているクラス名を追加、基点となるクラス名を削除します。
生成されたボタンのクラス名は連番が付いていることになります。

しかし、１つだけ【add】クラス名のみ 連番が付いていないものがありました。

変数「i」の数を増やしても 同じ現象が起きておりました。

コンソールパネルでクラス名を確認すると【class_01】で追加されているはずの番号【1】のクラス名のみありません。

最初に生成されたボタンへのcss操作が適用されておりませんでした。

この現象を避けるには どの様に記述すれば良いのでしょうか？

javascriptで動的に画像ボタンを生成する方法を探しております。

var $btn = $('').addClass('px').text('ボタンだよ');
$('.layer').append($btn).trigger('create');

で文字を入れたボタンを動的に作成することが出来まして、その後 文字ではなく画像をボタンとして使おうと試行錯誤しているのですが上手くいきません。

.document.write等を使ったりしたのですが生成出来ませんでした。

画像をボタンとして生成するのには上記のコードではダメなのでしょうか？

ご教授頂けましたら幸いです。

（下記が試してみて駄目だったコードです...

var $btn = $('').addClass('px').document.write('')
$('.layer').append($btn).trigger('create');

var $btn = $('').addClass('px').text('');
$('.layer').append($btn).trigger('create');