note4recurrent @ ウィキ

Javascript

最終更新：2022年07月10日 11:05

匿名ユーザー

- view

だれでも歓迎！編集

尾崎先生今日の説明資料は共有フォルダにあります。 s1共有\ozaki\Web基礎.pdf　

6/21

HTTPの仕組み
- PC(http request:URL) - > サーバー(Apache)
- サーバー（http response) - > PC

ブラウザはURLを発行し、帰ってきたhtmlを画像に表示する役割。

静的ウェブページ
- お仕着せの完成品を買ってくるだけ
動的ウェブページ
- サーバーで情報と付け加えて返す：「JSPとサーブレット」
  - オーダーした完成品が届く点では静的コンテンツと一緒
- Javascriptによる動的ページ：ブラウザで実行されるところがJSPとの違い
  - 素材を返してもらって、最終的にはブラウザで加工して完成させる。
  - 受け取ったコンテンツをブラウザ上で自動的に更新することができる（動く時計など）

VSC起動

ファイルメニューでルートフォルダ選択（事前に作っておく）
index.htmlを新規作成
最初の行にhtmlと入れるとショートカットが出るのでhtml:5を選ぶ。
決まり切ったコードが自動的に入れられる。（別に自分で叩いても、コピペしても無問題）
lang = "ja" にしておくこと：この講座では日本語のページを作るから。

VSCの機能拡張 open in default browserをインストール

javascriptの場所
- </body>の前に置くのが多い
<script src="script.js"></script>は別のファイルを作るため
<script">直接スクリプトを書くため</script>

変数の作り方
- var 使わないほうが良い（過去はこれしかなかった）
- const 再代入不可
- let 再代入可能

Javascript は行末に；はあってもなくてもかまわない。あってもエラーにはならない。
- ESLintという文法チェッカーではつけることを推奨：ほかの言語も書くときに忘れないようにつけたほうがいいかも。

変数の宣言
- 静的型付（C JAVA COBOL VBA）
  メモリが少なかった時代に開発されたもの。メモリを節約させるため。
- 動的型付（PHP Javascript Python）
  メモリが豊富に使えるようになってから作られた言語に多い
```
let lang  = "ジャバスクリプト"
lang = "Java"
lang = 100 //許される
```

Javascript で使える変数の型

Number：数値　整数も少数も大きな数字もこれだけ
NaN(Not a Number 非数字)
String：文字列全て
Boolean
Null
Undefined

type ofで変数に入っているデータの型を調べられる

a=4
console.log(typeof a)　＊num
console.log(typeof "a") : String

let lang  = "ジャバスクリプト"
lang = "Java"
lang = 100 //許される
console.log(lang)

//Javascript データ型
//　Number
console.log(0/0)
const a = 10
const b = 4
console.log(a+b)
console.log(a-b)
console.log(a*b)
console.log(a/b)
console.log(a % b) //剰余算
console.log(a ** b) //べき乗
console.log(typeof num) //型を調べる 

//　String "" も　''
const food1 = "チョコレート"
const food2 = 'チョコレート'
console.log(food1)
const food3 = "パフェ"
console.log(food1+food3) // + で連結 

//+で連結された結果は文字列となる
const drink1 = "珈琲"
const unit = "杯"
console.log(drink1 + 3 + unit)
console.log(typeof (drink1 + 3 + unit))

//テンプレートリテラル(ES6)
//例　「珈琲を２杯ください」
console.log(drink1 + "を" + 2 + unit + "ください")
console.log(`${drink1}を2${unit}ください`)

//"15"を15に変換（VBAのVALUE）
const strNum = "15"
console.log(typeof parseInt(strNum))//parseIntで文字列が数字になる
//数字として認識できるかどうかはシステムに依存。全角の数字でもいけるかどうか保証できない。

//　Undefined（未定義）
//  初期化されていない変数

//　Boolean（真偽値）
//  true or false だけを持てる
let flg = true
console.log(flg)

