医学生がJavaScriptでWebページを作成してみた

JavaScriptはUdemy講座とProgateで勉強しています。

世界最大級のオンライン学習サイトUdemy

2018.07.05【Udemy講座】フロントエンドエンジニアになりたい人の Webプログラミング入門 Progate→基本
Udemy→実践
的な位置づけにしています。
実際に手を動かしながら作ってみると頭に残りますよね。

医学生がJavaScriptの勉強をする

ネコ

JavaScriptって勉強して役に立つの？

HTML/CSSと並んで学ぶべき言語の1つだね。
WebAPIを利用して返ってくるデータは基本JSON形式だからね。Google Apps Script(=GAS)でもJavaScriptの形式でコードを書くから知っていると色々便利だよ。

Medi

JavaScriptを利用してWebページ作成する

Udemyの講座を見ながらいくつか作ってみました。

日付を表示してくれるページ

フォトギャラリー

ストップウォッチ機能をつけたWebページ

ネコ

JavaScriptは動的なWebページを作れるから、オシャレ度が増すね

今日の日付を表示してくれるWebページのコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style/style.css">
    <title>TODAY</title>
</head>
<body>
    <header>
        <h1>TODAY</h1>
    </header>

    <div class="container contain"> 
        <script>
            //日付を表示する
            var today = new Date();
            var todayHtml = today.getFullYear() + '/' + (today.getMonth()+1)+'/'+today.getDate();
            document.write('<p class="date">'+ todayHtml + "</p>");
        </script>
    </div>
</body>
</html>

ネコ

htmlの中に＜script＞＜/script＞のタグがありますが、この中にJavaScriptのコードを書いてけばオッケー。
PHPも同じ感じで＜?php?＞でククるよ

これからJavaScriptを勉強しようとしている方は、ProgateとUdemy講座がオススメです。
終わり。

世界最大級のオンライン学習サイトUdemy

今回参考にした書籍

[itemlink post_id=”716″]

今回参考にしたUdemy講座でBootstrapも勉強できるよ