+ JavaScript の質問用スレッド vol.124 +

2021/11/10(水) 15:24:24.80

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) ライブラリ関連の質問は禁止です。関連スレにあるライブラリ質問スレで質問して下さい。
(10) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured

2021/12/15(水) 20:16:03.92

( ^)o(^ )b

2021/12/15(水) 20:34:33.03

>>173
>>174,175
ありがとうございます
なるほど、*も+も?も単体で使うと最長一致になるけど
*?とか+?みたいに組み合わせて使うと最短一致になるんですね、ややこしい…

2021/12/16(木) 20:22:00.71

>>177
その通りだが、一文字ならバックトラックが発生しない最長一致がいいと思う >>175

2021/12/22(水) 17:33:35.08

【環境】Windows 7 64bit, IE11
【何をしたのか】
$("form")で取得している内容が自分の考えと正しいかを確認したい
1. alert($("form")) → [object Object]と表示される
2. alert(JSON.stringify($("form"))) → IEが動作を停止しましたで強制終了
【エラーメッセージ】-
【期待する結果】
$("form")の中身が確認したいです
手段は選びません
console.log()は試していませんがshowModalDialogにて新規で開かれるウィンドウが描画されるまでに行われる処理のようで、コンソールを開く前に終わってしまうためalertで今は試しています
【サンプルコード】
$("form").attr("name");

2021/12/22(水) 17:43:33.97

>>179
自分は取得しているものが<form 〜>であると思っています
なのでHTMLが確認したいです

2021/12/22(水) 18:34:04.36

試してみたらfirefoxだと強制終了しないね
IEは消したからわからん

2021/12/22(水) 20:25:41.33

>>179
試してないconsole.logやconsole.dirでいいと思うが、まず試してみては？
コンソールはモーダルウインドウが開いてなくても関係ない

あなたがほしいのは$("form")[0]な気はするが

2021/12/22(水) 20:33:32.43

モーダルウインドウ上でコンソール出力しようとせず、モーダルウインドウを開くページから参照するとか、breakpointで止めるとか、モーダルウインドウを閉じるコードを一時的にコメントアウトするとか

モーダルウインドウを使わないのが一番だが
、Win7を使ってるならインターネットに接続してないのだろうし、相当特殊な環境だな

2021/12/22(水) 22:15:47.78

>>181-183
ありがとうございます

>>182,183
お察しの通り過去に作られたIE用のシステムをEdgeに対応する必要があり、
現時点では当時の開発環境(VS2012)でデバッグ実行しています
JavaScriptに関わるのが初めてでとにかく動かして覚えようとしているところです
$("form")[0]は明日試してみます

console.logなどを試していない（諦めた）理由は、
動作として、親ウィンドウからshowModalDialogで子ウィンドウを開く
→子でデータを選択する→親に選択したデータが入力されるという流れになっており、
親画面でF12のコンソールを開いておいても子が開かれるとモーダルにより親画面のコンソールも触れない
ので諦めたんですが、もしかしてピン止め外すと止まらないんですかね？
ピン止めした状態でしか動かしてなかったので明日試してみようとおもいます

>モーダルウインドウを開くページから参照するとか、
ウィンドウ間のやりとりがまだよくわからないのでその発想に至れませんでした

>breakpointで止めるとか、
showModalDialogで開いた後に処理される関数に貼ってみたんですが
張っていないshowModalDialogの行で止まって、関数の中をステップ実行できなかったんですよね…
関数の最初にdialogArgumentsを参照してifで分岐するんですが
showModalDialog以外で呼ばれるときはステップ実行できるのでそういうものなのかと諦めました

>モーダルウインドウを閉じるコードを一時的にコメントアウトするとか
その発想はなかったです
今後のデバッグに使ってみます

ひとまず、$("form")[0]とピン止めを試してみます

2021/12/27(月) 21:01:36.58

html5のcanvasについて質問です
drawImageでこの画像をcanvasに描写した後、画像の白い部分だけを赤くマスクしたいです
https://illust8.com/wp-content/uploads/2018/08/icon_mail_illust_924.png

ctx.globalCompositeOperation = 'destination-in';
や
c2.globalCompositeOperation = 'darken';
を使うとオシイのですが、どうしても黒い箇所が赤くそまってしまったり、明るい方が優先されてしまったりします
何か良い手はないでしょうか？

