出産前後の痔にはご注意!

業務系システムでjavascriptを使うとしたらどんな
処理が一般的でしょうか数多くの例をあげて頂けたら
幸いです。
私が思いつくのは入力チェック位しか思いつきません
どんな処理にjavascriptはつかわれているのでしょうか

A 回答 (2件)

    • good
    • 0

要素の動的追加・削除


アコーディオン
タブ
日付入力(DateTimePicker)
ポップアップ表示
非同期通信(Ajax)
リアクティブプログラミング
シングルページアプリケーション

いくら業務アプリと言えど、思想がそれぞれ異なるはずですから、
考えればいくらでも出てくると思います。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Q【JavaScript】このコードの意味を教えて下さい

お世話になります。

以下のコードはアイコンをクリックしたら
画像を切り替えていくスライドショーのサンプルコードです。

だいたいの意味はわかります。
ですが
「current+=num; //? 
ここの意味がわかりません。

これって「current=num+current;」の意味ですが、
必要ないと思うのですが、、、実際に消去すると動作しません。

クリックしたアイコンがnextなら「1」、
prevなら「-1」されるので配列型のデータの画像の番号が
1個づつスライドされるのはわかります。

ですが「current=num+current;」する理由って何なのでしょうか?
すいませんが、詳しい方、説明の上手な方、
この部分がどういう役割をしているのか教えて下さい。

サンプルコードは以下の通りです。
※HTMLは上の3行だけです。
※JavaScriptはHTMLの範囲内に書いています。

<img src="images/image1.jpg" id="BigImg">
<img src="images/prev.png" id="preId">
<img src="images/next.png" id="nexId">

<script>
var images=['images/image1.jpg', 'images/image2.jpg',
'images/image3.jpg', 'images/image4.jpg', 'images/image5.jpg', ];

var current=0;

var changeImage=function(num){
if(current+num>=0 && current+num<images.length){
current+=num; //?
document.getElementById('BigImg').src=images[current];
}
};

document.getElementById('preId').onclick=function(){
changeImage(-1);
};
document.getElementById('nexId').onclick=function(){
changeImage(1);
};
</script>

お世話になります。

以下のコードはアイコンをクリックしたら
画像を切り替えていくスライドショーのサンプルコードです。

だいたいの意味はわかります。
ですが
「current+=num; //? 
ここの意味がわかりません。

これって「current=num+current;」の意味ですが、
必要ないと思うのですが、、、実際に消去すると動作しません。

クリックしたアイコンがnextなら「1」、
prevなら「-1」されるので配列型のデータの画像の番号が
1個づつスライドされるのはわかります。

ですが「current=nu...続きを読む

Aベストアンサー

なぜ必要無いと思ったのですか?
プログラムは根拠があって作られています。
加えるにしろ、消すにしろ、そこには「根拠」が必要です。
「なんとなく」でやっていいものではありません。

実際に、その処理の一番肝心な部分です。
それを必要無いと感じてしまったのは、あなたの理解が不十分だった、ということです。
あなたの考えを明確にすることは、間違っているところを明確にすることになり、正しく理解するために役立ちます。



スライドショー等を実現する場合、「現在の状態」を基準に「となり」を求めるのが常套手段です。
このプログラムでは、配列の添字を「現在の状態」として変数currentに記憶しています。
「となり」はcurrentを +1 または -1 することで求められます。
そして、その「となり」が次の「現在の状態」になります。

単に current + num と書いただけでは、current は前のままです。
結果をcurrent に代入しなおす必要があります。




あと、細かいことですが
> current=num+current

これは
current=current+(num)
と考えた方がいいです。
このような複合代入演算子には、他に
-= *= /=
等もあります。

足し算は num+current = current+num なのでいいのですが
引き算は num-current ≠ current-num です(一部の例外の除き)
current-=num が current= num-current なのか current= current-num なのか。間違えて覚えると大変です。

また
a *=b+1

a = a * b +1
ではなく
a = a * (b+1)
になります。

なぜ必要無いと思ったのですか?
プログラムは根拠があって作られています。
加えるにしろ、消すにしろ、そこには「根拠」が必要です。
「なんとなく」でやっていいものではありません。

実際に、その処理の一番肝心な部分です。
それを必要無いと感じてしまったのは、あなたの理解が不十分だった、ということです。
あなたの考えを明確にすることは、間違っているところを明確にすることになり、正しく理解するために役立ちます。



