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 | |
| 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')
7 files changed, 148 insertions, 694 deletions
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 29deb06c2f..2fa765b24b 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -2909,7 +2909,7 @@ /ja/docs/JavaScript/Reference/Operators/Bitwise_Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/JavaScript/Reference/Operators/Comma_Operator /ja/docs/Web/JavaScript/Reference/Operators/Comma_Operator /ja/docs/JavaScript/Reference/Operators/Comma_Operator-redirect-1 /ja/docs/Web/JavaScript/Reference/Operators/Comma_Operator -/ja/docs/JavaScript/Reference/Operators/Comparison_Operators /ja/docs/conflicting/Web/JavaScript/Reference/Operators +/ja/docs/JavaScript/Reference/Operators/Comparison_Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/JavaScript/Reference/Operators/Conditional_Operator /ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator /ja/docs/JavaScript/Reference/Operators/Logical_Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/JavaScript/Reference/Operators/Member_Operators /ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors @@ -4580,7 +4580,7 @@ /ja/docs/Web/HTTP/Server-Side_Access_Control /ja/docs/Web/HTTP/CORS /ja/docs/Web/HTTP/X-Frame-Options /ja/docs/Web/HTTP/Headers/X-Frame-Options /ja/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them /ja/docs/Web/JavaScript/Equality_comparisons_and_sameness -/ja/docs/Web/JavaScript/Getting_Started /ja/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics +/ja/docs/Web/JavaScript/Getting_Started /ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics /ja/docs/Web/JavaScript/Guide/About /ja/docs/Web/JavaScript/Guide/Introduction /ja/docs/Web/JavaScript/Guide/Block_Statement /ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling /ja/docs/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages @@ -4813,7 +4813,7 @@ /ja/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators /ja/docs/Web/JavaScript/Reference/Operators#Assignment_operators /ja/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /ja/docs/Web/JavaScript/Reference/Operators -/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators /ja/docs/conflicting/Web/JavaScript/Reference/Operators +/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/Web/JavaScript/Reference/Operators/Member_Operators /ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors /ja/docs/Web/JavaScript/Reference/Operators/Pipeline_operator /ja/docs/orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator @@ -5409,7 +5409,7 @@ /ja/docs/dummySlug/Reference/Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/dummySlug/Reference/Operators/Assignment_Operators /ja/docs/Web/JavaScript/Reference/Operators#Assignment_operators /ja/docs/dummySlug/Reference/Operators/Comma_Operator /ja/docs/Web/JavaScript/Reference/Operators/Comma_Operator -/ja/docs/dummySlug/Reference/Operators/Comparison_Operators /ja/docs/conflicting/Web/JavaScript/Reference/Operators +/ja/docs/dummySlug/Reference/Operators/Comparison_Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/dummySlug/Reference/Operators/Logical_Operators /ja/docs/Web/JavaScript/Reference/Operators /ja/docs/dummySlug/Reference/Operators/Member_Operators /ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors /ja/docs/dummySlug/Reference/Operators/Operator_Precedence /ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 1d3e84cd70..a2d166f285 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -48159,12 +48159,6 @@ "silverskyvicto" ] }, - "conflicting/Learn/Getting_started_with_the_web/JavaScript_basics": { - "modified": "2019-03-23T23:21:46.830Z", - "contributors": [ - "sunagakazuo" - ] - }, "conflicting/Learn/HTML/Howto/Author_fast-loading_HTML_pages": { "modified": "2020-07-16T22:22:32.832Z", "contributors": [ @@ -48641,31 +48635,6 @@ "electrolysis" ] }, - "conflicting/Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T21:04:54.922Z", - "contributors": [ - "tbpgr", - "mfuji09", - "yokotay", - "AkihikoTakeda", - "ambi", - "yyss", - "teoli", - "ethertank", - "Potappo" - ] - }, - "conflicting/Web/JavaScript/Reference/Operators_f71733c8e7001a29c3ec40d8522a4aca": { - "modified": "2020-03-12T19:35:34.796Z", - "contributors": [ - "AkihikoTakeda", - "yyss", - "teoli", - "keiskimu", - "ethertank", - "Potappo" - ] - }, "conflicting/tools/Keyboard_shortcuts": { "modified": "2020-07-16T22:34:03.446Z", "contributors": [ 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> diff --git a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html index b3d1dc4916..808a7a8371 100644 --- a/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/ja/learn/getting_started_with_the_web/javascript_basics/index.html @@ -2,12 +2,12 @@ title: JavaScript の基本 slug: Learn/Getting_started_with_the_web/JavaScript_basics tags: + - Beginner + - CodingScripting - JavaScript - Learn - Web - - codescripting - - 'l10n:priority' - - 初心者 + - l10n:priority translation_of: Learn/Getting_started_with_the_web/JavaScript_basics --- <div>{{LearnSidebar}}</div> @@ -15,30 +15,30 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics <div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> <div class="summary"> -<p>JavaScript は Web サイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。</p> +<p>JavaScript はウェブサイトにインタラクティブ機能 (ゲーム、ボタンが押されたときやデータがフォームに入力されたときの反応、動的なスタイルの変更、アニメーションなど) を追加するプログラミング言語です。この記事は、このエキサイティングな言語を始めるのに役立ち、可能性についてのアイディアを提供します。</p> </div> -<h2 id="What_is_JavaScript_really" name="What_is_JavaScript_really">そもそも JavaScript とは何か</h2> +<h2 id="What_is_JavaScript">JavaScript とは何か</h2> -<p>{{Glossary("JavaScript")}} (略して "JS") <span id="result_box" lang="ja"><span>は成熟した{{Glossary("Dynamic_programming_language", "動的プログラミング言語")}}であり、{{Glossary("HTML")}} 文書に適用すると、 Web サイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。</span></span></p> +<p>{{Glossary("JavaScript")}} (略して "JS") は成熟した{{Glossary("Dynamic_programming_language", "動的プログラミング言語")}}であり、{{Glossary("HTML")}} 文書に適用すると、ウェブサイトに動的な対話操作を提供できます。Mozilla プロジェクト、Mozilla Foundation、Mozilla Corporation の共同設立者である Brendan Eich によって考案されました。</p> -<p>JavaScript の用途は多彩です。小さいものでは、カルーセル、画像ギャラリー、レイアウトの変更、ボタンのクリックに対するレスポンスなどから始めることができます。もっと経験を積むと、ゲーム、2D および 3D のアニメーショングラフィック、包括的なデータベース駆動型アプリケーションなどを作成することができます。</p> +<p>JavaScript は汎用性が高く、初心者にもやさしいものです。経験を積めば、ゲーム、 2D や 3D のアニメーション、包括的なデータベース駆動型のアプリなどが作れるようになります。</p> -<p>JavaScript はとてもコンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。</p> +<p>JavaScript は比較的コンパクトですが、一方でとても柔軟性があります。開発者は JavaScript 言語のコアをベースに多種多様なツールを作成し、最小限の労力で膨大な様々な機能を利用できるようにしました。例えば以下のようなものがあります。</p> <ul> - <li>ブラウザのアプリケーションプログラミングインターフェイス({{Glossary("API")}})。 Web ブラウザに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザの Web カメラからの動画ストリームの収集や操作、3D グラフィックやオーディオサンプルの生成などの機能を提供する、 Web ブラウザに組み込まれた API。</li> - <li>開発者が Twitter や Facebook のような他のコンテンツプロバイダのサイトから機能を組み込むことを可能にする、サードパーティの API。</li> - <li>すばやくサイトやアプリケーションを構築することができ、HTML に組み込み可能なサードパーティのフレームワークやライブラリ。</li> + <li>ブラウザーのアプリケーションプログラミングインターフェイス ({{Glossary("API")}})。ウェブブラウザーに組み込まれた API により、動的な HTML の作成、 CSS スタイルの設定、ユーザーのウェブカメラからの動画ストリームの収集や操作、3D グラフィックやオーディオサンプルの生成などの機能を提供する、ウェブブラウザーに組み込まれた API。</li> + <li>開発者が Twitter や Facebook のような他のコンテンツプロバイダーのサイトから機能を組み込むことを可能にする、サードパーティの API。</li> + <li>すばやくサイトやアプリケーションを構築することができ、 HTML に組み込み可能なサードパーティのフレームワークやライブラリー。</li> </ul> -<p>この記事は JavaScript の簡単な紹介に留めるべきだと思いますので、現段階では、JavaScript 言語のコアと上記の様々なツールの違いを詳しく話して混乱させることは避けるようにします。それらは、この後に続く詳細、<a href="/ja/docs/Learn/JavaScript">JavaScript 学習エリア</a>、およびMDN の他の部分で詳しく学ぶことができます。</p> +<p>コアの JavaScript 言語が上記のツールとどのように違うのか、その詳細を紹介することは、 JavaScript の軽い入門者向けの書籍であるこの記事の範囲外です。詳細は MDN の <a href="/ja/docs/Learn/JavaScript">JavaScript 学習エリア</a>や、 MDN の他の部分で詳しく学ぶことができます。</p> -<p>以下では、コア言語のいくつかの側面について紹介します。またブラウザの API 機能についてもいくつか説明します。楽しみましょう！</p> +<p>以下では、コア言語のいくつかの側面について紹介します。またブラウザーの API 機能についてもいくつか説明します。楽しみましょう！</p> -<h2 id="A_hello_world_example" name="A_hello_world_example">"Hello world" の例</h2> +<h2 id="A_Hello_world!_example"><em>Hello world!</em> の例</h2> -<p>上記の章は実にエキサイティングに聞こえるかもしれませんが、それもそのはずです — JavaScript は最も活気のある Web 技術の 1 つで、使い始めれば、 Web サイトは力と創造性の新しい次元に入るでしょう。</p> +<p>JavaScript は、最も人気のある現代のウェブ技術のひとつです。あなたの JavaScript のスキルが上がれば、あなたのウェブサイトのパワーと創造性は新たな次元に入るでしょう。</p> <p>しかし、JavaScript を使いこなせるようになるのは HTML や CSS よりも少し難しいです。小さなものから始め、小さく確実な手順で作業を続ける必要があるかもしれません。始めるにあたって、<em>"hello world!"</em> を表示する例 (<a href="https://en.wikipedia.org/wiki/%22Hello,_World!%22_program">基本的なプログラミング例の標準</a>) を作りながら、基本的な JavaScript をページに追加する方法を紹介しましょう。</p> @@ -47,52 +47,54 @@ translation_of: Learn/Getting_started_with_the_web/JavaScript_basics </div> <ol> - <li>最初に、あなたのテストサイトに行って、「<code>scripts</code>」という名前(かぎ括弧は除く)の新しいフォルダを作成してください。それから、作成した scripts フォルダの中で <code>main.js</code> という新しいファイルを作成してください。それを <code>scripts</code> フォルダに保存してください。</li> - <li>次に、 <code>index.html</code> ファイルの <code></body></code> 閉じタグの前に新しい行を追加し、以下の新しい要素を追加してください。 - <pre class="brush: html notranslate"><script src="scripts/main.js"></script></pre> + <li>最初にテストサイトに行き、 <code>scripts</code> という名前の新しいフォルダーを作成してください。それから、 scripts フォルダーの中に <code>main.js</code> という新しいファイルを作成して保存してください。</li> + <li><code>index.html</code> ファイルの <code></body></code> 閉じタグの直前に新しい行で、以下の新しい要素を追加してください。 + <pre class="brush: html"><script src="scripts/main.js"></script></pre> </li> <li>これは CSS の {{htmlelement("link")}} 要素の時の作業と基本的に同じです。これは JavaScript をページに適用するので、(CSS の時と同じく、ページ上の何に対しても) HTML に影響を与えることができます。</li> <li><code>main.js</code> ファイルに次のコードを追加してください。 - <pre class="brush: js notranslate">const myHeading = document.querySelector('h1'); + <pre class="brush: js">const myHeading = document.querySelector('h1'); myHeading.textContent = 'Hello world!';</pre> </li> - <li>最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザで <code>index.html</code> を読み込んでください。<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> + <li>最後に、 HTML と JavaScript を書いたファイルを保存したことを確認し、ブラウザーで <code>index.html</code> を読み込んでください。<img alt="" src="hello-world.png" style="display: block; margin: 0px auto;"></li> </ol> <div class="note"> -<p><strong>注</strong>: {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、ブラウザが HTML をファイルに現れる順番で読み込むからです。もし JavaScript が最初に読み込まれ、その下の HTML に影響を与えると見られる場合、 HTML の準備ができる前に JavaScript が読み込まれ、正しく動作できない場合があります。したがって、 HTML ページの末尾付近に JavaScript を配置することは多くの場合、最良の方法です。</p> +<p><strong>注</strong>: 上記の説明で {{htmlelement("script")}} 要素を HTML ファイルの末尾付近に置いたのは、<strong>ブラウザーがファイルに現れる順番でコードを読み込むからです</strong>。</p> + +<p>JavaScript が先に読み込まれ、まだ読み込まれていない HTML に影響を与えることになると、問題が生じる可能性があります。 JavaScript を HTML ページの下部に配置することは、この依存関係に対応する一つの方法です。その他の方法については、<a href="/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#script_loading_strategies">スクリプトの読み込み戦略</a>をご覧ください。</p> </div> -<h3 id="What_happened" name="What_happened">何が起きたか</h3> +<h3 id="What_happened">何が起きたのか</h3> -<p>JavaScript を使用して、見出しの文字列が "Hello world!" に変更されました。最初に <code>{{domxref("Document.querySelector", "querySelector()")}}</code> と呼ばれる関数を使用して見出しの参照を取得し、 <code>myHeading</code> と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。</p> +<p>JavaScript を使用して、見出しの文字列が <em>Hello world!</em> に変更されました。最初に <code>{{domxref("Document.querySelector", "querySelector()")}}</code> と呼ばれる関数を使用して見出しの参照を取得し、 <code>myHeading</code> と呼ばれる変数に格納しています。これは CSS のセレクターを使用するのととてもよく似ています。要素に対して何かをしたくなったら、まずその要素を選択する必要があります。</p> -<p>その後、<code>myHeading</code> 変数の <code>{{domxref("Node.textContent", "textContent")}}</code> プロパティ(見出しの内容を表す)の値を "Hello world!" に設定します。</p> +<p>その後、<code>myHeading</code> 変数の <code>{{domxref("Node.textContent", "textContent")}}</code> プロパティ (見出しの内容を表す) の値を <em>Hello world!</em> に設定します。</p> <div class="note"> -<p><strong>注 </strong>: 上の例で使用した機能はどちらも<a href="/ja/docs/DOM/DOM_Reference">ドキュメントオブジェクトモデル (DOM) API</a> の一部であり、これを使って文書を操作することができます。</p> +<p><strong>注 </strong>: 上の例で使用した機能はどちらも<a href="/ja/docs/Web/API/Document_Object_Model">ドキュメントオブジェクトモデル (DOM) API</a> の一部であり、これを使って文書を操作することができます。</p> </div> -<h2 id="Language_basics_crash_course" name="Language_basics_crash_course">言語の短期集中コース</h2> +<h2 id="Language_basics_crash_course">言語の短期集中コース</h2> <p>どのように動作するかをよりよく理解できるように、 JavaScript 言語の基本機能のいくつかを説明しましょう。これらの機能はすべてのプログラミング言語に共通しているので、これらの基本をマスターすれば、ほとんど何でもプログラムできるようになります！</p> <div class="warning"> -<p><strong>重要</strong>: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 <a href="/ja/Learn/Discover_browser_developer_tools">ブラウザ開発ツールを探る</a>を参照してください。</p> +<p><strong>重要</strong>: この記事では、 JavaScript コンソールにサンプルコードを入力して、何が起こるのかを確認してみます。 JavaScript コンソールの詳細については、 <a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発ツールを探る</a>を参照してください。</p> </div> -<h3 id="Variables" name="Variables">変数</h3> +<h3 id="Variables">変数</h3> -<p>{{Glossary("Variable", "変数")}} は、値を格納できる入れ物です。まず、 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (説明はややこしいですが、推奨しません) または <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> というキーワードと、その後に任意の名前を指定することで、変数を宣言します。</p> +<p>{{Glossary("Variable", "変数")}} は、値を格納できる入れ物です。まず、 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (説明はややこしいですが、推奨しません) または <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/let">let</a></code> というキーワードと、その後に任意の名前を指定することで、変数を宣言します。</p> -<pre class="brush: js notranslate">let myVariable;</pre> +<pre class="brush: js">let myVariable;</pre> <div class="note"> -<p><strong>注 </strong>: 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a> を参照してください。</p> +<p><strong>注</strong>: 行末のセミコロンは文が終わる場所を示します。単一の行で複数の文を区切る場合には絶対に必要です。しかし、個々の文の末尾に置くことが良い習慣だと信じている人もいます。使用する場面と使用しない場合については他のルールもあります。詳しくは <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Your Guide to Semicolons in JavaScript</a> を参照してください。</p> </div> <div class="note"> -<p><strong>注 </strong>: 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_Types#Variables">変数の命名規則についてはこの記事</a>を参照してください)。自信がない場合は、有効かどうか<a href="https://mothereff.in/js-variables">変数名を調べる</a>ことができます。</p> +<p><strong>注 </strong>: 変数にはほとんど何でも名前を付けることができますが、いくらかの制約があります(<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#variables">変数の命名規則についてはこの記事</a>を参照してください)。自信がない場合は、有効かどうか<a href="https://mothereff.in/js-variables">変数名を調べる</a>ことができます。</p> </div> <div class="note"> @@ -100,24 +102,25 @@ myHeading.textContent = 'Hello world!';</pre> </div> <div class="note"> -<p><strong>注</strong>: <code>var</code> と <code>let</code> のより詳しい違いは、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let">var と let の違い</a>を見てください。</p> +<p><strong>注</strong>: <code>var</code> と <code>let</code> のより詳しい違いは、<a href="/ja/docs/Learn/JavaScript/First_steps/Variables#the_difference_between_var_and_let">var と let の違い</a>を見てください。</p> </div> <p>変数を宣言したら、以下のように値を割り当てることができます。</p> -<pre class="brush: js notranslate">myVariable = 'Bob';</pre> +<pre class="brush: js">myVariable = 'Bob'; +</pre> <p>好みに応じて、両方の操作を同一の行で行うことができます。</p> -<pre class="brush: js notranslate">let myVariable = 'Bob';</pre> +<pre class="brush: js">let myVariable = 'Bob';</pre> <p>変数の値は、名前で呼び出すだけで取得することができます。</p> -<pre class="brush: js notranslate">myVariable;</pre> +<pre class="brush: js">myVariable;</pre> <p>変数に値を代入した後で、変更することもできます。</p> -<pre class="notranslate">let myVariable = 'Bob'; +<pre>let myVariable = 'Bob'; myVariable = 'Steve';</pre> <p>なお、変数は様々な<a href="/ja/docs/Web/JavaScript/Data_structures">データ型</a>の値を保持することもできます。</p> @@ -143,7 +146,7 @@ myVariable = 'Steve';</pre> </tr> <tr> <th scope="row">{{Glossary("Boolean")}}</th> - <td>真偽値。 <code>true</code> と <code>false</code> は JS では特別なキーワードであり、引用符は必要ない。</td> + <td>論理値。 <code>true</code> と <code>false</code> は JS では特別なキーワードであり、引用符は必要ありません。</td> <td><code>let myVariable = true;</code></td> </tr> <tr> @@ -164,20 +167,20 @@ myVariable = 'Steve';</pre> <p>ではなぜ変数が必要なのでしょうか。何か面白いプログラミングをするには変数が必要です。値が変更できなければ、挨拶のメッセージをパーソナライズしたり、画像ギャラリーに表示されている画像を変更するなどの動的な操作ができないのです。</p> -<h3 id="Comments" name="Comments">コメント</h3> +<h3 id="Comments">コメント</h3> <p>コメントは、ブラウザーから無視される、コードの間に入れられた短いテキストスニペットです。CSS と同じように、JavaScript のコードではコメントを付けることができます。</p> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* 挟まれているすべてがコメントです。 */</pre> <p>コメントに改行が含まれていない場合、次のように 2 つのスラッシュの後ろに記載する方が簡単です :</p> -<pre class="brush: js notranslate" style="font-size: 14px;">// これはコメントです +<pre class="brush: js" style="font-size: 14px;">// これはコメントです </pre> -<h3 id="Operators" name="Operators">演算子</h3> +<h3 id="Operators">演算子</h3> <p>{{Glossary("operator", "演算子")}}は、2 つの値 (または変数) に基づいて結果を生成する数学的な記号です。次の表では、JavaScript コンソールで試してみるいくつかの例とともに、最も単純な演算子をいくつか見ることができます。</p> @@ -192,7 +195,7 @@ myVariable = 'Steve';</pre> </thead> <tbody> <tr> - <th scope="row">追加/連結</th> + <th scope="row">加算/連結</th> <td>2 つの数字を加えるか、2 つの文字列を結合します。</td> <td><code>+</code></td> <td><code>6 + 9;<br> @@ -214,7 +217,7 @@ myVariable = 'Steve';</pre> </tr> <tr> <th scope="row">等価</th> - <td>2 つの値と型が互いに等しいかどうかを調べ、<code>true</code> / <code>false</code> (真偽値)の結果を返します。</td> + <td>2 つの値と型が互いに等しいかどうかを調べ、<code>true</code>/<code>false</code> (論理値)の結果を返します。</td> <td><code>===</code></td> <td><code>let myVariable = 3;<br> myVariable === 4;</code></td> @@ -229,9 +232,9 @@ myVariable = 'Steve';</pre> <p><code>let myVariable = 3;<br> !(myVariable === 3);</code></p> - <p><span class="tlid-translation translation"><span title="">「等しくない」は、基本的に同じ結果を異なる構文で与えます。</span></span>ここでは「<code>myVariable</code> が 3 とは等しくない」ことをテストします。 <code>myVariable</code> は 3 と等しいので、<code>false</code> を返します。</p> + <p>「等しくない」は、基本的に同じ結果を異なる構文で与えます。ここでは「<code>myVariable</code> が 3 とは等しくない」ことをテストします。 <code>myVariable</code> は 3 と等しいので、<code>false</code> を返します。</p> - <p><code><code>let myVariable = 3;</code><br> + <p><code>let myVariable = 3;<br> myVariable !== 3;</code></p> </td> </tr> @@ -244,194 +247,203 @@ myVariable = 'Steve';</pre> <p><strong>注</strong>: データ型を混在させると、計算を実行するときに奇妙な結果になる可能性があるため、変数を正しく参照し、期待通りの結果を得るように注意してください。例えばコンソールに <code>'35' + '25'</code> と入力してみてください。期待通りの結果にならないのはなぜでしょうか。引用符は数字を文字列に変換するので、数字を加算するのではなく、文字列を連結する結果になったのです。 <code>35 + 25</code> を入力すれば、正しい結果が得られます。</p> </div> -<h3 id="Conditionals" name="Conditionals">条件文</h3> +<h3 id="Conditionals">条件文</h3> <p>条件文は、ある式が true を返すかどうかをテストし、その結果次第でそれぞれのコードを実行するコード構造です。条件文のよくある形は <code>if ... else </code> 文です。例えば以下の通りです。</p> -<pre class="brush: js notranslate">let iceCream = 'チョコレート'; +<pre class="brush: js">let iceCream = 'チョコレート'; if(iceCream === 'チョコレート') { alert('やった、チョコレートアイス大好き！'); } else { alert('あれれ、でもチョコレートは私のお気に入り......'); }</pre> -<p><code>if( ... )</code> の中の式が条件です — ここでは等価演算子を使用して、変数 <code>iceCream</code> と<code>チョコレート</code>という文字列とをを比較し、2 つが等しいかどうかを調べています。この比較が <code>true</code> を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、<code>else</code> 文の後にある 2番目のコードブロックが代わりに実行されます。</p> +<p><code>if( ... )</code> の中の式が条件です — ここでは等価演算子を使用して、変数 <code>iceCream</code> と<code>チョコレート</code>という文字列とをを比較し、2 つが等しいかどうかを調べています。この比較が <code>true</code> を返した場合、コードの最初のブロックが実行されます。比較が真でない場合、最初のブロックはスキップされ、 <code>else</code> 文の後にある 2番目のコードブロックが代わりに実行されます。</p> -<h3 id="Functions" name="Functions">関数</h3> +<h3 id="Functions">関数</h3> <p>{{Glossary("Function", "関数")}} は、再利用したい機能をパッケージ化する方法です。プロシージャが必要なときは、毎回コード全体を書くのではなく関数名を使って関数を呼び出すことができます。すでにいくつかの関数の仕様を見てきました。例えば以下のようなものです。</p> <ol> <li> - <pre class="brush: js notranslate">let myVariable = document.querySelector('h1');</pre> + <pre class="brush: js">let myVariable = document.querySelector('h1');</pre> </li> <li> - <pre class="brush: js notranslate">alert('hello!');</pre> + <pre class="brush: js">alert('hello!');</pre> </li> </ol> -<p>これらの関数、<code>document.querySelector</code> と <code>alert</code> は、必要なときにいつでも使えるようブラウザに組み込まれています。</p> +<p>これらの関数、 <code>document.querySelector</code> と <code>alert</code> は、必要なときにいつでも使えるようブラウザーに組み込まれています。</p> <p>もし変数名に見えるものがあったとしても、その後に括弧 <code>()</code> が付いていれば、おそらくそれは関数です。関数は普通、仕事をするのに必要な小さなデータである{{Glossary("Argument", "引数")}}を取ります。引数は括弧の中に入れ、複数の引数がある場合はカンマで区切ります。</p> -<p>例えば、<code>alert()</code> 関数はブラウザのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。</p> +<p>例えば、 <code>alert()</code> 関数はブラウザーのウィンドウにポップアップボックスを表示しますが、ポップアップボックスに何を書き込むかを関数に指示するために、文字列を引数として渡す必要があります。</p> <p>嬉しいことに、自分で関数を定義することができます。次の例では、引数として 2 つの数値をとり、それらを乗算するという単純な関数を記載します。</p> -<pre class="brush: js notranslate">function multiply(num1,num2) { +<pre class="brush: js">function multiply(num1,num2) { let result = num1 * num2; return result; }</pre> -<p>上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです :</p> +<p>上記の関数をコンソールで実行し、いくつかの引数を指定してテストしてみてください。例えば次のようなものです。</p> -<pre class="brush: js notranslate">multiply(4,7); -multiply(20,20); -multiply(0.5,3);</pre> +<pre class="brush: js">multiply(4, 7); +multiply(20, 20); +multiply(0.5, 3);</pre> <div class="note"> -<p><strong>注 </strong>: <a href="/ja/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> 文は <code>result</code> の値を関数内から関数の外に戻すことをブラウザに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の{{Glossary("Scope", "<code>スコープ</code>")}}と呼ばれています(<a href="/ja/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">変数のスコープのより詳しい説明</a>をお読みください)。</p> +<p><strong>注 </strong>: <a href="/ja/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> 文は <code>result</code> の値を関数内から関数の外に戻すことをブラウザーに指示し、それを利用できるようにします。これが必要な理由は、関数内で定義された変数が、その関数内でしか利用できないためです。これは変数の{{Glossary("Scope", "スコープ")}}と呼ばれています(<a href="/ja/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope">変数のスコープのより詳しい説明</a>をお読みください)。</p> </div> -<h3 id="Events" name="Events">イベント</h3> +<h3 id="Events">イベント</h3> -<p>Web サイトを実際にインタラクティブにするには、イベントが必要です。イベントは、ブラウザの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は <a href="/ja/docs/Web/Events/click">click イベント</a>で、マウスで何かをクリックするとブラウザによって発火されるものです。これを実行するには、コンソールに以下のように入力してから、現在の Web ページ上をクリックしてください。</p> +<p>ウェブサイトを実際にインタラクティブにするには、イベントが必要です。イベントは、ブラウザーの中で起きていることを検出し、その応答としてコードを実行するコード構造です。最も分かりやすい例は <a href="/ja/docs/Web/API/Element/click_event">click イベント</a>で、マウスで何かをクリックするとブラウザーによって発行されるものです。これを実行するには、コンソールに以下のように入力してから、現在のウェブページ上をクリックしてください。</p> -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() { +<pre class="brush: js">document.querySelector('html').onclick = function() { alert('痛っ! つつくのはやめて!'); }</pre> -<p>要素にイベントを割り当てる方法はたくさんあります。ここでは {{htmlelement("html")}} 要素を選択し、<code><a href="/ja/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> ハンドラのプロパティに、クリックイベントで実行したいコードを含む匿名 (つまり名前がない) 関数を代入します。</p> +<p>要素にイベントを割り当てる方法はたくさんあります。ここでは {{htmlelement("html")}} 要素を選択し、<code><a href="/ja/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> ハンドラープロパティに、クリックイベントで実行したいコードを含む無名 (つまり名前がない) 関数を代入します。</p> <p>なお、</p> -<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {};</pre> +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> <p>は以下のものと同等です。</p> -<pre class="brush: js notranslate">let myHTML = document.querySelector('html'); +<pre class="brush: js">let myHTML = document.querySelector('html'); myHTML.onclick = function() {};</pre> <p>短くしただけです。</p> -<h2 id="Supercharging_our_example_website" name="Supercharging_our_example_website">Web サイトの例を膨らませる</h2> +<h2 id="Supercharging_our_example_website">ウェブサイトの例を膨らませる</h2> + +<p>さて、 JavaScript の基本のおさらいが終わったところで、例題のサイトに新しい機能を追加してみましょう。</p> -<p>ここまで JavaScript の基本を少し見てきましたが、何ができるのかを見るために、例のサイトにいくつかクールな機能を追加してみましょう。</p> +<p>先に進む前に、 <code>main.js</code> ファイルの現在の内容を削除して、空のファイルを保存してください。そうしないと、 "Hello world!" の例で使用した既存のコードが、これから追加する新しいコードと衝突してしまいます。</p> -<h3 id="Adding_an_image_changer" name="Adding_an_image_changer">画像の切り替えの追加</h3> +<h3 id="Adding_an_image_changer">画像の切り替えの追加</h3> <p>このセクションでは、 DOM API 機能をもっと使用して、サイトに画像を追加しましょう。画像をクリックすると JavaScript を使用して 2 つの画像を切り替えることができます。</p> <ol> <li>まずサイトに掲載したいと思う別な画像を見つけてください。最初の画像と同じサイズか、できるだけ近いものを使用してください。</li> - <li>この画像を <code>images</code> フォルダに保存してください。</li> - <li>この画像の名前を 'firefox2.png' (引用符なし) に変更してください。</li> - <li><code>main.js</code> ファイルに移動し、次の JavaScript を入力します。(もし "hello world" の JavaScript がまだ残っている場合は、削除してください。) - <pre class="brush: js notranslate">let myImage = document.querySelector('img'); + <li>この画像を <code>images</code> フォルダーに保存してください。</li> + <li>この画像の名前を <em>firefox2.png</em> に変更してください。</li> + <li><code>main.js</code> ファイルに次の JavaScript を入力してください。 + <pre class="brush: js">let myImage = document.querySelector('img'); myImage.onclick = function() { let mySrc = myImage.getAttribute('src'); if(mySrc === 'images/firefox-icon.png') { - myImage.setAttribute ('src','images/firefox2.png'); + myImage.setAttribute('src','images/firefox2.png'); } else { - myImage.setAttribute ('src','images/firefox-icon.png'); + myImage.setAttribute('src','images/firefox-icon.png'); } }</pre> </li> - <li><code>index.html</code> をブラウザに読み込みます。画像をクリックすると、もう一方の画像に変わります。</li> + <li><code>index.html</code> をブラウザーに読み込みます。画像をクリックすると、もう一方の画像に変わります。</li> </ol> -<p>{{htmlelement("img")}} 要素への参照を変数 <code>myImage</code> に格納します。次にこの変数の <code>onclick</code> イベントハンドラプロパティに、名前のない関数(無名関数)を代入します。そうすれば、この要素がクリックされるたびに以下の動きをします。</p> +<p>{{htmlelement("img")}} 要素への参照を変数 <code>myImage</code> に格納します。次にこの変数の <code>onclick</code> イベントハンドラープロパティに、名前のない関数(無名関数)を代入します。そうすれば、この要素がクリックされるたびに以下の動きをします。</p> <ol> <li>画像の <code>src</code> 属性の値を取得します。</li> <li>条件文を使って、<code>src</code> の値が元の画像のパスと等しいかどうかをチェックします。 <ol> - <li>そうであれば、<code>src</code> の値を 2番目の画像へのパスに変更し、もう一方の画像が強制的に {{htmlelement("img")}} 要素の中に読み込まれるようにします。</li> - <li>そうでない(すでに変更されている)場合、<code>src</code> の値を元の画像のパスに戻して、元の状態に戻ります。</li> + <li>そうであれば、<code>src</code> の値を 2 番目の画像へのパスに変更し、もう一方の画像が強制的に {{htmlelement("img")}} 要素の中に読み込まれるようにします。</li> + <li>そうでない (すでに変更されている) 場合、<code>src</code> の値を元の画像のパスに戻して、元の状態に戻ります。</li> </ol> </li> </ol> -<h3 id="Adding_a_personalized_welcome_message" name="Adding_a_personalized_welcome_message">パーソナライズされた挨拶メッセージの追加</h3> +<h3 id="Adding_a_personalized_welcome_message">パーソナライズされた挨拶メッセージの追加</h3> -<p>次に、もう 1 つの小さなコードを追加し、ユーザがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザがサイトを離れて後で戻った時にも保存されるようにします。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使用して保存しましょう。したがって、必要な時にいつでもユーザと挨拶メッセージを変更できるオプションも用意しましょう。</p> +<p>次に、もう 1 つの小さなコードを追加し、ユーザーがサイトにアクセスしたときに、ページの表題をパーソナライズされた挨拶メッセージに変更してみましょう。この挨拶メッセージは、ユーザーがサイトを離れて後で戻った時にも保存されるようにします。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使用して保存しましょう。したがって、必要な時にいつでもユーザーと挨拶メッセージを変更できるオプションも用意しましょう。</p> <ol> - <li><code>index.html</code> では、 {{htmlelement("script")}} 要素の直前に次の行を追加します : + <li><code>index.html</code> では、 {{htmlelement("script")}} 要素の直前に次の行を追加します。 - <pre class="brush: html notranslate"><button>ユーザを変更</button></pre> + <pre class="brush: html"><button>ユーザーを変更</button></pre> </li> <li><code>main.js</code> では、次のコードを下記のとおりにファイルの最後に配置します。これは新しいボタンと見出しへの参照を変数に格納します。 - <pre class="brush: js notranslate">let myButton = document.querySelector('button'); + <pre class="brush: js">let myButton = document.querySelector('button'); let myHeading = document.querySelector('h1');</pre> </li> <li>パーソナライズされた挨拶を設定する以下の関数を追加しましょう。まだ何も起こりませんが、すぐに修正します。 - <pre class="brush: js notranslate">function setUserName() { + <pre class="brush: js">function setUserName() { let myName = prompt('あなたの名前を入力してください。'); localStorage.setItem('name', myName); myHeading.textContent = 'Mozilla はすばらしいよ、' + myName; }</pre> - この関数では <a href="/ja/docs/Web/API/Window.prompt"><code>prompt()</code></a> 関数を使用して、<code>alert()</code> のようにダイアログボックスを表示しています。しかし、<code>prompt()</code> はユーザにデータを入力するよう求め、ユーザが <strong>OK</strong> を押した後に変数にそのデータを格納します。この場合、ユーザに名前を入力するよう求めます。次に、<code>localStorage</code> と呼ばれる API を呼び出すことで、ブラウザにデータを格納して後で受け取ることができます。localStorage の <code>setItem()</code> 関数を使って、<code>'name'</code> と呼ばれるデータを作成し、<code>myName</code> に入っているユーザから入力されたデータを格納します。最後に、見出しの <code>textContent</code> に文字列と新しく格納されたユーザの名前を設定します。</li> + この関数では <a href="/ja/docs/Web/API/Window/prompt"><code>prompt()</code></a> 関数を使用して、<code>alert()</code> のようにダイアログボックスを表示しています。しかし、<code>prompt()</code> は <code>alert()</code> とは異なり、ユーザーにデータを入力するよう求め、ユーザーが <strong>OK</strong> を押した後に変数にそのデータを格納します。この場合、ユーザーに名前を入力するよう求めます。次に、<code>localStorage</code> と呼ばれる API を呼び出すことで、ブラウザーにデータを格納して後で受け取ることができます。 localStorage の <code>setItem()</code> 関数を使って、<code>'name'</code> と呼ばれるデータを作成し、 <code>myName</code> に入っているユーザーから入力されたデータを格納します。最後に、見出しの <code>textContent</code> に文字列と新しく格納されたユーザーの名前を設定します。</li> <li>次に、この <code>if ... else</code> ブロックを追加します。これは初期化コードと呼ぶことができ、最初の読み込みでアプリを構成します。 - <pre class="brush: js notranslate">if(!localStorage.getItem('name')) { + <pre class="brush: js">if(!localStorage.getItem('name')) { setUserName(); } else { let storedName = localStorage.getItem('name'); myHeading.textContent = 'Mozilla はすばらしいよ、' + storedName; }</pre> - このブロックでは、最初に <code>name</code> のデータが存在しているかどうかをチェックするために否定演算子(! で表される論理否定)を使用しています。存在しない場合は、作成するために <code>setUserName()</code> 関数が実行されます。存在する場合は(つまり、以前の訪問時にユーザが設定した場合)、 <code>getItem()</code> を使用して格納された名前を受け取り、 <code>setUserName()</code> の中で行ったのと同様に、見出しの <code>textContent</code> に文字列とユーザの名前を設定します。</li> - <li>最後に、以下の <code>onclick</code> イベントハンドラをボタンに設定します。クリックすると、<code>setUserName()</code> 関数が実行されます。これでユーザがボタンを押すことで、好きな時に新しい名前を設定できるようになります。 - <pre class="brush: js notranslate">myButton.onclick = function() { + このブロックでは、最初に <code>name</code> のデータが存在しているかどうかをチェックするために否定演算子 (! で表される論理否定) を使用しています。存在しない場合は、作成するために <code>setUserName()</code> 関数が実行されます。存在する場合は (つまり、以前の訪問時にユーザーが設定した場合)、 <code>getItem()</code> を使用して格納された名前を受け取り、 <code>setUserName()</code> の中で行ったのと同様に、見出しの <code>textContent</code> に文字列とユーザーの名前を設定します。</li> + <li>最後に、以下の <code>onclick</code> イベントハンドラーをボタンに設定します。クリックすると、<code>setUserName()</code> 関数が実行されます。これでユーザーがボタンを押すことで、好きな時に新しい名前を設定できるようになります。 + <pre class="brush: js">myButton.onclick = function() { setUserName(); } </pre> </li> </ol> -<p>サイトにアクセスしてみると、ページがユーザ名を尋ね、パーソナライズされたメッセージを表示します。好きなときにボタンを押すと名前を変えることができます。おまけに、名前は <code>localStorage</code> 内に格納されているため、サイトを閉じた後も名前が保持され、次にサイトを開いたときにパーソナライズされたメッセージが保持されます。</p> - <h3 id="A_user_name_of_null">A user name of null?</h3> -<p>この例を実行してユーザー名を入力するダイアログボックスが出たとき、<em>キャンセル</em>ボタンを押してみてください。結果として"Mozilla is cool, null"というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>、つまり値がないことに言及する JavaScript の特殊な値にセットされているためです。</p> +<p>この例を実行してユーザー名を入力するダイアログボックスが出たとき、<em>キャンセル</em>ボタンを押してみてください。結果として "Mozilla is cool, null" というタイトルが表示されるでしょう。これはプロンプトをキャンセルしたときに、値が <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code>、つまり値がないことを示す JavaScript の特殊な値に設定されるためです。</p> -<p>また何も入れずに OK を押してみてください — 結果として"Mozilla is cool,"というタイトルが表示され、これは理由が明白です。</p> +<p>また何も入れずに <em>OK</em> を押してみてください — 結果として "Mozilla is cool," というタイトルが表示され、これは理由が明白です。</p> -<p>この問題を避けるには、ユーザーが <code>null</code> や空白の名前を入力していないかチェックするよう、<code>setUserName()</code> 関数を書き換えます:</p> +<p>この問題を避けるには、ユーザーーが <code>null</code> や空白の名前を入力していないかチェックするよう、<code>setUserName()</code> 関数を書き換えます。</p> -<pre class="brush: js notranslate">function setUserName() { +<pre class="brush: js">function setUserName() { let myName = prompt('Please enter your name.'); - if(!myName || myName === null) { + if(!myName) { setUserName(); } else { localStorage.setItem('name', myName); - myHeading.innerHTML = 'Mozilla is cool, ' + myName; + myHeading.textContent = 'Mozilla is cool, ' + myName; } }</pre> <p>人間の言語では — <code>myName</code> に値がない場合や、<code>null</code>の場合、 最初から <code>setUserName()</code> を実行します。値がない場合 (上記の式が真でない場合)には、<code>localStorage</code> に値をセットして、見出しのテキストにもセットします。</p> -<h2 id="Conclusion" name="Conclusion">まとめ</h2> +<h2 id="Conclusion">まとめ</h2> <p>最後までこの記事の手順に従った場合は、最終的に次のようなページが表示されているでしょう (<a href="https://mdn.github.io/beginner-html-site-scripted/">こちらで作成した版を表示する</a>こともできます)。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="website-screen-scripted.png" style="display: block; margin: 0px auto;"></p> <p>行き詰まったら、自分の作業を <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">Github 上の完成したサンプルコード</a>と比べてみてください。</p> <p>私たちは JavaScript に少し触れただけです。楽しく遊んだり、もっと上達したい場合は、<a href="/ja/docs/Learn/JavaScript">JavaScript の学習トピック</a>に進んでください。</p> +<h2 id="See_also">関連情報</h2> + +<dl> + <dt><a href="/ja/docs/Learn/JavaScript">JavaScript による動的なクライアント側スクリプト</a></dt> + <dd>もっと詳細な JavaScript に飛び込みましょう。</dd> + <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> + <dd>ウェブ開発者を目指す方に最適な教材です! インタラクティブな環境で、短いレッスンとインタラクティブなテスト、自動評価によるガイドで、 JavaScript を学ぶことができます。最初の 40 レッスンは無料です。全コースは少額の一括払いでご利用いただけます。</dd> +</dl> + <p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> -<h2 id="In_this_module" name="In_this_module">このモジュール</h2> +<h2 id="In_this_module">このモジュール</h2> <ul> - <li id="Installing_basic_software"><a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> - <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Web サイトをどんな外見にするか</a></li> + <li id="Installing_basic_software"><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a></li> + <li id="What_will_your_website_look_like"><a href="/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">ウェブサイトをどんな外見にするか</a></li> <li id="Dealing_with_files"><a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い</a></li> <li id="HTML_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML の基本</a></li> <li id="CSS_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS の基本</a></li> <li id="JavaScript_basics"><a href="/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a></li> - <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B">Web サイトの公開</a></li> - <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Web のしくみ</a></li> + <li id="Publishing_your_website"><a href="/ja/docs/Learn/Getting_started_with_the_web/Publishing_your_website">ウェブサイトの公開</a></li> + <li id="How_the_web_works"><a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブのしくみ</a></li> </ul> diff --git a/files/ja/web/html/element/hgroup/index.html b/files/ja/web/html/element/hgroup/index.html index 50fb215618..ac206a5871 100644 --- a/files/ja/web/html/element/hgroup/index.html +++ b/files/ja/web/html/element/hgroup/index.html @@ -9,25 +9,18 @@ tags: - HTML5 - Reference - Web -browser-compat: html.elements.hgroup translation_of: Web/HTML/Element/hgroup --- -<div>{{HTMLRef}}</div> +<div>{{HTMLRef}}{{deprecated_header}}</div> -<div class="notecard warning"> - <h4>Warning</h4> - <p><code><hgroup></code> は使用すべきではありません。どの支援技術も対応しておらず、その結果、その中に配置された見出しの支援に悪影響を及ぼすためです。</p> - <p>詳細については、以下の<a href="#usage_notes">使用上の注意</a>を参照してください。</p> -</div> - -<p><strong><code><hgroup></code></strong> は <a href="/ja/docs/Web/HTML">HTML</a> の要素で、文書のセクションの、複数レベルの見出しを表します。これは <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> 要素のセットをグループ化します。</p> +<p><strong>HTML の <code><hgroup></code> 要素</strong>は、文書のセクションの、複数レベルの見出しを表します。これは <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> 要素のセットをグループ化します。</p> <div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> <table class="properties"> <tbody> <tr> - <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリー</a></th> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>, 見出しコンテンツ, 知覚可能コンテンツ</td> </tr> <tr> @@ -65,7 +58,7 @@ translation_of: Web/HTML/Element/hgroup <div class="note"> <p><code><hgroup></code> 要素は HTML5 (W3C) 仕様から削除されましたが、 WHATWG 版の HTML には依然として含まれています。ほとんどのブラウザーで部分的に実装されており、実装が削除される可能性は低くなっています。<br> - ただし、<code><hgroup></code> 要素の主要な目的は <a href="/ja/docs/Web/HTML/Element/Heading_Elements#the_html5_outline_algorithm">HTML 仕様書で定義されたアウトラインのアルゴリズム</a>によって見出しをどのように表示するかに作用することですが、<strong>どのブラウザーでもアウトラインのアルゴリズムは実装されていないため</strong>、 <code><hgroup></code> のセマンティクスは実際のところ、理論上のものになっています。<br> + ただし、<code><hgroup></code> 要素の主要な目的は <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#the_html5_outline_algorithm">HTML 仕様書で定義されたアウトラインのアルゴリズム</a>によって見出しをどのように表示するかに作用することですが、<strong>どのブラウザーでもアウトラインのアルゴリズムは実装されていないため</strong>、 <code><hgroup></code> のセマンティクスは実際のところ、理論上のものになっています。<br> HTML5 (W3C) 仕様書では、<code><hgroup></code>を使用せずに<a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">副見出し、サブタイトル、代替タイトル、スローガン</a>をマークアップする方法についてアドバイスを提供しています。</p> </div> @@ -73,7 +66,7 @@ translation_of: Web/HTML/Element/hgroup <p>言い換えると、 <code><hgroup></code> 要素は副次的な子の <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> がアウトライン内で独自のセクションを生成することを妨げます。これらの <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> 要素は <code><hgroup></code> の子でなければ通常どおりです。</p> -<p>よって <a href="/ja/docs/Web/HTML/Element/Heading_Elements#the_html5_outline_algorithm">HTML 仕様書で定義されているアウトラインのアルゴリズム</a>で生成される理論的なアウトラインでは、<code><hgroup></code> は全体としてひとつの論理的な見出しを構成します。そして <code><hgroup></code> の子である <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> とともに、理論的なアウトライン内でひとつの論理的な見出しを構成するために<em>複数レベル</em>のユニットとしてのアウトラインになります。</p> +<p>よって <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#the_html5_outline_algorithm">HTML 仕様書で定義されているアウトラインのアルゴリズム</a>で生成される理論的なアウトラインでは、<code><hgroup></code> は全体としてひとつの論理的な見出しを構成します。そして <code><hgroup></code> の子である <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> とともに、理論的なアウトライン内でひとつの論理的な見出しを構成するために<em>複数レベル</em>のユニットとしてのアウトラインになります。</p> <p>このようなアウトラインの (理論的ではない) <em>描画</em>ビューを生成するために、マルチレベルの性質を伝えるため <code><hgroup></code> の見出しをどのように描画するかについて、レンダリングツールのデザインでいくつかの選択が必要です。例えば以下のように、描画されたアウトラインで <code><hgroup></code> を表示するさまざまな方法が考えられます:</p> @@ -118,21 +111,36 @@ translation_of: Web/HTML/Element/hgroup </hgroup> </pre> -<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> +<h2 id="Specifications">仕様書</h2> -<p><code>hgroup</code> が存在すると、見出しグループの副見出しの部分に関して支援技術に報告される情報が削除される可能性があります。</p> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> -<h2 id="Specifications">仕様書</h2> +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> -<p>{{Specifications}}</p> +<p><code>hgroup</code> が存在すると、見出しグループの小見出し部分について支援技術に報告された情報を削除する可能性があります。</p> <h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat}}</p> +<p>{{Compat("html.elements.hgroup")}}</p> <h2 id="See_also">関連情報</h2> <ul> <li>他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> - <li><a href="/ja/docs/Web/HTML/Element/Heading_Elements">HTML5 文書のセクションとアウトライン</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML5 文書のセクションとアウトライン</a></li> </ul> diff --git a/files/ja/web/javascript/reference/global_objects/date/index.html b/files/ja/web/javascript/reference/global_objects/date/index.html index 88a7ea7880..a5e00b4f68 100644 --- a/files/ja/web/javascript/reference/global_objects/date/index.html +++ b/files/ja/web/javascript/reference/global_objects/date/index.html @@ -17,7 +17,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Date --- <div>{{JSRef}}</div> -<p><span class="seoSummary">JavaScript の <strong><code>Date</code></strong> オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。</span> <code>Date</code> オブジェクトは協定世界時 (UTC) の1970年1月1日からの経過ミリ秒数を表現する <code>Number</code> の値を含んでいます。</p> +<p><span class="seoSummary">JavaScript の <strong><code>Date</code></strong> オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。</span> <code>Date</code> オブジェクトは協定世界時 (UTC) の1970年1月1日からの経過ミリ秒数を表現する <code>Number</code> 含んでいます。</p> <h2 id="Description" name="Description">解説</h2> |