ネットで見つけたJavascriptのコードの意味がわかりません

Question

ネットで見つけたJavascriptのコードの一部の意味がわからないので教えていただきたいです。

私は現在、ネットで見つけたJavascriptのコードのわからないところを一つひとつ調べて勉強しています。
そして、そんな中でいくらネットで調べてもわからないところがあったので教えていただきたいのです。

こちらのコードをネットで見つけてわからないところを一つひとつ調べました。
var upSpeed=15; //メッセージのスライド速度
var delay =3000; // 次のメッセージに切り替わるまでの静止時間
var tickerH=40; // 表示ボックスの高さ
window.onload =function divScroller(){
scroller = document.getElementById("ticKer"); // div 表示ボックス
scroller.style.height= tickerH+"px"; // 表示ボックスの高さ
scroller.style.lineHeight= tickerH+"px"; // 行の高さ
slide = document.getElementById("ulArea"); // スライドさせる ul要素
slide.style.position = "absolute"; // 絶対配置
slide.style.top = tickerH+"px" ; // slide のtop(上辺)の位置
innScroll(tickerH, upSpeed, delay)
}
function innScroll(tickerH, upSpeed, delay){
msec = upSpeed; // スクロール時間
numTop = parseInt(slide.style.top) // 数値文字列を整数に変換
if (numTop > -tickerH){ // top位置が -30にならない間は
slide.style.top = (numTop-1)+"px"; // top位置を -1px 上へ
}
else{ slide.style.top = 0+"px";
cngLi(); // 次のメッセージと交代
}
if(numTop==0){msec = delay;// 静止時間 現在のメッセージを待機
}
setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec);
}
function cngLi(){ // メッセージの移動
base= document.getElementById("ulArea");
liList = base.getElementsByTagName("li");// 与えられたタグ名を持つ要素のリスト
elm = liList[0];// 最上部の "li"要素
base.appendChild(elm); // elm を子ノードとして末尾に移動する。
}

そして、こちらのコードの

divScroller

tickerH+"px"

innScroll(tickerH, upSpeed, delay)

msec

cngLi

setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec)

の部分がいくら調べてもわからないので教えてください。

Comments

[meg_]

コードが読みにくいのでマークダウンで記入してください。書き方はヘルプを参照ください。
また引用元も書かれた方が良いかと思います。コードを無断で転載されるのは気分の良いものではないと思います。

[1520]

わかりました。
[アニメーション特集-4]Javascriptアニメーション基本・作り方まとめの使えそうなサンプル集の下からスライドインするニュースティッカーのjavascriptのコードです。

Answer 1

「わからない」では意味があいまいではありますが、

※ 追記
質問の内容とか、他の方へのコメントを見ると、JavaScriptの基本的な文法やプログラムの構成についての知識/理解が足りていないように思います。 それらの知識が無いとコードを読んでもそういう前提部分で理解できないと思います。
まずは、入門書などを一冊読破するなどしてみてはいかがでしょうか。

divScroller

定義している関数の名前。

tickerH+"px"

tickerHには数値40が入っていますが、+演算子で文字列と結合しようとすると文字列になるので、結果として 「40px」という文字列になる。

innScroll(tickerH, upSpeed, delay)

下で定義しているinnScroll関数を呼び出している。

msec

単なる変数名。 たぶんミリ秒を保持するのでこの名前。

cngLi

下で定義されているcngLi関数。

setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec)

setTimeoutメソッドの呼び出し
https://developer.mozilla.org/ja/docs/Web/API/Window/setTimeout

こんなところでしょうか。
何がわからないのか書いていただけると、もう少し説明できます。

Comments

[1520]

ありがとうございます。
わからないというのはコードの意味のことです。
そして、innscroll関数やcngLi関数とはなんでしょう？。

[TakaiY]

> innscroll関数やcngLi関数とはなんでしょう？

