2021-03-07

MYSQL　日本語入力できない問題

MYSQLでテーブルを作成する際に引っ掛かったので備忘録に。

最初作る際には

CREATE TABLE (テーブルの名前) (id INT AUTO_INCREMENT, name TEXT,);

としていたが、この場合にのちに日本語を入力しようとすると下記のようなエラーが出た。

SQL ERROR (1366): Incorrect string value:

エラーの原因は他のブログなどにも書いてあったがmy.ini(macの場合my.cnf)をいじることで解決できるとのこと(ググればいくらでも出てくるので割愛
ただ、他にもできる方法があったため下記に記載。

CREATE TABLE (テーブルの名前) (id INT AUTO_INCREMENT, name TEXT) DEFAULT CHARSET=utf8;

my.iniなどでもcharsetをutf8に変えて対処していたが、コマンドライン上でも対応可能だったのは見当たらなかった。
勿論今後も日本語入力で使い続けるならmy.iniの変更の方が良いと思うが、使う機会がない場合などの応急対応策として。

2021-02-25

6日目：イメージの切り替え

イメージ図の切り替えは下記の通り
まずHTML,CSS,JSを下記の通り準備する。

  <div class='center'>
    <div>
      <img src = 'img1.jpg' id='bigimg'>
    </div>
    <ul>
      <li><img src='thumb-img1.jpg' class='thumb' data-image='img1.jpg'></li>
      <li><img src='thumb-img2.jpg' class='thumb' data-image='img2.jpg'></li>
      <li><img src='thumb-img3.jpg' class='thumb' data-image='img3.jpg'></li>
      <li><img src='thumb-img4.jpg' class='thumb' data-image='img4.jpg'></li>
    </ul>

  </div>

section img{
    max-width:100%;
}

.center{
    margin: 0 auto 0 auto;
    max-width:90%;
    width:500px;
}

ul{
    display:flex;
    margin:0;
    padding:0;
    list-style:none;
}
li{
    flex:1 1 auto;
    margin-right:8px;
}
li:last-of-type{
    margin-right:0px;
}

const thumbs = document.querySelectorAll('.thumb');
thumbs.forEach(function(item,index){
  item.onclick = function() {
    document.getElementById('bigimg').src= this.dataset.image;
  }
});

上記の解説を行う。

querySelectorAllとは？

先日の項目でquerySelector自体は取り扱っているが、querySelectorは1つの要素しか取得することができない。
そのため、複数の要素を取得する際には下記のように行う。

document.querySelectorAll('CSSセレクタ');

上記の例だとCSS セレクタは.thumbが該当する。
これらのCSS セレクタで指定された要素全てを取得することができる。

配列の繰り返し
配列を繰り返し処理する方法として、forEachメソッドがある。これは下記のように書く。

配列.forEach(function(item,index){
  処理内容
});

これによりitemの部分に取得した要素が、indexにそれらの番号が0から入ることになる。

thisとは？
this は function を呼んだ時の . の前についているオブジェクトを指している
ただし、.の前に何もついていないときはwindowsオブジェクトを参照している。
(理解があいまいな為、補強の必要あり)

data-imageについて
ここではdata-imageと記載しているが、data-XXXとXXXの部分は好きに決めてよい。
これらのdata-XXXを読み取るためには

取得した要素.dataset.XXX

としてあげる必要がある。

2021-02-23

5日目：プルダウンメニュー

プルダウンメニューで指定ページに飛ぶ

2つのHTMLファイルを用意し、それぞれにプルダウンメニューから飛ぶ方法を記載。
用意するHTML:index.html,index-en.html(違いは日本語と英語のみ)

日本語版のHTMLが下記

<form id ='form'>
  <select name='select'>
    <option value='index.html'>日本語</option>
    <option value='index-en.html'>English</option>
  </select>
  <h2>日本語のページ</h2>
</form>

document.getElementById('form').select.onchange = function(){
  location.href = document.getElementById('form').select.value
}

※プルダウンメニューの場合はoptionではなくその親要素からvalueを読み取る。
locationオブジェクトのhrefプロパティは表示しているページのURLを表すので

  location.href = 新しいURL

とすることで新しいURLを指定できる。

ただしこの場合日本語のページ→英語のページとは移動できるが、プルダウンメニューの初期値が日本語であるため
英語のページに行っても日本語が初期表示になる→onchangeが日本語→日本語には対応していないため
英語から日本語への移動はできない。

そこで、htmlファイルのタグに lang="ja"やlang="en"のタグをつけてあげた上で下記のJSを書くと対応する。

const lang =document.querySelector('html').lang;

if(lang === 'ja'){
  document.querySelector('option[value="index.html"]').selected = true;
}else if(lang === 'en'){
  document.querySelector('option[value="index-en.html"]').selected = true;
}

document.getElementById('form').select.onchange = function(){
  location.href = document.getElementById('form').select.value
}

querySelectorは()内に書かれたセレクタにマッチする要素を取得する。
※複数ある場合は一番上のものを取得する。

なので上記コードの場合、htmlのlangをconst langの中に格納している。
その上で、if文でlangの中身をチェックして、該当する要素にselectedを追加している。

2021-02-22

4日目：カウントダウンタイマー

三日坊主すぎて反省。

Step1:決められた時間までの残り時間の計算
ここでは決められた時間までの残り時間を計算する。

以下HTMLとJSを記載。

  <p>今日の残り時間は<span id = 'timer'></span>です!</p>

  function countdown(due){
  const now = new Date();
  const rest = due.getTime() - now.getTime();
  const sec = Math.floor(rest / 1000) % 60;
  const min = Math.floor(rest / 1000 / 60) % 60;
  const hours = Math.floor(rest / 1000 / 60 / 60) % 24;
  const days = Math.floor(rest / 1000 / 60 / 60 / 24);
  const count = [days,hours,min,sec];

  return count;

}

let goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);

