dとは？

ユニックスのルールらしい

ユニックスでよく使われる名称

デーモンのｄ

　

コンピューター上でずっと待機しているサービスのプログラムのことをデーモンというらしい

（ユニックスでは）

　

---

webの待ち受けをしているのはhttpのデーモン

ずっとスタンバイしつづけるサービスの名称をデーモンという
これはユニックスのルール

　

line252

 

DocumentRoot "C:/xampp/htdocs"

ルート

一番上のディレクトのこと

　

公開領域の一番上がhtdocs

htdocsに大事なものをいれると他の人からもみられる

　

コーヒー屋で作業するとして

→phpをいじっていて

→webサーバーを起動しないとphpは動かない

→公開領域に大事なものをいれていると

→コーヒー屋の電波にのって同じところからぶらさがってる人がみんな見られるらしい

　

IPアドレスをたどったらドキュメントルートで直行するらしい

　

http://127.0.0.1/

自分自身を指す特別なIPアドレス

 

ドキュメントルートというのは公開領域だと知っておく

　

設定を変えたら立ち上げ直すと変更した設定が有効になる

一方mySQL

congifをみると

my.ini

コピーしてサクラエディタで開く

　

　

line28 [mysqld]

 

これもデーモン

次の行でポートもいっている

　

わりとコンパクトに設計されているmySQLは

だからヘビーなものをなげると止まるらしい

line36あたりから書いてあるのが、どのぐらいのメモリを割り当てるかの定義

開発用だからコンパクト

巨大なデータをいれて動かそううとすると止まる

その場合は、サイズをあげぎみに設定する必要がある

　

バッファ　buffer：メモリのこと

　

決して公開領域としてこのmy.iniをつかってはいけない

　

これはあくまで開発用の簡易なもの。

サイズ的にもコンパクト

セキュリティ的にもかなりけちっている

　

アパッチもmySQLもちゃんと設定してやる必要がある

プログラマーがサーバーまでセットすることはあまりないが、できると重宝

　

---

line162 [mysqldump]

ダンプ　dump

デーモンの名称でもある

ダンプというのはメモリの中身を書き出すこと

　

「ダンプをとる」という

変数をぜんぶ書き出すとか

データベースでダンプをとるというのは、
データベースに登録されているものをぜんぶ書き出すことをいう

→

つまりバックアップ用になる

　

だからデータベースはよくダンプをとりますよ

　

ダンプをとるためのプロセスというのがあってずっと待機している

　

こちらも＃はコメント部分

　

mysql

　

シェル

osの中核部分のこと

シェルスクリプト

OSごとに違う

リナックス用とWindows用は違う
　

　

開くと黒い

Windowsにおいてはコマンドプロンプトと同じもの

mysqlとコミュニケーションするための物

　

cd
チェンジディレクトリ

　

# cd mysql（enter）

 　

→

web@DESKTOP-EQR2U6K c:\xampp\mysql

dir
ディレクトリ

これだけでエンターしてみましょう

いろんなものが入っている

　

bin

ビンというフォルダはリナックスサーバー上にはあっちこっちにあるらしい

バイナリのこと

文字情報ではなく、実行可能な状態にコンパイルされたものが入っているフォルダを
binと名付ける慣習

　

テキストファイルか

バイナリファイルか

　

即実行可能にコンパイルされているのが、バイナリファイル

　

実行可能なプログラム群ということ

　

このなかにmysqld

cd bin(enter)

 

mysql -uroot(enter)

uとはユーザーのこと

　

直接mysqlと対話ができる状態になった

mysqlはバックエンドにいるので、

直接人間がコミュニケーションすることは想定されていないため

シェルスクリプトでこうやってアクセスするしかない

　

そういうソフトなんかがないのだ

　

これをつかって東京のサーバーに遠隔操作して、先生はダンプをしたりするらしい

　

これを見ると、自分自身をmysqlとは言っていない。まりあDBといっている。

　

→mysqlはむかしオープンソースのソフトウェア

かつて別の会社が保有。さんまいくろとか

身売り

オラクルの傘下にはいった

みんなオラクルに嫌気がさしてそのひとたちは飛び出してしまった

mysqlも名前をかえてまりあとした

だから正確にはまりあDB。mysqlのラストバージョンから引き継いで作っているので
まりあもmysqlともいえる。

本家のmysqlもあるにはある。オラクルはあまり力をいれていない。オープンソースだから。

だから実際まりあを使われているし、実態はまりあである。

mysqlを呼び出すとまりあがでてくるのはそういう理由

大人の事情

　

MariaDB [(none)]>

　

mysqlのデーモンが呼びだされているので、この先からはコマンドプロンプトの命令をうけつけない

SQLだけ

SQLを学んだひとはここで、またとない機会なのでここでいろいろやるといいらしい

　

MariaDB [(none)]> show databases(enter)

 

datanaseにsがつく

sql文の末尾は；

