Sun Eternity ジャバスクリプトに挑戦してみた
FC2ブログ
プログラミング開発日記やゲームレビューやPCの役立ち情報などのさまざまなことを紹介&ネタでお届けするサイトです

ジャバスクリプトに挑戦してみた

今回は管理人の作成した「World-Word-翻訳」を対応させるために、
JS(ジャバスクリプト)を習得したのですが・・・

翻訳機のjs版は拍子抜けするぐらい簡単に作成できたのですが、
ついでにということでこの際ですから、JSもチャレンジしてみることにしました。

しかし。。。ここのコンテンツは「C言語初心者プログラミング日記」ということで
JSとは関係ないのですが・・・気にせずいきましょう。詳細は続きから
【はじめに】

*今回の記事は管理人がJS(ジャバスクリプト)を習得する上での感想的な記事と
なっております。

ちなみにネット上の検索エンジンで「JS」と検索すると、
なぜかサッカーチームが検索されますので、JSについての資料を調べるときは
「ジャバスクリプト」と検索するか「JAVAスクリプト」または「javascript」と検索しましょう。



【概要】

まずはJAVAスクリプトについてわからない人のために簡単な概要を説明したいと思います。

~引用~

JavaScript とは、Netscape Communications 社が開発したプログラミング言語です。同社の Netscape Navigator 2.0 で初めてサポートされ、Microsoft 社の Internet Explorer 3.0 でも同様の機能がサポートされました。

JavaScript を用いることにより、ブラウザで表示するウェブページの上で、フォームに入力した値をチェックしたり、時刻を表示したり、さらにはゲームまでできたりします。


■ JavaScript と Java の関係は?

JavaScript とよく似た名前のプログラミング言語に、Sun Microsystems 社が開発した Java があります。Java と JavaScript は名前もよく似ていますし、いずれも C 言語を祖先として生まれた言語なので記述もよく似ていますが、まったく別物です。英語とドイツ語くらいの違いがあります。

JavaScript は元々 LiveScript という名前で開発されていましたが、Java が流行しはじめたことや、Netscape 社と Sun 社が技術提携したこともあり、JavaScript と名前を変えたようです。


■ ダイナミックHTMLとの関係は?

DHTML(ダイナミックHTML)は Internet Explorer 4.0 や Netscape Communicator 4.0 でサポートされた技術で、JavaScript、スタイルシート、レイヤ、フィルタ、ダイナミックフォントなどの技術の総称です。両者が独自に開発したため、中身はいろいろと異なるのですが、JavaScript は両社に共通するダイナミックHTMLの中核となる技術ですので、しっかり押さえておきましょう。

~引用END~


要約すると・・・

HTML文章にJAVAスクリプト(構文)を加えて、
HTML&CSSではできなかった。 処理をしてみよう!
ということです。

管理人は小難しいことはあまり話したくないので上記の文もとことん要約しました。

簡単に説明すると
背景など知らなくても構文を書けば動作するのでプログラムの背景なんてたいした問題ではない

PCでいいますと
PCの内部構造&処理内容を知らなくてもPCは使える

というのと同じことです。

上記のことはきっちりとした人は概要まできっちりと読んでしまい
そこで「も~嫌だ!」なんていう風になってしまう方というのは結構多いと思います。

ある程度のAbout(適当)さもプログラミングをするときには必要ですからね。

・・・っと話がずれましたが、とりあえず感想に入りたいと思います。




【JSを習う上での感想】

とりあえず、JSを習得しようとかの有名な「とほほ入門」から初めてみたのですが・・・
とほほ入門JS参考サイト


一言:こりゃC言語ですよね?


といったかんじでした。

というのも宣言の仕方という関数の作り方といい
全体の構文はC言語をやや優しくしたような感じの構文となっています。

関数&変数宣言時はC言語でしたら「int」や「double」やら「long」やら「short」やら「char」という風に、
主に文字列用や、各コンパイラによるバイト数によって取り扱う宣言の型名での変数が違う・・・

・・・っとなんだか長くなりそうになりましたので、ここらへんできりますが、
要約するとC言語では「宣言の型名がいろいろある」ということです。

例えばC言語では整数の「1」を宣言&代入したいときは

int hennsuu=1;

というようにしていましたが、JAVASCRIPTでは

hennsuu=1;

というように、するだけで[hennsuu]の部分に1が代入されます
(=←はプログラミングでは主に代入という意味)

