JavaScript関連のことを調べてみた2022年02月18日

JavaScript関連のことを調べてみた2022年02月18日

Stripeで作成した「段階的な料金」または「数量ベースの料金」の詳細をAPIで取得する方法

Stripeでは、「10ユーザーまでは固定で5,000円、それを超えた場合は1ユーザーあたり400円」のような、複雑な料金体系を実装することができます。

![スクリーンショット 0004-02-16 12.46.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/bffb47ac-6603-25d9-4073-d83f887b59e7.png)

また、「15ユーザーまでは単価50円+固定で100円、ただし16ユーザー目以降は単価45円と追加で固定90円で計算する」のような、より複雑なケースについてもサポートしています。

![スクリーンショット 0004-02-16 12.45.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0fa5408e-5265-7f14-983b-6472e80b8d0f.png)

https://stripe.com/docs/products-pri

元記事を表示

情報セキュリティ

情報セキュリティの3要素:
機密性
完全性
可用性

攻撃の流れ:
1予備調査
使われいている言語は?Webシステムの構成は?本社所在地は?サーバの場所は?etc..

2 脆弱性調査
攻撃対象への全体調査を終えた後に、くさのリンの中で一番弱い箇所を探す

3 攻撃の試行
一番弱い箇所を攻撃する

4 権限の上昇
内部に侵入しただけでは、重要な情報をアクセスできないため、管理者権限を奪い取る。

5 バッグドアの設置
後から何度も侵入ために作る、秘密の入り口。

Webアプリケーションを攻撃する手法:
SQLインジェクション:
Webフォームなどの入力インタフェースなどを利用してデータベースに発行されるSQLを変更。
例:PWを’aaa’ or ‘1’=’1′

対策:
1 入力値のチェック(バリデーション)
 パスワード入力を半角英数字にして[‘]を防ぐ
 入力文字を厳格に指定する

2 プリペアードステートメント
 先に用意した変数に格納してチェックする(元々はDBスピードアップのため)

クロスサイトスクリプティング(XSS)
HTMLフォームの中に悪意のあるJavaScript

元記事を表示

javascript 01_出力

出力用の文
1 警告フォームを出す
alert();
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/b524cc51-6ef0-71c2-51a7-8356c4891054.png)

2 Bodyの内容を書く
document.write();
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/d673d328-dad7-dee5-7caf-f5cf9a5350b0.png)

3 consoleで内容を書く
console.log();
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/1c04d127-ba18-19cc-bd03-9aac6cd16a69.png)

元記事を表示

Javascript19_値の代入

+=
*=
/=
%=

非数値について比較する際に、非数値の部分を数値に変換してから比較します。

どんな値がNaNと比較する場合、結果はFalseです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/0d57fb22-cab6-e226-553f-ac3168c4da8e.png)

二つの文字列になっている数値を比較する時に、必ず型変換しないといけません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/40dbe73c-7a24-0950-8616-2c381246f388.png)

Unicodeを打つ方法
\u4桁数字
例:console.log(ul\2620);

直接Htmlの中に書く方法
&#XX; (ここのXXは10進数です)
例:

元記事を表示

Javascript18_演算ルール

&& 
AND演算のルール:
1 二つの値ともtrueであれば、後者の値を返す
2 二つの値ともfalseであれば、前者の値を返す

例:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/3c6b7548-4481-8416-b11f-4fdf111d2621.png)

||
||演算のルール:
1 1つ目の値がtureであれば、1つ目の値を返す
2 1つ目の値がfalseであれば、2つ目の値を返す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/80feb0a5-894b-e7a4-e54e-1d1db2f2e16b.png)

元記事を表示

JavaScript17_演算符

jsは3種類の演算符があります。
AND: &&
OR: ||
NOT: !

一つの値に2回!!すると、値は変更しません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/f4581aa2-13ac-f56c-8581-23ebaf786319.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/1bbb3d11-28e0-e56a-8945-2703506c78b2.png)
よって、上記の特性を利用すれば、値をBooleanに変換することができる。!!を書けばOKです。
var a = “Hello”;
a = !!a;

&&: 二つの値ともTrueの時だけ、Trueが返されます。

||:一つのTrueがあれば、Trueが返されます。
   2つの値ともFalseの場合、Falseが返されます。

1つ目の値がtrueの場合、2つ目の値をチェッ

元記事を表示

JavaScript16_インクリメント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/0d74ae8b-2be5-68a6-8daf-587924f05e8a.png)
a++は元の値aです。
++aは計算した後の値(a+1)です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/657d686c-1ebc-a060-a371-d6633b2e791f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/802cb560-83f5-25b8-61f9-e05ec672d087.png)

a–は元の値aです。
–aは計算した後の値(a-1)です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazona

元記事を表示

javascript15_一元演算

+:数値に影響を与えません。
ー:数値に影響を与えます。

文字列をNumberに変換する楽な方法:
値の前に+を書くだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/a7d02476-55ce-61b3-8e8c-665ee19b0bd1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/4a1eecff-b4d2-d176-1977-128f268ff270.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/57351654-a965-a282-0083-9ff315db8a60.png)

元記事を表示

javascript14_演算

演算する時に、元の変数の値を変更しません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/5268293d-ce03-d693-2ec5-e2438da36a4e.png)