なんかでてきた

　

システム的に管理するためのものだから、これらはいじってはいけない。

自分で追加してつかう。

testというデータベースがあるが、これだけは中身はなくて、
必要ならつかってくださいというテスト用の場所。

　

しかし、デフォルトの文字コードがちがうので若干使いにくいらしい

　

自分のオリジナルのデータベースをつくってみるのがいいらしい

　

「データベースをクリエイトする」というらしい

sqlでかくというのは特殊なものなのでめったに使わない

phpマイアドミンというツールが用意されているらしい

　

ここでデータベースも簡単につくれる、が

なにひとつ、データベースの名前も、テーブル名も何もかも

日本語は使えません

記号のマイナスもご法度（記号自体やめときましょう）

全部アルファベット、アンダーバーぐらいで。

　

データベースhogeをつくってみましょう

　

名前：hoge

キャラクタセット：utf8mb4_general_ciというデフォルトのやつで

これはいわゆるutf-8のこと

　

これがユニコードでないと、やらなきゃいけないことがめちゃくちゃ発生するらしい

　

ちょっと前までは

utf8_general_ciをつかうことが多かったらしい

ユニコードもいろいろなバージョンが存在する

utf-8とか

utf-16とか

 

utfmb4がいちばんよろしいらしい

　

では作成ボタンをおして、

さっきのコマンドのとこに戻って

上矢印を押してみましょう

　

MariaDB [(none)]> show databases;

+--------------------+

| Database           |

+--------------------+

| hoge               |

| information_schema |

| mysql              |

| performance_schema |

| phpmyadmin         |

| test               |

+--------------------+

6 rows in set (0.001 sec)

MariaDB [(none)]>　

　

消すときはおなじように

データベース→hogeにチェック→削除

　

データベースを管理しようと思ったらいちばん上にいくこと。

hogeのなかにいるとhogeを操作することになってしまうし、
そういうメニューしか出てこない

　

ぱんくずリストでいちばん頂上のデータベースにいって、
それではじめてデータベースのメニューが出る

　

ふつうにばってんでけしてもOK

　

---

1/6はphpのテキストをもってきましょう
　


この後は『からすまる日誌mySQL』に続く




end page

まずApacheとMySQLをスタートする

緑色になればよし

　

PID

プロセスアイディー

　

　

ウィンドウズの一番下のバーの何もないところを右クリック
→タスクマネージャー→詳細→プロセス

　

今何がどのように動いているか：
これを「プロセス」という。

　

　

ここで強制的にタスクを終了することもできる

アパッチはふたつタスクを動かしている

　

http://というプロトコルで通信しますよというのがよくあるね。

https://というのもある。

非sslとssl

それで2つあるらしい

暗号化をするかしないかで違う。

　

Port

ポート

情報の発着場

　

疑似的にポートを分けている

パケットの荷札の中にポート番号が書いていある

収集をつけやすいように。

　

http://www.yahoo.co.jp:80/

が正しい書式

80番ポートでやり取りしますよ

　

webの情報は80番でやりとりするのが普通だからいつも省いているらしい　

　

httpポートは80ポート（まずまず固定）

443というのはssl専用ポート

sslのデフォルトのポート番号とかはないらしい。webサーバによって設定できるらしい。

　

パケットを受け渡しするんだったらどのみち何らかのポートを通る

絶対なにかしらのポート番号というのがある

MySQLだって通信する(web形式のときも、直のときも）ので、
デフォルトのポート番号があるらしい。これもまちまち。

　

アパッチのポート設定をしているところをちょっとのぞく

　

config

設定情報が書かれた

　

config -> APatch(httpd.conf)とかなんとか一番上のやつ、

これは不用意にいじると起動しなくなる

メモ帳で開けてこぴったらメモ帳は即閉じしましょう。

サクラエディタでペーストする

　

読んだ方がいいらしい。

見方があるらしい

＃がいっぱいついているが、＃の行はコメント

　

設定情報というより説明文に近い

　

Listen 80：

待ち受けをしているポート番号

お客さん来ないかなとちらちら見ている窓口に当たる

　

まずここを変更

var ran = Math.floor(Math.random()*100);/*0から99までの100種類にupgrade*/

①1の位と10の位をそれぞれ取り出す

②1桁ずつ2回処理しようと

①の部分はきのうやったチェックディジットと同じ

桁を配列で取り出す

var ran = Math.floor(Math.random()*100);/*0から99までの100種類にupgrade*/

var keta [ran%10 , Math.floor(ran/10)];

//左側の方は1の位の値、この右側の計算結果は10の位の値

二重ループにするとして、中をどうしたらいいか？

j=1 1の位

j=2 10の位

var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(j*10+i+1));//最初は1 二週目は11

(j*10+i+1)で二けたが表現できる

このままだとranが二桁で流れてくるのにiは最大6だからエラーになるね？↓

var tmpClass = nums[ran].charAt(i) == 1 ? 'on':'off';