//否定演算子　！
console.log(!flg)

//比較演算子
const con1 = 100
const con2 = 50

//等値演算子
console.log(con1 == con2*2)//左辺と右辺が等しい値か
console.log(con1 != con2*2)//左辺と右辺は等しい値ではないか

//同値演算子
const con3 = "50"
console.log(con2 == con3) //左辺と右辺が等しい値か
console.log(con2 === con3)//左辺と右辺が同じ値か：型まで一致しているか

//配列
const drinks = ["珈琲","紅茶","ジュース","緑茶"]
console.log(drinks[0])
console.log(drinks[2])

drinks[2] = "apple" //const で宣言したものでも更新できる
console.log(drinks[2])

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Event</title>
</head>
<body>
   <h1 id="target">アクセス前</h1>
   <button id="clk">click</button>
   <h2 id="target2">ABC</h2>
   <p>下のボタンをクリックすると上の文字が変わります</p>
   <button id="clk2">change!</button>
   <script>
       //読み込み完了時に動作
       window.addEventListener("DOMContentLoaded",function(){
           const newH1 = "アクセス後"
           const idTarget = document.querySelector("#target")
           //console.log(idTarget)
           idTarget.innerHTML = newH1
           //ボタンを捕まえる
           const clickButton = document.querySelector("#clk")
           //console.log(clickButton)
           let flag = true
           clickButton.addEventListener("click",function(){
               if (flag){
                   idTarget.innerHTML = "Clickされたよ"
               } else{
                   idTarget.innerHTML = newH1
               }
               flag = !flag
           })
           //ボタン2を捕まえる
           const clickButton2 = document.querySelector("#clk2")
           const idTarget2 = document.querySelector("#target2")
           let flag2 = true
           clickButton2.addEventListener("click",function(){
               if (flag2){
                   idTarget2.innerHTML = "CDE"
               } else{
                   idTarget2.innerHTML = "ABC"
               }
               flag2 = !flag2
           })
       })
   </script>
</body>
</html>

ボタン２を捕まえる以下のみ色々試した。

           //ボタン2を捕まえる
           const clickButton2 = document.querySelector("#clk2")
           const idTarget2 = document.querySelector("#target2")
           
           let flag2 = 0
           clickButton2.addEventListener("click",function(){
               if(flag2 == 0){
                   idTarget2.innerHTML = "DEF"
               } else if(flag2 == 1){
                   idTarget2.innerHTML = "GHI"
               } else {
                   idTarget2.innerHTML = "ABC"
               }
               flag2 += 1
               if(flag2 > 2){
                   flag2 = 0
               }
               
               if (idTarget2.innerHTML == "DEF"){
                   idTarget2.innerHTML = "文字列によって反応を変えることもできる"
               }
           })
後、乱数発生の関数を加えれば簡易じゃんけんゲームくらいはできそう。

配列を使って順番にテキストを回す

　            let i = 0;
　             let dispText = ["DEF","GHI","ABC"]　//この行までは起動時に一回だけ実行される。
　             clickButton2.addEventListener("click",function(){　//button2 が押される度に下のブロックが実行される。変数の値は残っている。
　             idTarget2.innerHTML = dispText[i];
　                 i += 1;
　                 if (i > 2){
　                     i = 0;
　                 }
　             })

乱数と切り捨て関数を使ってランダムに表示:連続しないように確認を追加

           const clickButton2 = document.querySelector("#clk2")
           const idTarget2 = document.querySelector("#target2")
           let ransuu = 0;
           let check = 0;
           let dispText = ["Masth.random と　Math.trunc","乱数と整数切り捨て関数","コードスッキリ","配列の使い方の練習にもなった"]
           clickButton2.addEventListener("click",function(){
               if (ransuu == check){
                   ransuu = Math.trunc(Math.random()*10/3);　//乱数は０〜１の少数なので１０倍して３で除した結果の少数以下を切り捨てている
               } else {
                   ransuu = check;
               }
               idTarget2.innerHTML = dispText[ransuu];
           })