2021/12/28(火) 10:31:30.75

今後はclassが標準になるの？

2021/12/28(火) 10:36:46.52

JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。

そのため、以前できなかったことは、今でもできません。

クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。

class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。

使いたければ使えばいいんじゃない？と思います。

2021/12/28(火) 12:53:44.91

>>186-187
自問自答？
使いたくなければ使わなければいいと思うが、定期的にネガキャンするのは無駄なので、止めて欲しい
>>82,110

2021/12/28(火) 13:05:03.77

JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。
そのため、以前できなかったことは、今でもできません。
クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、
誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。
class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、
勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。

2021/12/28(火) 13:28:00.05

>>179
const form = $( 'form' )
console.log( form.length, form[ 0 ] )

HTML 内に、フォームが1つしかないなら、
form.length は1 で、form[ 0 ] でform 要素を取得できる

<form action="" id="form_1" name="form_1">
みたいに、id を付けた方が良いかも

そうすれば、これで取得できる
const form_1 = $( '#form_1' )

まあ、HTML, JavaScript, jQuery の質問は、
この板よりも、web制作管理板の方へ書き込んでください

向こうのスレが、本スレです

2021/12/28(火) 13:30:12.08

今は、class を使う

今さら、prototype を使う人は、いない

2021/12/28(火) 13:50:08.36

>>191
内部構造が分かりにくい。

2021/12/28(火) 14:58:53.60

ワイにとってはclassのほうが分かりやすいかな

2021/12/28(火) 16:37:46.66

すごい。
みんな頭いいんだな。

2021/12/28(火) 17:14:08.11

まあな

2021/12/28(火) 18:05:32.60

中がprototypeだとか別に関係ないだろう。外から見てclassとして振舞うならそれでいいわけだし。
classとしての振る舞いに何か問題があるならそこは注意すべきだが。

2021/12/28(火) 19:24:57.81

みなさんjavascript何年目？
オレは2年。

2021/12/31(金) 00:19:23.87

　昼食が3億!?AppleCEOや投資の神様とのランチ権オークションがすごい

スティーブ・ジョブズが亡くなった後にAppleのCEOになったのがティム・クック氏です。
そんな彼との1時間のランチ権が今年4月から5月にかけてCharitybuzzというオークションサイトに
出品され、$515,000（約5,150万円）で落札されました！
実はクックは過去にも同様の出品をしていて、今年の出品で4回目となります。

2000年からこれまでに計17回出品されているのが、「投資の神様」とも呼ばれるウォーレン・バフェット氏
とのランチミーティング権。2003年からは、世界最大級のオークションサイト「eBay」で毎年開催される
チャリティー・オークションのひとつとして出品されています。
今年6月に出品された際には、なんと$3,456,789(約3億4,568万円)で落札されました！　

2022/01/02(日) 11:53:11.76

fc2ブログを使用しているのですが、javascriptが動かない設定などあったりするのでしょうか？
<script type="text/javascript">alert("hoge");</script>

また、動かない原因をブラウザの検証から調べる事はできますか？

2022/01/02(日) 12:00:54.33

自己解決　すみませんす

2022/01/03(月) 10:30:02.94

文字数の制限をしたいのですが、htmlでoverflow hiddenするのとjsでカットするのはどちらがいいんでしょうか？
ブログのトップページなんですが、本文の１部を表示させておいて、続きを読むというリンクを設置したいなと。
<div id="text">１２３４５６７８９</div>

<script>
let text = document.getElementById("text");
let inner_text = text.innerHTML;
let text_length = inner_text.length;
let max_length = 5;
if(text_length > max_length){
console.log("5文字超えてます");
text.innerHTML = inner_text.substr(0,max_length);
}
</script>

これで動きはしましたけど

2022/01/04(火) 19:09:00.18

x=<span id="x">0</span>,y=<span id="y">0</span>

<p>　</p>
<div style="text-align:center">
<canvas id="canvas"></canvas>
</div>

<スクリプト>
var canvas_elm = document.getElementById("canvas");
var x_elm = document.getElementById("x");
var y_elm = document.getElementById("y");

var context = canvas_elm.getContext("2d");
canvas_elm.width = 600;
canvas_elm.height = 500;