スライドショー等を実現する場合、「現在の状態」を基準に「となり」を求める...続きを読む

Qスーパーハッカーやホワイトハッカーが未だにプログラムをキーボードを使ってアナログな入力を10年前と変

スーパーハッカーやホワイトハッカーが未だにプログラムをキーボードを使ってアナログな入力を10年前と変わらずに未だにガチガチキーパンチャーしてるのって一般人から見たら超絶ダサいらしいですよ。

マツコデラックスがスーパーハッカーがプログラムをキーボードで打っていたのを見て「まだキーボードで打ってるんだ。人工知能や音声を文字化出来るようになってるのに10年前と変わらずキーボードで打ってるの?!」と言っていましたが、本当にそうだなと思いました。

未だにキーボードでプログラミングしてるって古くさいというか自動化、自動化と言ってる割にプログラマーが1番アナログだったりして。

Aベストアンサー

それは普通の文章入力しか想像できない人の発想ですね。

プログラミング言語では記号を多用しますが、これをいちいちダブルコーテーションだのアットマークだの言うのは手間だし、実は記号じゃなくてダブルコーテーションは”じゃなくそのままダブルコーテーションっていう文字列にしたかったんだけど…みたいな区別に困ることもあります。その辺をきれいに解決する手段が今のところないってこと、また「キーボード入力の方が話すよりも速くてしかも正確に入力できる」と言う事実があること、またいちいち口に出すと言うことは意外に労力を要すること、といった事情から音声認識でどうにかしようという空気にならないのでしょう。

Q改行をしたいが、<br>となって出来ない

https://codepen.io/LandonSchropp/pen/xLtif

こちらのscriptの
words = [ "the", "of", "and", …];
に日本語を入れて、なおかつ途中で改行をしたいと思っています。

例 words = [ "ああ\nあああ", "いいいい\nいいい", "うううう\nううう", …];

合間に\nを入れて、replaceで元のコード

$word.text(word);

$word.text(word.replace(/\n/g,"\<br /\>"));

と書いたのですが、ソースでは<br>が

&lt;br&gt;

↓ソース
<h1 style="background-color: hsl(288, 100%, 50%);"><svg xmlns="http://www.w3.org/2000/svg" role="img"><title class="title">Random</title><text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="50%">いいいい&lt;br /&gt;いいい</text><text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="50%">いいいい&lt;br /&gt;いいい</text></svg></h1>

と表示され、ブラウザで見ると<br>と表示され、改行はされぬままです。

色々と自分で検索して調べてはいるのですが、知識不足で分かりません。
お分かりになる方、助けて頂けませんでしょうか

https://codepen.io/LandonSchropp/pen/xLtif

こちらのscriptの
words = [ "the", "of", "and", …];
に日本語を入れて、なおかつ途中で改行をしたいと思っています。

例 words = [ "ああ\nあああ", "いいいい\nいいい", "うううう\nううう", …];

合間に\nを入れて、replaceで元のコード

$word.text(word);

$word.text(word.replace(/\n/g,"\<br /\>"));

と書いたのですが、ソースでは<br>が

&lt;br&gt;

↓ソース
<h1 style="background-color: hsl(288, 100%, 50%);"><svg xmlns="...続きを読む

Aベストアンサー

No3です。

少し調べてみたら、もう少し要領の良い書き方ができそうなので・・・
(同じtextタグを2度書かなくても良くなります)
・defタグ内に雛形を定義しておくことで、これを2回参照します。
・改行はtspanで実現します。行送りはdy属性で変更可能
・文字サイズはfont-sizeで指定可能
・・・etcです

(位置の基準は左上基準にしてあります)

<svg width="500" height="500" viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<text id="word1" font-size="40px" fill="white" x="0" y="0" >
<tspan x=0 dy="0">ああああああ</tspan>
<tspan x=0 dy="40">いいいいいいい</tspan>
<tspan x=0 dy="40">うううううう</tspan>
</text>
</defs>

<use x="100" y="100" href="#word1" stroke="#222" stroke-width="1.5%" />
<use x="100" y="100" href="#word1" stroke="white" />
</svg>

No3です。

少し調べてみたら、もう少し要領の良い書き方ができそうなので・・・
(同じtextタグを2度書かなくても良くなります)
・defタグ内に雛形を定義しておくことで、これを2回参照します。
・改行はtspanで実現します。行送りはdy属性で変更可能
・文字サイズはfont-sizeで指定可能
・・・etcです