数値じゃない値を計算する時に、該当数値をNumに変換します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/d8e8557e-c416-4459-247f-046722970bef.png)
下記の書き方の方が頻繁的に使われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/c12fa6bb-7fd3-88a9-0558-86ed1bd14b11.png)

注意して欲しいケース:
result = 1 + 2 + “3”;
console.log(“result:”

元記事を表示

javascript13_boolean値に変換

1 数値をboolean型に変換する場合、0とNan以外に、他の結果は全てTrueになります。
2 文字列からboolean型に変換する場合、空白以外に、他の結果は全てTrueになります。
3 nullとundefinedはfalseに変換されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/3d35c66d-3159-cb08-e2c9-fe1bcf606954.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/36305650-64b2-52de-1ed9-105fd9c2abad.png)

元記事を表示

javascript12_数値の進数について

jsの中に、16進数を表したい時に、0xから始まる必要があります。

8進数は0から始めます。

2進数は0bから始めます。適用できないブラウザがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/9a5d06d0-48d3-e7de-caa0-7a43b69ceda4.png)

上記の例を解決する方法としては、parseInt()のなかに、二番目の引数で進数を指定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/006406e4-3f34-5fdb-55fa-f4394455ff5d.png)

元記事を表示

Javascript11_データ型の型変換number

値を数字に変換したい場合、下記の方法があります。

方法1: Number()関数を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/a36bd2e4-4180-f765-a6d4-3a6bea970b99.png)

注意点:
数字の文字列に関しては、直接数値に変換できます。
数字じゃない内容が含まれた場合は、NaNに変換されます。
値は空きである場合は、0に変換されます。
Booleanが数字に変換する場合、
True : 1
false : 0

nullは数字変換する場合、結果は0です。
undefinedは数字に変換する場合、結果はNanです。

Number関数の限界:
数値しか変換できない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/6240dd74-c0ae-9682-c37c-efba690a7e13.png)
![image

元記事を表示

javascript10_データの型変換String

方法1:toString()を使用します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/1fe05d22-ba3b-2dc0-b393-86b4bd5b6c38.png)

変数の型を変換したい場合は、toString()関数を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/007e4c12-aac8-037b-e126-d7476347d46e.png)

注意:
nullとundefinedはtoString()に適用しない

方法2:String()関数を使用します。
nullとundefinedに対しては、直接文字列に変換します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/9238a0d6-8cd6-35ac-9b

元記事を表示

javascript09 Nullとundefined

Nullの値は1つしかない、nullです。
nullとは存在しない意味です。

var a = null;
console.log(typeof a);
返された結果はObject.

undefinedの値はundefinedしかない。
変数を宣言したけど、値を代入してない場合、値はundefinedとなります。

var b = undefined;
console.log(typeof b);

元記事を表示

Javascript46_object指向

オブジェクト:
複合のデータ型、オブジェクトの中に複数の変数を入れることができます。

オブジェクトの分類:
1 既存の対象
ESの中に定義された対象
例:Math String Number Boolean Function Object

2 運用環境に提供された対象
例:BOM DOM

3 ユーザ定義対象
自分で作る対象。

元記事を表示

Javascript47_オブジェクトの基本操作

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/e48f30c4-a4ab-85ff-8bbf-2c8058c20319.png)

元記事を表示

javascript48_属性名と属性値

属性名について関数みたいに決まりがあるわけではなく、どんな名前でも使える。
obj.var = “hello”; → 正しい属性名

特殊な属性名を使用したい場合は、.書くのではなく、
下記のように書かなければいけません。
オブジェクト[“属性名”] = 属性値;

obj[“123”] = 456;
console.log([“123”]);

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/a567243c-de6f-0e44-dd12-31a1f4ffc418.png)

属性値はどんなデータ型でもいけます。オブジェクトでもOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/0a7cb639-cd1f-0f7f-9687-79a8e7bd89bd.png)

属性がオブジェクトないにあるかどうを確認するには、inを使います。
![imag

元記事を表示

javascript49_基本データ型と引用データ型の違い

基本データ型
String Number Boolean Null undefined
例:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/d7b332be-641b-affd-7b93-9fc3fbab52a5.png)

引用データ型
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/8298dd43-fbac-c12f-1be8-13e38a6573ff.png)
obj.nameとobj1.nameが同時変わることが確認できました。

JSの中の変数は全部栈内存の中に保存される。
基本データ型の値は全部栈内存の中で保存する。
変数間の値と値は独立している。他の値に影響しません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/23b6b98d

元記事を表示

javascript50_オブジェクト変数

下記の書き方もオブジェクトを生成することができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/67d2ee56-88c3-704a-1f85-84321e60eb91.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/b89bf95c-3b50-5d3a-4e40-a8fe0e4ac19e.png)

また、{}のなかに直接対象オブジェクトの属性を指定することができる。
属性と値の間に:を書く、属性と属性の間に,を入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/5cc39b37-dc5c-2943-b565-0b25a3400d11.png)

元記事を表示

Javascript08_Boolean

true と falseの2種類しかない

ture: 条件式が成立した場合
false: 条件式が成立しなかった場合

元記事を表示

OTHERカテゴリの最新記事