広告
【プログラミング入門】【JavaScript】 2日目 最初の設定と実行、エラーの消し方
ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！
難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。
簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。
必要な設定をしよう！
2日目の今回はJavaScriptを動かす為の必要な設定をしていきます。
拡張子を表示しよう！
まずは拡張子(かくちょうし)を表示します。
拡張子っていうのはファイルの種類を表すものでウィンドウズの場合はこの拡張子をもとにファイルの種類を判別しております。
ファイルの種類っていうのはたとえば「エクセル」ファイルですよ！とか「画像」ファイルですよ！とかそんな感じです。
エクセルファイルだとファイル名のお尻に「.xlsx」、同じく画像ファイルだと「.jpg」などのような文字がくっつきます。
これは普段隠れているので、それを表示します。
(ウィンドウズ10の場合のやり方を説明します。それ以前のウィンドウズだとやり方が異なる場合がありますので「win8 拡張子 表示」などのキーワードでインターネット検索してみてください)
何もしない状態だと・・・、
ファイル名のお尻には何も表示されてません。(オレのパソコンはすでに「.jpg」とか「.txt」とか「.xls」ってファイル名のお尻に表示されてるよって場合はこの後の設定はしなくて大丈夫です)
ではデスクトップの下のメニューアイコンからフォルダマークを選択してフォルダ画面を表示してください！
そしてフォルダ画面上部の「表示」ボタンを選択(上部のメニューが表示されてない場合は「alt」キーを一度押してみてください)
出てきたメニューの中の「ファイル名拡張子」という部分にチェックを入れれば設定は完了です！
拡張子が表示されました！
※ファイル名を変える時などに拡張子の部分まで変えてしまうとファイルが開かなくなる恐れがあるのでご注意ください！
「html」ファイルを作ろう！
拡張子が表示されたトコロで次は「html」ファイルを作ります！
「html」ファイルはホームページ用のファイルでしたね。
まずデスクトップ上の何もないところで右クリックして出てきたメニューの「新規作成」から「テキストドキュメント」というのを選択します。
「新しいテキストドキュメント.txt」というファイルが作られました。
次にこのファイルの名前を変更します。
名前は何でもいいですが、仮に「test」という名前にしてみます。
この時に！そうです！後ろの拡張子の部分も変更するのです。
「test.html」と変更します！
すると・・・、
メモ用紙みたいなアイコンマークが「マイクロソフトエッジ」の「e」マークに変わりました！
これでただのテキストファイルが「ブラウザ」で実行できる「html」ファイルに変わりました！
(普段使うブラウザをグーグルクロムなどに変更しているとそのブラウザのアイコンに変わります)
広告
実行してみよう！
試しに簡単なプログラムを書いて実行してみましょう！
先ほどの「test.html」というファイルの上で右クリック、出てきたメニューの中から「プログラムから開く」→「メモ帳」を選択してください。
(最初はプログラムの項目にメモ帳が表示されていない場合がありますので、項目の下のほうから他の表示されていないプログラムを選択できるのでそちらから探して選択してください)
これでプログラムを編集できる状態になります。
次のプログラムをコピペして保存して一度ファイルを閉じてください！
<!DOCTYPE html>
<html>
<head>
<script>
alert("プログラミング入門へようこそ！");
</script>
<title>プログラミング入門</title>
</head>
<body>
</body>
</html>
ファイルを保存して閉じたらいよいよ実行してみます。
ファイルをダブルクリックしてみてください！
結果・・・
このようなメッセージが現れれば成功です！
※もしこのようなメッセージが出現した場合は、
これはホームページに潜んだ危険なプログラムなどを実行しないようにする為の警告になるのですが、今回は自分で作ったプログラムを実行するだけなので気にせず「ブロックされているコンテンツを許可する」をクリックして実行してみてください！
エラーの時
エラーの時はウィンドウだけ開いて何も表示されません！
こんな感じになります。
プログラムの文字が抜けていないかなど丁寧に確認してみてください。
次回はいよいよプログラミングに移っていきたいと思います。
次回
広告
広告
Copyright 2016 K.N/petitetech.com