1 ジャバスクリプト入門

Webページを表示するために、HTMLファイルやCSSファイル、画像ファイルやJavaScriptファイルなどがくっついてる、ジャバスクリプトの理解も必須項目

オブジェクトリテラル宣言の構文

             let mich = {
                name : "みっちぃー",      プロパティ　(データ)
              
               learnProraming : function(){ },     メソッド　(機能)
              };

追加できる

             mich.name = "Aチームのみっちぃー";
             mich.age = "6才";

つづきは、左側＃３をクリックしてください。

オブジェクトの意味が解るサイト

変数とは

let mas = 'hallow world';

基本的な書き方letは書き換えOK、列の後書き優先される

constで例文

document . getElementByID("whoo") . offsetwidth ;

ドキュメントプロパテイ. DOM中のID＝whooの要素を取る .横幅プロパテイ

変数宣言の箱に入れる

const  fooWidth　=　document  .  getElementByID("whoo")  .  offsetwidth ; 
const  fooHeight　=　document  .  getElementByID("whoo")  .  offsetwidth ;

３行簡潔に書き換える

const whoo =　document  .  getElementByID("whoo") ;
      
const  fooWidth　=　whoo . offsetwidth ; 
      
const  fooHeight　=　whoo . offsetwidth ; 
      
const whooArea = thooWidth * thooHeight; -whoo要素の面積を返す

変数宣言やり方

const　変数名　=　初期値　；再代入できない、再定義できない。
let 　変数名　=　初期値　；再代入できる、　再定義できない。
var　　変数名　=　初期値　；再代入できる、再定義できる。

文字ルール

１字目は、英文字か、
＄「ドルマーク」か、
＿「アンダースコア」
単語の二字目は大文字、camelCase を使う以上が変数名のルール　
英文字というのは、つまり英単語で書くことローマ字や日本語は望ましくない。　

関数と if else 構文

最初でなく、あるタイミング任意の条件で命令を実行したい場合や、同じ命令を何度も実行したいときに使う

コード例


  let kinta = ['ひとーつ','ふたーつ','みいいいーつ']; 
   const test = () => {



  //() =>これアロー関数、よく見る  function() を記述しても同じこと
  //ここに実行したい命令を書く今回は if else 文 そのまま全部入れる！
  //アロー関数、とはなに
   
  
     if(kinta.length > 4){
              console.log('ホンマンヤ！');

     }else{
               console.log('ヤベーー！');
             }
     };
     test();

// 関数名（）ダブルセミコロンで実行できる、test(); がないと無反応
     
//文字列は０からなので３です、結果 ヤベーー！　です

同じ命令を何度でも使う

コード例の2行目の( )内と3行目の数字ここでは4 を同じ英文字を入れて　test();のかっこ内に任意の数値入れるだけ何度も使える

test();は何回も使える、test(２);test(３);test(４);　何回も返す

つづきの詳しい説明左側＃６・＃７コールバック関数をクリックしてください。

条件分岐

プログラミングを学んでいると「ある条件が成り立つときだけある処理を行う」という場面が出てきます。このようなプログラムを条件分岐と言います。

if ( 条件式 ) {

処理　 -条件式がなり立てば実行される

} -セミコロン　;　は不要

実際のコード


const number = 12;
 
if(number > 10){
    //「numbeの値がより大きい」という条件

  console.log("numberは１０より大きいです");    

 }

if文の条件式の部分を出力してみると、「true」が出力されています。このtrueとは一体なんでしょうか？「true」は真偽値と呼ばれるものダ！

<script>
const number = 12;

console.log(number>10);   
 
</script>

成り立たなければ「false」という真偽値に置き換わります。

const number = 8; falseとなる

大小を比べる演算子

「>」は比較演算子と呼ばれる、大小比較の記号

厳密等価演算子

等価演算子は == や != のことで、例えば、"12" と 12 が同じ「true」が出力され、　　

厳密演算子は、=== !== では異なるため、特に理由がなければ、厳密に比較できる厳密等価演算子を利用するようにしましょう。

elseの書き方

下のように、if文に「else」を組み合わせると「もし〇〇なら●●を行う、そうでなければ■■を行う」という処理ができるようになります。 if文の条件がfalseの場合、elseの処理が実行されます。

if ( 条件式 ) {

条件が「ture」の時の処理

}else {

条件が「false」の時の処理

}

else ifの書き方

if ( 条件式 1 ) {

条件式 1 が「ture」の時の処理

}else if ( 条件式 2 ) {

条件式 1 が「false」、条件式 2 が「ture」の時の処理

}else {

どちらも条件が「false」の時の処理

}

複数条件　・「かつ」・「&&」

「条件1 && 条件2」は「条件1かつ条件2」という意味で、複数の条件がすべてtrueならtrueになります。

// 実例　　コンソール　「私は20代です」となる

               const age = 24;

                if (age >= 20 && age <30){

                    console.log("私は20代です");

                }

「または」は「||」で表します

「条件1 || 条件2」は「条件1または条件2」という意味です。この場合は、複数の条件のうち1つでもtrueならtrueになります。

