JavaScript | 「な」のblog

【JavaScriptステップアップ講座第１回】jsの基本

今日からJavaScriptを基礎から学ぶ「JavaScriptステップアップ講座」を更新していきたいと思います。私は勧められてPr〇gateでjsを勉強しようと奮闘したことがあります。でもこれはプログラミング言語を少なくともひとつは知っている人向けだな、と思いました。あくまで個人の感想に過ぎませんが、「変数」「配列」などど言われても、それがどう具体的に役に立つのか、イメージできないからです。結 […]

【JavaScript】canvas要素を使って雪を降らせる

もうすぐクリスマス。というわけで期間限定でブログに雪を降らせてみました。 https://www.otwo.jp/blog/canvas_sakura/ ベースとなるJSはこちらを参考にさせていただきました。詳しく解説が載っています。こちらは桜の花をひらひら降らせています。 http://www.shurey.com/js/samples/1_tips10.html ドキュメントの高さを取得する […]

【JavaScript】if文でTOPへ戻るボタン

トップへ戻るボタンを習ったので復習しながら解説します。 HTML

<p class="gotop">TOPへ戻る</p>

1	<p class="gotop">TOPへ戻る</p>

CSS

.gotop{
position: fixed; /*表示場所を固定*/
right: 10px;
bottom: 10px;
opacity: 0;
transition: all .5s;
}
.is-show{
opacity: 1;
}

1

2

3

4

5

6

7

8

9

10

.gotop{

position: fixed; /*表示場所を固定*/

right: 10px;

bottom: 10px;

opacity: 0;

transition: all .5s;

}

.is-show{

opacity: 1;

}

JavaScript

let gotop = document.querySelector('.gotop'); //クラスgotopを変数gotopにいれる

window.addEventListener("scroll", function(){
let scl = window.pageYOffset; //スクロール量を取って変数に代入
if( scl &gt; 200 &amp;&amp; scl &lt;= 500 ){ //もしスクロール量が200より大きくかつ500以下のとき
gotop.classList.add('is-show'); //クラスgotopにクラスis-showを追加する
}else if( scl &gt; 500 ){ //もしスクロール量が500より大きいなら（おまけです）
gotop.innerHTML = "TOPへ戻ろうよ！"; //要素の中身を変える(おまけです）
}
});

1

2

3

4

5

6

7

8

9

10

let gotop = document.querySelector('.gotop'); //クラスgotopを変数gotopにいれる

window.addEventListener("scroll", function(){

let scl = window.pageYOffset; //スクロール量を取って変数に代入

if( scl > 200 && scl <= 500 ){ //もしスクロール量が200より大きくかつ500以下のとき

gotop.classList.add('is-show'); //クラスgotopにクラスis-showを追加する

}else if( scl > 500 ){ //もしスクロール量が500より大きいなら（おまけです）

gotop.innerHTML = "TOPへ戻ろうよ！"; //要素の中身を変える(おまけです）

}

});

JavaScriptの授業は覚えることが多くとても大変ですが、できることも多いので楽しいです。他にも簡単な […]

【JavaScriptステップアップ講座 第１回】jsの基本

【JavaScript】canvas要素を使って雪を降らせる

【JavaScript】if文でTOPへ戻るボタン

【JavaScriptステップアップ講座第１回】jsの基本