このことから想像できるようにC言語時の「型名の制約」がジャバスクリプトではないため、
数値の扱いは比較的容易だと想像ができます(ふぅ~・・・よかったぁ~~)

他にも主にループを表すfor文 はというと


例:ダイアログボックスを10回出すスクリプト構文

<script type="text/javascript" language="javascript">//Script構文宣言//はコメント
<!--
function yobidasi;  //関数宣言
for(i=0;i<10;i++){  //最初にi=0で初期化後i++にて一つずつ代入をしiが10になるまでループする
alert('"+i+"回目の表示です');  //alertは警告ダイアログボックスの呼び出し
}
-->
</script>

と最初の方に宣言しておき

<a OnClick="yobidasi()">呼び出しましょうかね・・・</a>


というようにするだけで、関数yobidasi
を呼び出してJSの構文を動作させることが出来ます。

このスクリプトの動作結果は、リンクをクリックすると関数のyobidasiが呼び出され
i++(i++は1増えるという意味)にて1回目の表示です。
2回目の表示です。というように呼び出された回数ごとに数値が上がっていきます。
そして、変数iが10になるとi<10の構文は「偽」になるため、ここでループから抜けることになります。

C言語でもあるようにfor(i=0;i<10;i++)の構文はおなじみですね。

C言語で言う型名に当たる部分がJavaScriptではfunctionという文にて動作するのですね。
大体、上記のことがわかっただけでも殆どの文法は読み解くことが可能だとお思います。

結論から言いますと、JavaScriptの構文はその文法の基本構文さえ知ってしまえば、
後は割と簡単に読み解くことができるということがわかりました。


例えばdocumetn.writeならば文字を書くという意味ですし
navigator.userAgentならユーザーが現在使用しているブラウザなどのデータが取得できます。

要約すると、検索エンジンなどでわからない文法を調べていくだけで、
基本構文がある程度わかっている場合は、
案外すんなりとJSを作成することができるということですね。

とはいっても、凄く応用&試行錯誤のされた
JS文は さすがに作るのも読み解くのも一筋縄ではいきませんがね・・・


このJavaScriptはとても、簡単(初期)で応用範囲&実用範囲も広いプログラミング言語なので、
プログラミングを行ったことのない&初心者の方にも十分おすすめできる言語ですね。

JSに初めて触れる方は、すぐにでも実用的なスクリプトが覚えられるこちらの
JavaScript入門がおすすめです。

最初の方に書いたとほほ入門は情報量は莫大ですが、やや初心者の方が
スクリプトを書きながら構文が動作していくという
喜びを覚えるのには、少し難しいかな~・・・と・・・




【自分の学習方法】


いろいろ書きましたが、

「管理人さんは、どういった学習方法で取り組んでいるのですか?」

といった、質問もあると思いますので、回答させていただきます。

自分の学習方法ではFC2共有プラグイン作者の書いたスクリプト構文を見て、
それを問題集のようにスクリプトの流れなどを、
コメントをしながら、読み解いていっています。
自分の場合の学習方法の一つとして、FC2の共有プラグインなどのJS構文などを
読み解いたりしました。

~プラグインに直接JS構文が無い場合は~
src="ファイルパス.js"というような拡張子[js]というのがあると思いますので、
そこにJSの構文が書かれていますので、そのJSの構文に直接アクセスして、読み解きましょう。

そしたら、意外や意外・・・案外複雑そうに見えるJS構文でもひとつひとつ意味を調べながら
読み解いていくとすんなりとその構文の流れを理解することが出来たのです。


もちろん、ただ構文を理解するだけではなく一度その構文を
自分自身でキーボードからも 打っていきます。


これは、漢字の読み書きとかでもおなじみの学習方法ですね。

ある程度、こういう構文の打ち方はなれておいた方がこれからのプログラミングに役に立つな~と
今では日々実感している毎日でもあります。

とある人が行っていたことで。

「ソースは自分の手でキーボードから打つ習慣をつけておくことが重要」

という言葉がありましたが、今なら

「あ~、そういうことだったのか・・・」と納得できますね。

もちろん、あまりキーボードから打ちすぎて

「もー飽た!」

となってしまっては元も子もないので、
それは自分の読み書きのバランスを考えて作成致しましょう。

自分の場合は読み過ぎて飽きた・・・書きすぎて飽きたというのが交互に訪れます。

その場合は、別のことをしだすか読みをしていたら書きをする。
または書きをしていたら読みの学習に移行するというようにしています。

