JavaScript関連のことを調べてみた2021年01月10日

[Javascript]inputのチェックボックスでチェックを一つしかつけさせない

HTMLのinputで指定できるチェックボックス（checkbox）。

一つしか選択させたくない場合はまあラジオボタンにしておけという話かもしれないが、どうしてもチェックボックスでやりたい場合の方法をJQuery＆JS両方で紹介。

“`oncheck.js
//Jqueryの場合
$(“.inputClass”).on(“click”, function(){
$(‘.inputClass’).prop(‘checked’, false);
$(this).prop(‘checked’, true);
});

//JSの場合
const inputClass = document.getElementsByClassName(“inputclass”);
for(let i=0;i

JSで十字キーと他のキーを同時押しさせたい

# はじめに
Webゲームを作っている時に、十字キーを二つ以上押しながら他のキーを押すと一部効かなかったので調べてみました。
# 調べ方
ただ単純に十字キーをいずれか二つ押しながら他のキーをポチポチする。
# 結果
以下が結果です。
これより、5つのパターンに分けられます。

– どの時でも押せる
– C,D,F,H,J,L,O,P,W
– 「上」が含まれていると効かない
– E,I,Q,T,Y
– 「下」が含まれていると効かない
– A,B,G,S
– 「左」が含まれていると効かない
– M,N,V,X,Z
– 「右」が含まれていると効かない
– K,R,U

なので、十字キーを押しながら押せるキーは限られてしまいます。
これには何か規則性があるのではないかと思い、適当にキーの色を分けてみました。
![

TypeScriptを学んだ(2) ~モジュール編~

前編は、[TypeScriptを学んだ(1) ~型、クラス編~](https://qiita.com/kudojp/items/e89a42821f599fe8cf8e)

## 内部モジュール

コードを部品化してわかりやすく整理したりだとか、変数名とかクラス名の衝突を避けたりするために使用する。

“`tsx

module UserModule { // モジュール定義
export var name = “John”; // モジュールの外部からアクセスするにはexportを使う
export module AddressModule {
export var zip = “111-111”;
}
}

// dotアクセス
console.log(UserModule.AddressModule.zip);

// もしくはimportを使い、、
import addr = UserModule.AddressModule
console.log(addr.zip);

“`

また、複数のファイルに別れ

【JavaScript】現在時刻をリアルタイムで表示し続ける方法

#プログラミング勉強日記
2021年1月9日
以前、[こちらの記事](https://qiita.com/mzmz__02/items/e316d3962e7d3ecfebf8)でJavaScriptでの日付と時刻を取得する方法をまとめた。今回は、現在時刻をリアルタイムで表示し続ける方法を紹介する。

#方法
1. 現在時刻を格納するDateオブジェクトを作成する
2. 作成したDateオブジェクトから時間・分数・秒数を取り出す
3. 時計として表示する文字列を作成する
4. 文字列を時間に書きかえる
5. 1秒ごとに特定の処理を実行する

##1. 現在時刻を格納するDateオブジェクトを作成する方法
　以下のように`new Date()`で現在の日付・時刻する。

“`js
var nowDate = new Date();
console.log(nowDate);
“`

“`:コンソール結果
Sun Sep 27 2020 09:22:20 GMT+0900 (日本標準時)
“`

##2. 作成したDateオブジェクトから時間・分数・秒数を取り出す方法

“`j

TypeScriptを学んだ(1) ~型、クラス編~

## TypeScriptで用意されている型

– number
– string
– boolean
– any

“`ts

var i: number;
var i: number = 10;
var i = 10 // 暗黙の型推論

var x; // any型になる

var nums: number[]; // number型の値の配列
“`

– 列挙型

“`ts

enum Signal {
Red, // 0
Blue = 3,
Yellow, // 4
}

Signal.Blue // 3
Signal[‘Blue’] // 3
Signal[3] // ‘Blue’

// なお、複数の同名の列挙型を宣言した場合にはそれらがマージされる。
// ただし、最初のメンバを省略できるのはどちらかだけである。
“`

## 関数