→

nums[keta[j]]

ひとけためが0ならnums[0]にしたい。

それでnums配列のどの信号を使うか指定させたい

一桁目をみたいのか2桁目をみたいのかをketa配列のjで指定

はてな。

--->clock.css

 

body{

background:#cff;

}

/*

div .hogehoge{

background-color:#f00;

}

*/

.stage{

background-color:#6a6347;

width:400px;

height:300px;

position: relative;

}

/*横棒*/

.s_h{

position:absolute;

width:100px;

height:20px;

background-color:#150c08;/*先生版はこの行を取る*/

border-radius: 10px;

}

/*縦棒*/

.s_w{

position:absolute;

width:20px;

height:100px;

background-color:#150c08;/*先生版はこの行を取る*/

border-radius: 10px;

transform: skew(-5deg);/*ちょっと斜めに*/

}

/*--10の位--*/

.s1{

top: 35px;

left: 260px;

}

.s2{

top: 50px;

left: 240px;

}

.s3{

top: 170px;

left: 230px;

}

.s4{

top: 150px;

left: 250px;

}

.s5{

top: 170px;

left: 340px;

}

.s6{

top: 50px;

left: 355px;

}

.s7{

top: 270px;

left: 235px;

}

/*--1の位--*/

.s11{

top: 35px;

left: 60px;

}

.s12{

top: 50px;

left: 40px;

}

.s13{

top: 170px;

left: 30px;

}

.s14{

top: 150px;

left: 50px;

}

.s15{

top: 170px;

left: 140px;

}

.s16{

top: 50px;

left: 155px;

}

.s17{

top: 270px;

left: 35px;

}

.on{

background-color:#86ff0d;/*先生版 #150c08;*/

}

.off{

background-color:#5c563e;

}

--->clock.js

$(function(){

console.log('hoge');

var ran = Math.floor(Math.random()*100);/*0から99までの100種類にupgrade*/

var keta= [ran%10 , Math.floor(ran/10)];

//左側の方は1の位の値、この右側の計算結果は10の位の値

//0から9の文字を信号の0or1で表現

var nums= ['1110111','0000110','1011011','1001111','0101110','1101101','0111101','1000110','11111111','1101110'];

var stick=['s_h','s_w','s_w','s_h','s_w','s_w','s_h'];/*hvvhvvh*/

console.log('ran is '+ran);

for(var j=0; j<2; j++){/*jが2回だけ回る：1桁目と2桁目*/

for(var i=0; i<7; i++){

var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(j*10+i+1));//最初は1 二週目は11

var tmpClass = nums[keta[j]].charAt(i) == 1 ? 'on':'off';

elehoge.addClass(tmpClass);

$('.stage').append(elehoge);

}

}

/*

for(i=0; i<7; i++){

var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(i+1));

console.log('ran is '+ran);

if(nums[ran].charAt(i)==1){

elehoge.addClass('on');

}else{

elehoge.addClass('off');

}

$('.stage').append(elehoge);

}

*/

});

中枢部分はもうすこしかみ砕くとこれと同じらしい

var hoge = keta[j];

var tmpClass = nums[hoge].charAt(i) == 1 ? 'on':'off';

j=0 のときに1けため

j=1 のときに2けためをやりましょうと

ranは2桁の数字なので

それをあらかじめketaでそれぞれ1の位、10の位というひとつずつに作り直した。

いまranはkanaに逆に（1とｐ10が）入っている

 

難しいな。

この黄色の部分が理解できるまで自分で動きをトレースしないと。

いまはまだ全然わからない

もう一回jsを記しておく

$(function(){

console.log('hoge');

$('.stage').empty();

var ran = Math.floor(Math.random()*100);/*0から99までの100種類にupgrade*/

var keta= [ran%10 , Math.floor(ran/10)];

//左側の方は1の位の値、この右側の計算結果は10の位の値

console.log('ran is '+ran);

console.log('keta is '+keta);

//0から9の文字を信号の0or1で表現

var nums= ['1110111','0000110','1011011','1001111','0101110','1101101','0111101','1000110','11111111','1101110'];

var stick=['s_h','s_w','s_w','s_h','s_w','s_w','s_h'];/*hvvhvvh*/

for(var j=0; j<2; j++){/*jが2回だけ回る：1桁目と2桁目*/

for(var i=0; i<7; i++){

console.log('here is in for: i='+i+' j='+j);

var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(j*10+i+1));//最初は1 二週目は11

var hoge = keta[j];

var tmpClass = nums[hoge].charAt(i) == 1 ? 'on':'off';

elehoge.addClass(tmpClass);

$('.stage').append(elehoge);

}

}

/*

for(i=0; i<7; i++){

var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(i+1));

console.log('ran is '+ran);

if(nums[ran].charAt(i)==1){

elehoge.addClass('on');

}else{

elehoge.addClass('off');

}

$('.stage').append(elehoge);

}

*/

});

 

この部分はメソッドチェーン

括弧の場所が間違っていたので初め動かなかった。

i=0から始まっているので+1しないとs0が生成されてしまうので(i+1)になってしまうというわけ

　

いま8しか表示できないので数字を表示できるようにしていきますよ

　

①onクラスとoffクラスを追加。そこでbackgroundを指定

②横棒縦棒のbackgroundはもういらないので取る

③配列として0という数字を表すときはどことどこを光らせるか決めよう

　

--->clock.html

 

<!DOCTYPE html>

<html lang="ja">

　<head>

　　<meta charset="UTF-8">

　　<title>JavaScript</title>

　　<link rel="stylesheet" href="clock.css">

　　<script src="../jquery-3.4.1.min.js"></script>

　</head>

　<body>

　　<div class="stage">

　　</div>

　　<script src="clock.js"></script>　　

　</body>

</html>

 

--->clock.css

 

body{

　background:#cff;

}

/*

div .hogehoge{

　background-color:#f00;

}

*/

.stage{

　background-color:#6a6347;

　width:300px;

　height:300px;

　position: relative;

}

/*横棒*/

.s_h{

　position:absolute;

　width:100px;

　height:20px;　

　background-color:#150c08;/*先生版はこの行を取る*/

　border-radius: 10px;

}

/*縦棒*/

.s_w{

　position:absolute;

　width:20px;

　height:100px;　

　background-color:#150c08;/*先生版はこの行を取る*/

　border-radius: 10px;

　transform: skew(-5deg);/*ちょっと斜めに*/

}

.s1{

　top: 35px;

　left: 60px;

}

.s2{

　top: 50px;

　left: 40px;

}

.s3{

　top: 170px;

　left: 30px;

}

.s4{

　top: 150px;

　left: 50px;

}

.s5{

　top: 170px;

　left: 140px;

}

.s6{

　top: 50px;

　left: 155px;

}

.s7{

　top: 270px;

　left: 35px;

}

.on{

　background-color:#86ff0d;/*先生版 #150c08;*/

}

.off{

　background-color:#5c563e;

}

 

--->clock.js

 

 $(function(){

　console.log('hoge');

　

　var ran = Math.floor(Math.random()*10);/*0から9までの10種類*/

　//ran = 5;

　//0から9の文字を信号の0or1で表現

　var nums= ['1110111','0000110','1011011','1001111','0101110','1101101','0111101','1000110','11111111','1101110'];

　var stick=['s_h','s_w','s_w','s_h','s_w','s_w','s_h'];/*hvvhvvh*/

　console.log('nums');

　

　for(i=0; i<7; i++){

　　var elehoge = $('<div>').addClass(stick[i]).addClass('s'+(i+1));

　　

　　console.log('ran is '+ran);

　　if(nums[ran].charAt(i)==1){

　　　elehoge.addClass('on');

　　}else{

　　　elehoge.addClass('off');　　

　　}　

　　$('.stage').append(elehoge);

　}

　

});

 

別の書き方

　

三項演算子で
　

　

　　

①同じデザインがでてくると思われるのでclassで生成

②とりあえずこんな感じで

　

<!DOCTYPE html>

<html lang="ja">

　<head>

　　<meta charset="UTF-8">

　　<title>JavaScript</title>

　　<link rel="stylesheet" href="clock.css">

　　<script src="../jquery-3.4.1.min.js"></script>

　</head>

　<body>

　　<div class="stage">

　　　<div class="s1"></div>

　　</div>

　　<script src="clock.js"></script>　　

　</body>

</html>

　

--->css

　

body{

　background:#cff;

}

.stage{

　background-color:#6a6347;

　width:300px;

　height:300px;

　position: relative;

}

.s1{

　position:absolute;/*自由な位置に*/

　width:100px;

　height:20px;　

　background-color:#150c08;

　border-radius: 10px;

　

　top: 40px;

　left: 40px;

}

 

③もろもろ修正して、

　

<!DOCTYPE html>

<html lang="ja">

　<head>

　　<meta charset="UTF-8">

　　<title>JavaScript</title>

　　<link rel="stylesheet" href="clock.css">

　　<script src="../jquery-3.4.1.min.js"></script>

　</head>

　<body>

　　<div class="stage">

　　　<div class="s1 stick_h"></div><!--8の字の上の横棒-->

　　　<div class="s2 stick_w"></div><!--8の字の左上の縦棒-->

　　　<div class="s3 stick_h"></div><!--8の字の中央の横棒-->

　　　<div class="s4 stick_w"></div><!--8の字の左下の縦棒-->

　　　<div class="s5 stick_h"></div><!--8の字の下の横棒-->

　　　<div class="s6 stick_w"></div><!--8の字の右上の縦棒-->

　　　<div class="s7 stick_w"></div><!--8の字の下の縦棒-->

　　</div>

