JavaScript Tutorial.2

16867 ワード
JavaScript 名学習 w3schools テキストリンク
JS""も""も利用可能です.
ex)「demo」->「demo」は変更可能
ex) 'document.getElementById("demo").innerHTML = "Hello JavaScript"';
-> "document.getElementById('demo').innerHTML = 'Hello JavaScript'";

JS Introduction


①JavaScript Can Change HTML Content

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>
"JavaScript can change HTML content."IDを「demo」と宣言します.
ButtonをクリックするとinnerHTML=「Hello JavaScript!」運行を宣言する.
RUN結果

ボタンをクリックしたときの結果

②JavaScript Can Change HTML Attribute Values

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>
RUNと「Turnoff the light」ボタンをクリックした場合の結果

「Turn on the light」ボタンをクリックした場合の結果

<img>の使用


ソース(src=source)の画像は、w 3サイトが提供するソースのように見えます.ボタンをクリックしたときに画像ソースを変更することを宣言します.
  • h 2ラベルはidを宣言および変更することもできる
    (注:https://www.w3schools.com/tags/tag_img.asp)

    • ③JavaScript Can Change HTML Styles (CSS)

    <!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html>
    RUN結果

    ボタンをクリックしたときの結果.

    STYLE.FONTSIZE


    フォントサイズを設定または返却するには、このプロパティを使用します.
    (注:https://www.w3schools.com/jsref/prop_style_fontsize.asp)

    ④JavaScript Can Hide HTML Elements

    <!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html>
    RUN結果

    ボタンをクリックしたときの結果.

    STYLE.DISPLAY


    このプロパティを使用してDISPLAY TYPEを設定または戻します.
    (注:https://www.w3schools.com/jsref/prop_style_display.asp)

    ⑤JavaScript Can Show HTML Elements

    <!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html>
    RUN結果

    ボタンをクリックしたときの結果.

    使用<P>


    単一のパラメータシェイプを宣言として表示します.
    宣言時にDISPLAY TYPEを設定可能
    (参照:https://www.w3schools.com/tags/tag_p.asp)
    ScheduledExecutorServiceは、タイミングおよび周期的なタスク実行をサポートする定長スレッドプールです.
    GCDのシリアルキューとパラレルキューおよびdispatch_group