JavaScriptに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します!
質問は下記に沿って書いていただくと回答しやすくなります。
はじめまして、たしぎと申します。
どうしてもわからない所があり質問させて頂きました。
よろしくお願い致します。
今回の質問はエラーの解決ではなく、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リソース中の2つのdocument.write() の内1つをコメントアウトすると、
正しく表示されますが、
どちらも順番に表示させようとするとimg_2のようにどちらか一方のみしか表示されません。
また、何回か連続でリロードするとどちらか一方だけに固定されている訳ではなく、
タイミングによってはもう一つの方が表示されると言った感じでした。
原因が分かる方がいらっしゃいましたら恐れ入りますが、
ご教示を頂けますと幸いです。
HTMLコード( index.html )
<!DOCTYPE html>
<html lang="en">
<title>Document</title>
</head>
<body>
<!--スクリプト読み込み-->
<script type="text/javascript" src="index.js"></script>
<script>
//画像1表示
document.write('<IMG src="/Users/apple/Desktop/frontend/img/apple.jpg" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr(1)">');
//画像2表示
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);引数
}
});
});
問題部位を簡略化しました。
こちらで動かすとループ文内の関数が走ってボタンが生成されます。
生成された後に付属しているクラス名を追加、基点となるクラス名を削除します。
生成されたボタンのクラス名は連番が付いていることになります。
しかし、1つだけ【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');
y=f(x)のグラフを書きたいです。特にy=xの2.4乗とかのグラフをかけるようにしたいです
Google chartを用いてスプレッドシート上の任意の列、行だけをデータをwebページに反映させる方法を教えてください。
これでは任意の列、行は抜き出せませんでした。
(function() {
'use strict';
function drawChart() {
var Linequery = new google.visualization.Query('スプレッドシートのURL');
Linequery.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var target = document.getElementById('target');
var data;
var options = {
title: 'テストデータA',
width: 500,
height: 300
};
var chart = new google.visualization.LineChart(target);
data = response.getDataTable();
chart.draw(data, options);
}
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
})();
CreateJSでドラッグ&ドロップを実装したいのですが、
下記のページを参考に作成したところ、
https://ics.media/tutorial-createjs/mouse_drag/
パソコン(マウス操作)やタブレット(ipad)では動作したのですが、
WindowsPC(Windows10)のタブレットPCのタッチパネルではドラッグしてくれませんでした。
タブレットPCのタッチパネルでドラッグ&ドロップをさせるためには、どうすればいいでしょうか。
JavaScript初心者です。
ハイパーリンクで飛んだ先のウィンドウの大きさをresizeToで固定したいのですが、どのような記述をすればよいのでしょうか?
説明分かりづらくてすみません(-_-;)
こんにちは、初心者です。
以下のコードで、「if(a = )」を用いて「nahh」を出力させる場合、if(a = 0)以外の方法はありますでしょうか。
よろしくお願いいたします。
var a = 7;
if(a = 6){
console.log('eyy');
} else {
console.log('nahh');
}
javascript初心者です。
以下のコードはなぜエラーになるのでしょうか。
どなたかご教示くださると幸いです。
よろしくお願いいたします。
form形式以外のログイン画面の自動ログインについて
ご覧頂きありがとうございます。
現在、あるログイン画面を開いたときに自動でログインしてくれるコードを調べております。
フォーム内のID&PASSは自動入力出来たのですが、
最後のログインボタンが特殊でクリックするのをどう記述してよいか困っております。
ご存じの方がいらっしゃいましたら、ご教授頂けると幸いでございます。
フォームのコードは以下になります。
ログイン
質問させて頂きます。
サイトから外部リンクを開いた時にAndroid,iPhone,PCそれぞれ別サイトを表示させたいのですがどのようにすればいいのか分かりません。
(例)リンクURL:example.html
iosの場合
https://www.apple.com/jp/itunes/
Androidの場合
https://play.google.com/
PCの場合
https://www.yahoo.co.jp/
分かる方いましたらソースコード等ご教授頂ければと思いますm(__)m
宜しくお願いします。
よろしくお願いいたします。
スマホサイトを作ろうとしています。
既存のスマホテンプレートを使って作ろうとしましたが、アンカーが同じページ内にしか飛びません。
普通に、としたら別の xxx.htmlに飛んでほしいのですが、次のJavascript のせいで飛ばないように思います。
$(document).ready(function(){
$('.pagetop a[href^=#]').tap(function() {
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('html, body').animate({ scrollTop: position } , speed, 'swing');
return false;
});
});
どこを直せばよいか教えてください。
よろしくお願いいたします。