関数を使ってみました　コードがスッキリして読みやすい（はずｗ）

           const clickButton2 = document.querySelector("#clk2")
           const idTarget2 = document.querySelector("#target2")
           let ransuu = 0;
           let dispText = ["Masth.random と　Math.trunc","乱数と整数切り捨て関数","コードスッキリ","配列の使い方の練習にもなった"]
           clickButton2.addEventListener("click",function(){
               ransuu = getRansuu(ransuu);
               idTarget2.innerHTML = dispText[ransuu];
           })
　//今持ってる数字ransuuを受けて異なる数字を返す関数 karisuu は関数内でしか使わないローカル変数
           function getRansuu(num) {
               let karisuu = Math.trunc(Math.random()*10/3); //乱数は０〜１の少数なので１０倍して３で除した結果の少数以下を切り捨てている                
               while (num == karisuu) { //メインの数字が持っているものと同じ数字が出ている間は何回も数字を取得する
                   karisuu = Math.trunc(Math.random()*10/3);
               }
               return karisuu;
           };

繰り返し：ループ

for
forEach

    <script>
        window.addEventListener("DOMContentLoaded",function(){
            //Get UL
            const ulCourses = document.querySelector("#courses")
            const subjects =[
                "webクリエイター",
                "web プログラマー",
                "動画編集",
            ]
            for (let index = 0 ; index < subjects.length ; index++){
                //meke li tag <li></l>
                const newLi = document.createElement("li")
                // li にテキストを入れる <li>web creater</li>
                newLi.innerText = subjects[index]
                // add 
                  ulCourses.appendChild(newLi)
            } 
 
             subjects.forEach(function(subject){
                 const newLi = document.createElement("li")
                 newLi.innerText = subject
                 ulCourses.appendChild(newLi)
             })
        })
    </script>

html

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Memoアプリ</title>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <div class="container">
       <!-- INPUT -->
       <div class="alert alert-secondary mt-3">
           <div class="row">
               <div  class="col-3">
                   <input type="text" class="form-control" name="" id="name" placeholder="名前">
               </div>
               <div class="col-7">
                   <input type="text" class="form-control" name="" id="comment" placeholder="コメント">
               </div>
               <div class="col-2">
                   <button class="btn btn-outline-success" id="btn">追加</button>
               </div>
           </div>
       </div>
       <!-- DATA TABLE -->
       <table class="table table-secondary table-striped table-bordered" id="tbl">
           <tr>
               <th>名前</th>
               <th>コメント</th>
               <th>日付</th>
           </tr>
           <tr>
               <td>森下</td>
               <td>........</td>
               <td>2022/06/27</td>
           </tr>
           <tr>
               <td>森下</td>
               <td>........</td>
               <td>2022/06/27</td>
           </tr>
       </table>
   </div>
   <script src="memoapp.js"></script>
</body>
</html>

memoapp.js

//windwoが読みこまれるまで待機
window.addEventListener("DOMContentLoaded",function(){
   const tbl = this.document.querySelector("#tbl")
       //btnが押されたら
   const btn = document.querySelector("#btn")
   btn.addEventListener("click",function(){
   //名前を取り込む
       const name = document.querySelector("#name")
   //コメントを読みこむ
       const comment = document.querySelector("#comment")
   //名前とコメントの両方に入力があった場合
   //name.length に文字数が入ってくる
       //if (name.value.length > 0 && comment.value.length > 0){　も同じ意味
       if (name.value.length && comment.value.length ){
           //入力された日時の取得　月は０オリジンなので注意が必要
           const current = new Date()
           const currentStr= `${current.getFullYear()}年${current.getMonth()+1}月${current.getDate()}日`
           //console.log(currentStr)
           //tableの更新
           //tr行設定
           const trTag = document.createElement("tr")
               //td　１行あたり３カラム（３列）なので、ｔｄを３回繰り返す。
               const tdNameTag = document.createElement("td")　　　　　　　　　//一つ目のｔｄ
               tdNameTag.innerText = name.value 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//tdの中身を設定　name.value には上で入力された名前が入っている
               trTag.appendChild(tdNameTag) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//tｄタグを加える１回目
               const tdCommentTag = document.createElement("td")　　
               tdCommentTag.innerText = comment.value
               trTag.appendChild(tdCommentTag)            　　　　　　　　　　　　　　　　　　　//tｄタグを加える２回目
               const tdDateTag = document.createElement("td")
               tdDateTag.innerText = currentStr
               trTag.appendChild(tdDateTag) 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//tｄタグを加える一３回目
           //tableにtr行を挿入
           tbl.appendChild(trTag)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//三つのｔｄの入ったtrを一行追加
           //入力フィールドをクリアして終わり
           name.value =""
           comment.value =""
       }
   })
})

