# 【A講座】Webプログラミング講座3回目

## 初期準備
Teams上にアップロードした資料をシンクライアント上にダウンロードしてください。
Zipファイルですので解凍してデスクトップにフォルダを配置してください。
今日の授業で使うのは「03_js」というフォルダです。
このフォルダをVsCodeで開いた状態で授業に進んでいきます。

本日使う授業フォルダに入っているもの。

test.html
renshu.html
css/style.css
css/reset.css
images/色々 //課題のサイト用の画像
js/main.js　

今日の授業では03_jsフォルダ内の各htmlファイルを開いて作業していきます。

## セクション１　javascriptとはどんなものなのか？
### 1-1 VsCode上でtest.htmlを開いてbody終了タグの直上にscriptタグを記述する

　　　　　　　　　　　　　　　　　~~~省略~~~
    <!-- ここからjsを書き始めます -->
    <script>
        
    </script>
    
</body>
</html>

エメットコマンド
script + tabキー

### 1-2 scriptタグの中で以下の処理を記述する

<!-- ここからjsを書き始めます -->
<script>
    document.querySelector("#btn").onclick=function(){ 
        document.querySelector("video").playbackRate = 2; 
    };
</script>

### 1-3 ブラウザでtest.htmlを開いてボタンをクリックしてみる。
再生速度が速くなればOKです。

### 1-4 検証ツールの使い方(コード側)

<!-- ここからjsを書き始めます -->
<script>
    document.querySelector("#btn").onclick=function(){ 
        document.querySelector("video").playbackRate = 2; 
        console.log("OK");//これを追加
    };
</script>

### 1-5 検証ツールの使い方(ブラウザ側)
■Win
・Command + Option + I(大文字のアイ)
■Mac
・ページ上でCtr + クリック→検証を選択

検証ツール内のconsoleタブにOKが表示されていればOK
非常によく使うので覚えておきましょう。

## セクション2　javascriptの基礎的文法
### 2-1 renshu.htmlを開いて変数の練習をしてみよう。

let name = "nakano";
let age = 26;
let last_name = "憲一"
let count = "1";
const tax = 10;

console.log(name);
console.log(age + count);

＊検証ツールでテストをしてみる

### 2-2 renshu.htmlを開いて関数の練習をしてみよう。

//オリジナル関数　関数名（引数）
function test(num) {
	return num + 100;
}

### 2-3 renshu.htmlを開いて条件分岐の練習をしてみよう。

//第1パターン
const num = 1;

if (num >= 1) {
    alert("1以上！！");
} else {
    alert("1以下！！");
}


//第2パターン
const num = 5;

if (num == 1) {
    alert("1です！！");
} else if(num > 2 || num > 5) {
    alert("3~4です");
} else {
    alert("1と3以外の数字です");
}

## セクション3 jQueryの導入と使い方
#### renshu.htmlを開いてheadタグの中にCDNを読み込ませてある箇所を確認

<!-- jquery読み込み -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

ブラウザで「jQuery CDN」で検索すると出てくるので確認しておきましょう。
以降はrenshu.htmlのscriptタグ内で処理を書いていきます。

### 3-1 簡単なjQueryを書いてみる①HTMLを書き換える

//文字を差し込む
$("#text").html('大吉');

### 3-2 簡単なjQueryを書いてみる②アニメーション

//フェードアウト
$('#img').fadeOut(3000);
//フェードイン
$('#img').fadeIn(3000);

### 3-3 簡単なjQueryを書いてみる③データを取得

//テキスト取得
const message = $("#message").text();
alert(message);

### 3-4 簡単なjQueryを書いてみる④イベント（クリック）

$("#btn").on("click",function(){
    const data = $("#data").val();
    alert(data);
});

## セクション4 おみくじアプリ作成
ここからはomikujiフォルダを開いて作業を進めていきます。
VsCode上でindex.htmlを開いてscriptタグの中に処理を書いていきます。

### 4-1 おみくじボタンが押された時に動く関数を作成する

//おみくじボタンが押されたら実行される関数
$('#btn').on('click',function(){

});