そして、最悪どちらにも飽きたという場合は覚えるつもりなんて全くない!
ただ、読んでる(見てる)という状態で文章を読んでいきます。


しかし、これが意外や意外・・・
この集中力のかけらもない学習方法でも習得することは案外きっちりと習得しているものです。

これは、脳が処理をするデータ(情報)などがないと、結局何も覚えることが出来ないので
学習する気もなんにもなくただ気軽に読んでいる(とにかく情報を格納)だけでも、
 脳に情報が格納されていき勝手に情報処理をしてくれているということですね。


・・・が、やっぱり集中している方が学習効率は高いです(笑)

自分は作業に飽きた場合はよく上の学習方法を行っています。

そこらへんは、自分の現在のやる気などと相談しながら、
マイペースにプログラミングをしていけばいいと思います。
コメント
なるほど
JavaScriptを習得するとサイトデザインの幅なんかも広がり、いいですね。
自分はプログラミングのことは何も知らない人間ですが、C言語に似ているというのは、よく聞きます。

私はまだ、HTMLやCSSで四苦八苦しているレベルですから、JavaScriptなんぞに手を出すのは早すぎですが、そちらがある程度のレベルに達したら挑戦してみたいですね。

と言っても、まだまだ気が遠くなるほど先の話ですが・・・。

自分のサイトには、JavaScriptライブラリのjQueryなどを使っていますが、HTMLやCSSと違って、今はまだ文法構造がまるで分からないのでミスがあっても修正できないのが痛いですね。

HTMLやCSSは、最初は何も分からないまま適当に読んだり試行錯誤したり、いろいろなサイトのソースを拝見して参考にしたりしているうちに、いつの間にかある程度分かるようになってきたという感じですかね。

ん~、プログラミングってそういうものなんでしょうか???

自分はものぐさな人間なので、本格的に学習しようとすると、途中で投げ出してしまいそうですw

2009/01/07(水) 12:00 | URL | antares #-[ コメントの編集]
ええ
>アンタレスさん

本当にJavaScriptはC言語とよく似ていますね。
上記の文でも、C言語と似せて作成してあると書いていますが、
まさにそのとうりだと思います。

>私はまだ、HTMLやCSSで四苦八苦しているレベルですから、JavaScriptなんぞに手を出すのは早すぎですが、そちらがある程度のレベルに達したら挑戦してみたいですね。

自分もJavaScriptを改めて、覚えたのは最近なのですが、
結構簡単なプログラミング言語だな~といった感じでしたね。

ですが、実用性の高いプラグインのソースなどを見ると、
一筋縄では読解は出来ませんがね・・・

やっぱり、自分ではある程度しっかりと学習している方の方には、
遠く及びませんね。


>自分のサイトには、JavaScriptライブラリのjQueryなどを使っていますが、HTMLやCSSと違って、今はまだ文法構造がまるで分からないのでミスがあっても修正できないのが痛いですね。

う~ん。。。自分はjQueryに関しては殆ど無知ですね。
JSの拡張版というぐらいの知識しかありません。

それでも、焦らず一歩一歩読解していけば必ず、
アンタレスさんなら理解できると思いますよ。


>HTMLやCSSは、最初は何も分からないまま適当に読んだり試行錯誤したり、いろいろなサイトのソースを拝見して参考にしたりしているうちに、いつの間にかある程度分かるようになってきたという感じですかね。
ん~、プログラミングってそういうものなんでしょうか???

そうですね~。
HTMLとCSSに関しては、Web上にも多くの例題が
ありますし、自分たちのようなブログやHP運営者にとっては
よく目に触れる機会も多いですからね。
自分もいつの間にかある程度わかるようになってきたという感じですね。

HTMLやCSSの構文はHTMLでしたら<>で囲えばOKですし、
CSSでは.cssdesu dd{}などはcssdesuのクラスのddを適用させるという意味になりますし、HTMLとCSSは基本構文がとてもシンプルなので、ある意味一番簡単なプログラミング言語だと思います。

大体、殆どのプログラミング言語に共通することは、
「中身」より「構文」ということですね。

これは、CSSでいうwidthなどのプロパティより.cssdesu dd{}などの
基本構文の方が重要視されるということですね。

自分の本プログラミングのCのWindows API関数はCSSで言う
widthなどのプロパティ(本当は関数や構造体)みたいなものが本当に莫大な数を占めており、これを全て覚えるのはかなり厳しいという状況です。

