WEBプログラミングに触れてみよう!【体験コース全1回】

WEBプログラミングに触れるきっかけとなる全1回体験コース。
プログラミングの為のアプリの使い方から実際にプログラミングの動作まで、見て触れてプログラミングを知る第一歩となる内容を目的とします。

インストールしたアプリのおさらい

WEBページを作ってプログラミング体験

HTMLとBootstrapを体験

以下のコードを作成したlesson_xx.htmlにコピペしてみましょう。

<div class="card-header">ブロックタイトル</div>

さらに以下のコードを.card-bodyの中にコピペしましょう。

<a class="btn btn-primary" href="https://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a>

以下のコードはGoogleマップの埋め込みコードです。
.card-bodyの中にコピペしてみましょう。

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12844.140427681466!2d136.4455433!3d36.4083459!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf01b34181bf194c4!2z5bCP5p2-5biC5b255omA!5e0!3m2!1sja!2sjp!4v1567401939636!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

このようにHTMLでは、HTMLタグを追加することでWEBページに様々な要素を追加することが出来ます。
そして、Bootstrapを利用することであらかじめ見やすいデザインが各要素に適用されます。

CSSを体験

以下のコードを作成したstyle.cssファイルにコピペしてみましょう。

body{background-color: red;}
.btn{font-size: 30px;}
iframe{width: 100%;}

このようにCSSでは、見た目の装飾を追加ことが出来ます。
このCSSを駆使することで、WEBサイトが見やすく使いやすくなるわけです。

JavaScriptプログラミングを体験

以下のコードをlesson_xx.htmlの中にある.card-bodyの中にコピペしましょう。

<button id="action_1" class="btn btn-success">動作1</button>
<button id="action_2" class="btn btn-danger">動作2</button>
<code id="target"></code>

次に、以下のコードをscript.jsにコピペしましょう。

//動作1
let action_1 = document.getElementById('action_1');
action_1.addEventListener('click', function(e){
    action_1.classList.toggle('btn-success');
});

//動作2
let action_2 = document.getElementById('action_2');
let target_2 = document.getElementById('target');
action_2.addEventListener('click', function(e){
    const today = new Date();
    target_2.innerHTML = today.toLocaleString();
});

このようにJavaScriptでは、表示されている要素に変化を加える役割を持ちます。
今回紹介した言語の中で唯一のプログラミング言語になります。

まとめ

今回体験したHTML、CSS、JavaScriptの3つの言語は、全て使いこなすことであなたが望むWEBページを作成することが出来ます。
プログラミング言語は数あれど、WEBプログラミングに限定すれば、上記の3言語は必須知識となります。
今回の講義でプログラミングに興味を持ったり、WEBサイトを作ってみたいと感じた方は、一つ踏み込んで学習してみてはいかがでしょうか。

今はプログラミングを学習するためのサービスは世に溢れていますので、触り続けることを心掛けて学んでいってください。