目次
記述の仕方(例)
inputについて
thisを関数の引数にすると面白いことができそう
inputを使わず、buttonを使う場合

記述の仕方(例)

• HTML内で完結させる場合

html

<input type="button" value="ボタン" onclick="console.log(`Hello`)">

実行結果:Hello

• 外部ファイルに関数を用意する場合

html

<input type="button" value="ボタン" onclick="func()">

js

const func = () => {
    console.log("Hello");
}

実行結果:Hello

• 関数を複数実行もできる

html

<input type="button" value="ボタン" onclick="func();func2">

js

const func = () => {
    console.log("Hello");
}
const func2 = () => {
    console.log("World");
}

実行結果:Hello World

inputについて

<FORM></FORM>を構成する部品タグ。
typeでボタンやチェックボックス等の形を指定する。
valueでボタン上に表示するテキストを指定。
onclickではクリックされた際のイベント処理について記述する。

thisを関数の引数に指定すると面白いことができそう

html

<input type="button" value="ボタン" onclick="func(this)">

js

let func = (button) => {
    console.log(button.value);
}

実行結果:ボタン
thisは状況によってその中身が変化する変数。
宣言する必要はなく単体で利用できる。
今回はbuttonの属性valueを指定しました。

• これによりボタンの上に表示されている文字をクリック後に変更することができる

html

<input type="button" value="ボタン" onclick="func(this)">

js

let func = (button) => {
    console.log(button.value = "OK!");
}

実行結果:OK!

inputを使わず、buttonを使う場合

html

<button id="btn">ボタン</button>

js

const x = document.getElementById(`btn`);

x.addEventListener(`click`, func = () => {
    console.log("OK!");
});

実行結果:OK!

JavaScriptの記述について

JavaScriptはHTML上では

html

<script>
   //ここに記述します
</script>

外部ファイルから出力する場合は

html

<script src="example.js"></script>

そして外部ファイルにexample.jsを用意してそこに記述。

JavaScriptサンプルコードを用いての動作確認

html

document.write(`Hello`);
document.write(`<h1>Hello</h1>`);

実行結果:Hello
実行結果:h1としてHelloを表示してくれる
ページ上に文字を出力。

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById("example"));
</script>

実行結果:<p id="example">Hello</p>
exampleをIDとして取得し、exampleが含まれているpタグ全体をコンソールに表示。
classの場合はgetElementByClassNameを使う

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById("example")textContent);
</script>

実行結果:Hello
一つ前の例のテキストだけを取得し、コンソールに表示。

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById(`example`).innerHTML);
</script>

実行結果:Hello
HTMLで動作するのと一緒の内容でidを取得してくれる

html

<div id="wrap"></div>
<script>
    const box = document.getElementById('wrap');

    //新規にp要素を出力
    box.innerHTML = '<p>こんにちは</p>';
</script>

実行結果:こんにちは
空要素のdivの中に新たにp要素を出力している。

補足事項

• documentとはWebページを構成しているHTMLソースそのもの
• innerHTMLとtextContentの違いはinnerHTMLはタグをHTMLとして解釈してくれる。 　一方でtextContentはテキストの内容を表示するだけ。 テキストの内容だとわかっていればtextContentを使ったほうがいい。

JavaScriptの記述について

JavaScriptはHTML上では

html

<script>
   //ここに記述します
</script>

外部ファイルから出力する場合は

html

<script src="example.js"></script>

そして外部ファイルにexample.jsを用意してそこに記述。

JavaScriptサンプルコードを用いての動作確認

html

document.write(`Hello`);
document.write(`<h1>Hello</h1>`);

実行結果:Hello
実行結果:h1としてHelloを表示してくれる
ページ上に文字を出力。

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById("example"));
</script>

実行結果:<p id="example">Hello</p>
exampleをIDとして取得し、exampleが含まれているpタグ全体をコンソールに表示。
classの場合はgetElementByClassNameを使う

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById("example")textContent);
</script>

実行結果:Hello
一つ前の例のテキストだけを取得し、コンソールに表示。

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById(`example`).innerHTML);
</script>

実行結果:Hello
HTMLで動作するのと一緒の内容でidを取得してくれる

html

<div id="wrap"></div>
<script>
    const box = document.getElementById('wrap');

    //新規にp要素を出力
    box.innerHTML = '<p>こんにちは</p>';
</script>

実行結果:こんにちは
空要素のdivの中に新たにp要素を出力している。

補足事項

• documentとはWebページを構成しているHTMLソースそのもの
• innerHTMLとtextContentの違いはinnerHTMLはタグをHTMLとして解釈してくれる。 　一方でtextContentはテキストの内容を表示するだけ。 テキストの内容だとわかっていればtextContentを使ったほうがいい。

JavaScriptの記述について

JavaScriptはHTML上では

html

<script>
   //ここに記述します
</script>

外部ファイルから出力する場合は

html

<script src="example.js"></script>

そして外部ファイルにexample.jsを用意してそこに記述。

JavaScriptサンプルコードを用いての動作確認

html

document.write(`Hello`);
document.write(`<h1>Hello</h1>`);

実行結果:Hello
実行結果:h1としてHelloを表示してくれる
ページ上に文字を出力。

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById("example"));
</script>

実行結果:<p id="example">Hello</p>
exampleをIDとして取得し、exampleが含まれているpタグ全体をコンソールに表示。
classの場合はgetElementByClassNameを使う

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById("example")textContent);
</script>

実行結果:Hello
一つ前の例のテキストだけを取得し、コンソールに表示。

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById(`example`).innerHTML);
</script>

実行結果:Hello
HTMLで動作するのと一緒の内容でidを取得してくれる

html

<div id="example"></div>
<script>
    const box = document.getElementById('example');
    box.innerHTML = '<p>Hello</p>';
</script>

実行結果:Hello
空要素のdivの中に新たにp要素を出力している。

補足事項

• documentとはWebページを構成しているHTMLソースそのもの
• innerHTMLとtextContentの違いはinnerHTMLはタグをHTMLとして解釈してくれる。 　一方でtextContentはテキストの内容を表示するだけ。 テキストの内容だとわかっていればtextContentを使ったほうがいい。