マガジンのカバー画像

JavaScript

30
JavaScriptの独学まとめ
運営しているクリエイター

2021年4月の記事一覧

フィッシャー・イェーツのシャッフル

このアルゴリズムを使うと、高速かつ偏りがないシャッフルができる。 やり方 今回は1~5まで並べられた数字をシャッフルする。 まず末尾の5と1~5からランダムに選ばれた数字を入れ替える。 そして末尾に行った数字を固定して、次に4つの数字の末尾と4つからランダムに選ばれた数字を入れ替える。 ここで、末尾の数字がランダムで選ばれたら、そのまま固定して、次のセットへ。 これを1つになるまで繰り返す。

Math.floor と Math.random

Math.floorとMath.randomがごっちゃごちゃになっていた。 理由はドットインストールのビンゴカードを作るところでランダムを生成するために column[0] = source.splice(Math.floor(Math.random() * source.length), 1)[0]; こういうコードを使っていたため、Math.floor自体がランダムを作るために必要なんだと思っていた。 しかし、それは完全な誤解であった。 Math.floor:

テンプレートリテラル

JavaScriptで使うテンプレートリテラル。 ドットインストールではたいした説明もないまま、気づいたら普通に使われている言葉だが、全く意味がわからない。 まず言葉だ。 テンプレートリテラルと呪文のような言葉を頭に浮かべてみようとしたが、何もイメージできない。 なので、サイトなどで調べてみた。 まず、言葉で説明すると テンプレートリテラルとは文字列の中に変数を入れたり、改行したり、式を入れたりすることができる構文 らしい。 らしいと言われてもこれで納得できるわけもな

returnとは JavaScript

昨日の引数に引き続き、またもよく理解できていないreturnで躓く場面が発生。そのためサイトなどで調べたことを自分なりの解釈でまとめていく。 参考書などでは「戻り値」と書かれていて、関数を戻すという説明がほとんどだ。 何を言っているんだ… それで「あぁ、関数を戻すんだな!」ってなるほど自分は頭が良くない。 そのためサイトで例題を見ながら理解しようとした。 function hello(name) { return 'こんにちは' + name + 'くん'; }

引数

これがとてつもなく理解しにくかったので調べて自分なりに理解したものを書いておく。 function 関数名(引数){ //処理の内容} 関数名のあとに()に書かれるものが引数。 引数はなくても()は忘れてはならない。 functionはその分を書くだけでは処理を関数にしているだけで、実際に処理されない。 そこで参考書などでよく言われる、 『関数を呼び出しましょう!』が必要になる。 関数の処理を行うために実行するためのコードをかかなくてはならないということだ。

定数の変更

定数は変更できないが、定数の配列は変更できる。 const scores = [80,90,40]; scores[2] = 44 これでscoresの三つ目の配列を変更 しかし、scores = 10;はできない。

アロー関数(1)

関数式を短くするときにアロー関数を使用する。 /*const sum = function(a,b,c) {        return a + b + c;};*/const sum = (a,b,c) => { return a + b + c }; //処理の中身がreturnのみならばさらに短く書ける const sum = (a,b,c) => a + b + c; functionを取って、=>をつける。

関数宣言と関数式(メモ)

※関数内のreturnのあとに関数内に処理(console.logなど)を入れても処理しない。

parseInt()

JavaScriptでは文字列の数字も計算する。※ただし+は違う。 例)console.log("10"-5);  → 5になる 例)console.log("5"+2); → 52になる 文字列の連結をしてしまう。 文字列を数値とするためにparseInt()を利用する。 例)console.log(parseInt("5",10)+2);  → 7になる  parseInt()の中の10は10進数を意味する。

変数と定数 let const var

基本的に定数のconstを利用する。 値をあとでいじりたいのであれば、変数のletをつかう。 varに関しては古い教材などでは使用しているが、バグなどが起きるため今は通常では使用されていない。letを使おう。

forの多重ループ

for文の中にfor文を入れることでループする。 for (i = 1,i <= 2,i ++) { for(j = 1,j <=3,j ++){ //処理の内容 } ”A”} ↑のコードではまず外のiからスタートなので、i=1になり、中の処理を行うのでj=1で処理、j=2で処理、j=3で処理をする。 そして外のi=2となり中が同じ処理を繰り返して終了。 もし中の処理が一通り終わるたびに(今回はj=3まで)、処理(例えば改行したい場合は<br

改行、縦に並べる

横並びの画像や、テキストをJavaScriptで縦に並べたい場合、HTMLの</br>を最後に入れることで縦にできる。 <script>var i,tag = ""; //HTMLタグを格納する変数 innnerHTMLでもよいが動作が遅くなってしまう-------------------------------------------------  tag += "<img src='------'>"; tag += "<img src=

Web API

以前どこかの記事にも書いたが、APIは企業が持っているサービスを配布して一般でも使えるようにしたもの。 例えばTwitterやAmazonなど。 これらを使用することで、一からサービスを作らなくて済む。例えばログインサービスなどをTwitterのアカウントでログインできる。 おそらく、あまり調べてはいないが、提供する企業側も一般の人にログインのために自社のアカウントを作ったり、自社の存在を知ってもらうという広告みたいなものになるというメリットがあるのではないかと考える。

jQuery プラグイン

プラグインとは機能を拡張するためのプログラム。その中でもjQueryプラグインはjQueryを使用してアニメーションなどの機能を付けることができるようになるもの。 <textillate> 今日使用したのは「textillate.js」というもの。これを使用することでテキストにアニメーションをつけることができる。 ダウンロード後、必要なファイルを使用するフォルダ内に入れる。そしてHTMLの<link>タグにプラグインのCSSファイルを、<script>タグにjsファイル