JavaScriptを使ってみます。
◆環境
| OS |
Windows 10 Home 20H2 64bit |
| Browser |
Google Chrome 141.0.7390.125 (Official Build) |
- HTML内に直接記述
- JavaScriptファイルを外だし
- console.logとwindow.alert
- Pタグの内容の書き換え
HTML内に直接記述
HTML内に直接document.write()を記述してみます。
|
YMWHTML10301.html
|
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
|
<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript (1)</title>
</head>
<body>
<script>
document.write('Hello JavaScript!!');
</script>
</body>
</html>
|
|
ブラウザで開いてみます。
document.write()の位置に「Hello JavaScript!!」と表示されました。
JavaScriptファイルを外だし
JavaScriptファイルをYMWHTML1032.jsというファイルに記載し、HTMLからはscriptタグのsrc属性でjsファイルを指定するようにしてみます。
|
YMWHTML10302.html
|
1:
2:
3:
4:
5:
6:
7:
8:
9:
|
<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript (2)</title>
</head>
<body>
<script src="YMWHTML10302.js"></script>
</body>
</html>
|
|
jsファイルにdocument.write()を記載します。
ブラウザで開いてみます。
期待通りに動作しました。
console.logとwindow.alert
console.logとwindow.alertを使ってみます。
|
YMWHTML10303.html
|
1:
2:
3:
4:
5:
6:
7:
8:
9:
|
<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript (3)</title>
</head>
<body>
<script src="YMWHTML10303.js"></script>
</body>
</html>
|
|
console.logとwindow.alertを記載します。
|
YMWHTML10303.js
|
1:
2:
3:
|
document.write('Hello JavaScript!!');
console.log('Hello JavaScript for console!!');
window.alert('Hello JavaScript for alert!!');
|
|
ブラウザで開いたところwindow.alertのメッセージが表示されましたのでOKを押します。
ブラウザのDevToolのConsoleを表示したところconsole.logのメッセージが表示されていました。
期待通りに動作しました。
Pタグの内容の書き換え
JavaScriptでPタグの内容を書き換えてみます。
|
YMWHTML10304.html
|
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
<!doctype html>
<head>
<meta charset="utf-8">
<title>JavaScript (4)</title>
</head>
<body>
<p name="info1">情報１</p>
<p name="info2">情報２</p>
<p id="info3">情報３</p>
<script src="YMWHTML10304.js"></script>
</body>
</html>
|
|
querySelectorとgetElementsByNameとgetElementByIdの方法で書き換えるようにしてみます。
|
YMWHTML10304.js
|
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
|
window.alert("情報１を書き換えます。");
document.querySelector('p[name="info1"]')
.textContent = 'querySelectorで書き換えました！';
window.alert("情報２を書き換えます。");
document.getElementsByName('info2')[0]
.textContent = 'getElementsByNameで書き換えました！';
window.alert("情報３を書き換えます。");
document.getElementById('info3')
.textContent = 'getElementByIdで書き換えました！';
|
|
ブラウザで開くとalertのメッセージが表示されたのでOKを押します。
次のalertのメッセージが表示されましたがブラウザ上では書き換わりませんでした。OKを押します。
OKを押します。
表示が書き換わりました。
一つずつ書き換わる動作を期待しましたがJavaScriptの動作が全部終わったタイミングで一気に書き換わったように見えます。
▲ PageTop ■ Home
Copyright (C) 2025 ymlib.com
