Hello World

WindowsやMacならデスクトップに新規フォルダーをproject1という名前で作成、Linuxならmkdir /var/project1とします。

project1フォルダ内に以下のように3つのテキストファイルを作成。

index.html
style.css
hello.js

index.htmlをテキストエディタで開き、次のように記載します。

<!DOCTYPE html>
<html lang=ja>
<meta charset=utf-8>
<title>JavaScriptテスト</title>
<div id=result_area></div>
<script src=./hello.js></script>

hello.jsをテキストエディタで開き、次のように記載します。

result_area.textContent = "Hello World";

GoogleChromeを開き、index.htmlをドラッグするとHello Worldが表示されれば成功です

本来、Elementを取得するにはdocument.getElementById("ID name")のように記述が必要ですが、直接エレメントのIDを使用することもできます。

ただし、その方法を使う場合はエレメントID名が他のものと被らないようにすることと、ハイフン(-)を使わないことが必要です。ハイフンを使うと変数の引き算とみなしてしまい、エラーが発生します。

本来、エレメントの属性は<div id="result_id">のようにダブルクォーテーションで囲む必要がありますが、その属性値内に=やスペースが入っていなければ省略することができます。

慣れてきたらドンドン省いて、見やすく軽量化することを心がけましょう。