配列[] とループ while()の実際

　　　　　　
          <p id="wz"></p>
          
         
         <script>
        //配列
         let kinta = ['ひとーつ','ふたーつ','みいいいーつ']; 

        //ループ文
        
        let index = 0;                  //カウントする
        
       while(index < kinta.length){     //()の条件を満たしたら｛ ・・  ｝が繰り返りえされる
                                        //lengthは数を取って来る「配列の数を指定する命令」
         console.log(kinta[index]);     //console はjavascript実行結果がわかる！
         
         index++;                       //繰り返したい命令、必ず入れる無限ループダメ
      }
      
     document.getElementById("wz").innerHTML = kinta;   //アクセスしてkinntaを全部表示される

     document.getElementById("wz").innerHTML = kinta[0];//後に書いた方表示される１番目のみ
       <script>

コンソールに1から5までの数字を順番に出力まずは簡単に

console.log(1); console.log(2); console.log(3); console.log(4); console.log(5);

毎回書かず、変数を用いて

const number = 1; console.log(number); number += 1; console.log(number);

1から100までの数字を出力する場合を考えてみましょう。100回書けばできますが、それはさすがに大変すぎますね。

while文

while文は下の図のように書き、「条件式がtrueの間、{ }内の処理を繰り返す」ことができます。 {}の後にセミコロンは不要です。

while ( 条件式 ) {

処理　

} -セミコロン[ ; ]は不要

console.log(number); number += 1;この部分を「{ }」の中に書いていきます、処理に繰り返し処理を一回入れるだけダ。

次に、「いつまで繰り返すか」を指定するための条件式を追加しましょう。
今回は「変数numberが100以下」の間に処理を繰り返したいので、条件式を書きます。
まず条件式の判定が行われ、trueの時のみ{}の中で処理が1度実行されます。
その後、再び条件式がtrueかどうかチェックされ、trueであればもう一度処理が実行されます。

実際のコード


let number = 1;
 
while(number <= 100){
    //変数numbeの値が100以下の時処理を繰り返す

  console.log(number);    
       number += 1;  

 }

number += 1; この部分「変数numberの値を更新するコード」を書き忘れると、永遠に繰り返し処理が続いてしまいます。（これを無限ループと呼びます。）

while()の返しはブラウザでデベロッパツールのconsoleを開き確認できる。

