diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-07-18 16:56:59 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-18 16:56:59 +0900 |
commit | abbf5910d201761681df167db2523f140ec39de2 (patch) | |
tree | 13401f6e954396e445bfe5361ebf8485d61577a6 /files/ja/conflicting | |
parent | 17a945d301538d381470cf0fff8b835506a3cbfe (diff) | |
download | translated-content-abbf5910d201761681df167db2523f140ec39de2.tar.gz translated-content-abbf5910d201761681df167db2523f140ec39de2.tar.bz2 translated-content-abbf5910d201761681df167db2523f140ec39de2.zip |
Learn/Getting_started_with_the_web/JavaScript_basics を更新 (#1476)
* Learn/Getting_started_with_the_web/JavaScript_basics を更新
- 2021/07/10 時点の英語版に同期
- conflicting 版は未翻訳版なので削除
* conflicting/Web/JavaScript/Reference/Operators を削除
正規版に統合されているため、conflicting 版を削除。
併せて、以前削除した別な conflicting 版の履歴を削除。
Diffstat (limited to 'files/ja/conflicting')
-rw-r--r-- | files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html | 304 | ||||
-rw-r--r-- | files/ja/conflicting/web/javascript/reference/operators/index.html | 231 |
2 files changed, 0 insertions, 535 deletions
diff --git a/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index bc0542c594..0000000000 --- a/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Getting Started (Javascript Tutorial) -slug: conflicting/Learn/Getting_started_with_the_web/JavaScript_basics -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started -original_slug: Web/JavaScript/Getting_Started ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Why JavaScript?</h2> -<p>JavaScript is a powerful, complicated, and often misunderstood computer language. It enables the rapid development of applications in which users can enter data and view results easily.</p> -<p>The primary advantage to JavaScript, which is also known as ECMAScript, centers around the Web browser, thus having the ability to produce the same results on all platforms supported by the browser. The examples on this page, just like Google Maps, run on Linux, Windows, and Mac OS. With the recent growth of numerous JavaScript libraries it is now easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. Unlike the hype around other technologies pushed by various proprietary interests, JavaScript is really the only cross-platform, client-side programming language that is both free and universally adopted.</p> -<h2 id="What_you_should_already_know" name="What_you_should_already_know">What you should already know</h2> -<p>JavaScript is a very easy language to start programming with. All you need is a text editor and a Web browser to get started.</p> -<p>There are many other technologies that can be integrated into and developed along with JavaScript that are beyond the scope of this document. Don't expect to make a whole application like Google Maps all on your first day!</p> -<h2 id="Getting_Started" name="Getting_Started">Getting started</h2> -<p>Getting started with JavaScript is very easy. You don't have to have complicated development programs installed. You don't have to know how to use a shell, program Make, or use a compiler. JavaScript is interpreted by your Web browser. All you have to do is save your program as a text file and then open it up in your Web browser. That's it!</p> -<p>JavaScript is a great programming language for introductory computer languages. It allows instant feedback to the new student and teaches them about tools they will likely find useful in their real life. This is in stark contrast to C, C++, and Java which are really only useful for dedicated software developers.</p> -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Browser compatibility issues</h2> -<p>There are variations between what functionality is available in the different browsers. Mozilla, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. We intend on <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.</p> -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">How to try the examples</h2> -<p>The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.</p> -<p>If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!</p> -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Example: Catching a mouse click</h2> -<p>The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.</p> -<p>'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:</p> -<ul> - <li>Click - issued when a user clicks the mouse</li> - <li>DblClick - issued when a user double-clicks the mouse</li> - <li>MouseDown - issued when a user depresses a mouse button (the first half of a click)</li> - <li>MouseUp - issued when a user releases a mouse button (the second half of a click)</li> - <li>MouseOut - issued when the mouse pointer leaves the graphical bounds of the object</li> - <li>MouseOver - issued when the mouse pointer enters the graphical bounds of the object</li> - <li>MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object</li> - <li>ContextMenu - issued when the user clicks using the right mouse button</li> -</ul> -<p>Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.</p> -<p>The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:</p> -<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> -<p>The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> -<pre class="brush:js"><script type="text/javascript"> - function clickHandler () { - alert ("Hello, World!"); - } -</script> -<span onclick="clickHandler();">Click Here</span></pre> -<p>Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:</p> -<pre class="brush:js"><script type="text/javascript"> - function clickHandler(event) { - var eType = event.type; - /* the following is for compatibility */ - /* Moz populates the target property of the event object */ - /* IE populates the srcElement property */ - var eTarget = event.target || event.srcElement; - - alert( "Captured Event (type=" + eType + ", target=" + eTarget ); - } -</script> -<span onclick="clickHandler(event);">Click Here</span></pre> -<p>In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.</p> -<pre class="brush:js"><body></body> -<script type="text/javascript"> - function mouseeventHandler(event) { - /* The following is for compatibility */ - /* IE does NOT by default pass the event object */ - /* obtain a ref to the event if one was not given */ - if (!event) event = window.event; - - /* obtain event type and target as earlier */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' event on element with id: '+ eTarget.id); - } - - function onloadHandler () { - /* obtain a ref to the 'body' element of the page */ - var body = document.body; - /* create a span element to be clicked */ - var span = document.createElement('span'); - span.id = 'ExampleSpan'; - span.appendChild(document.createTextNode ('Click Here!')); - - /* register the span object to receive specific mouse events - - notice the lowercase of the events but the free choice in the names of the handlers you replace them with. - */ - span.onmousedown = mouseeventHandler; - span.onmouseup = mouseeventHandler; - span.onmouseover = mouseeventHandler; - span.onmouseout = mouseeventHandler; - - /* display the span on the page */ - body.appendChild(span); -} - -window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name -</script></pre> -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Example: Catching a keyboard event</h2> -<p>Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.</p> -<p>The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:</p> -<ul> - <li>KeyPress - issued when a key is depressed and released</li> - <li>KeyDown - issued when a key is depressed but hasn't yet been released</li> - <li>KeyUp - issued when a key is released</li> - <li>TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking, or keyboard. This event will not be covered in this article.</li> -</ul> -<p>In a <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> event, the Unicode value of the key pressed is stored in either the <code>keyCode</code> or <code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> property, never both. If the key pressed generates a character (e.g., 'a'), <code>charCode</code> is set to the code of that character, respecting the letter case (i.e., <code>charCode</code> takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in <code>keyCode</code>.</p> -<p>The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:</p> -<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');" /> -</pre> -<p>As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:</p> -<pre class="brush:js"><script type="text/javascript"> - function keypressHandler() { - alert ("Hello, World!"); - } -</script> - -<input onkeypress="keypressHandler();" /> -</pre> -<p>Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:</p> -<pre class="brush:js"><script type="text/javascript"> - function keypressHandler(evt) { - var eType = evt.type; // Will return "keypress" as the event type - /* here we again need to use a cross browser method - mozilla based browsers return which and others keyCode. - The <a href="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator" title="/en-US/docs/JavaScript/Reference/Operators/Conditional_Operator">Conditional operator</a> or ternary is a good choice */ - var keyCode = evt.which?evt.which:evt.keyCode; - var eCode = 'keyCode is ' + keyCode; - var eChar = 'charCode is ' + <span class="typ" style="background-color: transparent; margin: 0px; padding: 0px; border: 0px; vertical-align: baseline; color: rgb(43, 145, 175);">String</span><span class="pun" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">.</span><span class="pln" style="background-color: transparent; color: rgb(0, 0, 0); margin: 0px; padding: 0px; border: 0px; vertical-align: baseline;">fromCharCode(</span>keyCode); // or evt.charCode - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script> -<input onkeypress="keypressHandler(event);" /></pre> -<p>Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:</p> -<pre class="brush:js"><script type="text/javascript"> - document.onkeypress = keypressHandler(event); - document.onkeydown = keypressHandle(event); - document.onkeyup =keypressHandle(event) - -</script></pre> -<p>Here is a complete example that shows key event handling:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var exampleKey = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which - var keychar = String.fromCharCode(key); - if (key==exampleKey) { metaChar = true; } - if (key!=exampleKey) { - if (metaChar) { - alert("Combination of metaKey + " + keychar) - metaChar = false; - } else { alert("Key pressed " + key); } - } - } - function metaKeyUp (event) { - var key = event.keyCode || event.which; - if (key==exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> - Try pressing any key! -</body> -</html></pre> -<h3 id="Browser_bugs_and_quirks">Browser bugs and quirks</h3> -<p>The two properties made available through the key events are <code>keyCode</code> and <code>charCode</code>. In simple terms, <code>keyCode</code> refers to the actual keyboard key that was pressed by the user, while <code>charCode</code> is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same <code>keyCode</code>, because the user presses the same key, but a different <code>charCode</code> because the resulting character is different.</p> -<p>The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support <code>charCode</code>. However, they give the character information in <code>keyCode</code>, but only onkeypress. Onkeydown and onkeyup <code>keyCode</code> contain key information. Firefox uses a different word, "which", to distinguish the character.</p> -<p>Refer to the Mozilla Documentation on <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> for a further treatment of keyboard events.</p> -<p>{{ draft() }}</p> -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Example: Dragging images around</h2> -<p>The following example allows moving the image of Firefox around the page:</p> -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style type='text/css'> -img { position: absolute; } -</style> - -<script type='text/javascript'> -window.onload = function() { - - movMeId = document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - - document.onmousedown = coordinates; - document.onmouseup = mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - - // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox - // Both properties return the HTML element the event took place on. - - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove = moveImage; - return false; - } else { - return false; - } - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64" /> - <p>Drag and drop around the image in this page.</p> -</body> - -</html></pre> -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Example: Resizing things</h2> -<div> - Example of resizing an image (the actual image is not resized, only the image's rendering.) - <pre class="brush:js"> <!DOCTYPE html> - <html> - <head> - <style> - #resizeImage { - margin-left: 100px; - } - </style> - <script> - window.onload = function() { - - var resizeId = document.getElementById("resizeImage"); - var resizeStartCoordsX, - resizeStartCoordsY, - resizeEndCoordsX, - resizeEndCoordsY; - - var resizeEndCoords; - var resizing = false; - - document.onmousedown = coordinatesMousedown; - document.onmouseup = coordinatesMouseup; - - function coordinatesMousedown(e) { - if (e == null) { - e = window.event; - } - - var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; - - if (element.id == "resizeImage") { - resizing = true; - resizeStartCoordsX = e.clientX; - resizeStartCoordsY = e.clientY; - } - return false; - } - - function coordinatesMouseup(e) { - if (e == null) { - e = window.event; - } - - if (resizing === true) { - var currentImageWidth = parseInt(resizeId.width); - var currentImageHeight = parseInt(resizeId.height); - - resizeEndCoordsX = e.clientX; - resizeEndCoordsY = e.clientY; - - resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; - resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; - - resizing = false; - } - return false; - } - } - </script> - </head> - - <body> - <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" -width="64" height="64" /> - <p>Click on the image and drag for resizing.</p> - </body> - - </html></pre> -</div> -<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Example: Drawing Lines</h2> -<p><span class="diff_add">{{todo("Need Content. Or, remove headline")}}</span></p> diff --git a/files/ja/conflicting/web/javascript/reference/operators/index.html b/files/ja/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index a32c321159..0000000000 --- a/files/ja/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: 比較演算子 -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Operator - - Reference - - 演算子 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators -original_slug: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript には、厳密な比較と型変換の比較の両方があります。厳密な比較 (例: <code>===</code>) は、オペランドが同じ型で、内容も一致している場合にのみ真になります。もっとよく使用される抽象的な比較 (例: <code>==</code>) は、比較する前にオペランドを同じ型に変換します。抽象的な関係比較 (例: <code><=</code>) では、比較前にまずオペランドがプリミティブ型に変換され、それから同じ型に変換されます。</p> - -<p>文字列は Unicode 値を使用した標準的な辞書順に基づいて比較されます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> - -<div> -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> -</div> - -<div></div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>比較の機能は以下のとおりです。</p> - -<ul> - <li>2 つの文字列が厳密に等しくなるのは、字の順序が等しく、長さが等しく、対応する位置の文字が等しいときです。</li> - <li>2 つの数字が厳密に等しくなるのは、数値的に等しいとき (数字の値が等しいとき) です。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> は、どんなものとも (Nan とさえも) 等しくなりません。プラスゼロとマイナスゼロは互いと等しくなります。</li> - <li>2 つの論理オペランドが厳密に等しくなるのは、どちらも <code>true</code> か、どちらも <code>false</code> のときです。</li> - <li>2 つの異なるオブジェクトは、厳密な比較でも抽象的な比較でも等しくなりません。</li> - <li>オブジェクト比較が等しくなるのは、オペランドが同じオブジェクトを参照しているときだけです。</li> - <li>Null と Undefined 型は、自分自身と厳密に等しく、また互いに抽象的に等しくなります。</li> -</ul> - -<h2 id="Equality_operators" name="Equality_operators">等価演算子</h2> - -<h3 id="Equality" name="Equality">等価 (==)</h3> - -<p>等価演算子は、2 つのオペランドが<strong>同じ型でないならば</strong>オペランドを変換して、それから厳密な比較を行います。<strong>両方のオペランドがオブジェクトならば</strong>、 JavaScript は内部参照を比較するので、オペランドがメモリ内の同じオブジェクトを参照するときに等しくなります。</p> - -<h4 id="Syntax" name="Syntax">構文</h4> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h4 id="Examples" name="Examples">例</h4> - -<pre class="brush: js notranslate">1 == 1 // true -'1' == 1 // true -1 == '1' // true -0 == false // true -0 == null // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 == object2 // false -0 == undefined // false -null == undefined // true -</pre> - -<h3 id="Inequality" name="Inequality">不等価 (!=)</h3> - -<p>不等価演算子は、オペランド同士が等しくないならば真を返します。2 つのオペランドが<strong>同じ型でないならば</strong>、JavaScript は適切な型にオペランドを変換して比較しようとします。<strong>両方のオペランドがオブジェクトならば</strong>、JavaScript は内部参照を比較するので、オペランドがメモリ内の異なるオブジェクトを参照するときには等しくなりません。</p> - -<h4 id="Syntax_2" name="Syntax_2">構文</h4> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h4 id="Examples_2" name="Examples_2">例</h4> - -<pre class="brush: js notranslate">1 != 2 // true -1 != '1' // false -1 != "1" // false -1 != true // false -0 != false // false -</pre> - -<h3 id="Identity" name="Identity">一致 / 厳密等価 (===)</h3> - -<p>厳密等価演算子は、<strong>型変換なしで</strong>オペランド同士が (上に示した通り) 厳密に等しければ真を返します。</p> - -<h4 id="Syntax_3" name="Syntax_3">構文</h4> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h4 id="Examples_3" name="Examples_3">例</h4> - -<pre class="brush: js notranslate">3 === 3 // true -3 === '3' // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 === object2 //false</pre> - -<h3 id="Nonidentity" name="Nonidentity">不一致 / 厳密不等価 (!==)</h3> - -<p>厳密不等価演算子は、<strong>オペランド同士が等しくないか、型が等しくない、あるいはその両方</strong>ならば真を返します。</p> - -<h4 id="Syntax_4" name="Syntax_4">構文</h4> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h4 id="Examples_4" name="Examples_4">例</h4> - -<pre class="brush: js notranslate">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="Relational_operators" name="Relational_operators">関係演算子</h2> - -<p>これらの演算子のそれぞれは、比較が行われる前に、そのオペランドをプリミティブに{{Glossary("Type_coercion", "型強制")}}します。両方とも文字列として終わる場合は、辞書順で比較され、そうでない場合は数値に変換されて比較されます。 <code>NaN</code> との比較は常に <code>false</code> を生み出します。</p> - -<h3 id="Greater_than_operator" name="Greater_than_operator">大なり演算子 (>)</h3> - -<p>大なり演算子は、左オペランドが右オペランドより大きければ、真を返します。</p> - -<h4 id="Syntax_5" name="Syntax_5">構文</h4> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h4 id="Examples_5" name="Examples_5">例</h4> - -<pre class="brush: js notranslate">4 > 3 // true -</pre> - -<h3 id="Greater_than_or_equal_operator" name="Greater_than_or_equal_operator">大なりイコール演算子 (>=)</h3> - -<p>大なりイコール演算子は、左オペランドが右オペランド以上ならば、真を返します。</p> - -<h4 id="Syntax_6" name="Syntax_6">構文</h4> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h4 id="Examples_6" name="Examples_6">例</h4> - -<pre class="brush: js notranslate">4 >= 3 // true -3 >= 3 // true -</pre> - -<h3 id="Less_than_operator" name="Less_than_operator">小なり演算子 (<)</h3> - -<p>小なり演算子は、左オペランドが右オペランドより小さければ、真を返します。</p> - -<h4 id="Syntax_7" name="Syntax_7">構文</h4> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h4 id="Examples_7" name="Examples_7">例</h4> - -<pre class="brush: js notranslate">3 < 4 // true -</pre> - -<h3 id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">小なりイコール演算子 (<=)</h3> - -<p>小なりイコール演算子は、左オペランドが右オペランド以下ならば、真を返します。</p> - -<h4 id="Syntax_8" name="Syntax_8">構文</h4> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h4 id="Examples_8" name="Examples_8">例</h4> - -<pre class="brush: js notranslate">3 <= 4 // true -3 <= 3 // true -</pre> - -<h2 id="Using_the_equality_operators" name="Using_the_equality_operators">等価演算子の使用</h2> - -<p>標準等価演算子 (<code>==</code> と <code>!=</code>) は 2 つのオペランドの比較に<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">抽象的等価比較アルゴリズム</a>を使用します。オペランドの型が異なる場合は、比較を行う前にそれらを同じ型に変換しようとします。例えば <code>5 == '5'</code> という式では、比較を行う前に右オペランドの文字列を数値に変換します。</p> - -<p>厳密等価演算子 (<code>===</code> と <code>!==</code>) は<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">厳密等価比較アルゴリズム</a>を使用して、オペランドの型が同一かどうかに関する比較も行います。オペランドの型が異なれば、例えば <code>5</code> と <code>'5'</code> の比較では、同一性比較 <code>5 !== '5'</code> は <code>true</code> と評価され、 <code>5 === '5'</code> のチェックは <code>false</code> 評価されます。</p> - -<p>厳密等価演算子を使うのは、オペランドが特定の型の特定の値でなければならない場合、言い換えればオペランドの正確な型が重要な場合です。それ以外では、2 つのオペランドが同じ型でなくても比較が可能になる、標準的な等価演算子を使えます。</p> - -<p>比較に型の変換が関わるとき (つまり厳密でない比較のとき)、 JavaScript は以下のように {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 型のオペランドを変換します。</p> - -<ul> - <li>数値と文字列を比較するとき、文字列は数値に変換されます。 JavaScript は文字列の数値リテラルを <code>Number</code> 型の値に変換しようとします。まず、文字列の数値リテラルから数学的な値を引き出します。次に、その値を最も近い <code>Number</code> 型に丸めます。</li> - <li>もしオペランドの片方が <code>Boolean</code> ならば、その Boolean オペランドが <code>true</code> の場合 1 に、<code>false</code> の場合は +0 に変換されます。</li> - <li>オブジェクトを数値または文字列と比較すると、 JavaScript はそのオブジェクトの既定値を返そうとします。演算子は、オブジェクトの <code>valueOf</code> や <code>toString</code> といったメソッドを用いて、プリミティブな値、 <code>String</code> か <code>Number</code> の値に変換しようとします。変換に失敗したら、ランタイムエラーが発生します。</li> - <li>オブジェクトがプリミティブ値に変換されるのは、比較対象がプリミティブ値であるときだけです。両方のオペランドがオブジェクトなら、オブジェクトとして比較され、両方が同じオブジェクトを参照するときだけ真となります。</li> -</ul> - -<div class="note"><strong>メモ:</strong> String オブジェクトはオブジェクト型であり、文字列型ではありません! String オブジェクトはほとんど使わないので、次の結果に驚くかもしれません。</div> - -<pre class="brush:js notranslate">// 両方のオペランドが文字列型 (すなわちプリミティブな文字列) なので、true -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// a と b はオブジェクト型で、異なるオブジェクトを参照しているので、false -a == b - -// a と b はオブジェクト型で、異なるオブジェクトを参照しているので、false -a === b - -// a と 'foo' は異なる型で、比較前にオブジェクト (a) は -// 文字列 'foo' に変換されるので、真 -a == 'foo'</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness">等価性の比較とその使いどころ</a></li> -</ul> |