JavaScript入門：初心者向けの基本概念と使い方

JavaScriptは、ウェブブラウザで動作するプログラミング言語で、ウェブページに動的な要素を追加するために使用されます。HTMLとCSSがウェブページの構造とスタイルを定義するのに対して、JavaScriptはウェブページにインタラクティブな機能を提供します。

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>

JavaScript マニュアル