　　<script src="clock.js"></script>　　

　</body>

</html>

　　

--->css

 　

body{

　background:#cff;

}

div .hogehoge{

　background-color:#f00;

}

.stage{

　background-color:#6a6347;

　width:300px;

　height:300px;

　position: relative;

}

/*横棒*/

.stick_h{

　position:absolute;/*自由な位置に*/

　width:100px;

　height:20px;　

　background-color:#150c08;

　border-radius: 10px;

}

/*縦棒*/

.stick_w{

　position:absolute;/*自由な位置に*/

　width:20px;

　height:100px;　

　background-color:#150c08;

　border-radius: 10px;

　transform: skew(-5deg);/*ちょっと斜めに*/

}

.s1{

　top: 35px;

　left: 60px;

}

.s2{

　top: 50px;

　left: 40px;

}

.s3{

　top: 150px;

　left: 50px;

}

.s4{

　top: 170px;

　left: 30px;

}

.s5{

　top: 270px;

　left: 35px;

}

.s6{

　top: 50px;

　left: 155px;

}

.s7{

　top: 170px;

　left: 140px;

}

 

せっかくつくったけどこれをプログラムで書きなおします。

　

7回ループしてappend

今回は$(<'div'>)を作るとして、付与したいのはクラスだけ。

さて。

　

クラスを複数入れたり取ったりするのをattrで書き換えると「前のクラスが消える」らしい。

今回divにたくさんのクラスを付与したいのでそれだとまずい。

　

アドクラスというのをつかうと複数のクラスを付与できるらしい。

　

しかし今回.addClass('s_h');とかやってしまうと、横棒ばかり生成される。
今回横縦混在しているからちょっとまずい。

→配列でもっておきましょう。

　

あとちょっと独自のクラス名をつけたらややこしくなったから、先生版に戻します。
縦棒横棒の順番も先生版と違ってた。
もろもろ修正。かつfor文で回すとこうなる。

　

--->clock.html

 

<!DOCTYPE html>

<html lang="ja">

　<head>

　　<meta charset="UTF-8">

　　<title>JavaScript</title>

　　<link rel="stylesheet" href="clock.css">

　　<script src="../jquery-3.4.1.min.js"></script>

　</head>

　<body>

　　<div class="stage">

　　</div>

　　<script src="clock.js"></script>　　

　</body>

</html>

 

--->clock.css

 

body{

　background:#cff;

}

div .hogehoge{

　background-color:#f00;

}

.stage{

　background-color:#6a6347;

　width:300px;

　height:300px;

　position: relative;

}

/*横棒*/

.s_h{

　position:absolute;/*自由な位置に*/

　width:100px;

　height:20px;　

　background-color:#150c08;

　border-radius: 10px;

}

/*縦棒*/

.s_w{

　position:absolute;/*自由な位置に*/

　width:20px;

　height:100px;　

　background-color:#150c08;

　border-radius: 10px;

　transform: skew(-5deg);/*ちょっと斜めに*/

}

.s1{/*順番をまちがえていたので通し番号になっていないので注意*/

　top: 35px;

　left: 60px;

}

.s2{

　top: 50px;

　left: 40px;

}

.s4{

　top: 150px;

　left: 50px;

}

.s3{

　top: 170px;

　left: 30px;

}

.s7{

　top: 270px;

　left: 35px;

}

.s6{

　top: 50px;

　left: 155px;

}

.s5{

　top: 170px;

　left: 140px;

}

 

剰余（）

　

割ったときの余りはよくテストに出るらしい

　

プログラマがやってはいけない計算というのがある

　

100/25　→　4

0/5　→　0

5/0　→　無限大

　

この無限大になるのはやっちゃいけない。

計算がいつまでも終わらない。

consoleでやってみよう。

100/25

4

0/5

0

5/0

　

Infinityが出た（無限大ですよと）

　

プログラムを組んでるときにこのInfinityが出るような計算をさせてはいけない。

ディビジョンバイゼロ(division by zero)というらしい。 

 

>「Divide by Zero（ゼロ除算）」とは

 プログラムを利用して数値を０で割ろうとすると発生することがあるエラー。エラーにならずに、NaN（Not a Number）を返す言語もある。

割り算を行う箇所では０除算は必ず考慮しておくのが常識とされているので、システム障害が発生してエラーの原因を探りこれが見つかったりすると、周囲の視線が痛いことになったりするので、ちゃんと制御を入れておくことがオススメされるもの。

　

４つのボーダーにそれぞれ別々の色を設定してみましょう

　

--->test1.html

 

<!DOCTYPE html>

<html lang="ja">

　<head>

　　<meta charset="UTF-8">

　　<title>JavaScript</title>

　　<link rel="stylesheet" href="test1.css">

　　<script src="../jquery-3.4.1.min.js"></script>

　</head>

　<body>

　　<div id="hoge">

　　</div>

　　<script src="test1.js"></script>　　

