### Individual MIME Type: example
Source: https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/MIME_types
Explains the `example` MIME type, reserved for illustrating MIME type usage in placeholder contexts, not for real-world code.
```APIDOC
{
"type": "example",
"description": "MIME タイプの使用方法を例示する際のプレイスホルダーとして使用するために予約されています。",
"notes": "これらはサンプルコードのリストや文書の外で使用してはいけません。example はサブタイプとして使用することもできます。例えば、ウェブ上で音声として動作する例として、 MIME タイプの audio/example を使用してタイプがプレイスホルダーであり、実世界で使用されるコードでは適切なもので置き換えられることを表します。"
}
```
--------------------------------
### JavaScript Bitwise OR Assignment Operator Example
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment
Demonstrates the usage of the bitwise OR assignment operator (`|=`) with a simple example, showing the initial value, the operation, and the final result with binary representations.
```javascript
let a = 5; // 00000000000000000000000000000101
a |= 3; // 00000000000000000000000000000011
console.log(a); // 00000000000000000000000000000111
// Expected output: 7
```
--------------------------------
### HTTP POST Method Syntax Example
Source: https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Methods/POST
Illustrates the basic syntax for an HTTP POST request, showing the method and a placeholder path for the resource to which data is being sent.
```APIDOC
POST /test
```
--------------------------------
### CSS for SVG display example
Source: https://developer.mozilla.org/ja/docs/Web/SVG/Reference/Attribute/display
Provides basic CSS styling for HTML, body, and SVG elements to ensure they take full height, setting up the environment for SVG examples.
```css
html,
body,
svg {
height: 100%;
}
```
--------------------------------
### JavaScript Basic Division Examples with Floor
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Division
Provides additional examples of division in JavaScript, including floating-point results and using `Math.floor` for integer division.
```javascript
1 / 2; // 0.5
Math.floor(3 / 2); // 1
1.0 / 2.0; // 0.5
```
--------------------------------
### Basic JavaScript Promise Creation and Resolution
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
A fundamental example demonstrating how to create a new JavaScript Promise using the `Promise` constructor and how to consume its resolved value using the `.then()` method. It simulates an asynchronous operation with `setTimeout`.
```js
const myFirstPromise = new Promise((resolve, reject) => {
// resolve(...) は、非同期で行っていたことが成功したときに呼び出し、失敗したときには reject(...) を呼び出します。
// この例では、setTimeout(...) を使用して非同期コードをエミュレーションしています。
// 実際には、XHR や HTML API のようなものを使用することになります。
setTimeout(() => {
resolve("成功!"); // やった！うまくいった！
}, 250);
});
myFirstPromise.then((successMessage) => {
// successMessage は上記の resolve(...) 関数に渡されたものになる。
// 文字列とは限らないが、成功メッセージだけであれば、おそらくそうなる。
console.log(`Yay! ${successMessage}`);
});
```
--------------------------------
### JavaScript Promise Instance Methods API
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
API documentation for the core instance methods of the JavaScript `Promise` object, detailing their purpose, return values, and how they handle fulfillment and rejection.
```APIDOC
Promise.prototype.catch():
Adds a rejection handler callback to the promise. Returns a new promise that resolves with the return value of the callback when invoked, or resolves with the original fulfillment value if the promise is fulfilled.
Promise.prototype.finally():
Adds a handler to the promise and returns a new promise that resolves when the original promise is settled. This handler is called when the original promise completes, regardless of success or failure.
Promise.prototype.then():
Adds fulfillment and rejection handlers to the promise and returns a new promise that resolves with the return value of the invoked handler. If the promise is not handled (i.e., the associated handlers `onFulfilled` or `onRejected` are not functions), it returns the original resolved value.
```
--------------------------------
### HTML Structure for Interactive Promise Demo
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
Provides the necessary HTML elements, including a button to trigger Promise creation and a `div` element to display log messages, for an interactive demonstration of JavaScript Promises.
```html
```
--------------------------------
### Example HLS Index File (.m3u8) Structure
Source: https://developer.mozilla.org/ja/docs/Web/Media/Guides/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources
Demonstrates the structure of an HLS index file, also known as a playlist, using the .m3u8 format. It includes version, target duration, media sequence, and references to media segments with both old and new style duration formats, ending with the #EXT-X-ENDLIST tag.
```HLS Playlist
#EXT-X-VERSION:3
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:1
# Old-style integer duration; avoid for newer clients.
#EXTINF:10,
http://media.example.com/segment0.ts
# New-style floating-point duration; use for modern clients.
#EXTINF:10.0,
http://media.example.com/segment1.ts
#EXTINF:9.5,
http://media.example.com/segment2.ts
#EXT-X-ENDLIST
```
--------------------------------
### Basic max-width Usage Examples
Source: https://developer.mozilla.org/ja/docs/Web/CSS/max-width
Demonstrates various basic values for the `max-width` CSS property, including pixel, em, percentage, and character units.
```CSS
max-width: 150px;
```
```CSS
max-width: 20em;
```
```CSS
max-width: 75%;
```
```CSS
max-width: 20ch;
```
--------------------------------
### HTML Structure for max-width Example
Source: https://developer.mozilla.org/ja/docs/Web/CSS/max-width
Provides the HTML markup for a section and a div element used in the `max-width` demonstration, allowing for visual changes.
```HTML
Change the maximum width.
```
--------------------------------
### Demonstrate Bitwise AND Assignment (`&=`)
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment
This example shows the basic usage of the bitwise AND assignment operator (`&=`), calculating the bitwise AND of `a` and `3` and assigning the result back to `a`. It includes binary representations for clarity.
```javascript
let a = 5; // 00000000000000000000000000000101
a &= 3; // 00000000000000000000000000000011
console.log(a); // 00000000000000000000000000000001
// Expected output: 1
```
--------------------------------
### General CSS Styles for Layout and Elements
Source: https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
Provides the foundational CSS styles for the page layout, including flexbox for grid arrangement, container styling, and specific styles for notes, cells, and paragraph elements. These styles support the visual presentation of the clipping examples.
```CSS
html,
body {
height: 100%;
box-sizing: border-box;
background: #eee;
}
.grid {
width: 100%;
height: 100%;
display: flex;
font: 1em monospace;
}
.row {
display: flex;
flex: 1 auto;
flex-direction: row;
flex-wrap: wrap;
}
.col {
flex: 1 auto;
}
.cell {
margin: 0.5em;
padding: 0.5em;
background-color: #fff;
overflow: hidden;
text-align: center;
flex: 1;
}
.note {
background: #fff3d4;
padding: 1em;
margin: 0.5em 0.5em 0;
font: 0.8em sans-serif;
text-align: left;
white-space: nowrap;
}
.note + .row .cell {
margin-top: 0;
}
.container {
display: inline-block;
border: 1px dotted grey;
position: relative;
}
.container::before {
content: "margin";
position: absolute;
top: 2px;
left: 2px;
font: italic 0.6em sans-serif;
}
.view-box {
box-shadow:
1rem 1rem 0 #efefef inset,
-1rem -1rem 0 #efefef inset;
}
.container.view-box::after {
content: "view-box";
position: absolute;
left: 1.1rem;
top: 1.1rem;
font: italic 0.6em sans-serif;
}
.cell span {
display: block;
margin-bottom: 0.5em;
}
p {
font-family: sans-serif;
background: #000;
color: pink;
margin: 2em;
padding: 3em 1em;
border: 1em solid pink;
width: 6em;
}
.none {
```
--------------------------------
### JavaScript Startup Function for Page Initialization
Source: https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API/Timing_element_visibility
Initializes the web page by setting up references to the main content area, attaching an event listener for page visibility changes, configuring and creating an IntersectionObserver for ad visibility, building initial content, and starting a periodic refresh interval for ads.
```JavaScript
window.addEventListener("load", startup, false);
function startup() {
contentBox = document.querySelector("main");
document.addEventListener("visibilitychange", handleVisibilityChange, false);
const observerOptions = {
root: null,
rootMargin: "0px",
threshold: [0.0, 0.75]
};
adObserver = new IntersectionObserver(intersectionCallback, observerOptions);
buildContents();
refreshIntervalID = setInterval(handleRefreshInterval, 1000);
}
```
--------------------------------
### Examples of Bitwise AND Assignment with Numbers and BigInts
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment
This example demonstrates the bitwise AND assignment operator (`&=`) with both standard numbers and BigInts, showing how it performs the bitwise AND operation and assigns the result. It includes binary representation for the number example.
```javascript
let a = 5;
// 5: 00000000000000000000000000000101
// 2: 00000000000000000000000000000010
a &= 2; // 0
let b = 5n;
b &= 2n; // 0n
```
--------------------------------
### HTTP Method: GET
Source: https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Status/403
Documents the GET HTTP request method.
```APIDOC
GET
```
--------------------------------
### CSS content Property Syntax Examples
Source: https://developer.mozilla.org/ja/docs/Web/CSS/content
Demonstrates various syntax forms and value types for the CSS `content` property, including keywords, image URLs, gradients, image sets, alternative text, strings, counters, attribute values, quotes, and global values.
```css
/* 他の値と組み合わせることができないキーワード */
content: normal;
content: none;
/* 値 */
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);
/* 生成コンテンツの代替テキスト、レベル 3 の仕様書で追加 */
content: url("../img/test.png") / "This is the alt text";
/* 値 */
content: "unparsed text";
/* 値、任意で */
content: counter(chapter_counter);
content: counter(chapter_counter, upper-roman);
content: counters(section_counter, ".");
content: counters(section_counter, ".", decimal-leading-zero);
/* HTML 属性値にリンクした attr() 値 */
content: attr(href);
/* 言語や位置に依存したキーワード */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;
/* normal と none を除き、複数の値が同時に使用可 */
content: "prefix" url(http://www.example.com/test.png);
content: "prefix" url("/img/test.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);
/* グローバル値 */
content: inherit;
content: initial;
content: revert;
content: revert-layer;
content: unset;
```
--------------------------------
### CSS Styling for min-block-size Example Element
Source: https://developer.mozilla.org/ja/docs/Web/CSS/min-block-size
This CSS snippet applies basic styling to the example element, setting its display properties, background color, and text color to make the min-block-size effect more visible.
```CSS
#example-element {
display: flex;
flex-direction: column;
background-color: #5b6dcd;
justify-content: center;
color: #ffffff;
}
```
--------------------------------
### Advanced JavaScript Promise Chaining and Error Handling
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
This example showcases various techniques for using Promise features and handling diverse situations that may arise. It demonstrates promise chaining with `.then()` calls, error handling with `.catch()`, and final execution with `.finally()`. It also illustrates how API functions can generate and return self-contained Promises.
```js
// エラー処理が経験できるように、"threshold" はランダムにエラーを発生させる。
const THRESHOLD_A = 8; // 0 をエラーとして使用するため
function tetheredGetNumber(resolve, reject) {
setTimeout(() => {
const randomInt = Date.now();
const value = randomInt % 10;
if (value < THRESHOLD_A) {
resolve(value);
} else {
reject(`Too large: ${value}`);
}
}, 500);
}
function determineParity(value) {
const isOdd = value % 2 === 1;
return { value, isOdd };
}
function troubleWithGetNumber(reason) {
const err = new Error("数値の取得に失敗しました", { cause: reason });
console.error(err);
throw err;
}
function promiseGetWord(parityInfo) {
return new Promise((resolve, reject) => {
const { value, isOdd } = parityInfo;
if (value >= THRESHOLD_A - 1) {
reject(`Still too large: ${value}`);
} else {
parityInfo.wordEvenOdd = isOdd ? "odd" : "even";
resolve(parityInfo);
}
});
}
new Promise(tetheredGetNumber)
.then(determineParity, troubleWithGetNumber)
.then(promiseGetWord)
.then((info) => {
console.log(`Got: ${info.value}, ${info.wordEvenOdd}`);
return info;
})
.catch((reason) => {
if (reason.cause) {
console.error("以前扱ったエラーがあります");
} else {
console.error(`promiseGetWord() に失敗: ${reason}`);
}
})
.finally((info) => console.log("完了しました"));
```
--------------------------------
### JavaScript Bitwise OR Assignment Operator Detailed Example
Source: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment
Illustrates a practical use of the bitwise OR assignment operator (`|=`), showing the binary representation of operands and the result to clarify the bitwise operation.
```javascript
let a = 5;
a |= 2; // 7
// 5: 00000000000000000000000000000101
// 2: 00000000000000000000000000000010
// -----------------------------------
// 7: 00000000000000000000000000000111
```
--------------------------------
### HTTP Request Methods Reference
Source: https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers/Permissions-Policy/encrypted-media
Details standard HTTP request methods like GET, POST, PUT, and DELETE, defining their purpose and usage.
```APIDOC
CONNECT
DELETE
GET
HEAD
OPTIONS
PATCH
POST
PUT
TRACE
```
--------------------------------
### SVG Definition of a Network Diagram
Source: https://developer.mozilla.org/ja/docs/Web/SVG/Reference/Element/metadata
This SVG code defines reusable symbols for network components such as a hub, hub plugs, and computers. It then instantiates these symbols to construct a visual representation of a simple computer network, including connections (cables) between the hub and computers. The example also includes basic styling for the SVG elements and metadata for RDF connections.
```html