【初心者】JavaScriptの使い方。0からプログラムを動かすまで解説

プログラミング
  • JavaScriptとは
  • JavaScriptのコードサンプル
  • JavaScriptのブラウザ確認

ここら辺について触れていきます。

JavaScriptで、メッセージを表示させるまでを解説していきます。

この記事に必要なものは、HTMLコードと、VisualStudioCodeを使います。まだの方は以下の記事を参考に準備してください!

VisualStudioCode↓

【初心者】プログラミング学習を始めるのに必要なアプリはこれだけ!
プログラミング学習を始めたいけど、どんなアプリが必要なの?プログラミングって難しいアプリが必要そう、、こういった方に向けての記事です。結論からいうと、プログラミング学習を始めるのに必要なものは、『テキストエディタ』...

HTMLコード↓

【初心者】Javascript学習を始めるために、HTMLを用意しよう!
Javascriptの勉強をスタートしたい!cssの勉強をスタートしたい!こんな方に向けての記事です。この記事では、HTMLファイルの作成HTMLのコード入力・説明ブラウザで成果物の確認HTMLファ...

準備ができたら、JavaScriptを学んでいきましょう!

JavaScriptとは

前回HTMLは、Webページに見た目を作るものだと説明しました。

それに対し、JavascriptはWebブラウザに動きをつけるものです!

  • ポップアップウィンドを表示する
  • 入力された値により、表示を変更させる
  • タイマーを画面に表示する

Webページで出来る幅が、HTMLより大きく増えたね!

JavaScriptを学ぶ事が真の『プログラミング学習』です。
HTMLとCSSは序章に過ぎません!

JavaScriptを学ぶ事で、プログラミングスキルが伸びると断言できます。

デザイナー志望の方は、HTML・CSSを重点的に。エンジニア志望の方は、JavaScriptの学習に力を入れましょう

JavaScriptのコードを書く

まず、VisualStudioCodeで、JSファイルを作りましょう。
HTMLの時と同じでファイル作成から、ファイル名入力までいきましょう!

では、sample.jsに以下のコードを書いて保存してください!


alert("hello");

次にindex.htmlからsample.jsを読み込みます!
以下のコードを『index.html』に書いてください!
</body>タグの直前です!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
    <p>知識をつけて、楽に生きる</p>

    <script type="text/javascript" src="sample.js"></script>
</body>
</html>

JavaScriptの動きをブラウザで確認しよう

それでは、index.htmlをブラウザで開いてください!

開いた瞬間、メッセージボックスが表示されましたね!
OKを押すとWebページを表示されます。

Webページに動きがついた!

JavaScript学習は始まりました

これでJavaScriptの学習環境は整いました。ここからはどんどん学んで、処理を追加していきましょう!

本ブログでは、これからのロードマップやサンプルコードも紹介していきます。

次回も共に頑張りましょう!

【プロゲート復習】Javascriptで計算結果を表示する。
難易度:★☆☆☆☆この記事では、Javascriptで文章をメッセージ表示する計算結果をメッセージ表示するコメントを書く変数の使い方ここら辺に触れていきます。想定読者は、Javascriptを1から学...

ではっ!!

コメント