context.fillStyle = "#0000ff";
context.fillRect(0,0,canvas_elm.width,canvas_elm.height);

canvas_elm.addEventListener(
"mousemove",
function(e){
x_elm.innerHTML = e.offsetX;
y_elm.innerHTML = e.offsetY;
}
);
</スクリプト>

canvas上でのマウスやタッチポインターの座標を表示したいんですけど、、PCではこれで座標が表示されるけど
mousemoveをtouchmoveにしてchromeでF12キーを押してスマホモードにしてタッチポインターを動かしたときxy座標がundefinedと表示されてしまいます。
スマホモードでもポインターの位置を表示できるようにするにはどうやればいいんですか？

2022/01/04(火) 19:25:07.68

スマホなど、色々なデバイスに対応させるのは、
React, Vue.js などのフレームワークを使うのでは？

それと、JavaScript の質問は、この板よりも、
web制作管理板の方へ書き込んでください！

この板のスレは、荒らしが出て、緊急避難用に立てたものだから

2022/01/04(火) 19:34:13.24

>>201
Ruby on Rails では、続きを読むのは、truncate(文字数)。
Railsがどういう実装をしているかまでは知らないけど

npm とか、Lodash とかに、そういう関数が無いのか？

「javascript 続きを読む」「css 続きを読む」で検索してみれば？

2022/01/04(火) 20:53:53.77

>>202
タッチイベントにはevent.offsetX, event.offsetYはありません
event.changedTouches[0].pageX等から計算してください

2022/01/04(火) 22:55:40.12

そうなんですか
ありがとうございます

2022/01/05(水) 10:08:51.69

>>206
どう致しまして。

2022/01/06(木) 12:37:03.20

質問１　element.addeventlistnerとdocument.addeventlistnerの違いは？
質問２　
function(elm){
elm.addeventlistner(
"click",
function(e){alert("クリック");}
);
}
のような関数がある場合document.addeventlistnerの場合はelementがないので個別に関数作らないとだめなのか？

2022/01/06(木) 12:51:53.90

外側・親に、イベントを付けて、親で、子のイベントをキャッチできる。
jQuery で書いた

<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>

// 外側・親に、イベントを付けて、親で、子のイベントをキャッチする

$( '#btn-wrap' ).on( 'click', function ( event ) {
console.log( $( event.target ).prop( 'value' ) )
} );

この板よりも、web制作管理板の方へ書き込んでください！
そちらの方が、本スレです

2022/01/06(木) 13:04:40.48

>>208
1. 対象要素が違うだけ。バブリングによって「あらゆる要素」のイベントをトラップしたい場合は後者を使うといい（一般的には普通は比較的近いコンテナ要素でトラップするもんだが...）
2. その関数なら共通でOK

>>209
本当に誘導したいなら、せめてリンクを貼りましょう

2022/01/06(木) 14:19:29.65

このスレで質問しても何の問題もありません
荒らしやアフィリエイト宣伝業者に騙されて誘導されないようにしてください

2022/01/06(木) 15:06:56.73

>>208
回答1
event.currentTargetが異なる

回答2
e.targetを確認すれば良い

2022/01/06(木) 15:09:56.94

>>209
Web制作板でも次スレが立たず、旧スレを再利用してる状態
本スレなど存在していない

本気で本スレに誘導したいなら、最新スレを探して次スレを立てて保守すべき
それぐらいの情熱がある人はもういないと思ってたが、あなたがそうしたいのなら止めはしない

**209** (ﾜｯﾁｮｲ 0f2c-4nvB [153.136.94.40]) · 2022/01/06(木) 16:09:40.84

この板のスレは元々、web制作管理板が荒らされた時に、緊急避難用に立てられたもの。
本スレは、向こうの方

この板は荒らしが多い

荒らしは短文で、必ず2回書き込む。
複数回書き込むことで、多くの人が書いているように見せる

それと、テンプレをしょっちゅう、自分が有利なように書き換える

Python のスレのテンプレとか、ひどい。
NGワードは何々とか、しょっちゅう書き換えている

まあ、ソースコードを書かない香具師は、
プログラマーじゃないから、相手にしない方がよい

2022/01/06(木) 21:02:16.03

window.onload = function(){
}
このfunctionって何の意味があるんですかね？