(位置の基準は左上基準にしてあります)

<svg width="500" height="500" viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<text id="wor...続きを読む

Qhtml 文字化け

html と php で現在勉強していますが
画像のように文字化けしてしまいます。

何が原因なのでしょうか?
教えていただけると助かります。

Aベストアンサー

HTMLの文字コードをUTF-16にしても変わりませんか?

Q【JavaScript】querySelectorの使い方を教えて下さい

お世話になります。
「querySelector」の使い方について教えて下さい。

ガイドブックのサンプルコードで気が付いたのですが
以下のコードでは1番と2番では出力結果が違います。

1番はわかります。
「querySelector」はCSSのタイプセレクタの値を取得するメソッドなので、
1番の出力結果は理解できます。

ですが、2番の方は意味がわかりません。

「console.log(lang3.textContent);」にしたときの結果が、
「ja」になるのならまだ理解できます。

ですが「.textContent」を追加したわけでもないのに
どうして右側に「.lang」を追加しただけで
2番の出力結果は「ja」になるのでしょうか?

そう思うので3番で試してみたところ
コンソールへの出力は無茶苦茶なものになり
余計にわからなくなりました。

1番は問題ありません。

ですが、なぜ2番と3番はこんな出力結果になってしまうのでしょうか?

お手数ですが、JavaScriptに詳しい方、説明の上手な方、
「querySelector」メソッドの使い方、考え方、プロパティ等の扱い方のコツ、etc.を教えて下さい。

追記
※込み入った説明でなく、ちょっとしたコツのような感じでOKです。
※可能でしたらサンプルのコードと一緒に説明して頂ければありがたいです。
※コンソールへの出力結果は画像の通りです。

↓サンプルのコードはこちらです。

<!doctype html>
<html lang="ja">

</html>

<script>
//1
var lang=document.querySelector('html');
console.log(lang);

//2
var lang2=document.querySelector('html').lang;
console.log(lang2);

//3
var lang3=document.querySelector('html');
console.log(lang3.textContent);
</script>

お世話になります。
「querySelector」の使い方について教えて下さい。

ガイドブックのサンプルコードで気が付いたのですが
以下のコードでは1番と2番では出力結果が違います。

1番はわかります。
「querySelector」はCSSのタイプセレクタの値を取得するメソッドなので、
1番の出力結果は理解できます。

ですが、2番の方は意味がわかりません。

「console.log(lang3.textContent);」にしたときの結果が、
「ja」になるのならまだ理解できます。

ですが「.textContent」を追加したわけでもない...続きを読む

Aベストアンサー

langは属性であってタグ内のテキストではありませんので正しいです。
2は、html要素内のlang属性を得ようとした結果なので何も不思議ではありません。

3は、html要素内の文字列と認識される内容を全て得ます。1のコンソール結果のhtml要素内を展開してみてください。それと同じ結果が3として出力されているはずです。
展開してみてdom構造を見ると分かると思いますが、script要素がhtml要素の外側で記述されていること自体が誤りです。
ただしこの場合、JavaScriptが読み込まれて即実行されるようになっているため、script要素をhead要素内などに設置した時、body要素に含まれるテキストは出力されません。

QJavaScriptでタブを閉じたい

お世話になっております。
Google Chrome の拡張機能で、右クリックメニューを作り、
メニューから機能を選択してメールの雛形を作成しています。

今、画面にタブA、B、Cがありまして。タブBを閉じたいのですが、
どうコードを書けばよいでしょうか。

調べたところおよそ以下の様に
onclick="window.open('','_self');
window.close();

とやるとよいらしく、実際にやってみると、その動きは
A、B、Cの次に4番目のDが新たに作成され、Dが閉じました。
色々調べたのですが、GetTabや GetWindowなどの命令が無いようで、
BをオープンしてクローズしようとしてもDを開いて閉じるだけです。
現在表示している2番目のBを取得し、
それを閉じる方法がわかりませんでした。

マニュフェスト.json バックグラウンド.js コンテンツ.js に
どう記述すればよいでしょうか。

あるいは別アプリを作成して
SendKeys でコントロールWを送るしかないのでしょうか。

アドバイスの程、どうぞよろしくお願いします。

お世話になっております。
Google Chrome の拡張機能で、右クリックメニューを作り、
メニューから機能を選択してメールの雛形を作成しています。

今、画面にタブA、B、Cがありまして。タブBを閉じたいのですが、
どうコードを書けばよいでしょうか。