“`ts

function add(a: number, b?: number): number { // bはオプション
if (b){
return a + b;

JavaScript (ES6) 基礎編　繰り返し処理とは？

こちらではJavaScript学習の備忘録となります。
プログラミング初心者や他の言語にも興味、関心をお持ちの方の参考になれば幸いです。
* * *
###繰り返し処理とは？
よくある例だと

『1から100までの数字を出力する』

場合などに用いる**繰り返し処理**のことです。
繰り返し処理を行うには「**While文**」と「**for文**」がある。

■**While文**

while文は下記のように、「条件式がtrueの間、{ }内の処理を繰り返す」ことができます。 {}の後にセミコロンは不要です。

“`javascript:script.js
while (条件式) {
処理
}
“`
上記『1から100まで数字を出力する』例で、while文を用いると下記のようになる。
まず条件式の判定が行われ、trueの時のみ{}の中の処理が1度実行される。
その後、再び条件式がtrueかどうかチェックされ、trueであれば処理が実行される。
条件式がfalseになるまで繰り返し処理が続く。

“`javascript:script.js
let number = 1;

【初心者でもわかる】hover時のCSSをhtmlのタグに直接書く方法

# どうも7noteです。hover時にだけCSSを当てる方法。

CSSは.cssファイルに書くか、`

`の中に書くのが一般的ですが、HTMLのタグの中に書くことも可能です。

“`index.html

てすとてすと

“`

しかし、この方法には欠点があり:hoverなどの疑似セレクタがついた時のCSSを指定することができません。
（※ほかにも管理がしにくいなどの欠点もあります。）

ですが、onMouseOutとonMouseOverの属性を使うことで:hoverと同じようにCSSを反映することができます！

## hover時のCSSをhtmlのタグに直接書く方法

“`index.html

【メモ】JavaScriptのreplaceメソッドと正規表現について

忘れてしまいそうなので、メモっときます。

##replaceメソッドの使い方
`replace(‘検索文字’,’置換した後の文字’)`という感じ。

そして、`$1`とか`$2`とかは、検索文字の`()`の中身のこと。

“`
var str = ‘今日は2019年6月16日、明日は2019年6月17日です。’;
var result1 = str.replace( /(\d+)年(\d+)月(\d+)日/g , “$1/$2/$3” );

// 結果
今日は2019/6/16、明日は2019/6/17です。
“`

みたいな感じになる。

##正規表現

今回謎だったのが、下記の正規表現。

“`
replace(/[\|｜](.+?)《(.+?)》/g, ‘$1$2‘)
“`
無知すぎて、この程度もわかりませんでした・・・

でも今らなわかる！！！

・`/パターン/フラグ`という正規表現の記述方法。
・`[\|｜]` は`|`か`｜`に一致するものという意味。
・`\（バックスラッシュ）`はエスケープするためのもの。
・`[

[サクラエディタ][マクロ][js]プログラム対象行数取得マクロ

#早速ですが
VB.NET開発で、コーディング行数をコメントに記述する必要があり、毎回行数を数えるのが面倒のため、容易に取得できるマクロを作成

##ざっくりな手順
①VisualStudioからプログラムをコピー
②サクラエディタに貼り付け
③マクロ実行

“`javascript:PGLineCnt.js
/*
* タイトル：プログラム対象行数取得マクロ(サクラエディタマクロ用)
* 説明 ：プログラムのコメント行、空白行を除き、
* プログラム対象行数をクリップボードにコピーする。
* 作成者 ：●●●●
* 設定手順：①[メニュー]-[設定]-[共通設定]から[マクロ]タブを選択
* ②空き番号行を選択、名前に任意の名前を入力し、Fileに当マクロを選択後、
* 設定ボタンを押下
* ③[キー割当]タブを選択
* ④種別のリストから[外部マクロ]を選択、機能欄から②で登録したマクロを選択し、
* 任意のキーを割付

ジョーカーゲーム作成

定義
・ジョーカーを引いたら負け
・ランダム関数でカードを出力
・ユーザー1と2が交互にトランプを引いていく
・3枚まではジョーカーが出ない
・出たカードを真ん中に縦で並べていく
・リセットボタンも作成

使うものは連想配列(オブジェクト)、dom

補足
今回はあまりリッチなものにしない
順番に押せばゲームが出来る
ランダン関数で同じ番号が出たら関数内で再度引き直す
どっちがカードを出したかわかるようにして別途で順番を表記しない
カードをひっくり返した毎にそのカードの数字を配列に追加して、その配列と照らし合わせて重複を確認
重複したら自動的に引き直す

“`html