currentTargetプロパティとtargetプロパティの違い
currentTargetプロパティとtargetプロパティの違い【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Event.currentTargetプロパティとEvent.targetプロパティの違い】Event.currentTargetプロパティ→現在イベントリスナーが実行されている要素を指します。イベントが伝播している際に、イベントリスナーを設定した要素を指します。イベントハンドラの場合は＜inputtype="button"value="button"id="xxx"＞＜script＞functionbutotnClick(event){console.log('Hello');}letbutton=document.getElementById('xxx');//...currentTargetプロパティとtargetプロパティの違い
発生したイベント情報の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【Eventオブジェクトを受け取る】ターゲットとなる要素（＜input＞など）のプロパティに対してイベントハンドラを登録する場合と、addEventListenerメソッドを使ってイベントリスナーを登録した場合、イベントが発生すると登録したコールバック関数が呼び出されます。この時、一番目の引数に発生したイベントの情報が格納されたEventオブジェクトが渡されてきます。例文＜inputtype="button"value="button"id="xxx"＞＜script＞//コールバック関数functionbutotnClick(event){console.log('Hello');}letbutton=d...JS--発生したイベント情報の取得
イベントハンドラを登録するコードの記述位置に関する注意と対処方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コード順序に依るエラー】例文＜script＞要素と＜input＞要素の順序を逆さにすると、エラー>>TypeError:Cannotreadproperty'addEventListener'ofnull理由は、HTMLページはファイルのダウンロードが終わったあと、HTMLページに記述されている内容をページの先頭から順にパース(解析)してDOMツリーを構築し始め、＜script＞タグを見つける度、パースを中断してjavascriptのコードを実行し始める。最初にgetElementByIdメソッドを使ってid属性が'xxx'の要素ノードを取得しようとしますが、この要素...イベントハンドラの記述位置
イベントリスナーの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【イベントリスナー】イベントリスナー（EventListener）は、プログラミングにおいて特定のイベントが発生したときに、そのイベントに応じて何らかの処理を行うための仕組みです。簡単に言えば、イベントリスナーは「何かが起きたら教えてね」というプログラムの部品です。【イベントハンドラと、イベントリスナーの関係】イベントリスナー:「ボタンがクリックされたら何かをする」と設定しておく。target.addEventListener(type（イベントの種類）,callback（イベントハンドラにコールバックを選択）[])イベントハンドラ:ボタンがクリックされたときに、実際に「何かをする」ためのコード。＜inputt...JS--イベントリスナーの登録
要素のプロパティにイベントハンドラを登録する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム■DOMを使って取得した要素のプロパティに対してイベントハンドラを登録する方法について解説する。基本的な使い方はHTML要素の属性に対していイベントハンドラを登録する方法と似ていますが、JavaScriptのコードのみで実現することが出来る。【要素オブジェクトのプロパティにイベントハンドラを登録す】HTML要素の属性としてイベントハンドラを設定する場合には、要素の属性値に直接イベントハンドラを記述していました。＜inputtype="button"value="button"onclick="イベントハンドラ"＞DOMを使用するとHTMLページの中の任意の要素を要素オブジェクトとして取得で...JS--要素のプロパティにイベントハンドラを登録する
イベントハンドラの登録【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【HTML要素の属性としてイベントハンドラを登録する】HTML要素の属性を使ってイベントハンドラを登録する方法です。例えばinput要素でマウスでクリックしたときに実行するイベントハンドラを登録するには次のように記述します。・方法＜nputtype="button"value="button"onclick="イベントハンドラ"＞onclick属性に対する値としてイベントハンドラを記述します。イベントハンドラの個所には実行するJavaScriptのコードや関数を記述します。イベントハンドラとしてJavaScriptのコードを直接記述するには次のように記述します。実行する文が一つの場合は末尾のセミコロンは省略でき...JS--イベントハンドラの登録
クラスの継承【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【class構文とは】class構文はコンストラクタやメソッドを簡単に定義できるものです。15年のES2015(ES6)からjavaScriptに導入されるようになった。【class構文の書き方】1.クラス宣言する書式classクラス名{//コンストラクタや、メソッドを定義する}2、class式を用いる方法→class式での特徴としてクラスを再宣言（再定義）することができる。varmyClass=class{//コンストラクタやメソッドを定義する}【コンストラクタを作る】コンストラクタ、つまりクラスの初期化をconstructorメソッドで行うclassUser{//インスタンスのプロパティ設定と初期化construct...JS--クラスの継承
オブジェクト指向のclassを理解する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【classとは】JavaScriptのclassは、オブジェクト指向プログラミング（OOP）の概念を実現するための構文です。クラスは、同じプロパティやメソッドを持つオブジェクトの設計図となるものです。classキーワードを使用してクラスを宣言し、そのクラス内でプロパティやメソッドを定義します。クラス内で定義されたメソッドは、そのクラスから作成されたオブジェクト（インスタンス）で使用することができます。基本構造classMyClass{constructor(){//コンストラクタ:インスタンスを作成する際に実行されるメソッド//インスタンス固有の初期化処理を行う}method1(){//メソッ...JS--オブジェクト指向のclassを理解する
ドキュメントに文字を書く【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ドキュメントに文字列を書き込む】Documentオブジェクトのwriteメソッドは、ドキュメントに対して文字列を書き込みます。書式：document.write(string)引数に指定した文字列をドキュメントに対して書き込みます。書き込まれた文字列はHTMLコードとして扱われます。サンプルブラウザを立ち上げる<script>要素の下にHelloが書き込まれていることが確認できます。このように簡単にドキュメントに対して文字列の形式でHTMLコードを書き込むことができますが、現在HTMLに関する仕様を定めているHTMLLivingstandardではこのメソッドの使用について推奨はしていません。Documen...JS--ドキュメントに文字を書く
複数のノードをまとめて追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【DocumentFragmentオブジェクトとは】DocumentFragmentオブジェクトは、JavaScriptで使われる特別なオブジェクトで、親ノードを持たない軽量なドキュメントの一部を表します。これを使うと、複数のノードを一時的にまとめて操作し、最終的に一度にDOMツリーに追加することができます。【DocumentFragmentオブジェクトを作成する】最初に空のDocumentFragmentオブジェクトを作成します。DocumentオブジェクトのcreateDocumentFragmentメソッドを使います。書式:document.createDocumentFragment()実際に作成す...JS--複数のノードをまとめて追加
現在処理を実行しているscript要素を取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【currentScriptプロパティの使い方】DocumentオブジェクトのcurrentScriptプロパティを参照すると現在実行している<script>要素を取得します。書式；document.currentScriptサンプルこのHTMLページをブラウザで表示するとコンソールには次のように出力されます＜script＞letelement=document.currentScript;console.log(element);＜/script＞ブラウザを立ち上げるJS--現在処理を実行しているscript要素を取得
HTMLを表す文字列からノードを作成し指定の位置に追加【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを指定の位置に追加する】ElementオブジェクトのinsertAdjacentHTMLメソッドを使うと指定した文字列からノードを作成し追加することができます。書式：element.insertAdjacentHTML(position,text)2番目の引数に指定した文字列をHTML文として解析し、HTML文からノードを作成します。作成したノードを1番目の引数で指定した位置に追加します。1番目の引数で指定する位置2番目の引数にはHTMLとして解析可能な文字列を指定例文：'＜pclass="msg"＞Hello＜/p＞'サンプル・ブラウザを立ち上げる「前のノードを追加」ボ...HTMLを表す文字列からノードを作成し指定の位置に追加
ノードの削除【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノード削除方法】削除方法には、ChildNodeオブジェクトのremoveメソッドを使うか、NodeオブジェクトのremoveChildメソッドを使うかです。【removeメソッド】removeメソッドは指定のノードを削除します。書式：childnode.remove()例文id属性がxxxのノードを削除する場合letchildnode=document.getElementById('xxx');childnode.remove();【removeChildメソッド】NodeオブジェクトのremoveChildメソッドはノードを削除します。書式：parentnode.removeChild(childnode)1番目...JS--ノードの削除
ノードの置換【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ノードを別のノードに置き換える方法】1.ChildNodeオブジェクトのreplaceWithメソッドを使ってノードを別のノードに置き換える方法書式；childnode.replaceWith(node[,node,...])引数には置き換えるNodeオブジェクトまたはDOMStringオブジェクトを指定します。DOMStringオブジェクトを指定した場合はテキストノードに自動的に変換されて追加されます。複数のノードを指定した場合は、対象のノードを複数のノードと置き換えます。2.NodeオブジェクトのreplaceChildメソッドを使ってノードを別のノードに置き換える方法書式：parentnode.replaceCh...JS--ノードの置換
「ブログリーダー」を活用して、職案人さんをフォローしませんか？
ギャラリーページの作成【開発環境】OS：Win11（64ビット）VSCode1.72.2、VSCodeの拡張機能から「LiveServer」をインストールしているものとする。jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【Javascriptライブラリ】・Masonry→レスポンシブ対応のグリッドレイアウトが出来る・imagesLoaded→すべての画像の読み込みが終わった後に処理を実行できるため、Masonryのレイアウト崩れを防げます。【Webデザイン】サムネイルをクリックすると、大きなぁ画面になる■ギャラリーパージの主な機能今回は「フォットグラファーが自分の作品を紹介するポートフォリオサイト」を想定して、最終的には以下の要件を満たす機能を実装してい...jQuery----ギャラリーページの作成
スムーズスクロール拡張編【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【SmoothieScroll】前回のBasic版では、「scrollTop」プロパティを利用出来る要素を検出する関係を紹介した。今回は、「SmoothScroll」プラグインを使って,スムーズスクロールを作ってみる。まず、「SmoothieScroll」プラグインのダウンロードするか、smooth-scrollCDNをリンクするか＜scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.3/smooth-scroll.min.js"＞＜...jQuery-スムーススクロール拡張編
スムーズスクロール【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【スムーズスクロール】スムーススクロールは下図の上向きの↑をクリックすると、上部に戻る。【Webデザイン】プログラマ編【html】続1【imgフォルダー】【CSSフォルダー】main.cssファイルを書く@charset"UTF-8";/*Base*/html{/*扱えるフォント*/"RopaSans",sans-serif;font-size:16px;line-height:1.5;}body{background-color:rgb(255,255,255);color:rgb(0,0,0);min-width:960...jQuery入門--スムーズスクロール
高機能で拡張しやすいタブ【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js・jqueryのUIとはユーザーインターフェイスの事で、今回は「Tabs」というウインクジェットを利用するため、jQueryUIのCDNをコピーすれば良い【Webデザイン】前回のタブに機能を追加したもの【仕様】・キーボードによる操作を可能にする・新しいタブが選択された際にアニメーション効果を追加する【フォルダー】フォルダーの構成は下図の通り【HTML】ヘッド部に・Googleフォント、jquery及びUI、normalize.css、main.js,main.cssなどを設定する。body部section要素内、hea...jQuery入門--高機能で拡張しやすいタブ
画面領域を有効活用できるタブ【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNはjquery-3.7.1.min.js及び、modernizr.min.js【Webデザイン】複数のコンテンツ（内容）を「パネル」として、1つのエリアに重ねて配置し、上部の「タブ」によって表示するコンテンツを切り替られるUI（ユーザーインターフェース）で、よく用いられる。【仕様】・タブで画面を切り替える【フォルダー】【imgフォルダー】【index.html】ヘッダーで、様々なプラグインや、外部ファイルを読み込んでいる。body要素をsection要素で、一つのまとまりを作り、更に入れ子としてsection要素を作る。大まかには、下記のように成る＜section＞＜header＞＜ul＞＜...jQuery入門--画面領域を有効活用できるタブ
変化するスティツキーヘッダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.js及び、modernizr.min.js【スティツキーヘッダーの概要】・デザインスティツキーヘッダーは上部に達すると【仕組み】今回は、スティツキーヘッダーが上部に達すると、初期状態のヘッダーの内容をコピーして、スティツキーヘッダーを新たに作る。1.初期状態のヘッダーは動かさず、常に元の位置に配置する2.ヘッダーのクローンを作成し、初期状態では画面上部の外側に配置しておく3.ウインドウのスクロールによって初期状態のヘッダーが非表示になった時点で、クローンを見える位置に移動する【フォルダーの構成】imgフォルダー【HTMLコード】【head部】1.Google...jQuery入門--変化するスティツキーヘッダー
スティッキーヘッドヘッダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.js及び、modernizr.min.js【head部】での注意・GoogleFontsの「RopaSans」フォントを取得している。＜linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Ropa+Sans"＞【スティッキーヘッドのデザイン】スクロールする。ヘッドが固定される【概要】スティッキーヘッドはスクロールに合わせて移動するヘッダーですが、画面上部に来ると、ヘッダーだけが固定し、本体はスクロールに合わせて移動する。【処理の流れ】スティッキーヘッドを実装するには、ウインドウのス...jQuery入門--スティツキーヘッダー
多機能なスライドショー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【Modernizr2.8.3のCDN】＜scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"＞＜/script＞modernizr.jsとは、JavaScriptやCSSを書いていると「新しい機能が使えるブラウザではそれを使い、そうでない場合は別の手段で代替する」というように、処理を分岐させたい場合がある。Modernizr（モダナイザー）とは、そういった「機能検出」のためのJavaScri...jQuery入門--多機能なスライドショー
滑らかな動きをするスライドショー【開発環境】OS：Win11（64ビット）VSCode1.72.2、jqueryのCDNjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【normalize.cssとは】どのブラウザーでアクセスしても、表示が変わってしまわないように、各々のブラウザーに適用されているデフォルトのスタイルを平均化するために読み込ませるCSSです。◆normalize.cssの使い方まずは、Normalize.cssのページから、ダウンロードし、head内にlinkでnormalize.cssへのファイルパスrelで記載すれば完了。【Modernizrとは】Modernizr（モダナイザ）は、Web開発においてHTML5やCSS3の機能がブラウザでサ...jQuery入門--滑らかな動きをするスライドショー
jQueryプラグインでスライドを作る【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js参照サイト：slickでスライダー実装【スライダーのデザイン】jQueryプラグイン「slick」を使ってスライダーを作ってみる・スライダーは3枚の写真を自動でスクロールする事【slickを選ぶ】https://kenwheeler.github.io/slick/のHPを開くこれをスクロールして、自分の作りたいタイプのものを選ぶ。また、詳細を知りたい場合は「usage」をクリックすると、ジャンプ出来る。手順1HTMLのマークアップ（構造）を確認するhead部へ、2つのcssを読み込むbody部へ、sl...jQuery入門--スライドショー
マスクプラグイン【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN【動画】【jQueryプラグイン】https://releases.jquery.com/にアクセスするプラグインをクリックnpmをクリックこの中から、下図のところをクリックHPに飛ぶ【インストール】VScoodを立ち上げPSC:\Users\Owner>npm-v10.8.2PSC:\Users\Owner>バージョンを確認する。インストールするフォルダ「プラグイン」を作り、インストを開始する・コマンドPSD:\jQuery\プラグイン>npmijquery-mask-plugin【インストールされたフォルダ】以上のようになる。【マスク・プラグインを使ったWebを作る】定...jQuery入門--マスク・プラグイン
タイポグラフィの表現【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【Webデザイン】下図のように、文字を浮かせる。また、マウスを動かすと、影も動く様ににする【フォルダ作成】【コード書く】1.index.html続1・CSS/main.css/**Base*/html{"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",sans-serif;font-size:16px;line-height:1.5;}body{background-color:#656565;}img{vertical-align:middle;}but...jQuery入門--タイポグラフィの表現
見え隠れするサイドバー【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【デザインと動作】下図のようなデザイン「OPEN」を押すと、サイドバーが表示され、「CLOSE」を押すと、閉じる【フォルダー構成】imgフォルダ・index.htmlファイルここでは、外部入力ファイルの設定続・「CSS/main.css」ファイルにコードを書く/**Base*/html{"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",sans-serif;font-size:16px;line-height:1.5;}body{background-c...jQuery教科書--見え隠れするサイドバー
レイアウト術【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsCDN及び1.13.3/jquery-ui.min.js【丸ボタンのレイアウトHP】HP画面は下図のようになり、動作は、ボタンの上にマウスを乘せると、徐々に黄色に変わる。以上1.フォルダとファイルを用意する2.img3.3フォルダに「index.html」ファイルを作るこの部分で、CSS・jQuery・jsなどを読み込んでいるヘッダーの設定本体の設定本体とフッターの設定4.css/main.cssファイルのコードを書く/**Base*/html{font-family:"HelveticaNeue","Arial","HiraginoKakuGothicProN","Meiryo",...jQuery入門--丸ボタンのレイアウト
画像とキャプション【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムJQuryCDNを入れる＜!--jquery--＞リンク先＜scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"＞＜/script＞＜!--jqueryUIは拡張型--＞リンク先＜scriptsrc="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs0...jQuery入門--画像とキャプション
様々なホバーエフェクト【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjquery-3.7.1.min.jsとjquery-ui.min.jsを読み込む＜!--jquery--＞リンク先＜scriptsrc="https://code.jquery.com/jquery-3.7.1.min.js"integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"＞＜/script＞＜!--jqueryUIは拡張型--＞リンク先＜scriptsrc="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"integrity="sh...jQuery入門--様々なホバーエフェクト
jQueryを始めよう（onメソッド）【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery-1.10.2及びjquery-ui-1.10.3がインストール済みか、jQueryCDNドメインにリンク済み注意、index.htmlやmain.cssは変えないものとする【表示タイミングを変えるには】1.ブルーの領域にマウスが乗ったら、色を赤にする2.ブルーの領域外にマウスが来たら、色を戻す⇅「main.js」コードを書き換える。$(function(){$('#typo').on('mouseover',function(){$(this).css({color:'#ff0000'});}).on('mouseout',function(){$(this).css({color...jQuery教科書--入門2
jQueryを始めよう（CSSメソッド）【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery-1.10.2及びjquery-ui-1.10.3がインストール済みか、jQueryCDNドメインにリンク済み【サンプルプログラムを作る】ブラウザを開いて、表示すると、下図に用になる。「index.html」コード・コードから分かるように、外部CSSや外部JSを使うときは、ヘッダに置くのが通例、bodyに置けるが、処理が遅くなるので、推奨されない。bodyから※）target=”_blank”とは、リンク先を別タブで開くよう指定できるHTMLタグの1種◆「main.css」のコード/**Base*/html{"HelveticaNeue","Arial","HiraginoKaku...jQuery教科書--入門1
スライダー【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--2.2.4【slickの導入】slickはjQueryベースの、スライダーを作成するためのプラグインです【slickのダウンロード】【インストール】任意のフォルダ（slick）を選び、slick-1.8.1.zipをクリクすると、インストールされる。【VScodの設定】「fonts」フォルダから「css」フォルダに、2つのファイルを移すslick-theme.cssslick.css「fonts」フォルダから「js」フォルダに,一つのファイルを移すslick.min.js「imde」フォルダには、好きな絵を4枚入れる【スライダーを作ってみる】◆動作1.手動でスクロール出来、尚且つ5秒経つと、自動でスクロール...jQuery入門--スライダー
モーダルウィンドウ【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロムjQuery--2.2.4【モーダルウインドウとは】ユーザーに重要な情報やエラーメッセージを伝えるために表示されるウインドウの事。【主な要素を用意する】ブラウザを立ち上げる。「index.html」「style.css」ファイルにコードを書くbody{margin:0;}.button{width:100px;padding:10px;/*左右の真ん中*/margin:40pxauto0px;/*ボックスの角を丸くする*/border-radius:5px;/*文字に関すること*/color:white;font-weight:bold;text-align:center;/*カーソルの形*/cursor:poin...jQuery入門--モーダルウィンドウ
コンソールへの出力をグループ化【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ログの出力をグループ化する】console.groupメソッドとconsole.groupEndメソッドを使用することでログへの出力をグループ化することができます・書式console.group([ラベル])console.groupEnd()console.groupメソッドが呼び出されてからconsole.groupEndメソッドが呼び出されるまでの間にconsole.logメソッドなどを使って出力されたログがグループ化されます。省略可能な引数のラベルを文字列で指定すると、グループの先頭でラベルを表示することができます。サンプルconsole.log('MyList');console.group...JS--コンソールへの出力をグループ化
Consoleオブジェクト【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【コンソールにログを出力する】Consoleオブジェクトで用意されているコンソールにログとして文字列を出力するメソッドには次の4つがあります。・書式はconsole.log(オブジェクト[,オブジェクト,...])console.info(オブジェクト[,オブジェクト,...])console.warn(オブジェクト[,オブジェクト,...])console.error(オブジェクト[,オブジェクト,...])それぞれのメソッドの引数にはコンソールに出力するオブジェクトを指定してください。オブジェクトの値がコンソールに出力されます。複数のオブジェクトを同時に出力する場合はカンマ(,)で区切り続けて記述します...JS--Consoleオブジェクト
息子介護物語-エピソードの終了のお知らせ【被介護者】母：91才要介護4（4/2より）有効7年3月31日身長/体重；153/38認知度：中位であるが、見当障害の為、被害妄想がひどくなって来た。また、運動不足に依る筋力低下や、食事量（80g）低下が見られる。また、傾眠傾向でもある。特に、子供がいる妄想を起こす。【利用施設】敬愛会のふれ愛の里の特養ホームに入所【かかりつけ医】本町在宅クリニック（久喜市）【介護】全介助【食事】全粥でスプーンを使って自分で食べてる【排泄】おむつ【歩行】車椅子で、立つのがやっとで歩行は出来ない【生活態度】最近は、慣れてきたため、勝手に起き上がり、ベットから落ちるのが、減った。しかし、人が居ないと不安になり、落ち着きがなくなるそうだ。【住所移動】6/11日、特養ホームに入所にあたり、契...息子介護物語-エピソードの終了
息子介護物語-エピソード68（令和6年6月）【被介護者】母：91才要介護4（4/2より）有効7年3月31日身長/体重；153/38認知度：中位であるが、見当障害の為、被害妄想がひどくなって来た。また、運動不足に依る筋力低下や、食事量（80g）低下が見られる。また、傾眠傾向でもある。特に、子供がいる妄想を起こす。【利用施設】1.ショートステイ敬愛会のふれ愛の里：ロングショート（4/11～）※デイケアのサービス目的は、身体機能の回復・意地、日常生活の回復、認知機能の改善で、リハビリなどの医療的ケアに力を入れています【介護関連企業】ケアマネ：すずみな（6/6あたりで終了）【かかりつけ医】・徳洲会古河総合病院（整形外科・泌尿器）・加須東病院（内科・整形外科）から、本町在宅クリニックに移行【病歴】平成29年以前；大...息子介護物語-エピソード68（令和6年6月）
三角関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【三角関数の種類と使い方】Mathオブジェクトでは三角関数に関係するメソッドとして次の13種類が用意されています。Math.sin(x)xのサインを返すMath.cos(x)xのコサインを返すMath.tan(x)xのタンジェントを返すMath.asin(x)xのアークサインを返すMath.acos(x)xのアークコサインを返すMath.atan(x)xのアークタンジェントを返すMath.sinh(x)xのハイパーボリックサインを返すMath.cosh(x)xのハイパーボリックコサインを返すMath.tanh(x)xのハイパーボリックタンジェントを返すMath.asinh(x)xのハイパーボリックアークサインを返すMath....JS--三角関数
対数関数【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【対数関数の種類と使い方】Mathオブジェクトでは対数に関係するメソッドとして次の4つが用意されています。Math.log(x)xの自然対数を返すMath.log1p(x)xの1+xの自然対数を返すMath.log10(x)xの10を底とした対数を返すMath.log2(x)xの2を底とした対数を返す対数に関する詳しい説明はここでは省略しますが、簡単に書くとx=apが成り立つ時、pをxのaを底とする対数と呼びます。pはaを何乗したらxになるのかを表す数値です。・ネイピア数のeはMathオブジェクトの静的プロパティ（値）も用意されている。Math.E自然対数の底//=>2.718281828459045Math.LN22の自然...JS--対数関数
正か負か数値の符号の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【数値の符号を取得する(sign)】MathオブジェクトのMath.signメソッドは対象の数値の符号を取得します。・書式はMath.sign(数値)引数に指定した数値の符号を取得します。正の値だった場合は1、負の値だった場合は-1、ゼロだった場合は0または-0を取得します。引数が数値ではなかった場合は数値に変換してから符号を取得します。・サンプルMath.sign(4.72);>>1Math.sign(-71);>>-1Math.sign(0);>>0Math.sign(-0);>>-0引数に指定した数値の符号を調べ、1、-1、0、-0のいずれかの値を返します。引数に数値ではない値を指定した場合は、数値に変...JS--正か負か数値の符号の取得
累乗【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【累乗を計算する(pow)】MathオブジェクトのMath.powメソッドは底と指数を指定して累乗を計算します。書式はMath.pow(底,指数)引数に指定した底と指数から累乗を計算し結果を返します。引数が数値ではなかった場合は数値に変換してから平方根を計算しますサンプルMath.pow(2,3);>8Math.pow(3,2);>2Math.pow(-4,3);>-64指数が負の値の場合Math.pow(2,-1);//2-1=1/2=0.5>>0.5Math.pow(2,-2);//1/22=1/4=0.25>>0.25Math.pow(2,-3);//1/23=1/8=0.125>>0.125指数が0の場合Math.pow...js-累乗
平方根/立方根【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【平方根(sqrt)】MathオブジェクトのMath.sqrtメソッドは指定した値の平方根を計算する。・書式はMath.sqrt(数値)引数に指定した数値の平方根を計算し結果を返します。引数が数値ではなかった場合は数値に変換してから平方根を計算します。対象の数値が負の値の場合はNaNを返します。サンプルMath.sqrt(9);>>3Math.sqrt(4);>>2Math.sqrt(2);>>1.4142135623730951対象の値が数値でない場合Math.sqrt('25');>5Math.sqrt(-16);>NaNMath.sqrt(NaN);>NaNMath.sqrt(undefined);>NaN【立方...JS--平方根/立方根を計算する
乱数を取得す方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【乱数を生成する(random)】Math.randomメソッドは乱数を生成して返します。・書式はMath.random()0以上1未満のランダムな浮動小数点数を作成して返します。乱数におけるシード(乱数を生成する設定値のようなものでう)を指定することはできません。・サンプルコードfor(leti=0;i<5;i++){console.log(Math.random());}<spanclass="bold">>>0.46734844249381324>>0.8023117892739917>>0.33077513353347476>>0.6943056771845824>>0.097841380222198020以...JS--乱数
息子介護物語-エピソード67（令和6年5月）【被介護者】母：91才要介護4（4/2より）有効7年3月31日身長/体重；153/38認知度：中位であるが、見当障害の為、被害妄想がひどくなって来た。また、運動不足に依る筋力低下や、食事量（80g）低下が見られる。また、傾眠傾向でもある。特に、子供がいる妄想を起こす。【利用施設】1.ショートステイ敬愛会のふれ愛の里：ロングショート（4/11～）※デイケアのサービス目的は、身体機能の回復・意地、日常生活の回復、認知機能の改善で、リハビリなどの医療的ケアに力を入れています【介護関連企業】ケアマネ：すずみな【かかりつけ医】加須東病院（内科・整形外科）・徳洲会古河総合病院（整形外科・泌尿器）【病歴】平成29年以前；大久保病院で内科（胃腸）・整形外科（腰痛）に通院している...息子介護物語-エピソード67（令和6年5月）
複数の値の中から最大/最小を取得す方法【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【最大の値を取得する(max)】Math.maxメソッドは引数に指定した複数の値の中から最大の値を返す・書式Math.max([数値1[,数値2[,...]]])引数に指定した複数の値の中から最大の値を1つ戻り値として返します。引数が数値ではなかった場合は数値に変換してから比較を行います。引数が一つも指定されなかった場合は-Infinity、引数の中でNaNとなる値が一つでもあった場合はNaNが返されます。サンプルMath.max(4,10.2,16,-2);>16Math.max(7);>7Math.max();>-Infinity引数の中に数値ではないMath.max(7,'8.4',[3]...JS--複数の値の中から最大/最小を取得す方法
小数点以下を削除し整数を取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【小数点以下を削除する(trunc)】Math.truncメソッドは対象の値の小数点以下を削除し、整数部分を取得します。・書式Math.trunc(数値)引数に指定した数値の小数点以下を削除し、整数の部分だけを返します。引数が数値ではなかった場合は数値に変換してから小数点以下を削除した値を取得します。・サンプルMath.trunc(4.72);>4Math.trunc(-152.4435);>-152Math.trunc(0.66);>0引数に数値ではない値を指定した場合Math.trunc('32.14');>32Math.trunc([-4.75]);>-4Math.trunc(undefined...JS--小数点以下を削除し整数を取得する
四捨五入/切り上げ/切り下げ【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【小数点以下を四捨五入する】MathオブジェクトのMath.roundメソッドは対象の値の小数点以下を四捨五入した値を取得します。・書式Math.round(数値)引数に指定した数値の小数点以下を四捨五入した値を返します。引数が数値ではなかった場合は数値に変換してから小数点以下を四捨五入した値を取得します。・サンプルMath.round(3.4);>>3Math.round(3.5);>>4負の場合Math.round(-3.6);>>-4Math.round(-3.5);>>-3Math.round(-3.4);>>-3数字でない場合Math.round('12.75');>>13Math.round(...JS-四捨五入/切り上げ/切り下げ
絶対値を取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【絶対値の取得(abs)】MathオブジェクトのMath.absメソッドは対象の値の絶対値を取得します。・書式Math.abs(数値)引数に指定した数値の絶対値を返します。引数が数値ではなかった場合は数値に変換してから絶対値を取得します。数値xの絶対値は一般的には x と表します。絶対値の計算は、正の値だった場合はそのまま返し、負の値だった場合は-1を乗算して正と負の符号を反転させたものを返します。・サンプルMath.abs(12);>>12Math.abs(0);>>0Math.abs(-12);>>12引数に数値ではない値を指定した場合は、数値に変換された上で絶対値を取得・サンプルMath.abs('-64');...JS--絶対値を取得する(Math.abs)
Mathオブジェクトの静的プロパティ一覧【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【静的プロパティ】Mathオブジェクトで用意されている静的プロパティには下図の通り詳細は省くJS--静的プロパティ
ローカルとUTCタイムゾーンの差【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【ローカルとUTCのタイムゾーンの差を取得する(getTimezoneOffset)】DateオブジェクトのgetTimezoneOffsetメソッドは、ローカルとタイムゾーンとUTCタイムゾーンの差を返します。・書式Dateオブジェクト.getTimezoneOffset()静的メソッドではないですが、Dateオブジェクトの内容に関わらず現在の環境でのローカルタイムゾーとUTCタイムゾーンとの差を返します。戻り値はローカルからみてUTCのタイムゾーンが何分後かを返します。例えばローカルのタイムゾーンがUTC+0900だった場合は、-9(時間)×60(分)=-540となります。サンプルletd=new...JS--ローカルとUTCタイムゾーンの差
Dateオブジェクトから年、月、分、秒などの値の取得【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【日付と時刻の値を取得するメソッドの一覧】Dateオブジェクトが持つ値から日付と時刻の値をそれぞれ取得するメソッドそれぞれのメソッドはDateクラスのオブジェクトが持つ値から年や分の値を個別に取得します。この時、ローカルの環境で設定されているタイムゾーンが使用されます。Dateオブジェクトが持つ値から日付と時刻の値をそれぞれ取得しますが、UTCタイムゾーンを使用して表された値を取得するメソッドもある。【年、月、日、曜日の取得】1）年の値を取得する(getFullYear)DateオブジェクトのgetFullYearメソッドは、Dateオブジェクトが持つ日付と時刻の値からローカルのタ...JS--Dateオブジェクトから年、月、分、秒などの値の取得
Dateオブジェクトの値から年、月、分、秒などの値を取得する【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【日付と時刻の値を経過ミリの値で設定する（メソッド）】DateオブジェクトのsetTimeメソッドは、Dateオブジェクトの新しい値をとして1970年1月1日00:00:00UTCからの経過ミリ秒で設定します。・書式Dateオブジェクト.setTime(経過ミリ秒)引数に指定した経過ミリ秒をDateオブジェクトの新しい値として設定します。・サンプルletd=newDate();console.log(d.getTime());1716618342311d.setTime(10000);console.log(d.getTime());10000console.log(d.t...JS--値から年、月、分、秒などの値を取得
setTimeメソッド【開発環境】OS：Win11（64ビット）VSCode1.72.2、クロム【日付と時刻の値を経過ミリ秒の値で設定する（setTime）】DateオブジェクトのsetTimeメソッドは、Dateオブジェクトの新しい値をとして1970年1月1日00:00:00UTCからの経過ミリ秒で設定します。・書式Dateオブジェクト.setTime(経過ミリ秒)引数に指定した経過ミリ秒をDateオブジェクトの新しい値として設定する。・サンプルletd=newDate();console.log(d.getTime());>>1602918864282d.setTime(10000);console.log(d.getTime());>>10000console.log(d.toUTCString()...JS--DateオブジェクトのsetTimeメソッド
