JavaScriptの学習をスタートしてみる
仕事でホームページ関係も少しいじるので、JavaScriptを改めて学習してみようと思う。ここではベーシックな部分を中心に書いてみたい。
JavaScriptは主にウェブブラウザ上で実行するインタプリタ言語で、HTMLと連携しながら利用することが多い。登場した当時はブラウザ上での装飾程度の利用だったが、どんどん拡張され、GoogleMap以降は本格的に使われるようになった。HTML5からはFlashも消えはじめ、ウェブサイト構築に必須のプログラム言語になったように思う。 そもそも名前が当初流行っていたJavaとお手軽命令という感じのScriptの組み合わせ。なんとも気合もポリシーもない言語。そんな言語がいつの間にか、脚光を浴びるようになってしまった。
開発環境はテキストエディタとブラウザがあればOK。最近のブラウザであればコンソールも表示できるので何かと便利。またスクリプト言語なのでコンパイルの必要もなく本当にお手軽。
外部ファイル .jsが拡張子 複数のHTMLファイルで利用する場合
HTML <head> 内 ボディよりも先に読込まれる
HTML <body> 内 表示するような内容であればここに記述
HTML タグ内 ちょっとしたことならここに記述可能
ここで使うhtmlファイルは以下を雛形とする。文字コードはUTF-8で保存する。 また <body> にはJavaScriptと連携するフォームやボタン、canvasなども配置する。
上記を実行すると以下のようになる。これはGoogle Chromeのスクリーンショット。上段がページで、下段がコンソールとなっている。表示方法はツールのJavaScriptコンソールを選択すればよい。
DOMを意識した書き方なので、やや手続きが多い。bodyに書いた理由はhtmlの<div>タグを先に読ませる必要があるため。<div>はブロック要素で、ひとつのまとまった単位を示すもの。スクリプトは"stdout"という id を持った空のdiv要素に"Hello World!"を埋め込むプログラムになっている。document.getElementById("id")は id を指定する。textContent は、その要素の text 部分にアクセスするためのプロパティで、上記は空となっている。ここに文字があれば、その文字と置き換わる。
JavaScript 目次
JavaScriptは主にウェブブラウザ上で実行するインタプリタ言語で、HTMLと連携しながら利用することが多い。登場した当時はブラウザ上での装飾程度の利用だったが、どんどん拡張され、GoogleMap以降は本格的に使われるようになった。HTML5からはFlashも消えはじめ、ウェブサイト構築に必須のプログラム言語になったように思う。 そもそも名前が当初流行っていたJavaとお手軽命令という感じのScriptの組み合わせ。なんとも気合もポリシーもない言語。そんな言語がいつの間にか、脚光を浴びるようになってしまった。
開発環境はテキストエディタとブラウザがあればOK。最近のブラウザであればコンソールも表示できるので何かと便利。またスクリプト言語なのでコンパイルの必要もなく本当にお手軽。
HTMLに記述する方法で学習
JavaScriptを記述できる箇所は以下のように複数あるが、ここではHTML内に記述する範囲で書いていくつもり。外部ファイル .jsが拡張子 複数のHTMLファイルで利用する場合
HTML <head> 内 ボディよりも先に読込まれる
HTML <body> 内 表示するような内容であればここに記述
HTML タグ内 ちょっとしたことならここに記述可能
ここで使うhtmlファイルは以下を雛形とする。文字コードはUTF-8で保存する。 また <body> にはJavaScriptと連携するフォームやボタン、canvasなども配置する。
空htmlファイルのソース
|
まずはHelloWorldから
<head> にJavaScriptを記述。Hello Worldをコンソールに表示させるプログラム。コンソールはブラウザによってはエラーが起きる可能性があるので、実際の運用には時期尚早だが、開発時のチェックには便利。
|
上記を実行すると以下のようになる。これはGoogle Chromeのスクリーンショット。上段がページで、下段がコンソールとなっている。表示方法はツールのJavaScriptコンソールを選択すればよい。
ページにHelloWorldを出力してみる
|
DOMを意識した書き方なので、やや手続きが多い。bodyに書いた理由はhtmlの<div>タグを先に読ませる必要があるため。<div>はブロック要素で、ひとつのまとまった単位を示すもの。スクリプトは"stdout"という id を持った空のdiv要素に"Hello World!"を埋め込むプログラムになっている。document.getElementById("id")は id を指定する。textContent は、その要素の text 部分にアクセスするためのプロパティで、上記は空となっている。ここに文字があれば、その文字と置き換わる。
JavaScript 目次