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

Javascriptでwebページ作成

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

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

医学生がJavaScriptの勉強をする

ネコ

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

Medi

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

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

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

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

フォトギャラリー

ストップウォッチ機能をつけた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講座でBootstrapも勉強できるよ

webページをbootstrapで作成する Bootstrapを使用してWebページを一瞬で作る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください