JavaScript【③HTMLを書き換える】

こんばんは😌ザッキーです🎵

火曜日の任務、お疲れさまでした✨

私は今日は、雇用してもらう予定の会社に雇用契約をしに行ってきたのですが・・・

実際に現場で働いているエンジニアの方に会えて気持ちが高揚しました!(^^)!

そして、すでに社長は私を自然にざっきーと呼びますｗ

どんな職場になるんでしょうか・・・期待と不安でいっぱいです。

今夜は連載JavaScriptの第３弾！

【HTMLを書き換えよう】をやっていきます(*^▽^*)

 HTMLを書き換える

JavaScriptでできるアウトプットの３つ目は、表示されているHTMLの書き換えです。consoleやダイヤログボックスは、公開するWebサイトやWebアプリケーションで使用することは稀です。JavaScriptでもほとんどの場合、今から紹介するHTMLの書き換えを行います。

要素を取得する方法を知る

1. 書き換えたい部分のHTMLタグとそのコンテンツ(要素)を取得する
2. 取得した要素のコンテンツを書き換える

まずは、１.の取得からご紹介です(^^)/

今回は最も簡単な特定のid属性を持つ要素を取得する方法を使います！

まずはHTMLからみていきましょう(^^♪

<section>

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

</section>

続いてJavaScriptです。

<script>

'use strict';

console.log(document.getElementId('choice'));

</script>

上記のように記述することでconsoleには

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

という表示が出てきます。

この、console.log()の中身、※document.getElementId('choice')というdocumentプロブラムが、HTMLの要素の変更など【HTMLのidの部分(上記プログラムならchoice)を取ってきて！】というプログラムになります。

 要素は、'シングルコーテーション'か"ダブルコーテーション"でくくります。

※特定のid名を持つ要素を取得する

取得した要素のコンテンツ(文章)を書き換える

では続いてchoiceの部分にnew Date()という変数を使用して実際に日時を変えていきましょう！

<script>

'use strict';

console.log(document.getElementId('choice').textContent = new Date();

</script>

上記のように、.textContent = new Date()と記述することでconsoleには

Fri May 17 2019 12:00:00 GMT+0900(日本標準時)と表示されます。

consoleに表示されたことが確認出来たら、console.logと();を削除してブラウザに反映されたか見てみましょう(^^♪

要素のコンテンツを書き換えるtextContent

document.getElementId('id名').textContent = '書き換えたい文字列';

と書くことで先ほどの日時のように文字列を書き換えることができます。

文字列を書き換えたいときはシングルコーテーションで囲みます。new Date（）など変数を使う場合はシングルコーテーションは必要ありません。

 まとめ

• documentプログラムでHTMLから要素を取得しよう
• textContentをつかって文字列を書き換えよう
• 変数登場

今日は上記のような内容でお届けしました(^^)/

奥が深いプログラムの大切なところなので私も復習ができてうれしいです('ω')

今夜も最後までお付き合いいただきありがとうございました。

THANKYOU　for  comming

a  lot  of  LOVE💕ザッキーでした(*^▽^*)

ウッカリ母さん【ごめんね次男坊】

おはようございます😃☀

ザッキーです☺️✨

次男は今日から夏休み🍉長男はあと1週間頑張れば夏休みです😊

本来なら7/20くらいから夏休みに入り、子供たちにとっては一年で1番長いお休み期間を楽しんでいる時期ですよね。

新型コロナウイルスの影響で、土曜授業や夏休み短縮など随所に影響を感じます。

次男が夏休み中の預かり保育ということで、今日から毎日お弁当を作るという苦行の日々です😭最近自分のお弁当すらサボりがちだったので、今朝は神経が尖り切った目覚めになりました（笑）

そしてそんな朝に、自分がいかに不器用で一つのことに集中する性格なのかよく分かる出来事がおこりました。

もともと、私が子供たちを通わせている幼稚園は夏休みなど長期休みの際の服装は【制服】でなく【私服】で登園可能なのでほぼ全員私服登園をしています。

ですがお弁当のことで頭がいっぱいの私は、思いっきり次男坊に制服を着せて幼稚園に行ってしまいました。

長男がお世話になった幼稚園なので、わかっているはずなのにスコーーーンと忘れておりました（笑）

ですが、肝の太い次男坊は母の失敗もガチッと受け止めます。（逆になんでみんな私服なんだろ？くらい彼は、ぽやっとしてるかもです）

もしも、神経の細い長男にこんなミスをすると絶対に着替えに帰る！！！と泣き崩れていただろうなぁ•••と妄想にふけりながら通学途中の電車の中で、心で次男に謝罪。

ほんと、ウッカリ者の母さんでごめんね。w

明日からは好きな服を選んでもらって幼稚園に行ってもらおうとおもいます😊❤️

今日も、いちにち暑くなりそうですね☀️

最高気温35°とか•••

みなさん、水分補給をしっかりして夏を乗り切りましょうね😌

わたしの今朝のドジな話に、最後までお付き合い頂きありがとうございました☺️🎵

THANKYOU for comming

a lot of LOVE💝ザッキーでした😆⭐︎

JavaScript【②window.alert()/ダイヤログボックスを表示する】

こんばんは🎵ザッキーです😌🌟

今夜も、トリートメントを流すのを忘れていました。髪を乾かそうとしたときにベタっとしてびっくりします😂

明日も思いがけず髪はサラサラでしょう。(嬉)

今夜はJavaScriptの記事第二弾です(*´ω｀*)

アラートダイヤログボックスを表示する

記述方法

consoleに続いて考えていくのはダイヤログボックスへのアウトプットです。使い方はconsoleとほとんど変わりません(^^)/

<script>

'use strict';

window.alert('アプリ連携が完了しました。');

</script>

consoleと同じく<script></script>の中にプログラムを記述します。

するとユーザーにお知らせしたい項目をダイヤログボックスとして表示することができます。

アラートダイヤログボックス

consoleに文字列などをアウトプットするには、consoleオブジェクトのlogメソッドを使いました。

いっぽう、アラートダイヤログボックスを表示し、そこに（）内の文字列を出力するには、windowオブジェクトのalertメソッドを使います。

※ここで注意点

✖window.log('アプリ連携が完了しました');

✖console.alert('おうむ返し');

上記のようなプロブラムはエラーになります

window.prompt('');

alertと同じくダイヤログボックスが出てきますが、ユーザーによる入力が可能になるメソッドです。

<script>

'use strict';

window.prompt('◎か✖を入力してください');

</script>

このように文字列をダイヤログボックスに表示し、ユーザーによる入力が可能になります。

数式計算も可能

パラメータが数式の場合はwindow.alert（10+10）;とすれば、ダイヤログボックスに２０と表示することが可能になります。

数式の場合、シングルコーテーションは入力しないものとします。入力してしまうと

１０＋１０は文字列として認識してしまいダイヤログボックスには１０＋１０という表示が出てきます。

次号ではHTMLの書き換えの方法を少しづつ記述していこうと思います(*´ω｀*)

毎日更新の難しさ

今夜もあとちょっとというところで８/２内に更新ができませんでした💦

本当に、毎日膨大な量のブログを更新されている方には尊敬でいっぱいです(*^_^*)

私もまた気持ちを引き締めてブログ執筆にいそしみたいと思います✏🌟

今夜も最後までお付き合いいただきありがとうございました(*´▽｀*)

半沢直樹見て寝ます😂

THANKYOU　for  comming

a  lot  of  LOVE💕ザッキーでした(*^▽^*)

幸せになる勇気【アドラー心理学】

こんばんは！ザッキーです🎵

梅雨明け大夫の梅雨明けと共に今日はとーーーってもピーカンのいいお天気😊❣️

梅雨明け大夫ってなんだろ～？って思った方は前記事をどうぞ(^^)/

hiroxjun.hatenablog.com

いま、購入してはまって読んでいる本があります。

【幸せになる勇気】です！アドラー心理学のもとに、哲人と青年が交わす白熱した議論・・・面白すぎる！声に出して笑っちゃう(^^♪

子育て世代に読んでほしい！

私が【幸せになる勇気】を読みながら思うことなんですが、子育て中の方に是非読んでほしい！ということです。

子育てをしながら知っておきたい思想が、いっぱい詰まっています。

結果から申しますと「子供を尊敬し、ほめることも叱ることもせず、子供の自立を促す」ことがどれほど素晴らしいかを、この本を読んだら知ることができます。😌

アドラーに失望した青年

著書は前作の【嫌われる勇気】でアドラーに感化されたはずの青年が、教育現場で実際にアドラーの教えを頑なに守り【結果が伴わなかった】というクレームをひっさげ「アドラーを打ち捨てる覚悟をして」哲人のところを訪問するところから始まります。

青年は、「アドラーの思想は現実社会では何の役にも立たない机上の空論だ」と、哲人に言うのです。アドラーの思想を守り「褒めることも叱ることもしない」を律儀に守った末・・・教室が荒れてしまったと。

もうすでに穏やかではないですよね。

この時点で私はもうワクワクが止まりませんでした。ｗ

青年の捨て台詞

著書を読みながら楽しんでほしいのが、青年が真剣になるあまり哲人に対して様々な失言を言っちゃいますｗ

• 「ペッ！」と唾を吐いてみたり
• 「いいでしょう、その竿から揺さぶり落してさしあげますよ！」という挑発
• 「望むところだ、穴という穴を、ほじくり返してやる！」

などなど様々な罵倒が繰り広げられます。

ですが、この青年本当にアドラーのことをよく学習していて哲人が説明したことをわかりやすくまた要約して説明してくれる憎めない方です😌✨

教育の目標は自立である

この言葉は、ズドーンと胸に突き刺さりましたね。

この章では「課題の分離」というアドラーの思想を説いてくれているのですが、これがものすごく私の心を軽くしてくれました！

ピックアップしてお伝えいたします😌✨

「自分の課題」「他者の課題」

アドラーでは、人生のあらゆる物事について「これは誰の課題なのか？」という観点から「自分の課題」と「他者の課題」の切り分けについて考える。

例えば私が上司に嫌われていたとして当然気持ちよくはありませんよね？

• 何とか好かれよう
• 認めてもらおう

と努力するのが普通です。ですが、私がどれだけ好かれる努力をしても上司は私を嫌ったままかもしれない。

そして、「あなたは他社の期待を満たすために生きているわけではない」そして「他者もまたあなたの期待を満たすために生きているわけではない」というのです。

誰の課題なのかの見分け方

その見分け方は、簡単です。

「その選択によってもたらされる結果を最終的に引き取るのは誰か？」を考えればいいというのです。

 例えば我々大人は子供に「勉強しなさい！」といいます。

でもそれは私たち親の問題ではないのです。だって勉強をせずの困るのはほかならぬ子供本人だからです。

子供が困るから・・・ということで私たちは子供に介入しすぎます。

ですがその行為が子供の自立を妨げ、誰の課題なのかをごちゃまぜにしている状態であるとアドラーは説いています。

じゃあ、教育って？

青年はいいます。

では、学校は子供たちに勉強を押し付け子供の課題に土足で踏み込む不法侵入者の集まりだ！！！と哲人に食って掛かりますｗ

哲人は言います。教育の目標とするところは「自立」だと。

子供たちが社会的に自立するためには、社会性や正義、知識を持たなければならない。

教育とはそれらを知るものが「介入」するのでなく「援助」することだと。

まだまだ二人の討論は続きます

私の今夜のブログでは、上記までしか語りませんが…

教育の現場で教室が荒れてしまい、その原因はアドラーの思想だという青年の思いから始まった二人の討論、議論。

• 人の弱さ
• 人とのかかわり方
• 私たちは今なぜこのような世に生きているのか
• 社会とは何なんか

二人が話をしているスタイルで非常にわかりやすく、楽しく、読みやすく描かれています。

あっちゃんみたいには話せない・・・けどこの本はぜひ読んでほしいおすすめ本です(^^)/

続きが気になる方は書店へゴー🎵✨

楽天市場のURLだけ貼っておきます😊❣️

幸せになる勇気 自己啓発の源流「アドラー」の教え2 [ 岸見一郎 ]

一月一冊本を読みたい。

今月は何の本を買おうかな・・・？

また読んだらおすすめレビュー致しますね😌📚

 最後までお付き合いいただきありがとうございました！

THANKYOU　for  comming

a  lot  of  LOVE💕ザッキーでした(*^▽^*)

梅雨入りぼうや【日記】

おはようございます🌞ザッキーです🎵

セミがすごいないてます。家の横が公園なので凄まじいセミの声で目が覚めます✨夏だなぁ〜と、感じる瞬間ですね🌻✨

今朝の記事はLIFE！人生に捧げるコントというコメディ番組を見たことがある人ならわかる…

この時期になると思い出すんです。

ウッチャン（内村光良）がコントで繰り広げる梅雨入り坊やを。

ウッチャンが梅雨入りを告げる師範？のような存在で、弟子である星野源（息子という設定）に、梅雨入り神楽という由緒正しい舞を継承するために、梅雨入りについて厳しく指導するコントなのです。

ある年、梅雨入りを梅雨入り坊やが告げぬまま11月を迎えてしまいました。

星野源（息子）が

「父上は、梅雨入りの時期を見誤った。もう梅雨は入り、明けたのだ」と指摘するのです。ですが、梅雨入り坊や（ウッチャン）は、

「梅雨入り坊やが入れてない梅雨がなぜ入り、なぜ終わる！！」

と、頑なにもうすでに終わった梅雨を入っていないと主張するんです。

そこで、ややこしいことに梅雨明け大夫という存在（市川猿之助）がやってきて

「梅雨入り坊やが梅雨を告げぬため、梅雨明けもできない」と、文句を言いにくるところから物語は始まります。

LIFE！人生に捧げるコントはキャストもとても豪華です。

内村光良さん

ムロツヨシさん

星野源さん

田中直樹さん（ココリコ）

塚地さん

石橋杏奈さん

臼田あさ美さん

西田尚美さん

様々なコントがありましたが、ハズレが少なく大好きな番組でした😊❤️

たまに再放送もしてたんですが、今はやってないので残念です。

YouTubeに貼ってくださってる方がいるのでそれを見て楽しみたいと思います☺️❣️

https://youtu.be/VkRspzKw_TI

今日も皆さんにとって楽しい学びの一日になりますように✨✨

最後まで読んで頂きありがとうございました😊

THANKYOU for comming

 a  lot  of  LOVE❤️ザッキーでした😊

JavaScript【①console編/デバックってなに？】

先ほどあらかたの家事を済ませほっとひと段落・・・。さ、子供を寝かせる前にドライヤーをしておこう！と思い髪に巻いていたタオルを取り髪を触ると、トリートメントを流さずに２時間ほど放置していたことに気づきました。

思いがけず髪がしっとりつやつやです。😂

こんばんは😌ザッキーです🎵

今夜は、JavaScriptについてお話していきたいと思います(^^)/

私は、ガッチガッチのプログラミング初心者です。良き先生✨良き仲間✨に支えられ、何とか学習をすすめられています😌

その場では何とか理解したつもりでも、時間が経つと頭の中は？はてな？でいっぱい・・・ということで。

今夜のブログはJavaScriptの復習にさせていただこうと思います！この連載記事を読み終わるころには私と同じくちょっとプログラムのことが分かり、その奥深さにはまり、あなたもプログラミングが楽しくなっているかもしれません(^^)/

JavaScriptとは

JavaScriptとは、プログラム言語のひとつです。Javaという言語もありますが、それとは全く別物なので注意が必要です。

プログラムで大切なことは

• 記述法・・・作法やルールのこと
• アルゴリズム・・・組み合わせること(解き方や解法)

になります。

基本は<script></script>の間にJSプログラムを記述していきます。

console

JavaScriptを使用するうえで欠かせないconsoleという存在。

初日はそもそもconsoleが何のために存在しているか謎でしたが、プログラムを書いていくうちに「プログラムの間違いを指摘してくれる便利ツール」ということに気づきました。簡単なスペルミスでも厳しいプログラムさんはびくとも動いてくれません。

そしてプログラムのエラーを発見するために必要な作業のことを専門用語でデバックといいます。

• うまくプログラムが動いてくれない。
• でも、記述はあっているかもしれない！

そんな時はF12開発者ツール内のconsoleの出番です。デバックを見つけましょう。

console log

console.log()とは、consoleに文字を表示させるためのメソッド(方法)です。

<script>

’use strict’;

console.log('コンソールに表示されていますか？’);

</script>

と記述することで、consoleに直接文字を入力することができるようになります。デバックを探す際にとても重宝します(^^)/様々な種類のメソッドがあるようなので、その都度ほしいものを検索をするかJavaScriptの本を一冊買って手元に置いておくのがよさそうだなと思いました。

私が今後JavaScriptを学ぼうと思ったわけ

現在、先生が出した宿題でJavaScriptを使用してもともとCSSで指定してあったフォントサイズをクリックしたタイミングで変化させたり、カラーを変えてみたりする方法を学びました。

それがうまくカチッとはまった時。プログラムが動いたときの喜びがマジで半端ないです。まるで難解なパズルを解いた時の感覚です。

そして、そんなうまくいけば喜びもひとしおのプログラムですが・・・挫折する人も多いというのも事実です。先生曰く、最初に明記した「記述法」と「アルゴリズム」がうまくかみ合わず、挫折・・・(´;ω;｀)という人が多いそうなのです。

私はたまたま職業訓練校で学ぶことができていて、恵まれているなと思いますが・・・今はYouTubeで分かりやすく解説してくれる方もいますし・・・ネットの情報も豊富です。難しいとは思いますが、独学でもプログラミングを学ぶことは決して不可能ではないと思います。

私もド素人ですが、このブログで一つ一つ丁寧に記述していきたいと思っております(^^)/もし、プログラミング初心者の方が私のブログを見てくれていましたらともに頑張っていきましょう！！💕

私も、先生から学んだことを一つ一つ消化して、今後も励んでいこうと思います(^^)/

今夜は以上です。

明日は、変数とconsoleを使ったお話をしようと思います。😌

最後までお付き合いいただきありがとうございました🎵

今後もよろしくお長い致します😌💕

THANKYOU　for  comming

a  lot  of  LOVE💕ザッキーでした(*^▽^*)

アンガーマネジメント【実践してみた】

今晩は😃ザッキーです🎵

本日は【アンガーマネジメント】という思考をシングルマザーで2人のやんちゃな息子（3歳、6歳）を育てる中でどうしてもイライラが募る私が実際に実践してみてどうだったかをお伝えしていこうと思います😊 

結論から言うと【怒りという感情はコントロールできた】ということです。

この記事を見終わる頃には

• イライラすることが多かった
• 怒ってしまうのはどうしようもないことだ
• 怒ることで余計に憂鬱な気分になる

という悩みから解放されます。

もしまさに今日イライラした人は、「今日イライラしたことは、そんなにイライラすることだったのかな？」と振り返ることができます。

そして、そこに気づくことができれば。。。

無駄に怒ることのない穏やかな日常があなたを待っているかと思います( ´∀｀)

感情任せに怒ってしまう

今日は朝から次男を怒ってしまった。

自分で作る！と言ったカルピスを原液の段階でコップごとひっくり返してしまったのです。わたしは彼が挑戦に失敗し落ち込んでいるところに…たたみかけるように。

「カルピスはベタベタになるから困る！汚いでしょ！」という言葉を浴びせてしまいました…。

そういえば、昨日も怒ったな。

あ、一昨日も怒った気がする。あれ？でも怒った事は覚えているけどなんで怒ったんだったっけ？私が子供たちに大きな声で怒っているその大半は内容も思い出せないほど些細なことなのです。

本当は怒りたくなんかない

怒るのって、嫌ですよね？自分も相手も嫌な気分になるし、決して後味のよいものではありません。怒らなくてもいいならば、怒りたくなんかない。

ですが

• 自分の心や時間に余裕がない時イライラ
• とっさにカチンと来てしまい我慢ができなかった

そんな経験はありませんか？私はお恥ずかしいことに、頻繁にあります。毎日イライラして子供たちを怒っては自己嫌悪の繰り返し。。。怒ったことを思い出せないということは、きっと今日もしょうもないことで怒ってしまったんだなぁ。と、毎晩一人反省会を繰り広げていました。

怒りはコントロールできるんです

先ほど、怒りたくないのに怒ってしまうというお話をしましたが、アンガーマネジメントでは怒るということは自分で決めていることだと謳っているのです。

私たちは、相手や場所などをちゃんと把握して、怒っていいと思ったときにだけ怒っているというのだから驚きです。確かに。。。私は比較的外に出ると怒るという感情からは遠い性格のような気がします。

友人からも

• ザッキーって怒ったりする～？
• 子供にも優しそう
• 怒るところが想像できない

なんて言われたこともあります。(苦笑)　めっちゃ怒ります～。でも、ここで私の怒りの矛先は子供たちにだけ限定の怒りだったということに気が付きました。

この世で一番大切で、可愛いはずのわが子を怒ってばかりいる。本当につらくて嫌でした。

 怒らなくてよくなるならそうなりたい。まさに私が怒りという感情に振り回されていた一人だったのです。

突発的な怒りの解消法

• 突発的にイライラしてしまった時は、心の中で6秒数える
• 大丈夫！と心で唱える

まず、怒りの感情というのは、とっても速いスピードで私たちの心にやってくる感情だそうです。それと引き換え、大切な理性という感情は怒りの後にゆったりゆったりやってくるというのだから驚きです💦

だから、怒りに支配されている感情を6秒待つことで理性が来たところで落ち着くことができるらしいのです。

これがもうわたしには抜群に効果覿面でした！

そして、怒りに支配されているときというのは頭で考えることができる言葉が極端に少なくなってしまうという状態が起こるそうなのです。

確かに感情的に怒っている人って「ばかやろう！」とか、「ふざけんな！」とかワンパターンな言葉を話すイメージがありませんか？

なので、その少なくなった言葉のボキャブラリーの中に大丈夫！という言葉を入れ込む習慣をつけるというのです。

これも、わたしには抜群に効果覿面でした！(単細胞です。)

 長期的に怒りの解消法

これは、私も実践したんですが面白かったのでおすすめです( ´艸｀)

自分の怒りを１０段階で採点するという方法なのですが、1は穏やかでストレスなんて何もないコーヒーをカフェで飲んでくつろいでるような空気感と思ってください。

１０は、「親の仇ーーーーーーーー！仇討ちじゃーーーーーーーー！」の状態と思ってください。

今日、自宅に帰宅しバタバタと荷物などをさばいているところに、長男が「脱ぎたてホカホカの靴下だよ～💕」と言ってきっちゃない靴下を私の顔にくっつけてきたのです。

イライラゲージが溜まっていく。軽く彼をにらむ。くさい。

私はハッと我に返りました。

（この怒りはいったい何点なんだ？？誰も死んでないし、けがをしたわけでもない。かたき討ちにもなりそうもないこの出来事。ん～でも、いやっちゃ嫌だったな・・・う～ん。3点！！）

なーんて考えている間に怒りの感情はどこかへ行っていました(*^_^*)

アンガーマネジメントは簡単です

ただ6秒待つだけ！大丈夫と唱えてみる！など、アンガーマネジメントは実践してみるのも簡単です。

このように、怒らないことを意識してみると自分がいかに日頃から些細なことにイライラしていて、それを自分の中で消化できるのかわかることができました(^^)/

そして、実際に自分が小さなことを「怒らない」を経験することが、とても自分に自信をつけてくれました。

おまけに、私が無駄に怒らないと子供たちもうれしいのか家の中の空気も心なしか軽く感じるような気がしています😌 いいことづくめです。

そして。。。実はこのアンガーマネジメント。。。中田敦彦さん、もといあっちゃんの受け売りです(^^)/

【アンガーマネジメント①】怒りで失敗しないために今最も必要なスキル

【アンガーマネジメント②】怒りそうになった時の対処法と長期改善策

あっちゃんの話は本当に面白いので、私の書いた内容も踏まえ是非YouTubeの方も見てみてください！「クリリンのことかー！！！！」の所が大好きですｗ

いかがでしたでしょうか😌✨

人生をよりよく生きていくために、怒りの感情とも上手に付き合っていきたいですね(^^)/

本日も、最後までお付き合いいただきありがとうございました🎵

THANKYOU　for comming

a lot of LOVE💕ザッキーでした(*^▽^*)