2022/01/06(木) 21:09:14.63

中の変数とかを外から見えなくしてるんじゃない？

2022/01/06(木) 21:28:50.56

>>215
変数 = function() { ... }
で関数式(無名関数)っていう形で定義できる

関数式についての説明はこの辺を参照
https://ja.javascript.info/function-expressions
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

で、window.onload = function() { ... }
っていう風に実装すると、少し特殊な動きになって
HTMLを完全に読み込んだタイミングで、関数の中身を実行するっていう動きになる
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

(他言語だとあんまり見ない書き方だから混乱するかもしれんけど）

2022/01/06(木) 21:52:51.91

https://www.youtube.com/channel/UC9UsyidyKO-s6K8sgWKmE2w

2022/01/07(金) 07:23:20.82

>>217
変数に関数を入れられるんですよね。
処理を直には入れられないから、関数で包むとイメージなんでしょうかね。

2022/01/07(金) 13:51:45.20

<div class="content">

<h2>header2</h2>

<h2>header2-2</h2>

<h2>header2-3</h2>

<h2>header2-4</h2>

</div>

<script>

let content = document.getElementsByClassName("content");

let all_element = content.querySelectorAll("h2");

console.log(all_element);

</script>

gebcnで取得したターゲットにqueryselectorは使えないんでしょうか？
idで取得したものなら可能なんですけども。

2022/01/07(金) 14:27:21.79

>>220
contentはgetElementsでHTMLCollectionをとってるので
content[0]とかにすればでるんじゃない？

2022/01/07(金) 18:28:49.81

>>221
返り値が違うんですね。
要素だけを取ってくるもんだと思っていました。

ありがとうございます。

2022/01/07(金) 18:31:00.59

エレメントしかいらないのならid使ったほうが良いみたいですね

2022/01/07(金) 18:36:46.10

document.querySelectorAll(".content > h2");
でよくね？

2022/01/07(金) 20:54:20.38

こういった場合クラスを使うんでしょうか？
cssではidは出来るだけ使わないということになっているらしいですが

2022/01/07(金) 21:09:58.61

できるだけ使わないというか詳細度に関わる
1ページ一回というユニークルールもcss使い回しに不向き

2022/01/08(土) 05:37:14.84

classnameでやってみますです

2022/01/08(土) 05:41:40.78

>>224
そうやって書けるんすね
html collectionの構造がよくわからんくて

2022/01/08(土) 05:48:14.75

>>224
いや、これだめでしたね
nodelistは帰ってきますけど、h2はとれてないです

2022/01/08(土) 05:55:36.78

全てconstでOK

2022/01/08(土) 07:52:36.25

Android10 F-51A
Chrome 93.0.4577.62

ブラウザ上での画像についての質問です。
画像自体は恐らく読み込めているようなのですが、全く映らないか、映っても一瞬で消えてしまいます。
エラーメッセージは出ません。
ファイルマネージャーというアプリから起動すると、正常に動作します。

考えられる原因、解決案は、例えば何があるでしょうか。
絶対パスというものなら出来るかと思ったのですが、自分のやり方が悪いのか、上手く行きませんでした。

2022/01/08(土) 09:00:28.06

>>229
最初の一個だけでいいなら
let all_element = document.querySelector(".content h2")

2022/01/08(土) 09:52:41.58

>>231
情報が少なすぎて詰めきれません。もう少し詳細な情報を提供できませんか？
（まず、JavaScriptはどのように使用していますか？）

2022/01/08(土) 10:15:27.19

>>233
スマホアプリの「QuickEdit」というテキストエディタで制作しています。

そういう意味じゃなかったらごめんなさい。

$Game_Image_Data = [];
$Game_Image_Data[0] = new Image(); $Game_Image_Data[0].src = "image/player.png";

これで「$Game_Image_Data[0].src」をアラートで出力すると、こうなります。

https://i.imgur.com/FzEkdyk.jpg

2022/01/08(土) 14:43:01.70

>>232
どうも。今回はindex使うことにしてみます。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:15:55.99

可能な限り絞り込み？　ました。

検証にご協力していただける方は、「imageフォルダに適当な「player.png」の画像を挿入して、実行してみてください。

ここまである程度余計な要素を取り除いたので、流石にこれならいけるんじゃないか？　と思ったのですが、自分の環境ではやはり駄目でした。

よろしくお願いいたします。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:19:01.00

<! html>
<html>
<head>
<meta ="utf-8"/>
<title>No_Name_Game</title>
</head>
<body>
<div id="Original_Game_Windows">
<canvas id="Game_Main_Window" width="640" height="480" style="background-color:#000000;"></canvas>
</div>
<style>
body { margin: 0; padding: 0; }
#Original_Game_Windows {
width: 640px;
height: 480px;
position: relative;
}
</style>
</body>

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:22:09.26