調べたところおよそ以下の様に
onclick="window.open('','_self');
window.close();

とやるとよいらしく、実際にやってみると、その動きは
A、B、Cの次に4番目のDが新たに作成され、Dが閉じました。
色々調べたのですが、GetTabや...続きを読む

Aベストアンサー

ブラウザを開閉する処理は制限が多く
姑息な手段で無理やりやってもそれはバグの可能性が高く
いずれは使えなくなると思います
親から開いた子以外のウィンドウを閉じることはできないものと考えたほうがよいでしょう

QCSSで「!important;」よりも優先にすることはできないですか?

CSSで「!important;」よりも優先にすることはできないですか?

Aベストアンサー

div.article-body-outer div.article-body img.classname {
height: 240px !important;
margin: 10px !important;
}

Q初歩的な質問かもしれませんが、答えていただけると嬉しいです スライダーの横に矢印をつけたり、下に点々

初歩的な質問かもしれませんが、答えていただけると嬉しいです

スライダーの横に矢印をつけたり、下に点々をつけたりしたいのですが、どうすれば良いでしょうか?

Aベストアンサー

こんにちは

バージョンによるのかも知れませんが、最新版ではpagerもcontrolsもデフォルトがtrueなので何もする必要は無いみたい。
https://bxslider.com/options/

>しなくてはならないことはありますか?
HTML内の対象要素、CSS、scriptなどを正しくセッティングする必要があります。

※ もしも、オプション指定で文字通りに
 > controls:true;
って記述したのなら、そこでエラーになっているかも知れません。

Qjavascript の配列操作に関して

先頭の要素を追加したり削除するのは、shiftやunshiftで対義語になっているので納得したのですが、末尾の操作に関して、popとpushなのは何故ですか?

それだったらpullとpushのが良かったのではないですか?
成り立ちについて詳しい方がいましたら、教えてください。こういうの気にするタイプなのです

Aベストアンサー

だいたいこの辺かなと

http://blog.codic.jp/2015/02/10/data-structure-and-naming/

pop/pushはスタックするときの用語
shift/unshiftはビット処理の用語
から流用したからだと

QformのoptionでEnter(Return)する方法はありますか?

こんにちは。
ローカルのWebサーバーで通販サイトで商品の検索結果を取得する為に下記の様なhtmlを作成しています。

-----ここから-----
<form action="./result.php" method="post">
<p style="text-align:left;">検索語句:<input type="text" name="words" size="80" autofocus></p>
<p>リスト
<select name="engine" size="10" multiple>
<option selected>AmazonJP</option>
<option>楽天</option>
<option>ヨドバシカメラ</option>
<option>Yahooショッピング</option>
<option>ASKUL(アスクル)</option>
</select>
</p>
<input type="submit" value="送信"><input type="reset" value="リセット">
-----ここまで-----

htmlの文法としてはlabelが無かったり、option valueじゃなかったりで間違っていたりするかもしれませんが、
一応、送信ボタンを押すと実行できます。

ここで、optionで検索する通販サイトをセレクト(反転)させたとき、つまり、フォーカスが当たった時にEnter(Return)を受け付けて、そうすることによってresult.phpにPOSTしたいと考えております。

この様な方法はありますでしょうか?

以上、お手数をお掛け致しますが、よろしくお願いいたします。

こんにちは。
ローカルのWebサーバーで通販サイトで商品の検索結果を取得する為に下記の様なhtmlを作成しています。

-----ここから-----
<form action="./result.php" method="post">
<p style="text-align:left;">検索語句:<input type="text" name="words" size="80" autofocus></p>
<p>リスト
<select name="engine" size="10" multiple>
<option selected>AmazonJP</option>
<option>楽天</option>
<option>ヨドバシカメラ</option>
<option>Yahooショッピング</option>
<option>ASKUL(アスクル...続きを読む

Aベストアンサー

<script>
document.addEventListener('DOMContentLoaded',function(ev){
_ document.forms['対象フォーム要素を特定する名前'].addEventListener('keydown',function(ke){
_ _ if (ke.target.tagName != 'SELECT') return;
_ _ var enter = (ke.key == 'Enter' || ke.keyCode == 13);
_ _ var modify = !(ke.metaKey || ke.altKey || ke.shiftKey || ke.ctrlKey);
_ _ if (enter && modify) ke.currentTarget.submit();
_ });
});
</script>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング