記事内に商品プロモーションを含む場合がありますひなドリJavaScriptって何?わかドリJavaScriptは言語のひとつで、HTMLを動かしたり、画面に現れない処理をするときに使うものだよ。スタイルシートはHTMLを装飾して魅力的にするためのものだよ。最近のWebページは...ContentsJavaScriptはHTMLを動かす仕掛けJavaScriptの基本構造JavaScriptの書き方JavaScriptは難しい?HTMLの要素を変更するJavaScriptのサンプルこのページではこれだけ覚える!JavaScriptはHTML、CSSとは書き方が違う今回のゼロわかJavaScriptはHTMLを動かす仕掛けJavaScriptは、主にHTMLの要素を変更したり、何かをきっかけとしてプログラミング的な処理をするときに使用するものです。ボタンをクリックしたときに項目に入っている数値を足し算する時や、同じくボタンをクリックしたときに文字の色を変えるなどの処理をすることが出来ます。それをするためにはJavaScriptだけではなく、HTML、CSSの知識も必要なため、JavaScriptはこの中では最も難しいと言えるでしょう。JavaScriptがあることでサーバサイドの処理もできるなどWebシステム開発にとって欠かすことのできない言語のひとつです。そのため、これを覚えることが出来ればエンジニアとして大きく成長できる言語とも言えるでしょう。HTML、CSS、JavaScriptの役割についてわからなければ、こちらも見てみましょう。HTMLとCSSとJavaScri...JavaScriptの基本構造JavaScriptはHTML、CSSとは基本構造がガラリと変わり、いわゆるプログラミング的な考え方が必要になってきます。「変数」や「関数」などがそれにあたります。HTMLの<script>タグ内にJavaScriptのコードを書くことで、HTMLファイル内に埋め込むことができます。JavaScriptのコードは、外部ファイルとして分離することもできます。外部ファイルにJavaScriptのコードを書いて、HTMLファイルで読み込むことができます。外部ファイルを読み込む時は以下のように書きます。src="script.js"></script>こちらは簡単なサンプルとしてHTML内に書いたものです。}</script>ひなドリなんか、プログラムっぽくて難しいかも...わかドリそうだよね。そもそも、何がなんだかわからないよね。そこを説明していくよ。JavaScriptを理解するためには最低限「変数」や「if文」という考え方が必要になってきます。そちらを説明していきましょう。先ほどのサンプルを使用して、説明してきます。}</script>このサンプルを日本語に直すと「変数に入っている値が5より大きければコンソールに”xは5より大きい”という文字が出力されて、5以下であれば”xは5以下”という文字が出力される」というプログラムとなります。このサンプルは、分解すると大きく3つの要素で構成されています。それは「変数」、「if文」、「画面出力(コンソール)」です。これが画面出力(コンソール)ひなドリ変数...?わかドリプログラム内で使う入れ物って言えばいいかな変数は文字や数字を入れられる入れ物と思ってください。“わかドリ”;という風に書けばyという名前の変数(入れ物)「わかドリ」という文字を入れることが出来ます。letは入れ物を使うよって宣言する時に必要なものと思ってください。if文はその名の通り、”もし○○だったら”という命令文です。)ですので、xという変数の中に入っている数値が5より大きいか、ということを見ています。}と書かれているうちA処理が実行され、そうでなければB処理が実行されます。console.log(x)については、JavaScript特有の書き方で、ブラウザのコンソールというところに変数xの中身を出力するものです。ひなドリ難しい...わかドリうん、改めて文字にしてみると難しいねJavaScriptは難しい?JavaScriptはHTML,CSSと比較して難しいと言えるでしょう。その理由をわかドリはこう考えます。プログラムらしい「変数」や「関数」という考え方が必要HTMLと組み合わせることが多く、HTMLの知識があることが前提イベント処理など、独自の仕組みも覚えることが多い他にもいろんな理由がありますが、ざっくりいえば「覚えることが多い」ということがJavaScriptが難しいと言える理由となります。それを補ってあまりあるメリットがあるため、ぜひとも覚えてほしい言語のひとつです。HTMLの要素を変更するJavaScriptのサンプル最後に、HTMLの要素を変更するJavaScriptのサンプルを書いておきます。</body></html>ひなドリなんのこっちゃボタンクリックにより、HTMLの要素”sample”の背景色を無色から赤に変えるJavaScriptのコード例です。このようにJavaScriptはHTML,CSSと比較して難しいです。HTMLに対して要素を変更したり、プログラミング的な処理ができるなど、できることはかなり多いと言えます。変数やif文が必要でちょっと難しいお疲れさまでした。今回は、JavaScriptをゼロからわかっていただきました。わかドリちょっと難しいよね。偉い!次はHTMLからJavaScriptを呼び出す方法について学びましょう。JavaScriptの処理を呼び出す方法は2つだけ!...エンジニアの大敵である腰痛が気になる人はこちらもどうぞ。MEわかドリ現役SE。何とか転職したりして10年生き残った。プログラミングのブログを運営。現役SEわかドリ現役SE。何とか転職したりして10年生き残った。プログラミング未経験だったかつての自分であるひなドリを救うため、プログラミングのブログを運営。