Clever Geek Handbook

JavaScriptガむド、パヌト1最初のプログラム、蚀語機胜、暙準

この JavaScriptガむドの翻蚳の実珟可胜性に関する調査を最近実斜したした。 結局のずころ、投祚した人の玄90がこの考えに前向きに反応したした。 したがっお、本日、翻蚳の最初の郚分を公開したす。







著者が考案したこのガむドは、すでにJavaScriptに少し粟通しおおり、知識を敎理し、蚀語に぀いお新しいこずを孊びたい人向けに蚭蚈されおいたす。 私たちは、JSに぀いおたったく䜕も知らない人を含むように、この資料の察象者を少し広げるこずに決め、「Hello、world」のいく぀かのバヌゞョンを曞くこずから始めたす。



→ パヌト1最初のプログラム、蚀語機胜、暙準

→ パヌト2コヌドスタむルずプログラム構造

→ パヌト3倉数、デヌタ型、匏、オブゞェクト

→ パヌト4機胜

→ パヌト5配列ずルヌプ

→ パヌト6䟋倖、セミコロン、ワむルドカヌドリテラル

→ パヌト7厳栌モヌド、このキヌワヌド、むベント、モゞュヌル、数孊蚈算

→ パヌト8ES6機胜の抂芁

→ パヌト9ES7、ES8、およびES9暙準の抂芁





こんにちは䞖界



このプログラムは、䌝統的に「 Hello、world 「ずおも簡単です。 特定の蚀語を䜿甚しお、「Hello、world」ずいうフレヌズたたは別の類䌌のフレヌズをどこかに衚瀺したす。



JavaScriptは、さたざたな環境でプログラムを実行できる蚀語です。 私たちの堎合、ブラりザずサヌバヌプラットフォヌムNode.jsに぀いお話しおいたす。 これたで、JSで1行のコヌドを蚘述せず、デスクトップコンピュヌタヌ䞊のブラりザヌでこのテキストを読んでいる堎合、これは最初のJavaScriptプログラムから文字通り数秒であるずいうこずです。



Google Chromeを䜿甚しおいる堎合は、ブラりザメニュヌを開いお、[ >



コマンドを遞択したす。 ブラりザりィンドりは2぀の郚分に分割されたす。 それらの1぀ではペヌゞが衚瀺され、別のペヌゞではいく぀かのブックマヌクを含む開発者ツヌルのあるパネルが開きたす。 Console



タブに興味がありたす。 クリックしおください。 コン゜ヌルにすでに存圚するものに泚意を払わないでください Ctrl + L



キヌの組み合わせを䜿甚しおクリアできたす。 コン゜ヌルを招埅するこずに興味がありたす。 ここで、 Enter



キヌを抌しお実行されるJavaScriptコヌドをEnter



たす。 コン゜ヌルに次を入力しおみたしょう。 



 console.log("Hello, world!")


このテキストはキヌボヌドから入力でき、コピヌしおコン゜ヌルに貌り付けるこずができたす。 結果は同じになりたすが、プログラミングを孊習しおいる堎合は、プログラムのテキストをコピヌするのではなく、自分で入力するこずをお勧めしたす。



プログラムテキストがコン゜ヌルに衚瀺されたら、 Enter



抌したす。



すべおが正しく実行されるず、テキストHello, world!



がこの行の䞋に衚瀺されHello, world!



。 他のすべおに泚意を払っおはいけたせん。









ブラりザコン゜ヌルの最初のプログラムは、コン゜ヌルにメッセヌゞを衚瀺するこずです



ブラりザの別のバヌゞョン「Hello、world」は、メッセヌゞボックスを衚瀺するこずです。 これは次のように行われたす。 



 alert("Hello, world!")


このプログラムを実行した結果は次のずおりです。









りィンドりにメッセヌゞを衚瀺する



開発者ツヌルバヌが画面の䞋郚にあるこずに泚意しおください。 タむトルに3぀のドットがあるメニュヌを䜿甚し、適切なアむコンを遞択するこずにより、その堎所を倉曎できたす。 このパネルを閉じるためのボタンもありたす。



コン゜ヌルを含む開発者ツヌルは、他のブラりザヌでも䜿甚できたす。 コン゜ヌルは、ブラりザを䜿甚するずきに垞に手元にあるずいう点で優れおいたす。



ブラりザでJSコヌドを実行する方法は他にもありたす。 そのため、JavaScriptプログラムの通垞の䜿甚に぀いお話す堎合、Webペヌゞの動䜜を保蚌するためにブラりザヌに読み蟌たれたす。 原則ずしお、コヌドは、拡匵子が.js



別個のファむルの圢匏で実行され、Webペヌゞに接続されたすが、プログラムコヌドをペヌゞコヌドに盎接含めるこずもできたす。 これはすべお、 <script>



を䜿甚しお行われたす。 ブラりザがそのようなコヌドを怜出するず、それを実行したす。 スクリプトタグの詳现は、w3school.comで衚瀺できたす。 特に、このリ゜ヌスを䜿甚しおJavaScriptを䜿甚しおWebペヌゞを䜿甚する方法を瀺す䟋を怜蚎しおください。 この䟋は、このリ゜ヌスを䜿甚しお起動するこずもできたす[ Try it Yourself



]ボタンを探したすが、少し異なりたす。 ぀たり、テキスト゚ディタヌ VS CodeやNotepad ++など で新しいファむルを䜜成し、 hello.html



を呌び出しお次のコヌドを远加したす。 



 <!DOCTYPE html> <html> <body>   <p id="hello"></p>   <script>     document.getElementById("hello").innerHTML = "Hello, world!";   </script> </body> </html>


ここでは、 document.getElementById("hello").innerHTML = "Hello, world!";



ずいう行に最も興味を持っおいdocument.getElementById("hello").innerHTML = "Hello, world!";



、これはJSコヌドです。 このコヌドは、 <script>



タグの開始タグず終了タグで囲たれおいたす。 ドキュメント内でhello



識別子を持぀HTML芁玠を芋぀け、そのinnerHTML



プロパティ぀たり、この芁玠に含たれるHTMLコヌドをHello, world!



。 ブラりザでhello.html



ファむルを開くず、指定されたテキストが衚瀺されたす。









HTML芁玠ぞのJavaScript出力



すでに述べたように、w3school.comで提䟛されおいる䟋はそこですぐに詊すこずができたす。 Web開発甚、特にJSコヌドの実行専甚のオンラむン環境がありたす。 たずえば、 codepen.io 、 jsfiddle.net 、 jsbin.comなどです。



ここでは、たずえば、CodePenを䜿甚しお再䜜成した䟋のように芋えたす。









HTMLフィヌルドにはHTML芁玠を蚘述するコヌドが含たれ、JSフィヌルドにはJavaScriptコヌドが含たれ、結果はペヌゞの䞋郚に衚瀺されたす。



JavaScriptプログラムは、Node.jsサヌバヌ環境の1぀であるさたざたなプラットフォヌムで実行できるず䞊蚘で述べたした。 特にサヌバヌ開発に焊点を合わせおJavaScriptを孊習する堎合は、おそらくNode.jsを䜿甚しお䟋を実行する必芁がありたす。 Node.jsずブラりザヌのバヌゞョンで䜿甚される特定の蚀語機胜の特定のサポヌトを考慮せずに、簡単に蚀うず、蚀語の基本的なメカニズムを䜿甚しお、同じコヌドがNode.jsずブラりザヌで機胜するこずに泚意しおください。 ぀たり、たずえば、 console.log("Hello, world!")



コマンドconsole.log("Hello, world!")



あちこちで動䜜したす。 ブラりザヌ固有のメカニズムを䜿甚するプログラムはNode.jsでは機胜したせんブラりザヌでNode.js甚に蚭蚈されたプログラムを実行しようずする堎合も同様です。



「Hello、world」を実行するには、Node.js環境で、適切な配垃キットをここからダりンロヌドしおNode.jsをむンストヌルしたす 。 次に、 hello.js



ファむルを䜜成し、次のコヌドをそのファむルに配眮したす。 



 console.log('Hello, World!');


コマンドラむンを䜿甚しお、このファむルが保存されおいるフォルダヌに移動し、次のコマンドを実行したす。 



 node hello.js


実装の結果は次のずおりです。









Node.jsが出力するメッセヌゞ



ずころで、䞊蚘の䟋の䞀郚は行末にセミコロンを䜿甚し、䞀郚は䜿甚しおいないこずに気づいおいるかもしれたせんそしお自分でコヌドを入力した堎合に気付くでしょう。 コン゜ヌルに衚瀺したり、メッセヌゞずしお衚瀺したりするテキストが二重匕甚笊で囲たれおいる堎合ず、単䞀匕甚笊で囲たれおいる堎合がありたす。 おそらく、これがなぜそうなのか、たた、異なるバヌゞョンのコヌドが゚ラヌなしで機胜する堎合、このコヌドを正しく蚘述する方法を疑問に思っおいるかもしれたせん。 詳现に觊れずにいく぀かの小さな詳现を考慮せずにこの質問に答えるず、匕甚笊ずセミコロンを䜿甚する䞡方のオプションが受け入れられ、同じように機胜するず蚀うこずができたす。 特定のオプションの遞択は、プログラマヌが順守するコヌドの蚘述スタむルず、プログラムの特定の郚分のニヌズに䟝存したす。 さらに、これらの単玔な䟋では、JavaScriptの特城的な機胜の1぀を感じるこずができたす。぀たり、この蚀語はプログラマヌにある皋床の自由を䞎えるずいうこずです。



さお、JavaScriptを初めお知った埌、この蚀語に぀いお詳しく話しおください。



JavaScriptの抂芁



JavaScriptは、䞖界で最も人気のあるプログラミング蚀語の1぀です。 20幎以䞊前に䜜成されたこの補品は、その開発に長い道のりを歩んできたした。 JavaScriptは、ブラりザヌのスクリプト蚀語ずしお考えられおいたした。 圓初、圌は今よりもはるかに控えめな機䌚を持っおいたした。 䞻にドロップダりンメニュヌなどの単玔なアニメヌションを䜜成するために䜿甚され、 Dynamic HTMLテクノロゞヌDHTML、ダむナミックHTMLの䞀郚ずしおそれを知っおいたした。



時間が経぀に぀れお、Web環境のニヌズが高たり、特に新しいAPIが登堎し、JavaScriptはWeb開発をサポヌトするために、他のテクノロゞヌに遅れずに぀いおいく必芁がありたした。



珟圚、JSは埓来のブラりザだけでなく、それ以倖でも䜿甚されおいたす。 特に、サヌバヌプラットフォヌムNode.js、組み蟌みおよびモバむルアプリケヌションの開発でJavaScriptを䜿甚する可胜性、JavaScriptが以前は䜿甚されなかった広範なタスクを解決するこずに぀いお話しおいる。



䞻芁なJavaScript機胜



JavaScriptは、次の機胜を備えた蚀語です。





はい、ずころで、JavaScriptずJavaには共通点がないこずに泚意する必芁がありたす。 これらは完党に異なる蚀語です。



JavaScriptず暙準



ECMAScript、たたはESは、JavaScript゚ンゞンの開発者、぀たりJSプログラムが実行される環境をガむドする暙準の名前です。 さたざたな暙準が新しい機胜を蚀語に導入し、省略された圢匏の暙準の名前がしばしば蚀及されおいるこずに぀いお話したす-䟋えば、ES6。 ES6はES2015ず同じです。最初の堎合のみ番号は暙準のバヌゞョン番号6を意味し、2番目の堎合は暙準の採甚幎2015を意味したす。



非垞に長い間、Webプログラミングの䞖界では、1999幎に採甚されたES3暙準が関連しおいたした。 暙準の4番目のバヌゞョンは存圚したせん圌らはあたりにも倚くの新しい機胜を远加しようずしたしたが、決しお受け入れたせんでした。 2009幎には、ES5暙準が採甚されたした。これは、10幎ぶりの蚀語の倧芏暡な曎新で​​した。 その埌、2011幎にES5.1暙準が採甚され、倚くの新しい機胜が远加されたした。 2015幎に採甚されたES6暙準も、むノベヌションの芳点から非垞に重芁になりたした。 2015幎以降、暙準の新しいバヌゞョンが毎幎採甚されおいたす。



この資料の公開時点での暙準の最新バヌゞョンはES9であり 、2018幎6月に採甚されたした。



たずめ



今日、私たちは「Hello、World」をJavaScriptで曞き、蚀語の䞻な機胜を調べ、その暙準化に぀いお話したした。 次回は、JavaScriptテキストのスタむルずプログラムの字句構造に぀いお説明したす。



芪愛なる読者 この資料を読む前にJavaScriptに慣れおいない堎合は、「Hello、world」を実行できたかどうかを教えおください。





More articles:


All Articles