質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

専門書のコードが読み解けないので、アドバイスをお願いします。

taka_oct092018
taka_oct092018

総合スコア116

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0グッド

0クリップ

562閲覧

投稿2022/11/14 13:46

編集2022/11/14 13:49

$(documtnt.body)[this.checked ? 'on' : 'off'](this.value, handler)
上記のコードについてなのですが分かりにくいです。

1 「[this.checked ? 'on' : 'off']」について
this.checkeがtrueの場合は$(documtnt.body)['on'](this.value, handler)となる
this.checkeがfalseの場合は$(documtnt.body)['off'](this.value, handler)となる

2 「$(documtnt.body)['on']」は「$(documtnt.body).on」と同じということでしょうか。

「改訂新版jQuery本格入門_サンプルコード_P266より」 一部編集しています。
よろしくお願い致します。

jQuery

1$(function() { 2 3 // 一覧に表示させるプロパティ 4 const props = [ 5 'target', 6 'currentTarget', 7 'relatedTarget', 8 'fromElement', 9 'toElement' 10 ]; 11 12 // 要素の内容を文字列に変換 13 function toHtml(element) { 14 if (!element) { return `---`; } 15 16 if (element === window) { 17 return 'window'; 18 } else if (element === document) { 19 return 'document'; 20 } 21 22 let html; 23 24 if (element && element.tagName) { 25 html = '<${ element.tagName.toLowerCase() }'; 26 } 27 28 if (element.attributes) { 29 const attrs = element.attributes; 30 for (const index in attrs) { 31 const attr = attrs[index]; 32 if (!attr || attr.name === 'style' || !attr.value) { continue; } 33 html += ` ${ attr.name }="${ attr.value }"`; 34 } 35 } 36 37 if (html) { html += '>'; } 38 return html; 39 } 40 41 // イベントハンドラ(一覧表に要素を表示) 42 const handler = function(event) { 43 $.each(props, function(index, property) { 44 $(document.getElementById(property)).text(toHtml(event[property])); 45 }); 46 }; 47 48 // ラジオボタンの設定 49 const form = $('<form>', { 50 submit : false, 51 css : { 'margin' : '10px 0' } 52 }).appendTo(document.body); 53 54 $.each([ 'over', 'out', 'move', 'down', 'up' ], function(index, name) { 55 $('<input>', { 56 'name' : 'event', 57 'type' : 'radio', 58 'val' : `mouse${ name }`, 59 'change' : function() { // 実行するイベント処理の切り替え 60 $('input[type="radio"]').each(function() { 61 $(document.body)[this.checked ? 'on' : 'off'](this.value, handler); 62 }); 63 $('td').text(`---`); 64 } 65 }).appendTo(form); 66 form.append(`mouse${ name }`); 67 }); 68 69 $(document).ready(function() { 70 $('input[type="radio"]') 71 .first() 72 .prop('checked', true) 73 .triggerHandler('change'); 74 }); 75 76 // マウスカーソルを移動させる領域 77 const parent = $('<div>', { 78 'height' : 200, 79 'id' : 'parent', 80 'text' : 'parent', 81 'width' : 200, 82 'css' : { 83 'border' : '1px solid black', 84 'float' : 'left', 85 'padding' : 5, 86 'position' : 'relative' 87 } 88 }).appendTo(document.body); 89 90 const child = $('<div>', { 91 id : 'child', 92 text : 'child', 93 css : { 94 'border' : '1px dashed black', 95 'height' : 100, 96 'left' : 45, 97 'padding' : 5, 98 'position' : 'relative', 99 'top' : 30, 100 'width' : 100 101 } 102 }).appendTo(parent); 103 104 // プロパティの一覧表 105 const table = $('<table>', { 106 css : { 107 'borderCollapse' : 'collapse', 108 'float' : 'left', 109 'margin' : '10px 0', 110 'marginLeft' : '1em' 111 } 112 }).appendTo(document.body); 113 114 $.each(props, function(index, property) { 115 const tr = $('<tr>'); 116 $('<th>', { 117 'text' : property, 118 'css' : { 119 'padding' : 3, 120 'textAlign' : 'left' 121 } 122 }).appendTo(tr); 123 124 $('<td>', { 125 'id' : property, 126 'css' : { 127 'padding' : 3, 128 'whiteSpace' : 'nowrap' 129 } 130 }).appendTo(tr); 131 132 table.append(tr); 133 }); 134 135});

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8<body> 9 10<script src="js/jquery-3.6.0.min.js"></script> 11<script src="js/app.js"></script> 12</body> 13</html>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

2

ベストアンサー

1 「[this.checked ? 'on' : 'off']」について
this.checkeがtrueの場合は$(documtnt.body)['on'](this.value, handler)となる
this.checkeがfalseの場合は$(documtnt.body)['off'](this.value, handler)となる

はい。それで合ってます。

2 「$(documtnt.body)['on']」は「$(documtnt.body).on」と同じということでしょうか。

同じです。あるオブジェクトobjhello というプロパティがあるときに、ブラケット表記で obj['hello'] としてもhelloプロパティを参照できます。hello プロパティが関数であるとき、つまり objのメソッドであるときは obj['hello']() とすればこのメソッドを実行することになります。

従って質問にある

javascript

1$(documtnt.body)[this.checked ? 'on' : 'off'](this.value, handler)

の一行は以下と同じです。

javascript

1if (this.checked) 2 $(documtnt.body).on(this.value, handler) 3else 4 $(documtnt.body).off(this.value, handler)

投稿2022/11/14 13:58

退会済みユーザー

退会済みユーザー

総合スコア0

taka_oct092018😄を押しています
yambejp👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

taka_oct092018

2022/11/15 12:13

su507様、返信ありがとうございます。 詳細な説明をして頂き、より深く理解出来ました。 JavaScriptはどうしてブラケット記法・ドット記法の別な文法が 用意されているか不思議でしたが、このコードのように柔軟に プログラムが書けて面白いです。 初心者の私にはかなり難しいですが…。

0

三項演算子、でぐぐってみるとよろしいかと。

投稿2022/11/14 13:48

y_waiwai

総合スコア86013

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

2022/11/14 15:27

こちらの回答が複数のユーザーから「説明が不足している回答」という指摘を受けました。

回答へのコメント

taka_oct092018

2022/11/15 12:12

y_waiwai様、返信ありがとうございます。 またよろしくお願い致します。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。