プログラミングでできること(ざっくり)

  • 順次処理(上から下に順番に処理していく、)
    • 例:とりあえず挨拶する
a = 'こんにちは'
b = 'Bonjour'
c = 'hello'
puts a
puts b
puts c
  • 反復処理(繰り返す)
    • 例:めっちゃ挨拶する
a = 'こんにちは'
b = 'Bonjour'
c = 'hello'
10.times do
  puts a
  puts b
  puts c  
end

  • 分岐処理(条件によって処理を帰る)
    • 例:こんにちは言わない
a = 'こんにちは'
b = 'Bonjour'
c = 'hello'

[a, b , c].each{|word|
  if word != 'こんにちは'
    puts word
  end
}

フロントエンドとバックエンド

  • WEBサービス
    • フロントエンド
      • 「HTML」でWEBページの基本構造を作る
      • 「CSS」で装飾を行う
      • 「JavaScript」で動きを付ける
    • バックエンド
      • 「PHP, ruby, python」等でサーバー上で処理を行う

フロントエンドとバックエンドの例

  • html
    • WEBページの基本構造を作る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>性別確認</title>
</head>
<body>
    <h2>性別を選択してください</h2>
    <form method="post">
        <input type="radio" name="gender" value="男"><input type="radio" name="gender" value="女"><input type="submit" value="送信">
    </form>
</body>
</html>
  • css
    • 画面装飾
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>性別確認</title>
    <style>
        body{
           color:#696969;
        }
        h2{
            background-color:#c0c0c0;
            color:#FFF;
            padding-left:20px;
        }
        input#submit_button{
            background-color:#c0c0c0;
            border-style: none;
            color:#FFF;
            padding:5px 20px;
        }
    </style>
</head>
<body>
    <h2>性別を選択してください</h2>
    <form method="post">
        <input type="radio" name="gender" value="男"><input type="radio" name="gender" value="女"><input type="submit" value="送信">
    </form>
</body>
</html>

  • js
    • 画面に動きを付ける
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>性別確認</title>
    <style>
        body{
           color:#696969;
        }
        h2{
            background-color:#c0c0c0;
            color:#FFF;
            padding-left:20px;
        }
        input#submit_button{
            background-color:#c0c0c0;
            border-style: none;
            color:#FFF;
            padding:5px 20px;
        }
    </style>
</head>
<body>
<script>
        function event_alert(){
            alert("本当に押しますか?");
        }
        window.onload = function () {
            var button = document.getElementById("submit_button");
            button.addEventListener("mouseover", event_alert, false);
        }
</script>
    <h2>性別を選択してください</h2>
    <form method="post">
        <input type="radio" name="gender" value="男"><input type="radio" name="gender" value="女"><input type="submit" id="submit_button"  data-text="本当に送信しますか?" value="送信">
    </form>
</body>
</html>
  • PHP(rubyとかpythonとかjavaとか)
    • サーバーを介した処理を行う(phpわからん)
<?php
$gender = '';
if (isset($_POST['gender']) === TRUE) {
    $gender = htmlspecialchars($_POST['gender'], ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>性別確認</title>
    <style>
        body{
           color:#696969;
        }
        h2{
            background-color:#c0c0c0;
            color:#FFF;
            padding-left:20px;
        }
        input#submit_button{
            background-color:#c0c0c0;
            border-style: none;
            color:#FFF;
            padding:5px 20px;
        }
    </style>
</head>
<body>
<script>
        function event_alert(){
            //alert("本当に押しますか?");
        }
        window.onload = function () {
            var button = document.getElementById("submit_button");
            button.addEventListener("mouseover", event_alert, false);
        }
</script>
    <h2>性別を選択してください</h2>
<?php if ($gender === '男' || $gender === '女') { ?>
<p>あなたの性別は「<?php print $gender; ?>」です</p>
<?php } ?>
    <form method="post">
        <input type="radio" name="gender" value="男" <?php if ($gender === '男') { print 'checked'; } ?>><input type="radio" name="gender" value="女" <?php if ($gender === '女') { print 'checked'; } ?>><input type="submit" id="submit_button"  data-text="本当に送信しますか?" value="送信">
    </form>
</body>
</html>

引用

https://studio.beatnix.co.jp/kids-it/kids-programming/scratch/program-basic/
https://blog.codecamp.jp/programming_introduction

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.