// console.log(countdown(goal));
const counter = countdown(goal);
const time = `${counter[1]}時間${counter[2]}分${counter[3]}秒`
document.getElementById('timer').textContent = time;

新しく日付の情報を取得する際には

  const now = new Date();

としてあげることで取得可能。

Step2:リアルタイムの時間反映
Step1を用いてリアルタイムな時間の繁栄を実施する。
ソースコードは下記(HTMLは変わらないので省略)

 function countdown(due){
  const now = new Date();
  const rest = due.getTime() - now.getTime();
  const sec = Math.floor(rest / 1000) % 60;
  const min = Math.floor(rest / 1000 / 60) % 60;
  const hours = Math.floor(rest / 1000 / 60 / 60) % 24;
  const days = Math.floor(rest / 1000 / 60 / 60 / 24);
  const count = [days,hours,min,sec];

  return count;

}

let goal = new Date();
goal.setHours(23);
goal.setMinutes(59);
goal.setSeconds(59);

// console.log(countdown(goal));
function recalc(){
  const counter = countdown(goal);
  const time = `${counter[1]}時間${counter[2]}分${counter[3]}秒`
  document.getElementById('timer').textContent = time;
  refresh();
}

function refresh(){
  setTimeout(recalc,1000);
}

recalc();

setTimeoutは待ち時間後にファンクションを一度だけ実行するメソッド。

setTImeout(ファンクション、待ち時間)

この時、ファンクションに()はつけないこと。
※ファンクションに()をつけた場合、その場で実行されてしまいsetTimeoutの処理が終わる前にファンクションが実行されてしまう為。

2021-02-15

3日目:入力内容の取得とイベント

Step1:イベントテスト
onsubmit:onsubmitとは、送信ボタンが押された時に起動するイベント。
formタグに、onsubmitを追加して起動する関数を指定することで送信前の内容のチェックや確認に使用することができる。

  <form action= "#" id = "form">
    <input type ="submit" value ="検索">  
  </form>

上記のようなformは、送信(submit)ボタンがクリックされたら、action属性のURLに入力内容が送信される。
onsubmitイベントは送信ボタンがクリックされた直後で、入力内容がサーバーに送信される前直前に発生する。

要素にイベントを設定するときの書き方は下記の通り。

取得した要素.onsubmit = function() ={
	処理内容
};