ごめんなさい、貼り付けるの無理でした。

2022/01/08(土) 17:26:57.57

>>236
サーバーに画像アップロードしないとだめですよ？

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:42:45.65

https://www.axfc.net/u/4048256

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:44:17.60

斧を使わせて貰いました。
よろしくお願いします。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 17:44:45.13

>>239
もちろん承知しています。
それで試しても駄目でした。

2022/01/08(土) 18:53:38.87

>>242
>>234のalertに表示されてるアドレスNot Foundだけど？

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 19:05:34.21

>>243
この文章って、そういう意味なのですか？
てっきり、アクセスは出来てるという意味だと勘違いしていました。
勉強不足で申し訳ありません。

ただ、今回は確実に、ちゃんと画像もフォルダ内にアップロードしたのですが、上手く行きませんでした。

https://i.imgur.com/7tRCd4P.jpg
https://i.imgur.com/AM1zYbJ.jpg
https://i.imgur.com/Egje64L.jpg

2022/01/08(土) 19:12:51.05

>>244
頭のpが大文字じゃないですか…

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 19:26:33.45

>>245
ありがとうございました。

私が馬鹿すぎました。
ネタでやってたんじゃないです。ガチです。お騒がせしました。本当にありがとうございました。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/08(土) 19:30:48.95

>>245
報告までに。
一応確認したところ、無事成功しました。
ありがとうございました。

2022/01/08(土) 20:24:29.61

ドンマイ

2022/01/08(土) 20:40:02.49

わりとやらかすミスだからしゃーない

2022/01/09(日) 01:12:15.51

>>229
const elems = document.querySelectorAll(".content > h2");
console.log( elems, elems[ 0 ] )

これで、4つのh2が、ちゃんと取れている

NodeList(4) [h2, h2, h2, h2]
NodeList <h2>header2</h2>

この板よりも、web制作管理板の方で聞いた方がよい。
向こうのスレが、本スレだから

2022/01/09(日) 01:27:51.26

そいつは、>1 のテンプレをしょっちゅう改変している、テンプレ改変荒らし。
基本的に、ソースコードを書かない香具師は荒らし

「Ruby, Rails, クソチョン」などを、NGワード登録推奨とか、
自分が有利なように、いつもテンプレを改変する

荒らしがスレ主として、居座っているので、
まともな人がスレ立てして、テンプレも元に戻した方がよい

荒らしは必ず、短文で2回以上書き込む。
必ず、複数人がいるように見せかける

2022/01/09(日) 02:26:51.89

>>251
統合失調症ですか？

2022/01/09(日) 10:47:02.34

>>250
「本スレはない」といっても伝わってなかったんだな >>213
Web制作板のスレは長らく次スレが立ってない
複数ある過去スレ(重複)を質問者が好き勝手に選んで再利用してるだけ
利用者も「重複だから本スレはこちら」などの誘導は誰もやってないし、どれが本スレとか誰も把握してない
繰り返すが、そもそもスレ消化時に次スレが立たなかったのでWeb制作板の本スレは消滅している
Web制作板のスレを追いかけてきたなら知ってるはずなんだがな

2022/01/09(日) 10:50:05.66

>>250
本気で誘導したいならリンクを貼りましょう

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/09(日) 11:32:48.03

昨日はお世話になりました。
二日連続になって申し訳ないのですが、質問させていただきます。

localStorageに保存しておける文字数って、あんまり多くないのでしょうか？

2000×400字ほどで、エラーが出てしまいます。
2000×300字だと問題なかったので、やり方じゃなく文字数の関係なのかと思ったのですが、どうなんでしょうか。

ちなみに、配列、オブジェクト型データです。