　</body>

</html>

  

--->test1.css

  

body{

　background:#ffc;

}

#hoge{

　width:100px;

　height:30px;

　background-color: #333;

　/*border:solid 10px #f00;*/

　border-left: solid 10px #f00;

　border-right: solid 10px #0f0;

　border-top: solid 10px #00f;

　border-bottom: solid 10px #000;

}

 

 

では、divの幅高さを0にしたら？

　

 

なるほど

　

じゃあこの左側の部分だけが欲しいかな？　三角っぽいアイコンになるのでは？

→border-left以外をコメントアウト

→画面に何も出ない

　

こういうときはtransparent（トランスペアレント）（透明）を使う。

　

#hoge{

　width:0;

　height:0;

　/*background-color: #333;*/

　border:solid 10px #f00;

　border-left: solid 10px #f00;

　border-right: solid 10px transparent;/*透明*/

　border-top: solid 10px transparent;

　border-bottom: solid 10px transparent;

}

　

これで思うようなものができた。

　

---

これをtransformさせてみる

　

ローテート

回転。時計回りに行われる

角度はdegというのを使う

　

　transform: rotate(90deg);/*回転*/

 

スキュウ

歪み。

　

　transform: skew(15deg);/*歪み*/

　

　

 

---

こういう技術をつかうとボーダーで装飾ができる。またそれを回転させたりゆがませたりして使うことが出来る。

　 

今日はこれでデジタル時計の表示板を作る。

 

--->test1.css

 

body{

　background:#ffc;

}

#hoge{

　width:0;

　height:0;

　/*background-color: #333;*/

　border:solid 10px #f00;

　border-left: solid 10px #f00;

　border-right: solid 10px transparent;/*透明*/

　border-top: solid 10px transparent;

　border-bottom: solid 10px transparent;

　

　/*transform: rotate(90deg);/*回転*/

　transform: skew(15deg);/*歪み*/

}

 

 

>JANコードは、国際的にはEANコードと呼ばれ、アメリカ、カナダにおけるUPCと互換性のある国際的な共通商品コードです。 （JANコードは、日本国内のみの呼び方であり、海外ではEANコードと呼びます。）

 

>コード体系

日本では、国コードが“49”または“45”からはじまる13桁の標準タイプまたは8桁の短縮タイプを使用しており、13桁の場合は

 

国コード（2桁）

メーカコード（5桁）

商品コード（5桁）

チェックディジット（1桁）

または

 

国コード（2桁）

メーカコード（7桁）

商品コード（3桁）

チェックディジット（1桁）

で構成される。

 

8桁の場合は

 

国コード（2桁）

メーカコード（4桁）

商品コード（1桁）

チェックディジット（1桁）

で構成される。

 

日本でのメーカコードや商品コードなどの情報は、「一般財団法人流通システム開発センター」が一元管理している。

 

チェックディジット

 

試験で出る

入力した値が正しいかどうかをテストするために割り振られたチェック用の数字

　

>チェックディジット（アメリカ英語: check digit、検査数字）とは、符号の入力誤りなどを検出するために、元の符号に付加される数字のこと。CD、C/Dと略される。

 

２．算出方法

・モジュラス10/ウェイト3　→　ＪＡＮ、ＩＴＦ等で使用。

１） 一番右側のキャラクタを奇数として全てのキャラクタを奇数位置と偶数

　　 位置に分ける。

２） 奇数位置のキャラクタを合計して3倍。

３） 偶数位置のキャラクタを合計。

４） 上記２）と３）の合計。

５） 10から４）の1の位の数字を引いた数字がチェックデジット。

　　※ＩＴＦの場合はチェックデジットを含むデータの桁数を偶数としなけ

　　ればならない為データ桁数が奇数の場合、先頭に「0」を付け偶数桁とする。
 

これをつかってバリデーションをしましょう。
でもそのままだと複雑だから5桁で。

　

--->test2.html

 

<!DOCTYPE html>

<html lang="ja">

<head>

　<meta charset="utf-8">

　<title>連想配列</title>

　<link rel="stylesheet" href="test2.css">

　<script src="../jquery-3.4.1.min.js"></script>

</head>

<body>

　<h1>バリデーション</h1>

　<p>

　　<label>コード番号<input type="text" id="t1" maxlength="5"></label>

　　<button id="btn">check</button>

　</p>

　<p id="msg"></p>

　

　<script src="test2.js"></script>

</body>

</html>

  

--->test2.js

 

$(function(){

　console.log('hoge');

　

　

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

　　var code = parseInt($('#t1').val());//数値化をしておく。いま12345

　　console.log('code:'+code);

　　

　　var base_code = Math.floor(code/10);

　　console.log('base_code:'+base_code);

　　

　　var chk = code % 10;//一の位はちぇっくよう

　　console.log('chk: '+chk);

　　 

　　var front = Math.floor(base_code/100);

　　console.log('front: '+front);

　　var back = base_code % 100;

　　console.log('back:'+back);

　　

　　if((front+back)%10 == chk){

　　　console.log('ok');

　　　$('#msg').text('ok');

　　}else{

　　console.log('boo');

　　　$('#msg').text('boo');

　　}

　　

　});

});


