JavaScript マニュアル
JavaScriptマニュアルJavaScriptは、ウェブブラウザで動作するプログラミング言語で、ウェブページに動的な要素を追加するために使用されます。HTMLとCSSがウェブページの構造とスタイルを定義するのに対して、JavaScriptはウェブページにインタラクティブな機能を提供します。
JavaScriptでできること
JavaScript：HTMLに直接書き込む
ウェブページに直接HTMLコードやテキストを追加することができます。
document.write("<h1>これはタイトル</h1>");
document.write("<p>これは段落。</p>");JavaScript：イベントに対する反応
今日の日付
<button type="button" onclick="alert('ようこそcodinghaku.com')">クリックしてalert(アラート)メッセージが表示されます。</button>
<p id="js-time">今日の日付</p>
<button type="button" onclick="displayDate()">クリックしてを表示します。</button>
<script>
function displayDate(){
document.getElementById("js-time").innerHTML=Date();
}
</script>
JavaScript：HTMLのコンテンツを変更する
JavaScriptはHTMLのコンテンツを変更することができます。
<p id="js-xinner">
JavaScriptはHTMLのコンテンツを変更することができます。
</p>
<script>
document.getElementById('button1').addEventListener('click', function() {
var xinner = document.getElementById("js-xinner"); // 探す
xinner.innerHTML = "Hello JavaScript!"; // 変える
});
</script>
<button type="button" id="button1">クリック</button>JavaScript：HTMLのスタイルを変更する
JavaScriptはHTMLのスタイルを変更することができます。
<p id="js-htmlstyle">
JavaScriptはHTMLのスタイルを変更することができます。
</p>
<script>
document.getElementById('button2').addEventListener('click', function() {
var htmlstyle = document.getElementById("js-htmlstyle");
htmlstyle.style.color = "#ff0000";
});
</script>
<button type="button" id="button2">クリック</button>JavaScript：入力チェック
数値を入力してください。数値ではないかどうかをチェックします。
もし数値ではない場合、アラートメッセージが表示されます。
<input id="js-isnanx" type="text">
<script>
function myFunction(num) {
var isnanx = document.getElementById("js-isnanx").value;
if(isnanx=="" || isNaN(isnanx)) {
alert("数値ではありません。");
}
}
</script>
<button type="button" onclick="myFunction(3)">クリック</button>
コメント