【IT業界】JavaScriptでコードを書いてみた10｜super・スライドショー

こんにちは、ススムです。

JavaScriptのsuper・スライドショーとは何なのか？

そんな方向けの記事内容となります。

この記事を書いた人はこんな感じです。⇩

著者

スポーツの専門学校卒業
オーストラリアへ語学留学/スシレストランで就労
JICA海外協力隊にてミャンマーで2年間生活
Webデザイナー/動画クリエイター/Webエンジニア/Webライター
オンラインスポーツコーチ
オンライン日本語講師
オンラインミャンマー語講師
ミャンマー人向けオンラインコミュニティ運営

※この記事を書いている私について詳しくはこちらで紹介しています。

本記事の内容

・JavaScriptのsuperとは

・JavaScriptのスライドショーとは

【エンジニアの職探しならこちら🔻】

フリーランスエンジニアに安心保証と豊富な案件紹介を【midworks】

【PR】週3日×高単価案件ならITプロパートナーズ

JavaScriptのsuperについて
- 継承の使い方とは
JavaScriptのスライドショーについて
- ランダムに流す
- いいね:

JavaScriptのsuperについて

javascriptの基本的な書き方は以下のように書きます。

それでは「super」とはなんなのか?
superとは、親クラスからクラスのパラメータやメソッドを呼びだすのに使用し、親クラスのパラメータやメソッドを引き継いだりします。
superで親クラスを呼び出すには、extendsで親クラスを継承し、その後、superを使用して親クラスを呼び出します。
では実際にコードを書いてみます。

続いてクラスを呼び出すためにnewをつけて書きます。

継承したクラスを用いて出力できました。

継承の使い方とは

継承の使い方には2種類があります。
・prototype

・Object.create

「Practice.prototype = new Test()」と書く事で、Testオブジェクトが持っていた「speak」をPracticeオブジェクトから利用できるようになりました。
prototypeを使用すると、コードの簡略化や、プログラム実行時の省メモリ化ができるというメリットがあります。
続いてObject.createについて書きていきます。

「Object.create」の引数にTestオブジェクトのprototypeを指定しています。

JavaScriptのスライドショーについて

javascriptでは、ある一定期間で画像が自走的に変わるスライドショーや、開始ボタンなどが設置されているものなどを作成できます。
では実際にコードを書いてみます。

配列srcdには表示させたい画像を文字列として保存して、関数slideshow_timerで、スライドショーにおいて画像が入れ替わる処理を実行します。
setlnterval関数では、第一引数に呼び出したい関数名、第二引数に実行するタイミングを指定します。
続いて開始ボタンを設置して処理する方法について書いていきます。