こういうところをつかう訳です。
　

---

  

 

1回しかやらない

何秒後にやるか。秒数が経過するまで何もせずに待機

昔はsetIntervalがなかった

繰り返す呼び出すときはsetInterval

 

だから当時はsetTimeoutの関数の最後の行に自分自身をコールするという、
回帰処理というのをやっていたらしい。

　

いまはそういうのはsetIntervalでやれば良い。

　

　

java,js,phpにもある。javaではハッシュテーブルとかともいううらしい。

　

0番にリンゴの値段が入っていると仮定して、

hoge[0]と呼び出す代わりに

hoge['リンゴ']

とする

　　

キーと値をならべて配置する

　

　//連想配列

　var veg = [];

　veg ['キャベツ']=150;

　veg ['タマネギ']=50;

　veg ['ニンジン']=40;

　console.log(veg);

　console.log(veg['キャベツ']);

　console.log(veg.タマネギ);

　

連想配列はオブジェクトみたいに考えているらしい

だから

console.log(veg.タマネギ);

こういう摩訶不思議な記述が成り立つ。

jsではあまりもう使わないらしい。

phpではがんがん使うらしい。

　

ハッシュ

　

ぐちゃぐちゃにすること

ハッシュされた値のことをいったりハッシュするための関数をいったりすることもある

受け取ったものを固定値のぐちゃの数値にする

　

ハッシュ関数（一方向性関数）とかいうらしい。

一度ｇｙちゃにするともどにもっどらない

　

同じ値をハッシュすると同じ出力地（値）になる。それは保証されている。　

　

パスワードなんかはデータベース（サーバ）に生身でおいちゃいけません。ハッシュでぐちゃにしてからおくのです

→

そうすると、登録済みのパスワードをハッシュしたものと、ユーザーが入力したパスワードをハッシュして生成されたものは同じなはずだ。

ハッシュしたもの同士を比較して、同じだったらOKとする。

これが常識。

生身で置かない。

　

javaではこういうのをハッシュテーブルという。

キーと値をセットでもつ配列

phpではたくさん使うらしい

　　

　

ただ、「わざわざ連想配列」にしたということは、インデックス管理じゃないふうにしたい理由があるわけで、通常、連想配列を呼び出すのは連想が普通らしい。　

　

多次元の連想配列もできるらしい

そういうので1,1の地点にはなにかあるとかないとか、そういうゲームの情報も管理できるらしい

　

koma[3][5]='と';//歩が成る

みたいな

どの地点にどういうものがあるかとか。

　

position absoluteにすると

「より後に書かれたdivが、上側に乗る」

レイヤー構造になる。

　

通常はrelativeだから、そもそも重なることがないですよという。

　

そういう制御をz-indexでするが、そういうのを3次元配列で管理するというのがありうるわけ。

　

--->test1.js

 

$(function(){

　console.log('hoge');

　

　//連想配列

　var veg = [];

　veg ['キャベツ']=150;

　veg ['タマネギ']=50;

　veg ['ニンジン']=40;

　console.log(veg);

　console.log(veg['キャベツ']);

　console.log(veg.タマネギ);

　console.log(veg[0]);//この結果はundefined

　

　//おぶじぇくとで管理

　var veg={

　　'hoge':100,

　　'foo':200,

　　'bar':300

　};

　console.log(veg);

　console.log(veg.hoge);

　

});

 

商品コードのバリデーションをやりましょう。

　

バリデーション

 

>「バリデーション」とは、「検証、実証、認可、妥当性」を意味する英単語になります。 例えば、「文書をバリデーション」といった場合には、「記述・入力されたデータが、あらかじめ規定された条件・使用に適合しているか検証・確認する。」

 

>

point入力チェックだよ

point書式チェックだよ

point妥当性の確認だよ

>JANコードは、国際的にはEANコードと呼ばれ、アメリカ、カナダにおけるUPCと互換性のある国際的な共通商品コードです。 （JANコードは、日本国内のみの呼び方であり、海外ではEANコードと呼びます。）

 

ボタンを押すと一番上のが透けて2枚目がみえるようになるのを作りましょう。

　

↑これをまちがえたのでエラーになった。

ここに；を打ってはいけない。

5枚目が消えたあとの挙動があれですね。

　
方法①　htmlのここに最初から置いておく

<div id="frame">

　　　<img src="img/1.jpg"><!--最初から入れておく手もある-->

　　</div>
　

方法②　cssでbackground-imageで貼っておく。

　

#frame{

　position:relative;

　width:500px;

　height:332px;

　margin:3rem auto;

　border:double 5px #555;