15行目あたりの
function innScroll(tickerH, upSpeed, delay)
ではじまる部分が、innScroll関数を定義(宣言)しているところです。

31行目あたりの
function cngLi()
ではじまる部分が、cngLi関数を定義(宣言)しているところです。

「関数とは何か」とか、使いかたとか、仕組みとかがわからないということであれば、それらはJavaScriptの基礎にあたる概念ですから、回答に追記したように入門書などで確認するのがいいと思います。

Answer 2

setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec)

setTimeoutは遅延して実行する仕組みです
仕組み自体がものすごく古いため引数に文字列でユーザー関数を指定することができます
内容としてはmsecミリ秒後にinnScrollを実行引数がそれぞれtickerH,upSpeed,delayということ
ただし何をやりたいのかは検証していません

参考

挙動はこういうことでしょうね、１行メッセージを縦にスライドさせながらローテーションさせるということです

<script>
var upSpeed=15;
var delay =3000;
var tickerH=40;
window.onload =function divScroller(){
  scroller = document.getElementById("ticKer");
  scroller.style.height= tickerH+"px";
  scroller.style.lineHeight= tickerH+"px";
  slide = document.getElementById("ulArea");
  slide.style.position = "absolute";
  slide.style.top = tickerH+"px" ;
  innScroll(tickerH, upSpeed, delay);
}
function innScroll(tickerH, upSpeed, delay){
  msec = upSpeed;
  numTop = parseInt(slide.style.top);
    if (numTop > -tickerH){
      slide.style.top = (numTop-1)+"px";
    }
    else{ slide.style.top = 0+"px";
      cngLi(); 
    }
  if(numTop==0){msec = delay;
  }
  setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec);
}
function cngLi(){
  base= document.getElementById("ulArea");
  liList = base.getElementsByTagName("li");
  elm = liList[0];
  base.appendChild(elm); 
}
</script>
<style>
#ticKer{
background-Color:lightgray;
overflow:hidden;
position:relative;
}
#ulArea{
list-style:none;
}
</style>
<div id="ticKer">
<ul id="ulArea">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

リファクタリング

今回の挙動をエミュレートするとこんな感じがよいかと

<script>
const delay =1000;
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#ulArea').classList.add('anime');
});
document.addEventListener('animationend',e=>{
  const t=e.target;
  t.appendChild(t.querySelector('li'));
  t.classList.remove('anime');
  setTimeout(()=>t.classList.add('anime'), delay );
});
</script>
<style>
#ticKer{
background-Color:lightgray;
overflow:hidden;
position:relative;
height:40px;
}
#ulArea{
list-style:none;
position:absolute;
}
#ulArea.anime{
animation:slideup 1s;
}
#ulArea li{
height:40px;
}
@keyframes slideup{
  from{top:0}
  to{top:-40}
}
</style>
<div id="ticKer">
<ul id="ulArea">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

Comments

[1520]

ありがとうございます。
innScrollとはなんでしょう？。いくら調べてもわかりませんでした。
tickerHとupSpeedもいくら調べてもわかりませんでした。
そして、こちらのコードは下からスライドインするニュースティッカーを作るコードです。

[maisumakun]

> innScrollとはなんでしょう？。いくら調べてもわかりませんでした。

すぐ上にあるfunction innScrollです。

（コード内で作った関数は、JavaScriptの場合は通常「名前そのもの」が意味を持つことはありません。あくまで、関数を識別するためのものですので、名前自体の意味を見出す作業は不毛です）

[1520]

わかりました。
しかし、
setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec)
の全体的な意味を詳しく教えていただきたいです。

[yambejp]

>setTimeout("innScroll("+ tickerH +","+ upSpeed +"," + delay +")", msec)

これはこう書き換えられます
setTimeout(()=>innScroll(tickerH,upSpeed,delay), msec)

function innScrollの中身はコメントがついているとおりだと思います。1行ごとに内容を確認すればそんなに難しいことは書いてありません