イベントに代入するファンクションはファンクション名もリターンもないことに注意(こういったファンクションも存在する

Step2:入力内容を読み取って出力

<section>
  <form action= "#" id = "form">
    <input type ="text" name ="word">  
    <input type ="submit" value ="検索">  
  </form>
  <p id='output'></p>
</section>

document.getElementById('form').onsubmit = function() {
  const search = document.getElementById('form').word.value;
  document.getElementById('output').textContent = `${search}の準備中`;
};

上記のようなコードを実行すると、
1:テキスト欄が出てくる
2: document.getElementById('form')によってid = "form"の要素が取り出され、その中のwordの値がsearchに入る
3:id ="output"の要素のtextContentに文字が入力され、表示される。

ただし、この時URLが移動しようとするため、一度同じページを読み込んでしまい、2回検索をしないと表示されない状態となっている。
そのため、下記の方法で「送信ボタンがクリックされたらデータを送ると同時に、action属性で指定されたページに移動する」
というフォームの基本動作をキャンセルする。

document.getElementById('form').onsubmit = function(event) {
  event.preventDefault();
  const search = document.getElementById('form').word.value;
  document.getElementById('output').textContent = `${search}の準備中`;

function()内の引数(event)はイベントオブジェクトという、イベントが発生した時に実行されるファンクションに渡されるオブジェクトである。
このオブジェクトに対してpreventDefault()メソッドを実行するとイベントが発生したタグ(今回の場合

2021-02-14

2日目:勉強無し

近いうちに転職の面接があるため、それの想定質問集の作成を実施。

2021-02-14

1日目：JS基礎

字下げとか非常に見づらくなってしまっているため、何か方法を考える必要あり

Javascript(以降JS)の学び
※他言語で習得していて、読み飛ばして問題なさそうな所はメモとして残していません。

参考書籍：https://www.sbcr.jp/product/4815601577/
1:JSとは？

ブラウザやHTMLを操作することを目的として生まれた言語。具体的には、静止したデータであるHTMLやCSSを、その場でリアルタイムに書き換え、一部のコンテンツを入れ替えたり、スライドショーのような動きをつけることができる。
書き換えの例

1:タグに囲まれたテキストの書き換え

2:要素の追加/削除(新たに<p>追加要素</p>を追加できる

3:タグの属性変更(src='before.jpg'→'after.jpg'のような画像の差し替えなど

4:CSSの値を変更(<body>のbackground-colorを変更等

2:コンソールへのアウトプット

JSには3種類のアウトプット方法が存在する。
1.コンソールへのアウトプットconsole.log('コンソールへの表示')
2.ダイアログボックスへのアウトプットwindow.alert('ダイアログへの表示')
3.HTML,CSSへのアウトプット(本項目が一番使う

<body>

<main>

<p id="choice">ここに日時を表示します</p>

</section>

</div>

</main>

'use strict';document.getElementById('choice').textContent = new Date();

</script>

</body>

</html>
このような形でid="choice"のtextContentを書き換える

3.ダイアログボックスの表示

window.alert():ダイアログの表示

window.confirm():OK or キャンセルを選べるダイアログの表示

window.prompt():テキスト入力欄つきダイアログの表示ここでの入力値は戻り値となるなので

let answer = window.prompt();

としてあげればanswerに値を格納可能

※JSでの変数は

let XXX;

で宣言可能。

またconst XXX;としてあげると書き換え不可の値となる。

4:関数とは/関数の組み方

関数とは、パラメータを受け取り、何かしらの加工をして、結果を呼び出し元に返すもの

消費税計算の例は下記

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

function total(price) {

const tax = 0.1; return price + price * tax;}const value = 8000;

console.log(`コーヒーメーカーの値段は${total(value)}です`)

;-----------------------
ファンクションの作成方法は

function ファンクション名(要求するパラメータ){

具体的な処理内容

}

この時、要求するパラメータ(引数)の範囲は{}の中のみ。

5:配列

配列の宣言の仕方は

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

let 変数名 = [];

-----------------------
配列の項目を全て読み取る場合の書き方は

for(変数名 of 対象の配列){

処理内容

}
配列に追加するときは

配列.push(追加したいデータ)

を使う。

他のを含めた配列の追加/削除するメソッドは下記の通り
配列の変数名.push(データ):配列の末尾にデータを追加

配列の変数名.pop():配列の末尾のデータを削除

配列の変数名.shift():配列の最初のデータを削除

配列の変数名.unshift(データ1,データ2):配列の最初にデータ1,データ2を追加

6:HTMLタグの挿入

textContentプロパティではテキストの抽入か書き換えしかできないため、別のプロパティを用いる。

insertAdjacentHTMLメソッドを使うとHTMLタグの抽入が可能となる。

書き方の例は下記

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

document.getElementById(取得したいid).insertAdjacentHTML('挿入する場所',挿入する要素);

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

挿入する場所に指定できるワードは以下の通り

beforebegin:取得した要素の開始タグの前に挿入

beforebegin:取得した要素の開始タグの後に挿入

beforebegin:取得した要素の終了タグの前に挿入

beforebegin:取得した要素の終了タグの後に挿入

7:オブジェクト

複数のプロパティ及びメソッドを持つデータの集まりをオブジェクトという。

書式は下記

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

let 変数名 = {プロパティ名1:データ1,プロパティ名2:データ2,...}

-----------------------
プロパティのデータを読み取るときはオブジェクト名.プロパティ名とする。
メソッドとは？：プロパティのデータが関数であるとき、そのプロパティをメソッドという。
全てのプロパティを読み取る場合、下記を用いる。

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

for(let 変数名 in オブジェクト名){ 処理内容}

-----------------------
集中力きれたのでここまで