### 4-2 おみくじ関数の中にランダム整数を生成する処理を作成

$('#btn').on('click',function(){

    // 0~3の数字をランダムに生成する処理
    let num = Math.floor( Math.random()*4 );
    console.log(num);

});

### 4-3　ランダム数の生成の下で条件分岐による結果の出し分けを実装（アラートver）

if (num == 0){
    alert('大吉');
}
else if (num == 1){
    alert('中吉');
}
else if (num == 2){
    alert('小吉');
}
else if (num == 3){
    alert('凶');
}

### 4-4 ランダム数の生成の下で条件分岐による結果の出し分けを実装（画像ver）

// 条件分岐による結果の出し分け 画像表示ver
if (num == 0) {
  // img-boxを取得してimgタグを書き換える
  $('.img-box').html('<img src="images/omikuji/daikichi.png" alt="">');

}else if (num == 1) {
   // img-boxを取得してimgタグを書き換える
   $('.img-box').html('<img src="images/omikuji/chukichi.png" alt="">');

 }else if (num == 2) {
    // img-boxを取得してimgタグを書き換える
    $('.img-box').html('<img src="images/omikuji/shokichi.png" alt="">');

 }else if (num == 3) {
     // img-boxを取得してimgタグを書き換える
     $('.img-box').html('<img src="images/omikuji/kyo.png" alt="">');
    }

## セクション5 じゃんけんアプリ作成
ここからはjankenフォルダを開いて作業を進めていきます。
VsCode上でindex.htmlを開いてscriptタグの中に処理を書いていきます。

### 5-1 グーボタンがが押された時に動く関数を作成する

//グーボタンが押された時の処理
$('#gu').on('click',function(){


});

### 5-2 グー関数の中にランダム整数を生成する処理を作成（相手の手）

//グーボタンが押された時の処理
$('#gu').on('click',function(){

    // 敵の数字
    let teki_num = Math.ceil(Math.random()*3);
    
});

### 5-3 勝敗を表示するif分岐を作成(アラートバージョン)

//グーボタンが押された時の処理
$('#gu').on('click',function(){

    // 敵の数字
    let teki_num = Math.ceil(Math.random()*3);

    // 勝敗表示処理（アラート）
    if (teki_num == 1) {
        alert('引き分け');
    }else if (teki_num == 2) {
        alert('あなたの勝ち');
    }else if (teki_num == 3){
        alert('あなたの負け');
    }
    
});

### 5-4 勝敗を表示するif分岐を変更(HTMLを変更するバージョン)

    // 勝敗表示処理（HTML表示）
    if (teki_num == 1) {
        $('.result-text').html('引き分け');
    }else if (teki_num == 2) {
        $('.result-text').html('あなたの勝ち');
    }else if (teki_num == 3){
        $('.result-text').html('あなたの負け');
    }

### 5-5 相手が選んだ手を表示する処理を追加

// 相手が出した手を表示する処理
if(teki_num == 1){
    $('.result-img').html('<img src="images/gu.png" alt="">');
}else if(teki_num == 2){
    $('.result-img').html('<img src="images/choki.png" alt="">');
}else if(teki_num == 3){
    $('.result-img').html('<img src="images/pa.png" alt="">');
}

### 5-6 完成系

//グーボタンが押された時の処理
$('#gu').on('click',function(){
    // 敵の数字
    let teki_num = Math.ceil(Math.random()*3);

    // 勝敗表示処理
    if (teki_num == 1) {
        $('.result-text').html('引き分け');
    }else if (teki_num == 2) {
        $('.result-text').html('あなたの勝ち');
    }else if (teki_num == 3){
        $('.result-text').html('あなたの負け');
    }

    // 相手が出した手を表示する処理
    if(teki_num == 1){
        $('.result-img').html('<img src="images/gu.png" alt="">');
    }else if(teki_num == 2){
        $('.result-img').html('<img src="images/choki.png" alt="">');
    }else if(teki_num == 3){
        $('.result-img').html('<img src="images/pa.png" alt="">');
    }


});