見出し画像

JavaScriptだけでホームページ

donguri

JavaScriptだけでホームページを作るタグを作って表示させることができます。使う命令は

document.createElement()

と

body.appendChild()

基本の形です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ホームページ</title>
</head>

<body>
 
<script>

window.onload = function() {

 //　ここに処理を書きます。

}

</script>

</body>

</html>

以下のコードを追加して実行すると

<body>

  <script>
　　　var area = document.createElement('div');

　　　area.innerHTML = '新しく追加したdivの中に文字を入れています';
    
　　　document.body.appendChild(area);

  </script>

</body>

画面上には"新しく追加したdivの中に文字を入れています"と表示されます。

<div></div>を作ります(まずは準備なのでこれだけでは表示されません)。　　

var area = document.createElement('div');

<div></div>を作ってタグの中に文字を入れます。

area.innerHTML = '新しく追加したdivの中に文字を入れています';

以下の命令でbodyで囲われているところに文字を表示するようにします。
bodyにノードを追加(append)  

document.body.appendChild(area);

HTMLをDOMの仕組みを使ってJavaScriptで操作します。

DOMとは「Document Object Model」の略。プログラムからHTMLを自由に操作するための仕組み。


参考サイトです。


スクリプトを書く場所

<body>タグに直接書いていく方法

<body>

  <script>
var area = document.createElement('div');

area.innerHTML = '追加された要素です。';
document.body.appendChild(area);
    
  </script>
  

</body>

<head>内にリンクして外部ファイルに書いていく場合

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
　<script src="main.js"></script>
</head>

スクリプトファイルには

の場合は

window.onload = function foo()

function foo(){
 // 処理
}

もしくは

window.onload = function() {

// 処理の内容

}

のように関数の処理を書いていきます。




この記事が気に入ったらサポートをしてみませんか？