WEB 初心者向け

【初心者向け】JavaScript無料学習(前編)

はじめに

短時間で読めるようにJavaScriptで出来ることを広く浅くご紹介します。

前編ではJavaScriptの歴史の紹介、カンタンな実行方法、基本的な文法についてご説明します。

後編はDOMの操作とイベント処理、JQuery、Ajax(紹介のみ)についてご説明します。

この記事を読んで欲しい方

  • WEBプログラミングを始めてみたい方
  • JavaScript初心者

JavaScriptの歴史

JavaScriptNetscape Communication社によって1995年に世の中に発表されました。

最初はLiveScriptという名前だったそうですが、Netscape Communication社と業務提携していたサン・マイクロシステムズ社が開発したJavaの名前をもらい、JavaScriptになったとのこと。

私がプログラマーになった1999年当初は個人ホームページが大流行していてJavaScriptが積極的に使われていましたが、Internet ExplorerとNetScape NavigatorでJavaScriptの言語仕様に差異(方言)があったり、セキュリティ上問題となるJavaScriptが埋め込まれたWEBサイトが増えたりと、評判は良くなかったと思います。

しかし2005年にAjaxAsynchronous JavaScript + XML)が登場し状況は一変します。Ajaxで実現された最も有名なアプリはGoogle Mapです。Asynchronous という言葉の通り画面遷移しなくてもWEBブラウザとWEBサーバが非同期通信してページを更新することが可能となり、動きが多いのに待ち時間を感じさせない(ノンブロッキングな)WEBページが増えていったのです。

最近ではNode.jsを使ってサーバサイドでJavaScriptを実行したり、ElectronというJavaScriptで作られたアプリケーションワークでAtomというデスクトップで動作するエディタが作られたりと、目覚ましい進化を遂げ今に至ります。

JavaScriptの実行方法

主に3種類の方法でJavaScriptを実行できます。

①<script>タグでHTMLに直接埋め込む方法

type1.htmlというファイルを作成しエディタ(UTF-8が指定できるもの)で以下の内容を入力し保存。type1.htmlをブラウザで開くと以下のメッセージが出ます。alertという関数でポップアップメッセージを表示させています。

 type1.html
<!DOCTYPE html>
<html lang="Ja">
<head>
</head>
<body>
<script type="text/javascript">alert("Hello JavaScript")</script>
</body>
</html>
②JavaScriptファイル(*.js)をHTMLから参照する方法

type2.htmltype2.jsいう2つのファイルを作成しエディタ(でそれぞれ以下の内容を入力し保存。type2.htmlをブラウザで開くと以下のポップアップメッセージが出ます。

 type2.html
<!DOCTYPE html>
<html lang="Ja">
<head>
</head>
<body>
<script type="text/javascript" src="type2.js></script>
</body>
</html>
 type2.js
alert("Hello JavaScript")
③サーバサイドで実行する方法

Node.jsというソフトを使うとサーバサイドでJavaScriptを実行することが可能です(ローカルPCにサーバを立てることもできます)。

 

これがJavaScriptで書いたWEBサーバプログラムです。たったの5行。

 type3.js
var http = require('http);
http.createServer( function( req, res ){
res.writeHead( 200, { 'Content-Type' : 'text/plain' } );
res.end( 'hello Node.js' );
}).listen( 1234, '127.0.0.1' );

 

このプログラムをローカルPCにインストールしたNode.js(nodeコマンド)で以下のように実行すればWEBサーバとして動作しますので、ブラウザを立ち上げアドレスバーにhttp://127.0.0.1:1234と打ってリターンするとHello Node.jsと表示されます。

 command
$ node type3.js

 

【参考】

Node.jsについて詳しく書いてあるページを見つけました。大枠を知るのに大変役立ちます。

冒頭にも書きましたがNode.jsとChromium(Google CromeとかOperaもベースにしてるオープンソースブラウザ)をベースとしたElectronというマルチプラットフォーム対応のアプリ開発環境があります。HTML、CSS、JavaScriptでアプリ開発できるとのこと。Atom、Skype、VSCodeはElectronで作られてるそうです(AdobeのBlacketもNode.jsとChromiumを使っていて似た感じです)。

Node.jsについては別の記事を書く予定です

次のページへ >

  • この記事を書いた人
  • 最新記事

ペイヴメント

【名前】ペイヴメント 【職業】技術系サラリーマン 【住まい】東京 【好きなもの】プログラミング全般、デジタルガジェット、レトロゲーム、ライフハック、文房具、読書、家庭菜園、バンド演奏、お酒 【自己紹介】奥さん・息子2人とお気楽に暮らしています。

-WEB, 初心者向け

Copyright© ペイヴメントのエンジニア塾 , 2020 All Rights Reserved.