週末副業記

土日は副業エンジニアのブログです。副業に関することを投稿します。

JavaScript講座[vol.1]-準備&サンプル-


f:id:aisakakun:20160331194257j:plain

 

最近、訳あってJavaScriptを始めないといけない(前から興味はあった)機会があったので、初心者講座として記録していきたいと思い、書き始めることにしました。

できるだけ、わかりやすく書いていきたいと思っておりますので、よろしくお願いいたします。

但し、JavaScript特有のものについての説明は詳しくする予定ですが、他の言語 (ex:Python,C++)などに共通するようなものの説明は省く可能性がございますので、ご了承ください。もしくは、基礎的な講座はPythonの方で行っておりますので、そちらをご覧ください。

infoaisaka.hatenablog.com

 

今回は、JavaScriptをする上で、必要なものの紹介と、

警告画面の表示」をするプログラムを作成する方法を紹介したいと思います。

 

--警告画面画像--

f:id:aisakakun:20160331192836p:plain

 

 

 

・準備するソフト

 

正直わざわざ用意するものはありませんが、テキストエディタを紹介します。

 ・  sublime text

www.sublimetext.com

テキストエディタなら正直なんでもいいのですが、もし気に入っているテキストエディタをインストールしていない方はこちらをインストールしてみてください。

フォントや配色も綺麗なので書いていて心地よいです

 

プログラムを書いてみる

 

テキストエディタの準備もできたところで、早速プログラムを書いていきたいと思います。

[1]

最初にJavaScriptでプログラムを書いていく際に、必要なフォーマットがあります。

それがこれです。

 

とりあえず、これをコピーしてテキストエディタに貼り付けてください。

ファイル名はなんでもいいのですが、とりあえず

sample.html」としてください。

 

[2]

このsample.htmlの<script>で挟まれる間、

<script> ここ </script>

 赤字の「ここ」の部分にプログラムを書いていくことになります。

 

追加するのは一行だけです。

alert("Hello World")

alert = 警告する

という意味で、そのままの意味で、これが警告画面を表示してくれます。

 

[3]

プログラムを書くことはできたので、これをどのようにして実行するのか。

それはまず、ファイルが存在する画面を開いてください。

そして、「sample.html」のところで右クリックをし、

下図のような画面を開きます。

f:id:aisakakun:20160331193447p:plain

これで、SafariまたはGoogle Chromeで開けば、

警告画面が開かれるはずです。

 

上の例では、Google Chromeのものを用いましたが

Safariだとこうなります。

f:id:aisakakun:20160331193844p:plain

 

以上です。