　background-image:url('img/1.jpg');/*ここ*/

}

　

どっちもあり。

　

---

--->test1.html

 

<!DOCTYPE html>

<html>

　<head>

　　<meta charset="utf-8">

　　<link rel="stylesheet" href="test7.css">

　　<title>slide</title>

　　<script src="../jquery-3.4.1.min.js"></script>

　　<link href="http://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

　</head>

　<body>

 

　　<div id="frame">

　　<img src="img/1.jpg"><!--最初から入れておく手もある-->

　　</div>

　　<p><button id="btn">次の写真</button></p>

　　

　　<script src="test7.js"></script>

　</body>

</html>

 

--->test7.css

 

body{

　background:#333;

}

#frame{

　position:relative;

　width:500px;

　height:332px;

　margin:3rem auto;

　border:double 5px #555;

　/*background-image:url('img/1.jpg');*/

}

#frame img{

　position:absolute;

}

p{

　text-align:center;

}

 

--->test7.js

 

body{

　background:#333;

}

#frame{

　position:relative;

　width:500px;

　height:332px;

　margin:3rem auto;

　border:double 5px #555;

　/*background-image:url('img/1.jpg');*/

}

#frame img{

　position:absolute;

}

p{

　text-align:center;

}

　

　

　

ステージ配置は前と同じ

　

--->test1.html

 

<!DOCTYPE html>

<html>

　<head>

　　<meta charset="utf-8">

　　<link rel="stylesheet" href="test3.css">

　　<title>slide</title>

　　<script src="../jquery-3.4.1.min.js"></script>

　</head>

　<body>

　　<p>

　　　<button id="btn">next</button>

　　</p>

　　<div id="frame">

　　　<div id="slide"></div>

　　</div>

　　

　　<script src="test3.js"></script>

　</body>

</html>

 

--->test3.css

 

body{

　background:#333;

}

#frame{

　height: 166px;

　width: 250px;

　background-color:#333;

　margin:auto;

　position:relative;

　border: double 5px #fff;

　/*overflow:hidden;*/

}

#slide{

　height:166px;

　width:1250px;

　position:absolute;

　top:0;

　left:0;

}

こんな感じです

　 

--->test3.js

$(function(){

　console.log('foo');

　

　var picture_x = 0;//画像のｘ座標

　

　//5枚の写真を表示

　for(i=1; i<=5; i++){

　　var elehoge = $('<img>').attr('src','img/'+i+'.jpg').css('width','250px');

　　$('#slide').append(elehoge);

　}

　

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

　　picture_x -= 250; 

　　//もし5枚目だったら1枚目のポジションに戻す

　　if(picture_x <= -1250){

　　　picture_x = 0;

　　}

　　//画像を移動

　　$('#slide').animate({'left':picture_x+'px'},300,"linear");

　　console.log(picture_x);

　});

});

　

ついでに左右の移動ボタンをつけて、

移動できるようにしましょう

--->test1.html

　

<!DOCTYPE html>

<html>

　<head>

　　<meta charset="utf-8">

　　<link rel="stylesheet" href="test5.css">

　　<title>slide</title>

　　<script src="../jquery-3.4.1.min.js"></script>

　</head>

　<body>

　　<p>　　

　　　<button id="btn02">←</button>

　　　<button id="btn">→</button>

　　　

　　</p>

　　<div id="frame">

　　　<div id="slide"></div>

　　</div>

　　

　　<script src="test5.js"></script>

　</body>

</html>

--->test5.css

 

body{

　background:#333;

}

#frame{

　height: 166px;

　width: 250px;

　background-color:#333;

　margin:auto;

　position:relative;

　border: double 5px #fff;

　overflow:hidden;

}

#slide{

　height:166px;

　width:1250px;

　position:absolute;

　top:0;

　left:0;

}

 

--->test5.js

 
$(function(){

　console.log('foo');

　

　var picture_x = 0;//画像のｘ座標

　

　//5枚の写真を表示

　for(i=1; i<=5; i++){

　　var elehoge = $('<img>').attr('src','img/'+i+'.jpg').css('width','250px');

　　$('#slide').append(elehoge);

　}

　

　//---------------

　//右ボタンを押して画像を左にスライド

　//---------------

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

　　picture_x -= 250; 

　　//もし5枚目だったら1枚目のポジションに戻す

　　if(picture_x <= -1250){

　　　picture_x = 0;

　　}

　　//画像を移動

　　$('#slide').animate({'left':picture_x+'px'},300,"swing");

　　console.log(picture_x);

　});

　

　　//---------------

　　//左ボタンを押して画像を右にスライド

　　//---------------

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

　　picture_x += 250; 

　　//もし5枚目だったら1枚目のポジションに戻す

　　if(picture_x > 0){

　　　picture_x = -1000;

　　}

　　//画像を移動

　　$('#slide').animate({'left':picture_x+'px'},300,"swing");

　　console.log(picture_x);

　});

});