2022/7/05

<!doctype html>
<html lang="ja">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">　
   <title>Javascript game</title>
 </head>
 <body>
   <div class="container">
     <div class="alert alert-info">
         <h1 class="h4">足りない文字はどれ？</h1>
         <button class="btn btn-info" id="makeQuestion">出題</button><span id='timediff' class="px-3"></span>
       </div>
     <div class="row" id="quizDiv"></div>　　　　　　　　　　　　　　　　　　　　　　　　　　//数字を並べる場所
     <div class="form-row">
         <div class="col-2 offset-9">　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//col-2 offset-9 はbootstrap で使うためのセレクタ　以下同様
           答え
           <input type="text" name="" id="answerBox" class="form-control">　　//回答記入用フィールドの設定
         </div>
         <div class="col-1">
           <button class="btn btn-danger" id="answerbtn">回答</button>        //回答ボタンを配置
         </div>
     </div>
   </div>
   <script>
     window.addEventListener("DOMContentLoaded",function(){
        // console.log("load");
       // 問題を書き込む場所
       const quizDiv = document.querySelector("#quizDiv");　　　　　　　　　　　　//問題文字列を並べる場所を使う
//quizDiv に quizDiv で設定した場所（div id ="quizDiv"　で指定されたところ）を入れる　　　　　　　　　　　　　　　　　　　　　　　
       //console.log(quizDiv);
       // 解答入力欄
       const answerBox = document.querySelector("#answerBox");　//入力欄を今後 answerBox として使う
       //console.log(answerBox);
       let condition = false; //出題が押されているかどうかの確認に使う
       let answer = "";　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//答えを保管するための変数
       const makeQuestion = document.querySelector("#makeQuestion");　//出題ボタンを使うという宣言
       //出題ボタンをクリックされたときの動作
       makeQuestion.addEventListener("click",function(){
         condition = true; 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//出題済にする
         const questions = ["A","B","C","D","E"];　　　　　　　　　　　　　　　　　　　　　　　　　//問題の配列を設定
         // console.log("btn clicked");
         //quesiton から１つ取り出す
         answer = questions.splice(Math.floor(Math.random()*questions.length),1); //randomを使って一文字を抜き取る Mathfloor は切り捨て、Math.randomは乱数発生
                　　　　　　　　　　　　　　　　　　　　　　　　　　//Math.random（）にquestions.lengthを掛けることで最大いくつまでの乱数を発生させるかを操作する
                        　　　　　　//Math.random（）は０〜１までの少数なので４を掛ければ０〜３までの少数になる。Mathfloorで切り捨てて整数にしている。
                        　　　　　　//Math.random()にquestions.lengthを掛けているのはquestionsの数が変わってもプログラムを書き直す必要がないようにするため。（他のプログラムにコピペして再利用するときにも便利）
         // console.log(questions.splice(Math.floor(Math.random()*questions.length),1));
         //console.log(Math.floor(Math.random()*questions.length));
         //console.log(answer);
         //console.log(questions);
         //前回の結果をクリア
         while(quizDiv.firstChild){                                        //quizDiv.firstChild がある間は回り続ける
           　　quizDiv.removeChild(quizDiv.firstChild);　　　　　　　　　　　　//quizDivにある子要素（この場合div）を上から一つ取り除く
         }
         //文字列を並べかえる、

         const questions2 = [];　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//並べ替えのための配列を準備
         while(questions.length){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//questions の配列分ループする
         questions2.push(questions.splice(Math.floor(Math.random()*questions.length),1)[0]); 
                                                    //splice で切り取るための開始位置をランダムで決めている。
                                                    //random の乗数をquestions.lengthとしているのはquestionsの配列がループを回る度に変わるから。
                                                    //quetions.splice(開始位置,抜き取る数)
                                                    //questions2.push(配列に付け加える対象) 
                                                    //一番右に[0]とあるのは、splice で抜き取ったものが配列だから。ここでは1個しかないのでゼロ番目と決まっている。
        }
         questions.push(...questions2); // 配列の中身を他の配列にコピーするチート技。新しいJavascriptでしかできない。
                                                    //これを使わない場合はループを使って中身を一つ一つコピーするしかない。

          //文字列を並べる　divタグを追加
          questions.forEach (function(q){　　　//questions の数だけ以下のブロックを実行。qにはquestions配列から取り出した文字一つが入っている。
              //console.log(q);
            const newDiv = document.createElement("div");　　//div タグを生成
            if  (Math.floor(Math.random()*2)===0){　//ランダムで０か１かを発生し、０なら以下を実行
                q = q.toLowerCase();　　　　　　　　　　　　　　　　　　　　　　　　　　//　ｑを小文字に変換（else を使わないのは元々大文字が入っているから
            } 
            newDiv.innerText = q;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//q をdiv の innerText に入れる（htmlで表示される）
            newDiv.classList.add("col-1","border","text-center","me-1");　　　//div に付加するclassを一括設定
                                                    //col-1 は CSS（この場合はbootstrapやけど）で横に並べる設定。
                                                    //border は枠線をつける、text-center は中央揃え、me-1 は右にマージン１
            quizDiv.append(newDiv);　// newDiv を quizDiv に追加
                                                    //ループ一回転で一つの文字<div></div>を追加する
         }) 
       });
       //解答ボタンをクリックされたときの動作
       const answerbtn = document.querySelector("#answerbtn");
       answerbtn.addEventListener("click",function(){// console.log("ansbtn clicked");
         // if (condition == false){
         //   console.log("出題されていない");
         //   return false;
         // }
         const inputAnswer = answerBox.value.toUpperCase();     //inputAnswer に入力された文字を大文字にして代入
         if(condition && inputAnswer.length===1){　　　　　　　　　　　　　　　　　　　　　//condition(出題ボタンが押されていて）inputAnswerが一文字（空白だったり２文字以上だったりしないときに以下のブロックを実行
           if (answer[0] === inputAnswer){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//出題時にとっておいた answer と inputAnswer と突合
             alert("正解です");
           }else {
             alert("不正解です");
             answerBox.value ="";　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//不正解の場合は入力欄をクリアして次の入力を待つ。
           }
         }
       });
     });
 　  </script>
　 </body></html>

タグ：

+ タグ編集

「Javascript」をウィキ内検索

note4recurrent @ ウィキ

記事メニュー

メニュー

ここを編集

最近更新されたスレッド

+新規スレッドを作成する

最近更新されたページ

急上昇Wikiランキング

急上昇中のWikiランキングです。今注目を集めている話題をチェックしてみよう！

新規Wikiランキング

最近作成されたWikiのアクセスランキングです。見るだけでなく加筆してみよう！

人気Wikiランキング

atwikiでよく見られているWikiのランキングです。新しい情報を発見してみよう！

全体ページランキング

最近アクセスの多かったページランキングです。話題のページを見に行こう！