2022/01/09(日) 11:40:12.10

>>255
文字数というより、localStorageのデータ保存量の上限は基本5MBで
ブラウザや個人設定によって変わってくる
http://www.htmq.com/webstorage/

2022/01/09(日) 11:47:21.66

>>255
エラーとは？そこを詳しく説明して

2022/01/09(日) 11:51:03.02

変数や関数名の迷わない命名ルールってありますか？
変数は名詞、関数は動詞とは聞きますね。

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/09(日) 11:56:07.27

>>257
DOMEException { stack ～ってエラーです。

https://i.imgur.com/jlBZoNO.jpg

2022/01/09(日) 12:09:04.30

>>259
exceeded the quota(割当超過)で確定
サイズ減らすかindexedDB使うか

2022/01/09(日) 12:10:23.57

>>258
言語仕様としては、使用可能文字があるのみで命名規則に縛りはない
ビルトイン関数/プロパティの慣習的にクラスはUpperCamelCase、関数はlowerCamelCaseなので、守るとビルトインのコードと統一性が出来て良いだろう

後は採用しているコーディング規約を守れば良い
例えば、Google JavaScript Style Guide
https://google.github.io/styleguide/jsguide.html#naming
https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html#va

**231** (ｽﾌﾟｯｯ Sd03-Ylb5 [1.79.82.91]) · 2022/01/09(日) 12:16:18.69

>>260
回答ありがとうございます。
サイズ減らしたくないので、indexdDBと言うものを調べてみようと思います。

2022/01/09(日) 12:39:38.59

>>261
回答どうも。
規則というか命名ルールみたいなものが知りたいなと。

迷ってる時間が無駄になっているので。

2022/01/09(日) 12:45:08.85

すいません、アホな質問かもしれません。
マウスの右ボタンクリックで独自のサブメニューを表示したいと思います。
この場合は JavaScriput が必須で、CSSでは出来ないという理解で良いでしょうか。

2022/01/09(日) 14:49:13.23

仕事関係なのと、JavaScript は全くの初心者なんで聞き辛いのですが、
【環境】 Raspberry Pi OS Ver10.11
【期待する結果】文字列の後ろに 1バイトの値を付加したい。
シリアルで受信したメッセージから特定の値を抜き出して別のユニットにシリアルで送信
します。見様見真似とネットで調べながら、

set_Message: function (message) {
const _STX = '\x02'; // STX
const _ETX = '\x03'; // ETX
// 送信フレーム生成
var frame = _STX + message + _ETX;
// BCC 生成
var idx = 0;
var bcc = frame.charCodeAt(idx++);
do {
bcc ^= frame.charCodeAt(idx++);
} while (frame.charAt(idx) != '');
var buff = new ArrayBuffer(5);
var BCC = new DataView(buff);
BCC.setUint8(0, Number(bcc));
// 送信実行
var command = "echo -n " + frame + " > " + TTY_USB;
execsyncs(command);
command = "echo -n " + BCC.getUint8(0) + ',' + (bcc - 0) + ',' + Number(bcc) + ',' + parseInt(bcc, 10) + " > " + TTY_USB;
execsyncs(command);
return;
}

関数を作成、ブロックチェックコード BCC を計算させました。BCC を最後に付加したいのですが、
どれも値が 2バイトの文字列になってしまいます。"JavaScript" + "文字列を数値に変換" とかの
キーワードで検索しながら試行錯誤していますが、単純な数値にするヒントを頂ければ幸いです。
組み込みプログラマーなので、C と、C++ が少しわかります。

2022/01/09(日) 15:08:40.66

>>263
ruleは日本語で規則
あなたのいう命名ルールと俺のいう命名規則は同じ

2022/01/09(日) 15:18:07.99

名前なんて違反しなきゃ好きにつけりゃいい
俺は長くなっても意味がわかる命名派
vとかiとか一文字の変数や定数を好む宗教も強い

2022/01/09(日) 15:28:05.42

>>264
menu要素は非推奨になったし、JavaAcriptしかないのでは
少なくとCSSがブラウザ標準の動作を変更させることはないと思うし、右クリックを検知する方法はないと思う

コンテキストメニューの改変はアクセシビリティが低下する可能性が高いので、慎重に対応する必要はある
ゲームのような独自の操作方法を要求する場合は致し方ないが、多くの場合、ユーザはブラウザ標準の動作を期待する
独自メニューを提供することでブラウザ標準のメニューを使えなくなる事に不満を持つ
独自メニューとブラウザ標準のコンテキストメニューが両方出現するUIなら良いかもしれないが

2022/01/09(日) 15:29:28.78

>>268の誤字修正

×　JavaAcriptしかないのでは
○　JavaScriptしかないのでは

2022/01/09(日) 15:42:44.57

適当につけます(´・ω・`)

2022/01/09(日) 16:11:22.92

>>268
ありがとうございます！
Javascriptを使う必要がある件、了解です。

以前に .net で作ったWindowsアプリをWebアプリに移植しています。
Table上の特定のセルを右クリックしたら独自メニューが表示される仕様になります。
それ以外の場所ではブラウザ標準のコンテキストメニューが表示出来るようにしたいと思っています。

やり初めて間もないのですが、覚えることが多すぎて恐ろしい世界ですね。Webアプリとは。
Javascriptでやるにしても、JQueryかVueかReactか、どれでやるべきか・・・
バックエンドは Djangoですが、自分ひとりでやらないといけないのでかなりの修行になりそうです。
あと、AWSのデプロイとか Dockerとか・・・・初めてのことばかりで・・・

2022/01/09(日) 16:51:11.22

>>271
デスクトップアプリとWebアプリの一番の違いは実行環境が複数存在していることだろうな
クライアント環境を指定出来る社内向けWebアプリならブラウザを制限できるが、Webアプリを公開するなら、クロスブラウザが必須
デスクトップOSだけでもChrome,Fx,Edgeの対応が必要となる
(Operaもあるが、シェアが小さい)
モバイルOS版のブラウザも含めると更に大変になる
実装状況はcaniuseやMDNの互換表を見ると、ある程度は分かる
https://caniuse.com/

JavaScript標準の書き方を覚えてから、ライブラリ、フレームワークに手を付けるのが良いと思う
jQueryから入った人はDOMの知識が浅くて見当違いの質問をする事が多い
Vue,Reactは完全に別世界だが、DOMやECMAScriptの文法を理解してないと辛い
JavaScriptの基礎はおさえておいて損はない

最も、バックエンドが未着手なら、バックエンドの習得が先かと
JavaScriptもまとめて学習すると、おそらく混乱する

table要素の特定セルのコンテキストメニューの独自化なら大丈夫だと思う
Google スプレッドシートのWebアプリを想起した

2022/01/09(日) 17:29:38.29

>>272
アドバイスありがとうございます。
ほんとうに助かります！

幸い社内関係者が使用するだけの業務用アプリなのでブラウザを限定して開発することが出来ます。
JavaScriptの基本をおさえるほうが良い件、了解です。
入門本を買ってきて勉強してみます。

バックエンド（Django）はなんとか目処が立ちそうです。
いやぁ、本当にWebアプリの世界はすごい（難しくて複雑）と思いました。
おまけに技術の変化が激しそうだし・・・
がんばります！

2022/01/09(日) 18:35:56.14

>>273
クライアント環境を制限できるなら、デファクトスタンダードのGoogle Chromeがお勧め
次点でレンダリングエンジンが同じMS Edge

ブラウザシェアはIE1強時代と比べて、大分変わったな…
https://gs.statcounter.com/browser-market-share/desktop/japan/2021

確かに技術の進化はあるが、Web技術は後方互換性重視の設計思想なので、非推奨機能を使わなければ、大半の機能で半永続性が保証されている
HTML3.2は現代のブラウザでも動作するし、ECMAScript3は現役だ
つまり、古いバージョンから新しいバージョンに更新し続ける必要はない
ただし、これはWeb標準機能に限定した理屈でブラウザの独自拡張機能は別
その昔、IEのActiveX機能を使用した社内向けWebアプリはIEが終焉を迎えるとともに、他ブラウザへ移行するために改修を余儀なくされた
現在は昔と比べてブラウザの独自拡張機能が少ないが、ないわけでもない
Web標準機能を使っておけば、他ブラウザの対応も容易なので、注意すると良い

2022/01/09(日) 19:24:13.83

>>265
Uint8Arrayとかそういう話じゃなくて？