for()を用いた例: for(let number = 1;number <= 100 ; number += 1){
//変数の定義条件式変数の更新; console.log(number);; } //セミコロン[ ; ]は不要
計算式の省略「number += 1」は「number ++」のように省略して書くことができます。また、引き算の場合にも、「number -= 1」を「number --」と省略することができます。 while文やfor文では、この省略した書き方を使ってコードを短くすることができますので、覚えておきましょう。

引数

この構文は、length 配列の要素の長さここでは「'ひとーつ','ふたーつ','みいいいーつ'」のこと０から数えるのでここでは２までですです

let kinta = ['ひとーつ','ふたーつ','みいいいーつ']; 

//length が指定した数より大きいと「ヤベーー！」と小さく範囲内であれば「ホンマンヤ！」と返す
//if文を書いてあります
//命令の一部替えて使いまわしたいときに
//例えばarg（アーギュ）と　() =>のかっこ内にarg、ifのところににもargと変え、
//引数としてtest();内に1⇒5変えて実行する


const test = (arg) => {  
        
if(kinta.length > arg){

  console.log('ホンマンヤ！');

}else{

  console.log('ヤベーー！');
    }
};

test();                   //test関数　引数変えて答えを返して確認
test(1);
test(2);
test(3);
test(4);
test(5);  


         
// 5つ返すせるかな？ cosole画面確認すると「ホンマヤ！」返すのは

引数が　１と２ です

引数に関数を持たせて、コールバック関数という

つづきの詳しい説明左側＃７コールバック関数をクリックしてください。

非同期関数

<body>
<p>
Html、Googleのchromeブラウザでデヴツールのconsoleを開く

開いて見ると<a href="https://jsonplaceholder.typicode.com/ ">JSON</a>の

APIをデータを操作出来るこれで練習することができた。
</p>

<script>
async function callApi() {
  
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  
  const users = await res.json();  
              //resが持っているジェイソン メソッドを使っている

console.log(users);
}
callApi();
</script>

</body>

つづきの詳しい説明左側＃８をクリックして非同期関数をご確認ください。

Web原理とAJAX

クライアントサイドとサバ―サイド間のリクエスト（req）と返すレスポンス(res）
index.html等で返すものをレンダリングしてCSS・JavaSript操作できる、ページ移行のたび。
htmlで再レンダリングされるこれが従来のWeb原理　
AJAXでデーター再レンダリング保存更新のしくみ AJAXの技術です。
レンダリングとは情報を整形して表示すること、平たく言えば機械語を見れるようにしてくれることカナ

Webページが表示されるステップ

Webページが表示されるまでのWebブラウザの3つめの最後のステップは、取り込んだデータのとおりに画面に表示（レンダリング・rendering）

-259-

Page Top

2 ジャバスクリプトの仕事は

・1 -データやり取り 2 - DOM操作する

・Twitterなどのようにインフィニティスクロール　無限操作ができる

・JSON（ファイルの書き方ルールの一つ）がレスポンスでindex.html返す代わりにWebAPIから　データのかたまりを返す

・パース【parse解析する】HTMLを解析するパート

・DOM操作（Document Object Model）とは簡単に言えばdiv要素等を取り出したりテキストを置換・要素追加・削除が出来ること。
W3Cから勧告されているHTML文書やXML文書をアプリケーションから利用するためのAPI（Application programming interface）です。

Ajaxとは「Asynchronous JavaScript + XML」の略でAsynchronousとはJavaScriptとXMLを使って非同期にサーバとの間の通信　らしいが、接頭辞のAは「〜がない」「非」「無」の意味synchronousは同期のいみシンクロと同じエイシンクロナスは非同期という意味「JavaScriptを使って非同期通信をするんだな〜」ジャバスクリプトで実装するてことか。

-273-

Page Top

DOMノードとは

例えば、親ノード・子ノード操作してみる

次にHTMLを例としてノード図を説明する

<!DOCTYPE html>
<html lang="ja">
<head>
   <title>タイトル</title>
    <meta chareset="utf-8">
</head>
<body>
    <h1>大見出し</h1>
   <!-- 本文が入る -->
    <p id="text">テキストテキストテキスト</p>
</body>
</html>

上記をDOMツリーで表すと下記のようになります。


 1 : ドキュメントノード
 2 : 要素ノード
 3 : テキストノード
 4 : コメントノード


Document -- 1

 HTML 2



-Head  2
　　├-- 3
　　├--title  2
　　├-- 3
　　├--meta  2
    └-- 3
--- 3




   Body  2



----3
―H1 2
---- 3
---- 3
-コメント-4
--- 3
―P 2
--- 3 テキスト
--- 3

-322-

Page Top

3 用語とオブジェクト指向言語

オブジェクト:　データと機能まとめたもの

プロパティ:　オブジェクト中のデータ

メソッド:　オブジェクト中の機能

オブジェクトの同類集まりを一つのプロパテイに入れ子構造にできる　更に一覧プロパテイなどで一つにできる

・オブジェクトリテラルを宣言する方法は括弧{・・・}を使いプロパティとメソッド入れると、データと機能を持つ　最後に括弧}で閉じる

・ドット - Windows.document.list.mich[0] -などで . を用いてアクセスデータ取得する（プロパテイを）方法とメソッドを実行することができる

・配列 [ ・・・] 角（カド）括弧を用いてアクセスする方法もある

オブジェクトリテラル宣言の構文


<script>
let mich = {
     name : "みっちぃー",                  //プロパティ(データ)
              
     learnProraming : () =>{
        
         console.log(alert('学ぶぞ！頑張る ！'));
         
         },                                //メソッド(機能)
    
    };
    
//letはデータ追加できる
          mich.name = "Aチームのみっちぃー";
          mich.age = "6才";

console.log(mich.learnProraming());         //関数の命令を実行する結果
</script>

オブジェクト例文ピザの色・大きさ・香・味と関数に美味しいとデーターとメソッドを入れた


    <script>

      const pizz = {
        color:'pink',
        size: 'large',
        purfume: 'mint',
　　　　 taste: 'sweet',
        goRestrant: () => {
          console.log('Delicious ! ');
          }
       };
  
      console.log(pizz.goRestrant());     //Delicious ! 
　　　　
      //pizz. taste = 'Spicy';  後から辛い味を追加する
      //console.log(pizz);  オブジェクトの内容全部は何か見れる
    </script>

追加既存のオブジェクト試す


console.log(window);     //Windowオブジェクト　PC全部

console.log(window.innerHeight);  // Windowの高さ出る

console.log(window.alert(''));    // ダイアログボックス

console.log(document);            // documentオブジェクト

console.log(document.getElementsByTagName(''));        // Windowの何か調べたい要素を('')内に入れる

console.log(document.getElementsByTagName('body')[0]);　//鍵括弧で数 多いと絞れる

document.getElementsByTagName('div')[0].addEventListener('click', ()=> {
//命令をかく
window.alert('Hellow World!');
});                            //addEventListener(中に２つの指定できるクリックやスクロールなどと関数を指定
                                             //クリックしたら何かの命令をかく

オブジェクトbuttonを実行したら指定のURL移するる


<body >
<h2><input type="button" value="今作業中のURL移行"></h2>
<div><input type="button" value="canape-URL"></div>

<script>

document.getElementsByTagName('input')[0].addEventListener('click', ()=> {

window.location.href = 'http://ww2019.starfree.jp/java_motion/#3'; 
});                           //このURL移行先となる


document.getElementsByTagName('div')[0].addEventListener('click', ()=> {

window.open('http://ww2019.starfree.jp/', '_blank'); 
});                // 新しいタブを開き、ページを表示

</script>

</body>

オブジェクトの意味が解るサイト

-390-

Page Top

4 コードをプラウザに書く

JavaScriptはプラウザで動く言語、プラウザはオブジェクトで定義されている、そのプロパテイやメソッドにアクセスや操作できる

PCからプラウザ（Google Chrome）のデベロッパーツールからconsoleを開きWindowにアクセスしているのを書いて確認してみよう Windowオブジェクト

ウインドウへのアクセス

アクセスはドット　.　つなぎで書込みむ

Windowはプラウザへのアクセスのようなもの、
document に getElementByID() など多くのプロパティ　・メソッド備わっている

console画面を開き以下のコードを貼付け"値"が取り出せる

オブジェクトの働きをchromeで実行し確認できます


    let youtuber = {
    list: {
      business: {
       youtuer: [
         { name:"しまぶー", age: 20, teachPrograming(){}},
         { name:"あっちやん", age: 70,teachHistory(){}}
       ],
       teach(){}
      },
      entertainer:{
        youtuer:[{name:"ヒガキン"},{ name:"はじめ社長"}],
        makeSmailer(){}          
        }
      },
      plan(){},
      upLoadVideo(){} 
 };
 
  youtuber.list.business.youtuer[1].name();

プログラムからDOM要素の習得

例えば、yahoo！を開いたら　console画面に

document.getElementById("Masthead");　と書けるので実行すると要素が見れる

コンソールという画面に文字を出力（表示）します

「console.log("○○");」というコードを書くと、()の中の○○という文字がコンソールに出力されます。

console.log( " Hellow World " ) ；など

「Hello World」のような文字のことを文字列と呼びます。文字列は、このようにシングルクォーテーション（ ' ）かダブルクォーテーション（ " ）で囲む必要があるので注意しましょう。

文の最後はセミコロン（;）で終わります。セミコロンはなくても正常に動作する場合が多いですが、思わぬ不具合が生じる可能性があるので忘れずにつけましょう。

console.log(3); console.log(5+2); console.log(3-2); console.log(9 % 2);

数値（数字）を扱うこともできます。数値は文字列と違いクォーテーションで囲みません。数値は足し算や引き算といった計算もすることができます
console.log(5 + 2);は足し算の結果である7が出力されます。一方、「" 5 + 2 "」にクォーテーションをつけると、文字列と解釈されそのまま出力されます。文字列と数値は明確に違うものであることを意識しましょう。

「%」記号を使うと、割ったときの余りを求めることができます。プログラミングでは余りの計算を使う機会がよくありますので、しっかりと覚えておきましょう。
9割る2は、4余り1　１が答えで表示

console.log("にんじん"+"だいこん"); console.log("X"+"Y"+"Z"); console.log("3"+"5");

「+」記号を用いると、文字列同士を連結することができ、「"にんじん" + "だいこん"」とすると、「"にんじんだいこん"」という1つの文字列になります。

"3" + "5" は「"35"」という文字列になりますが、( 3 + 5 )は「8」になります。「文字列と数値は別物」ということをしっかり意識しましょう。

alart()　ダイアログボックス・alert・confirm ・prompt・ついてこちら

-436-

Page Top

フロントエンドの環境-テキストエディタ　JSBIN ⇒　使い方Web.サイト

5変数

変数は「let 変数名 = 値」として定義します。プログラミングの「=」は「等しい」という意味ではなく、「右辺を左辺に代入する」という意味です。「let」は「これから変数を定義します」という宣言で、その後ろに変数名を書き、値を代入します。

コード例

let president = 'Joe Biden';

console.log(president) ;

letは書き換えOK、追加で書き足す　後が優先される

アクセスして取り出し　箱　に入れる操作

document . getElementByID("whoo") . offsetwidth ;

このコード説明

document-プロパテイ.getElementByID("whoo")はDOM中のIDwhooの要素を取る.offsetwidth-横幅プロパテイ。

変数宣言のconstの箱へ入れる

const  fooWidth　=　document  .  getElementByID("whoo")  .  offsetwidth ; 
const  fooHeight　=　document  .  getElementByID("whoo")  .  offsetwidth ;

３行簡潔に書き換える

const whoo =　document  .  getElementByID("whoo") ;
      
const  fooWidth　=　whoo . offsetwidth ; 
      
const  fooHeight　=　whoo . offsetwidth ; 
      
const whooArea = thooWidth * thooHeight; -whoo要素の面積

変数宣言

やり方

文字ルール

一字目は、英文字か、
＄「ドルマーク」か、
＿「アンダースコア」
単語の二字目は大文字、camelCase を使って変数名

変数は、一度代入した値を変更出来る

一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされます。定義する時と違って「let」は必要なく、「変数名 = 新しい値」と書けば値が変更されます。

let president = 'Joe Biden'; 　
console.log(president) ; 　　
president = 'Trump';
console.log(president) ;

プログラムは上から順に実行されるので、後で代入された値で変数の中身が更新されます。

変数自身を更新する

let president = 'Trump'; 　　　　
president = 'Trump' + 'II'; --letは、更新時いらない--

「number = number + 10」といった書き方には、省略した書き方もありま

定数とは

変数とよく似たものに、定数があります。定数はletの代わりにconstを用いて定義します。
定数は値を更新することはできません。

テンプレートリテラル

これまで文字列や定数の連結には、「+」記号を用いてきました。
ES6では、それ以外の方法として「テンプレートリテラル」という連結方法があります。
テンプレートリテラルを用いると、文字列の中に定数（変数）を埋め込むことができます。
下のように、文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができます。
この時、文字列全体をバッククォーテーション（`）で囲む必要があります。
また、図のように複数の変数や定数を埋め込むことも可能です。

-480-

Page Top

６関数

何か構文を書込むと何かをして結果を返す構文箱か

実行文

オブジェクトのメソッドは関数になっている
window.alert();
window.console.log();
window.document.getElementByID("");

通常
const who = {
　alert: function() {--},
} ;

短縮
whoというオブジェクトの中にalertというメソッドを定義した

const who = {
　alert() {--},
} ;
whoというオブジェクトの中にalertというメソッドを定義した

６関数の構文
-212-

通常
function 関数名（仮引数1 ,仮引数2 ） {
　//処理--
　return 関数返り値 ;
}
関数名は英動詞で次大文字camelCase。仮引数は呼ぶデータcut();括弧内と同じ

たとえば調理というメソッドを例にcutの関数でreturnで返す
function cut（food ） {
　//切る処理--
　const cutFood = food.slice();
　return cutfood;
}
cut(carrot);//人参
cut(potato);//じゃがいも
関数返り値は処理した成果結果をもらう必要だがある
const cutCarrot = cut(carrot);//人参
const cutPotato = cut(potato);//じゃがいも
funtion throwAway(){
　//捨てる処理--
　delete food; }
更に処理続ける切られた人参をデータで関数にして残す処理
それに、returnが要らない処理を追加

６実例
-453-

--------tweeterなどで１４０字以内なら　trueを返す　--------

function isTweetable(text){
  return text.length <=140;
}

console.log(isTweetable(" 第百代岸田文雄の内閣 は日本人の生活向上を目指すべき"))

//プラウザで開くとconsoleにtrue返した。

ツイートできるかつまり　is--ableで「--ができるか」　の関数
引数は文字データでtextにする
ツイ-トができるかなのでtrueかfalseで返す
console.logは値をみるのでテキストを書きそれがokならばtrueを返す

-------字数以内ならalertの文を返す　-----------
                             //returnでない例
                             
function isTweetable(text){
  return text.length <=140;  
}

//text.length <=140　と同じisTweetable(text)書き換えた

function alertTtweetable(text){
　if (isTweetable(text)){  
  alert("you can tweet!");
  }
}

//consoleにlog出す必要ないのでこれ

alertTtweetable(" 箱根園のふれあい動物園かわいいい！");
 

 
 -----匿名関数-functionの後に関数名が無いがふつうに稼働--------
 
 
 const isTweetable = function (text){
 
    return text.length <= 7;
}

console.log(isTweetable("豆腐かつ煮定食"));

//true返す

------------------------------------

-518-

Page Top

7 関数その２

7 コールバック関数" 以下のcodeを貼り付けワードパッドこれを使って

高階関数(コールバック関数)

引数に関数を渡す、受けた「関数」を高階関数という

構文
function 高階関数(コールバック関数) {
　//処理--
　コールバック関数() ;
}

   	
//- - (" ")内部 文字数が７ でfalse返す- - - - - -  - - 

//const isTweetable = function (text){
 
//  return text.length <= 6;

//}
//console.log(isTweetable("masamat"));

//- - 書き変えたこの場合はfooの文字数が ６以内でtrue返す- -   

//function isTweetable(text){
// return text.length <= 6;
//};
//console.log(isTweetable("foo"));



//- - これは ダイアログボックスで表示される- - - - - - -  

function alertTweetable(text){
if (text.length <=140){
alert("you can tweet !");
 }
}

alertTweetable("masumoto");

------------------------------------------------

-568- Page Top

---  コールバック関数(高階関数)  ---
                       
              //以下は高階関数を使わない処理
               
functin bring(food){
  if(/*手洗いが終えたら*/)｛
              //食材を持ってくる処理
  ｝
}
functin peer(food){
  if(/*手洗いが終えたら*/)｛
             //食材皮をむき処理
  ｝
}
functin cut(food){
  if(/*手洗いが終えたら*/)｛
            //食材を切ってもらう処理
  ｝
}
             //以下は高階関数を使った処理

function washed(fn,food){
                 //いろんな　たられば追加可
  if(/*手洗いが終えたら*/)｛
    fn(food);    //コールバック関数の処理
  ｝          
}
   //-以下は各人の処理-
 
functin bring(food){
  
  //食材を持ってくる処理
 
}
functin peer(food){
  
  //食材皮をむき処理
 
}
functin cut(food){
 
  //食材を切ってもらう処理

}
              // 上の（fn）に色んな関数を入れる
washed(bring); // 手洗いが済んだか監視できる機能的                
                 
washed(peer,"人参"); //第2引数の場合など色々できる                
                 //-ここまで高階関数を使った処理
                 
Page Top 
----------使用例(高階関数)--------2021/10　稼働OK-

function unfollow(){
console.log("フォロー外しました");
}
function cancelTweet(){
console.log("ツイートをキャンセルしました");
}
//unfollow();
//cancelTweet();

//ボタンを押したら実行する↓OK押し確認したらunfollow実行する
//(高階関数 fnの部分関数に関数を入れてる)
//確認にウインドのconfirmメッソッドを利用する

function confirmed(fn){
  if (window.confirm("実行しますか？")){
   fn(); 
  }
    
}

confirmed(unfollow);


----コールバック関数に匿名関数つかう例---2021/10　稼働OK----

function unfollow(){
  console.log("フォロー外しました");
}
const cancelTweet = function(){   //匿名関数つかう
  console.log("ツイートをキャンセルしました");
}
//unfllow();
//canceltweet();

function confirmed(fn){
  if (window.confirm("実行しますか？")){
   fn(); 
  }
    
}

confirmed(cancelTweet );

Page Top 
---------------------------------2021/10　稼働OK--

function confirmed(fn){
  if(window.confirm("実行しますか？")){
   fn(); 
  }
    
}
confirmed(function(){
  console.log("foll0wを外しますか");
});


----［ 実行 ］と書き込むと"リポジトリを削除"返す--2021/10　稼働OK--
//GitHubのdelete this ripository について
//これは文字列を打ち込まないと実行できない、これを実装
//window のprompt メッソッドの挙動を知る

ダイアログボックス参照して

//ダイアログボックスに「実行」と文字列を書いたら返す



function confirmed(fn){
  const input = window.prompt("実行しますか？");
  if (input === "実行"){
   fn(); 
  }
    
}
confirmed(function(){
  console.log("リポジトリを削除");
});


//if文をfunction()側に移譲する
//そのままでではエラー

//引数inputを fn()と function() かっこ内に渡す
<script>
function confirmed(fn){
  const input = window.prompt("実行しますか？");
  fn(input);     
}
confirmed(function(input){
 if (input === "実行"){

  console.log("リポジトリを削除");
   }
});

 </script>
//確認-686

GitHubのリポジトリを作る

-690-
7 ドキュメントのボタンを押した処理について

ボタンを押した処理

-----コンソール稼働OK--------------

Page Top 

<body>
<button id='btn'>box</button>

<script type="text/javascript">
 //---ジャバスクリプト-----
window.onload = function() {

    //要素を取得
    var btn = document.getElementById('btn');
   
   //第２引数コールバック関数と匿名関数/ボタンを押したときの処理console.log
   
    btn.addEventListener("click",function(){  
      
    console.log("フォロ―解除");
    }, false);                     
   };
  </script>
</body>



//以下は”foo”が３個出る処理配列見えない
//forEach関数を使う

const foods = ["にんじん","じゃがいも","玉ねぎ"];
                                     //文字列の配列は[  ] にて
foods.forEach(function(){
 console.log("foo")
}); 


//以下は文字を出す処理
//引数を使う
//配列内全部出る　コンソール稼働OK

const foods = ["にんじん","じゃがいも","玉ねぎ"];

//文字列の配列は[  ] にて

foods.forEach(function(food){
  console.log(food)
});

Page Top 
//コールバック関数が使わている例です。

-757-

Page Top

8 外部とのデータやり取りしてみよう

プログラムでWebAPIを叩いてみよう
「API」って何？

APIの定義
「Application Programming Interface」の頭文字です。

英文字で意味、
「アプリケーションをプログラミングするためのインターフェース」


インターフェイスとは、
コンピュータ用語で「何か」と「何か」をつなぐものという意味を持ちます。
例えば、USBも、インターフェイスの一つです。


API公開する、とは
わかりやすく言うと、ソフトウェアにAPIという外部とやりとりする窓口を作り、
外部アプリとコミュニケーションや連携ができる状態にする、ということです。

UIてなにユーザーとの接触面か
非同期関数とasync function 宣言
AsyncFunctionのブラウザーの互換性

-785-


Page Top 

-----解説----

URL引数データをPromiseオブジェクトが取り出せるか確かめるコード


 function callApi() {
  const res = window. fetch("https://jsonplaceholder.typicode.com/");
            
     //window. は省略する
     //＝右側にメソッドを書く  fetchメソッド得たURL引数データを変数名　resにいれる

  console.log(res) ;
    //呼出すか見て確認するためにresを書く””は要らないPromiseオブジェクトが出るここが要点！
}
callApi();


---sampl-1  ---


エイシンクアウェイ（async・await）非同期関数と
fetchを使ってResponseオブジェクを返し取る
        
async function callApi() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  
         //Promiseオブジェクトが出るのを解決するため エイシンク await を入れる(非同期関数)
           //アウエイト(await)が使えるようになる　Responseオブジェクトが出るここではまだ見れない
           //Responseオブジェクトが持っている　json()メソッドを使えるawaitを付けて-sampl-2-
           
console.log(res);   // 実際呼出すか見て確認 
}
callApi();          //呼び出す 



-809-

Page Top 

  ---sampl-2---
  
上の例では、内容が解らないので  
json()メソッド　で使いやすい内容を返す
 
  
async function callApi() {
  
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  
  const users = await res.json();  
              //resが持っているジェイソン メソッドを使っている

console.log(users);
}
callApi();

これでURLの内部取り出せた、ここではJSONの細かいデータを返す
他にthemを使うやり方や

 
XMLHttpRequest()を使うやり方がある    
 
クリックでユーチューブ見る上?

こちらJSON　バックエンドが作ったAPIを操作出来るこれで練習することができた。

-856-

Page Top

9 JavaScriptの活用

前回の取り出したデーターを id<>もっと<>で
新たなデーターをjavascript側から取得する仕組み

 ---index.html---

<!DOCTYPE html>
 <html lang="ja">
  
    <meta charset="UTF-8" />
     <title>Document</title>
   </head>
   <body>
     <ol id="lists">
       <li>example name</li>
       <li>example name</li>
       <li>example name</li>
     </ol>
     
     <button id="addBtn">もっと</button>
     
    <script src="index.js"></script>
     
 

<script>
// ---index.js---
  
  /*
   htmlの id<>もっと<>をjavascript側から取得する
   document.の中のgetElementById("")メソッドを使ってbuttonの中を取得
   毎回書くのは面倒なので変数名に入れ込む
   ボタンに何か動作紐ずけるイヴェントでクリックイヴェントを使う
   アドイヴェントリスナーaddEventListener(-- , --)は第2引数がコールバック関数を受け取る
   console.logで確かめる
   */
   
const button = document.getElementById("addBtn");
const lists = document.getElementById("lists");

button.addEventListener('click', function() {
   console.log("foo"); //まずcosole画面確認！！
  
});
</script>
</body>
</html>

※URLから htmlのusersをfunction()とfetch("URL")で取り出す

---index.html---
　　　上と同じ
---index.js---
const button = document.getElementById("addBtn");
const lists = document.getElementById("lists");

button.addEventListener('click', async function() {
                      //データのやり取り
                      //function()とfetch("URL")で情報やり取り可
   const res = await fetch("https://jsonplaceholder.typicode.com/users"); 
                      //awaitで取り出しやすく、resはjsonを使って  
   const users = await res.json();           
   console.log(users);
});

-923-Page Top
htmlにタグを作る
＜li＞＜li＞がクリックすると繰り返し追加
createElementはhtml要素を生成する
innerTextは文字を書く操作

---index.html---
　上と同じ

---index.js-1--

const button = document.getElementById("addBtn");
const lists = document.getElementById("lists");

button.addEventListener('click', async function() {
                                      //データのやり取り
                                      //function()とfetch("URL")で情報やり取り可
  // const res = await fetch("https://jsonplaceholder.typicode.com/users"); 
  // const users = await res.json();  //awaitで取り出しやすく、resはjsonを使って
 
   
                                 //DOM操作
                                 //createElementはhtml要素を生成する
const list = document.createElement("li"); 
list.innerText = "masu文字";     //＜li＞タグに文字を入れる
lists.appendChild(list);
console.log(list);
});

htmlに＜li＞タグを作る
createElementはhtml要素を生成する
innerTextは文字を書く操作
innerTextに取り出すせた郵便番号をリストにして10人分書く操作

--------index.js-2--------


const button = document.getElementById("addBtn");
const lists = document.getElementById("lists");

button.addEventListener('click', async function() {
                                      //データのやり取り
                                      //function()とfetch("URL")で情報やり取り可
  const res = await fetch("https://jsonplaceholder.typicode.com/users");   
  const users = await res.json();      //awaitで取り出しやすく、resはjsonを使って
 
   
                                    //DOM操作
 users.forEach(function(user){       //各ユーザーの構文が取り出せた10回ループ
  const list = document.createElement("li");  //createElementはhtml要素を生成する
 
            //list.innerText = "masu文字";   //＜li＞タグに文字を入れる
            //list.innerText = user.name;      //実際にユーザー名10ヶ押すたび取り出せた
  list.innerText = user.address.zipcode;      //実際〒番号10ヶ押すたび取り出せた
  lists.appendChild(list);

 });
});

-985- Page Top
DOM forを使って別の書き方ユーザー名10ヶ押すたび取り出す

--------index.js-3--------

const button = document.getElementById("addBtn");
const lists = document.getElementById("lists");

button.addEventListener('click', async function() {
                                //データのやり取り
                                 //function()とfetch("URL")で情報やり取り可
  const res = await fetch("https://jsonplaceholder.typicode.com/users");  
  const users = await res.json();   //awaitで取り出しやすく、resはjsonを使って
 
   
//DOM操作
for (let index = 0; index < users.length; index++) {
  const user = users[index];
  const list = document.createElement("li");  //createElementはhtml要素を生成する
  list.innerText = user.name;                 //実際にユーザー名10ヶ押すたび取り出せた
  lists.appendChild(list); 
}

 //users.forEach(function(user){       //各ユーザーの構文が取り出せた10回ループ
 // const list = document.createElement("li");  //createElementはhtml要素を生成する
  //list.innerText = "masu文字";   //＜li＞タグに文字を入れる
  //list.innerText = user.name;      //実際にユーザー名10ヶ押すたび取り出せた
 // list.innerText = user.address.zipcode;      //実際〒番号10ヶ押すたび取り出せた
 // lists.appendChild(list);

// });
});

-1020-Page Top
if文を使って条件ありで取り出し

-----------index.js 4 --------------

const button = document.getElementById("addBtn");
const lists = document.getElementById("lists");

button.addEventListener('click', async function() {
//データのやり取り
  const res = await fetch("https://jsonplaceholder.typicode.com/users");   //function()とfetch("URL")で情報やり取り可
  const users = await res.json();           //awaitで取り出しやすく、resはjsonを使って
 
   
//DOM操作
users.forEach(function(user){       //各ユーザーの構文が取り出せた10回ループ
  if(user.id <=5){
   const list = document.createElement("li");  //createElementはhtml要素を生成する
   
                 //list.innerText = "masu文字";   //＜li＞タグに文字を入れる
  
  list.innerText = user.name;      //実際にユーザー名10ヶ押すたび取り出せた
  
                 //list.innerText = user.address.zipcode;      //実際〒番号10ヶ押すたび取り出せた
  
  lists.appendChild(list);
  }
  

  });
});

-1054- Page Top
リファクタリング　整理と順番
--リファクタリング　整理して誰でも分かり合える構成------

 
----------index.js 5 ------------
//DOM
const button = document.getElementById("addBtn");
const lists = document.getElementById("lists");


//関数（メソッド）
function addList(user){       //各ユーザーの構文が取り出せた10回ループ
 
   const list = document.createElement("li"); //createElementはhtml要素を生成する
  //list.innerText = "masu文字";   //＜li＞タグに文字を入れる
  list.innerText = user.name;   //実際にユーザー名10ヶ押すたび取り出せた
  //list.innerText = user.address.zipcode; //実際〒番号10ヶ押すたび取り出せた
  lists.appendChild(list);
 }

async function getUsers(){        //function()とfetch("URL")で情報やり取り可
  const res = await fetch("https://jsonplaceholder.typicode.com/users");   
  const users = await res.json();
  return users;
}
async function listUsers() {
  const users = await getUsers();//awaitで取り出しやすく、resはjsonを使って
  users.forEach(addList);
}
//イベント
window.addEventListener("load", listUsers); 
button.addEventListener("click", listUsers);

-1092-

Page Top

クリックボタンと実例

-ジャバスクリプトcode-青色

1 ＜button＞タグだけこのままでは何もおこらない

<button>htmlボタンタグ</button>

2 onclick="alert()"をタグ内に加えると

<button onclick="alert('Nice click !一回目'); alert('Nice click !2回目')">ボタンタグ</button>

3 htmlのとbuttonタグ内に書いてある替わりに id="baz"と入れ


<button id="baz">ボタンタグ</button>
<script>
document.getElementByID("baz").addEventListener("click", function(){
  alert('Nice click !1回目');
  alert('Nice click !2回目');
});
</script>

と別にかいてみる

これがジャバスクリプトの挙動ですね。
＜script src="index.js"＞＜/script＞ソースとして書くのが普通らしい

MackDoun

-htm.md-(md code)
------------------------------------
# h1
自分が社会と適合できない
## h2
森林伐採や開発
#### h3
穏当な
#### h4
##### h5
###### h6

*こんにちは HI*

**これは**

~~打消し線~~
> 引用したい文章
>>二重引用もできます
>
> 引用文献
>> 引用
- a
  - b
    - c

一行のソースコード ` echo 'Test'; `
 
```php
//複数行のソースコード
$test = 'test';
return $test
```

[canape](https://canape2020.stars.ne.jp/)

[camape]()

---

| 左寄せ | 中央寄せ | 右寄せ |
|:------|:--------:|-------:|
| 左    | 中央     | 右　   |



* その1
* その2
* その3
-------------------------------------------

-1183-

Page Top

モジュール

＃＃
モジュール２つの形式
・CommonJS形式　はサーバ―サイド
・ES Modules 形式　は公式言語仕様

パッケージ管理システム
　依存関係自動化
npm基本

ビルド　沢山の環境　動くため
ビルドツール

webpack
　『Webpack』とは、モジュールバンドラーツールのことで、
　Node.jsというJavaScript環境で使われます。
---モジュールの基礎---

　CodeSandbox templatesが選べるCodeSandbox

　
ES Modules 形式を使う
　　＜script＞を二組使うと名前がかぶってエラーとなる名前空間を分ける
モジュールないと触ると怖い

＜script typ="module"＞を使うと影響範囲を閉じることができる
名前空間がなくなる　　上から読まれるheadの中でもOK
モジュールスクリプトを外部に分ける
あるモジュールから別のモジュールにデータやり取りできる

export const name = "みっちゃん";など　　export { name };でも簡単にできる？？
別のindex.jsに移動　
inport {name} from "./user.js";
document .body.textContent = name; とすると置き換わり表示される試してみよう
＃＃

html- uer.js- index.js-と3つのファイルを使う場合
inport {name} from "./user.js";　別の書き方
名前付きinport.export
const name = "みっちゃん";
const name2 = "ちかちゃん";
export {name,name2};など２つ入れることもできる
---

export const name = "みっちゃん";
export const name2 = "ちかちゃん";でもよい
---この時点の動画

関数もできる
現在のコードはこちら



Page Top

1 ジャバスクリプト入門

2 ジャバスクリプトの仕事は

DOMノードとは

3 用語とオブジェクト指向言語

4 コードをプラウザに書く

ウインドウへのアクセス

console画面を開き以下のコードを貼付け"値"が取り出せる

プログラムからDOM要素の習得

コンソールという画面に文字を出力（表示）します

console.log( " Hellow World " ) ； など

console.log(3); console.log(5+2); console.log(3-2); console.log(9 % 2);

console.log("にんじん"+"だいこん"); console.log("X"+"Y"+"Z"); console.log("3"+"5");

5変数

アクセスして取り出し 箱 に入れる操作

６ 関数

7 関数その２

ボタンを押した処理

8 外部とのデータやり取りしてみよう

9 JavaScriptの活用

クリックボタンと実例

モジュール

console.log( " Hellow World " ) ；など

アクセスして取り出し　箱　に入れる操作

６関数