なので、このような莫大な数を占める値の場合は、
その各プロパティより、その文章の構文を覚えておくのが
一番重要だと思います。

例えばループ分を作成しようとして、

「あれ?for文ってどうやって書くんだっけ?」

というような、ことになっては元も子もありませんし、
重要なのは星の数ほどあるプロパティーよりも、基本構文が
一番重視すべき点だと自分は思っていますね。

自分の場合は、API関数の中身がわからなくなった場合などは、
MSDN等で調べるようにしていますので、基本構文さえきっちり覚えていれば、迷うことも少なくなると思います。

ただ、、、このMSDNですが、自分は読んでみて実感しますが
とても、わかりにくいです。。。

というより、小難しい言葉使っているおかげで、これだけを読んで理解するのは難しいです。。。

アンタレスさんも、もし興味があるのでしたら、MSDNのリファレンスを
見てみるといいと思います(関数だけ:一部抜粋)
ttp://msdn.microsoft.com/ja-jp/library/634ca0c2(VS.80).aspx

上記を見れば、自分が莫大な数の関数といった理由が
良くわかると思いますよ・・・

さらに、上記だけではなくこの中身の値&英数字の文字列なども
細かく順番、大文字小文字を含め決められていますからね・・・

簡単な関数の例を出しますと一つの関数にこんな感じに
各値を格納していきます。

TextOut関数(処理:主に文字列の描画)

TextOut(
デバイスコンテキストハンドル(英数字),
x座標(値),
y座標(値),
文字列(英数字),
文字数(英数字),
);


上記のようなことがあるので、本当に覚えた方が良いのは
構文というわけなんですよね。


なにわともわれ、このまま継続は力なりということで、
根気強く学習していけば、なんとかなりそうです。

ですので、これからも変わらずに精進していきたいですね。
2009/01/07(水) 13:45 | URL | 暗黒の鬼神 #-[ コメントの編集]
初めまして
いつも「World-Word-翻訳」を活用させていただいている「sunnylakeのポエムランド」というブログのものです。
少し質問があるのですが、「それはすごいですね」という感嘆の日本語に、英訳では「terrible」が使われているのはなぜですか。ちょっと意味合いが違うと思うのですが。
また、たとえば「シャンデリアの灯りが、心を暖める」というような表現の場合、英訳その他では「It」ではなくて「I」(私)となっています。
すべての詩において、物が主語なのに、「私」となっていたと思います。
どうして、そのような訳になるのか教えて下さい。
よろしくお願いいたします。
2009/01/09(金) 06:39 | URL | sunnylake #-[ コメントの編集]
↑ 機械翻訳ですから管理人さんにそんなこと尋ねても仕方ないのでは?人間が実際に翻訳しているわけではないので、多少のニュアンスの違いは妥協するしかないと思いますよ。
2009/01/09(金) 08:52 | URL | 通りすがり #-[ コメントの編集]
う~ん・・・
>sunnylakeさん

コメントありがとうございます。

>すべての詩において、物が主語なのに、「私」となっていたと思います。
どうして、そのような訳になるのか教えて下さい。

わかりました、お答えさせていただきます。
理由は、通りすがりさんが申し上げている通り
「機械翻訳」のサービスを利用して制作しているからです。

ちなみにですが、この機械翻訳にて使用した言語である英語翻訳のサービスですが、現時点で最も翻訳精度の高いといわれている、Yahooの翻訳サービスを使用させていただいています。

ご存じの通り、この機械翻訳というのは、
表現や比喩などの名称などを判定する機能などは殆どなく、
その単語の意味を調べるといった翻訳の仕様になっております。

もし、本当に完全な精度の翻訳をお望みでしたら。
それは、数万円などのお金を出して、
翻訳業者の方に頼まなければいけませんね。

自分のWorld翻訳はそんな手間を大幅に減らせるように制
作したものです。

それでは、上記の件参考になったでしょうか
お役に立てれば幸いです。



>通りすがりさん

補足コメントありがとうございました。

自分は個人運営のブログ管理者のため、
このような補足コメントは大いに助かります。

改めてお礼を申し上げさせていただきます。
本当にありがとうございました。
2009/01/09(金) 10:22 | URL | 暗黒の鬼神 #-[ コメントの編集]
コメントの投稿
【Font & Icon】
管理者にだけ表示を許可する
ユニークアクセスカウンター

訪問してくれてアリガトウ!
ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